Update app.py

app.py

@@ -7,7 +7,6 @@ os.environ["GRADIO_LANGUAGE"] = "en"
 
 RESULT_DIR = os.environ.get("MOECAP_RESULT_DIR")
 if not RESULT_DIR:
-    # For testing purposes, you can uncomment the line below to set a dummy dir or keep the raise
     # RESULT_DIR = "generic_result_dir" 
     raise RuntimeError(
         "MOECAP_RESULT_DIR is not set. Please set MOECAP_RESULT_DIR (HF Repo ID) before running app.py"
@@ -33,13 +32,6 @@ def normalize(val, vmin, vmax, baseline=20):
     return baseline + (val - vmin) / (vmax - vmin) * (100 - baseline)
 
 
-def normalize_reversed(val, vmin, vmax, baseline=20):
-    """Normalize value (reversed - lower is better) to baseline-100 range."""
-    if vmax == vmin:
-        return baseline + 40
-    return baseline + (vmax - val) / (vmax - vmin) * (100 - baseline)
-
-
 def normalize_cost(val, max_tick, baseline=20):
     """Normalize cost (lower is better)."""
     if max_tick == 0:
@@ -118,7 +110,6 @@ def generate_radar_plot(selected_rows_data: List[dict]) -> go.Figure:
     # Extract metrics from selected rows
     data = {}
     for row in selected_rows_data:
-        # Extract model name from HTML or use as-is
         model_name = row.get('Model', 'Unknown')
         if isinstance(model_name, str) and 'href' in model_name:
             try:
@@ -126,23 +117,19 @@ def generate_radar_plot(selected_rows_data: List[dict]) -> go.Figure:
             except:
                 pass
         
-        # Format legend name: extract name after "/" and add method
         method = row.get('Method', '')
         if isinstance(model_name, str) and '/' in model_name:
-            legend_name = model_name.split('/')[-1]  # Get part after last /
+            legend_name = model_name.split('/')[-1]
         else:
             legend_name = str(model_name)
         
-        # Add method suffix
         if method and method not in ['Unknown', '-', '']:
             legend_name = f"{legend_name}-{method}"
         
-        # Get metrics
         acc = row.get('Accuracy(%)', 0)
         cost = row.get('Cost($)', 0)
         throughput = row.get('Decoding T/s', 0)
         
-        # Convert to float if needed
         try:
             acc = float(acc) if acc not in [None, '-', ''] else 0
             cost = float(cost) if cost not in [None, '-', ''] else 0
@@ -151,12 +138,12 @@ def generate_radar_plot(selected_rows_data: List[dict]) -> go.Figure:
             acc, cost, throughput = 0, 0, 0
         
         data[legend_name] = {
-            'accuracy': acc / 100.0 if acc > 1 else acc,  # Normalize to 0-1
+            'accuracy': acc / 100.0 if acc > 1 else acc,
             'cost': cost,
             'throughput': throughput
         }
     
-    # Get min/max for normalization
+    # Get min/max
     throughputs = [v['throughput'] for v in data.values()]
     costs = [v['cost'] for v in data.values()]
     accs = [v['accuracy'] for v in data.values()]
@@ -177,7 +164,7 @@ def generate_radar_plot(selected_rows_data: List[dict]) -> go.Figure:
             normalize_cost(values['cost'], cost_max, baseline),
             normalize(values['accuracy'], acc_min, acc_max, baseline)
         ]
-        norm_vals += [norm_vals[0]]  # Close the loop
+        norm_vals += [norm_vals[0]]
         
         hovertext = [
             f"Throughput: {raw_vals[0]:.2f} T/s",
@@ -211,7 +198,7 @@ def generate_radar_plot(selected_rows_data: List[dict]) -> go.Figure:
             ),
             angularaxis=dict(
                 tickfont=dict(size=14),
-                rotation=90, # Rotate so top is 12 o'clock
+                rotation=90,
                 direction='clockwise'
             ),
         ),
@@ -235,7 +222,6 @@ def json_to_row(path: str, metrics: dict) -> dict:
         model_name = "unknown-model"
 
     dataset = metrics.get("dataset", "Unknown")
-
     method = metrics.get("method", "Unknown")
     precision = metrics.get("precision", "Unknown")
     model_type = metrics.get("model_type", "Unknown")
@@ -297,113 +283,89 @@ def load_from_dir(
     try:
         pattern = f"hf://datasets/{dir_path}/**/*.json"
         dl_mode = "force_redownload" if force_refresh else None
-
-        print(f"Fetching from {pattern} (mode={dl_mode})...")
-        ds = load_dataset(
-            "json",
-            data_files={"train": pattern},
-            split="train",
-            download_mode=dl_mode,
-        )
-    except Exception as e:
-        empty_html = "<p>No files loaded or Dataset not found.</p>"
-        return empty_html, []
+        ds = load_dataset("json", data_files={"train": pattern}, split="train", download_mode=dl_mode)
+    except Exception:
+        return "<p>No files loaded or Dataset not found.</p>", []
 
     rows = []
     for i, example in enumerate(ds):
-        if isinstance(example, dict):
-            metrics = example.get("metrics") or example.get("json") or example
-        else:
-            metrics = example
+        metrics = example.get("metrics") or example.get("json") or example
         rows.append(json_to_row(f"{dir_path}#{i}", metrics))
 
     if not rows:
-        empty_html = "<p>No records found.</p>"
-        return empty_html, []
+        return "<p>No records found.</p>", []
 
     df = pd.DataFrame(rows)
 
-    # Filters
-    if selected_tasks is not None:
-        lower_selected = [x.lower() for x in selected_tasks]
-        df = df[df["Dataset"].astype(str).str.lower().isin(lower_selected)]
-
-    if selected_frameworks is not None:
-        lower_selected = [str(x).lower() for x in selected_frameworks]
-        df = df[df["Method"].astype(str).str.lower().isin(lower_selected)]
-
-    if selected_model_types is not None: 
-        lower_selected = [str(x).lower() for x in selected_model_types]
-        df = df[df["Model type"].astype(str).str.lower().isin(lower_selected)]
-
-    if selected_precisions is not None:
-        lower_selected = [str(x).lower() for x in selected_precisions]
-        df = df[df["Precision"].astype(str).str.lower().isin(lower_selected)]
-
+    if selected_tasks:
+        df = df[df["Dataset"].astype(str).str.lower().isin([x.lower() for x in selected_tasks])]
+    if selected_frameworks:
+        df = df[df["Method"].astype(str).str.lower().isin([str(x).lower() for x in selected_frameworks])]
+    if selected_model_types: 
+        df = df[df["Model type"].astype(str).str.lower().isin([str(x).lower() for x in selected_model_types])]
+    if selected_precisions:
+        df = df[df["Precision"].astype(str).str.lower().isin([str(x).lower() for x in selected_precisions])]
     if search_keyword and search_keyword.strip():
-        keyword_lower = search_keyword.strip().lower()
-        mask = df.astype(str).apply(lambda row: row.str.lower().str.contains(keyword_lower).any(), axis=1)
+        mask = df.astype(str).apply(lambda row: row.str.lower().str.contains(search_keyword.strip().lower()).any(), axis=1)
         df = df[mask]
 
     if df.empty:
-        empty_html = "<p>No records found.</p>"
-        return empty_html, []
+        return "<p>No records found.</p>", []
     
     df = df.fillna("-")
-    
-    # Insert row number column at the beginning
     df.insert(0, 'Row #', range(len(df)))
     
-    # Create HTML table
     table_html = f'<div class="table-container">{df.to_html(escape=False, index=False, classes="metrics-table")}</div>'
     df_without_rownum = df.drop('Row #', axis=1)
-    df_dict = df_without_rownum.to_dict('records')
-    return table_html, df_dict
+    return table_html, df_without_rownum.to_dict('records')
 
 
-def auto_refresh_from_dir(
-    dir_path: str,
-    selected_tasks: List[str] | None = None,
-    selected_frameworks: List[str] | None = None,
-    selected_model_types: List[str] | None = None,
-    selected_precisions: List[str] | None = None,
-    search_keyword: str = "",
-):
-    return load_from_dir(
-        dir_path,
-        selected_tasks=selected_tasks,
-        selected_frameworks=selected_frameworks,
-        selected_model_types=selected_model_types,
-        selected_precisions=selected_precisions,
-        search_keyword=search_keyword,
-        force_refresh=True,
-    )
+def auto_refresh_from_dir(dir_path, *args):
+    return load_from_dir(dir_path, *args, force_refresh=True)
 
 
 def parse_and_generate_plot(df_data: list, indices_str: str):
-    """Parse comma-separated indices and generate radar plot."""
     if not indices_str or not indices_str.strip():
         return generate_radar_plot([])
-    
     try:
-        # Parse comma-separated indices
         indices = [int(idx.strip()) for idx in indices_str.split(',') if idx.strip()]
-        # Limit to 3 rows
-        indices = indices[:3]
-        # Get selected rows
-        selected_rows = [df_data[i] for i in indices if 0 <= i < len(df_data)]
-        return generate_radar_plot(selected_rows)
-    except (ValueError, IndexError):
+        return generate_radar_plot([df_data[i] for i in indices[:3] if 0 <= i < len(df_data)])
+    except:
         return generate_radar_plot([])
 
 
-# Gradio UI
-
 def build_app() -> gr.Blocks:
     row_css = """
     body { background-color: #f5f7fa !important; }
     
-    /* Row number column styling */
+    /* === 1. STICKY SIDEBAR FOR FILTERS === */
+    /* The column containing filters will be sticky */
+    .sticky-col {
+        position: -webkit-sticky !important;
+        position: sticky !important;
+        top: 20px !important;
+        height: fit-content !important;
+        max-height: 95vh !important;
+        overflow-y: auto !important; /* Only scroll if filters are taller than screen */
+    }
+    
+    /* === 2. NO INTERNAL SCROLLBARS FOR ELEMENTS === */
+    /* Force Checkbox Groups to show all items (no scroll) */
+    .gradio-container .gr-checkbox-group, 
+    .gradio-container .gr-radio,
+    .gradio-container .gr-checkbox-group label, 
+    .gradio-container .gr-radio label { 
+        max-height: none !important; 
+        overflow: visible !important; 
+        flex-wrap: wrap !important;
+    }
+    
+    /* Remove scrolls from filter boxes and plot containers */
+    .filter-section, .search-box, .plot-container {
+        overflow: visible !important;
+    }
+    
+    /* === 3. TABLE & GENERAL STYLING === */
     .metrics-table th:first-child, .metrics-table td:first-child {
         width: 60px !important; text-align: center !important;
         padding: 8px !important; font-weight: 600 !important;
@@ -414,68 +376,43 @@ def build_app() -> gr.Blocks:
         border-radius: 6px; border: 2px solid #e1e4e8 !important;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); margin-bottom: 16px;
     }
-    .search-box .block { background: transparent !important; border: none !important; padding: 0 !important; }
-    .search-box label span { color: #24292e !important; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
-    .search-box input.scroll-hide {
-        background-color: white !important; color: #24292e !important;
-        border: 1.5px solid #e1e4e8 !important; border-radius: 4px !important;
-        padding: 10px !important; box-shadow: none !important;
-    }
-    .search-box input.scroll-hide:focus { border-color: #0366d6 !important; outline: none !important; }
-    
     .gradio-container { max-width: 100% !important; padding: 20px !important; background-color: #f5f7fa !important; }
-    .gradio-container .block, .gradio-container .form, .gradio-container .gr-box, .gradio-container .gr-input {
-        background-color: white !important; border-color: #e1e4e8 !important;
-    }
+    .gradio-container .block, .gradio-container .form { background-color: white !important; border-color: #e1e4e8 !important; }
     .gradio-container label, .gradio-container p, .gradio-container span, .gradio-container div { color: #24292e !important; }
     
-    /* Table styling */
-    .gradio-container table.metrics-table th, .gradio-container table.metrics-table td {
-        padding: 10px 14px; border: 1.5px solid #e1e4e8; white-space: nowrap;
-        font-size: 13px; text-align: left; color: #24292e !important;
-    }
     .gradio-container table.metrics-table th {
         background: linear-gradient(to bottom, #fafbfc, #f6f8fa);
         font-weight: 600; position: sticky; top: 0; z-index: 10;
         border-bottom: 2px solid #d1d5da;
     }
-    .gradio-container table.metrics-table tbody tr:nth-child(even) { background-color: #f6f8fa; }
-    .gradio-container table.metrics-table tbody tr:hover { background-color: #e1e4e8; }
+    .gradio-container table.metrics-table td { padding: 10px 14px; border: 1.5px solid #e1e4e8; white-space: nowrap; font-size: 13px; }
     .gradio-container table.metrics-table { border-collapse: collapse; width: 100%; background: white; }
-    .gradio-container table.metrics-table a { color: #0366d6 !important; text-decoration: none; }
-    .gradio-container table.metrics-table a:hover { text-decoration: underline; }
-    
-    /* Allow plot container to expand */
-    .gradio-container .plot-container { width: 100% !important; }
     
+    /* Scrollable Table Container */
     .table-container {
-        overflow-x: auto; overflow-y: auto; max-height: 75vh;
+        overflow-x: auto; overflow-y: auto; 
+        max-height: 60vh; /* Reduced slightly to help plot visibility */
         border: 2px solid #e1e4e8; border-radius: 6px;
         background: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
     }
+    
     .filter-section {
         background: white !important; padding: 0 !important; border-radius: 6px;
         border: 2px solid #e1e4e8 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
     }
-    .filter-section .wrap, .filter-section .block, .filter-section .container, .filter-section .group { background: transparent !important; }
     .filter-section .wrap { padding: 20px !important; }
-    .gradio-container .accordion {
-        background: white !important; border: 2px solid #e1e4e8 !important;
-        border-radius: 6px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-    }
     .info-section { padding: 16px; background: white !important; }
-    .info-section a { color: #0366d6 !important; }
     .gradio-container h1 { color: #24292e !important; font-weight: 700; margin-bottom: 24px; }
     .gradio-container h3 { color: #24292e !important; font-weight: 600; margin-bottom: 16px; }
-    .gradio-container input[type="checkbox"] { accent-color: #0366d6 !important; }
     """
 
     with gr.Blocks(title="MoE-CAP Dashboard", css=row_css, theme=gr.themes.Default()) as demo:
         gr.Markdown("# MoE-CAP Dashboard")
 
         with gr.Row():
-            # Left side - Filters (narrower)
-            with gr.Column(scale=2):
+            # Left side - Filters (Sticky)
+            # Added elem_classes="sticky-col" to make this column stay on screen
+            with gr.Column(scale=2, elem_classes="sticky-col"):
                 with gr.Group(elem_classes="search-box"):
                     search_input = gr.Textbox(
                         label="🔍 Search",
@@ -485,33 +422,23 @@ def build_app() -> gr.Blocks:
                 
                 with gr.Group(elem_classes="filter-section"):
                     gr.Markdown("### 🎛️ Filters")
-                    
                     dir_path = gr.State(RESULT_DIR)
                     
                     task_filter = gr.CheckboxGroup(
                         label="📊 Tasks",
-                        choices=[
-                            ("GSM8K", "gsm8k"),
-                            ("LongBench", "longbench"),
-                            ("MMLU", "mmlu"),
-                            ("NuminaMath", "numinamath"),
-                            ("RULER", "ruler")
-                        ],
+                        choices=[("GSM8K", "gsm8k"), ("LongBench", "longbench"), ("MMLU", "mmlu"), ("NuminaMath", "numinamath"), ("RULER", "ruler")],
                         value=["gsm8k", "longbench", "mmlu", "numinamath", "ruler"]
                     )
-
                     framework_filter = gr.CheckboxGroup(
                         label="⚙️ Inference Frameworks",
                         choices=["sglang", "vllm"],
                         value=["sglang", "vllm"],
                     )
-                    
                     model_type_filter = gr.CheckboxGroup(
                         label="🤖 Model Types",
                         choices=["instruct", "thinking"],
                         value=["instruct", "thinking"], 
                     )
-                    
                     precision_filter = gr.CheckboxGroup(
                         label="🎯 Precision",
                         choices=["bfloat16", "fp8"],
@@ -526,7 +453,6 @@ def build_app() -> gr.Blocks:
                         "- **MMLU** — Multitask Language Understanding ([paper](https://arxiv.org/abs/2009.03300))\n"
                         "- **NuminaMath** — Mathematical Reasoning ([paper](http://faculty.bicmr.pku.edu.cn/~dongbin/Publications/numina_dataset.pdf))\n"
                         "- **RULER** — Extreme Long-Context Eval ([paper](https://arxiv.org/abs/2404.06654))\n\n"
-
                         "### Metrics\n"
                         "- **E2E(s)** — End-to-End Latency\n"
                         "- **Accuracy(%)** — Task Accuracy\n"
@@ -538,7 +464,7 @@ def build_app() -> gr.Blocks:
                         elem_classes="info-section"
                     )
 
-            # Right side - Table with selection and Radar Plot below
+            # Right side - Table and Plot
             with gr.Column(scale=5):
                 leaderboard_output = gr.HTML(label="📈 Results")
                 
@@ -558,7 +484,6 @@ def build_app() -> gr.Blocks:
                         )
                         generate_btn = gr.Button("🎯 Generate", variant="primary", scale=1, size="lg")
                     
-                    # Modified Layout: Removed surrounding columns to allow plot to fill full width
                     radar_plot = gr.Plot(
                         label="", 
                         value=generate_radar_plot([]),
@@ -567,40 +492,16 @@ def build_app() -> gr.Blocks:
 
         df_data_state = gr.State([])
         
-        demo.load(
-            fn=auto_refresh_from_dir,
-            inputs=[dir_path, task_filter, framework_filter, model_type_filter, precision_filter, search_input],
-            outputs=[leaderboard_output, df_data_state],
-        )
-
-        search_input.change(
-            fn=load_from_dir,
-            inputs=[dir_path, task_filter, framework_filter, model_type_filter, precision_filter, search_input],
-            outputs=[leaderboard_output, df_data_state],
-        )
+        inputs = [dir_path, task_filter, framework_filter, model_type_filter, precision_filter, search_input]
+        outputs = [leaderboard_output, df_data_state]
         
-        task_filter.change(
-            fn=load_from_dir,
-            inputs=[dir_path, task_filter, framework_filter, model_type_filter, precision_filter, search_input],
-            outputs=[leaderboard_output, df_data_state],
-        )
-        framework_filter.change(
-            fn=load_from_dir,
-            inputs=[dir_path, task_filter, framework_filter, model_type_filter, precision_filter, search_input],
-            outputs=[leaderboard_output, df_data_state],
-        )
-        model_type_filter.change(
-            fn=load_from_dir,
-            inputs=[dir_path, task_filter, framework_filter, model_type_filter, precision_filter, search_input],
-            outputs=[leaderboard_output, df_data_state],
-        )
-        precision_filter.change(
-            fn=load_from_dir,
-            inputs=[dir_path, task_filter, framework_filter, model_type_filter, precision_filter, search_input],
-            outputs=[leaderboard_output, df_data_state],
-        )
+        demo.load(fn=auto_refresh_from_dir, inputs=inputs, outputs=outputs)
+        search_input.change(fn=load_from_dir, inputs=inputs, outputs=outputs)
+        task_filter.change(fn=load_from_dir, inputs=inputs, outputs=outputs)
+        framework_filter.change(fn=load_from_dir, inputs=inputs, outputs=outputs)
+        model_type_filter.change(fn=load_from_dir, inputs=inputs, outputs=outputs)
+        precision_filter.change(fn=load_from_dir, inputs=inputs, outputs=outputs)
 
-        # Generate plot on button click
         generate_btn.click(
             fn=parse_and_generate_plot,
             inputs=[df_data_state, row_indices_input],
@@ -608,11 +509,7 @@ def build_app() -> gr.Blocks:
         )
         
         timer = gr.Timer(60.0)
-        timer.tick(
-            fn=auto_refresh_from_dir,
-            inputs=[dir_path, task_filter, framework_filter, model_type_filter, precision_filter, search_input],
-            outputs=[leaderboard_output, df_data_state],
-        )
+        timer.tick(fn=auto_refresh_from_dir, inputs=inputs, outputs=outputs)
 
     return demo