Update app.py

app.py

@@ -7,6 +7,7 @@ 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"
@@ -32,6 +33,13 @@ 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:
@@ -110,6 +118,7 @@ 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:
@@ -117,19 +126,23 @@ 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]
+            legend_name = model_name.split('/')[-1]  # Get part after last /
         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
@@ -138,12 +151,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,
+            'accuracy': acc / 100.0 if acc > 1 else acc,  # Normalize to 0-1
             'cost': cost,
             'throughput': throughput
         }
     
-    # Get min/max
+    # Get min/max for normalization
     throughputs = [v['throughput'] for v in data.values()]
     costs = [v['cost'] for v in data.values()]
     accs = [v['accuracy'] for v in data.values()]
@@ -164,7 +177,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]]
+        norm_vals += [norm_vals[0]]  # Close the loop
         
         hovertext = [
             f"Throughput: {raw_vals[0]:.2f} T/s",
@@ -198,7 +211,7 @@ def generate_radar_plot(selected_rows_data: List[dict]) -> go.Figure:
             ),
             angularaxis=dict(
                 tickfont=dict(size=14),
-                rotation=90,
+                rotation=90, # Rotate so top is 12 o'clock
                 direction='clockwise'
             ),
         ),
@@ -222,6 +235,7 @@ 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")
@@ -283,89 +297,113 @@ def load_from_dir(
     try:
         pattern = f"hf://datasets/{dir_path}/**/*.json"
         dl_mode = "force_redownload" if force_refresh else None
-        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>", []
+
+        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, []
 
     rows = []
     for i, example in enumerate(ds):
-        metrics = example.get("metrics") or example.get("json") or example
+        if isinstance(example, dict):
+            metrics = example.get("metrics") or example.get("json") or example
+        else:
+            metrics = example
         rows.append(json_to_row(f"{dir_path}#{i}", metrics))
 
     if not rows:
-        return "<p>No records found.</p>", []
+        empty_html = "<p>No records found.</p>"
+        return empty_html, []
 
     df = pd.DataFrame(rows)
 
-    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])]
+    # 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 search_keyword and search_keyword.strip():
-        mask = df.astype(str).apply(lambda row: row.str.lower().str.contains(search_keyword.strip().lower()).any(), axis=1)
+        keyword_lower = search_keyword.strip().lower()
+        mask = df.astype(str).apply(lambda row: row.str.lower().str.contains(keyword_lower).any(), axis=1)
         df = df[mask]
 
     if df.empty:
-        return "<p>No records found.</p>", []
+        empty_html = "<p>No records found.</p>"
+        return empty_html, []
     
     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)
-    return table_html, df_without_rownum.to_dict('records')
+    df_dict = df_without_rownum.to_dict('records')
+    return table_html, df_dict
 
 
-def auto_refresh_from_dir(dir_path, *args):
-    return load_from_dir(dir_path, *args, force_refresh=True)
+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 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()]
-        return generate_radar_plot([df_data[i] for i in indices[:3] if 0 <= i < len(df_data)])
-    except:
+        # 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([])
 
 
+# Gradio UI
+
 def build_app() -> gr.Blocks:
     row_css = """
     body { background-color: #f5f7fa !important; }
     
-    /* === 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 === */
+    /* Row number column 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;
@@ -376,43 +414,68 @@ 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 { background-color: white !important; border-color: #e1e4e8 !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 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 td { padding: 10px 14px; border: 1.5px solid #e1e4e8; white-space: nowrap; font-size: 13px; }
+    .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 { 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: 60vh; /* Reduced slightly to help plot visibility */
+        overflow-x: auto; overflow-y: auto; max-height: 75vh;
         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 (Sticky)
-            # Added elem_classes="sticky-col" to make this column stay on screen
-            with gr.Column(scale=2, elem_classes="sticky-col"):
+            # Left side - Filters (narrower)
+            with gr.Column(scale=2):
                 with gr.Group(elem_classes="search-box"):
                     search_input = gr.Textbox(
                         label="🔍 Search",
@@ -422,23 +485,33 @@ 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"],
@@ -453,6 +526,7 @@ 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"
@@ -464,7 +538,7 @@ def build_app() -> gr.Blocks:
                         elem_classes="info-section"
                     )
 
-            # Right side - Table and Plot
+            # Right side - Table with selection and Radar Plot below
             with gr.Column(scale=5):
                 leaderboard_output = gr.HTML(label="📈 Results")
                 
@@ -484,6 +558,7 @@ 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([]),
@@ -492,16 +567,40 @@ def build_app() -> gr.Blocks:
 
         df_data_state = gr.State([])
         
-        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=[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],
+        )
         
-        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)
+        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],
+        )
 
+        # Generate plot on button click
         generate_btn.click(
             fn=parse_and_generate_plot,
             inputs=[df_data_state, row_indices_input],
@@ -509,7 +608,11 @@ def build_app() -> gr.Blocks:
         )
         
         timer = gr.Timer(60.0)
-        timer.tick(fn=auto_refresh_from_dir, inputs=inputs, outputs=outputs)
+        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],
+        )
 
     return demo