Improve table styling and scrolling

app.py

@@ -45,11 +45,40 @@ def build_tab(df, name):
     if df.empty:
         return gr.TabItem(name)
 
+    # Pivot the dataframe to have columns like "Dataset1 (Metric1)", "Dataset1 (Metric2)", etc.
     datasets = sorted(df["Dataset"].unique().tolist())
     models = sorted(df["Model"].unique().tolist())
     organizations = sorted(df["Organization"].unique().tolist())
     metric_cols = [col for col in df.columns if col not in ["Model", "Organization", "Dataset"]]
-    all_cols = ["Model", "Organization", "Dataset"] + metric_cols
+
+    # Create pivoted dataframe
+    pivoted_data = []
+    for model in models:
+        for org in organizations:
+            model_org_data = df[(df["Model"] == model) & (df["Organization"] == org)]
+            if not model_org_data.empty:
+                row = {"Model": model, "Organization": org}
+                for dataset in datasets:
+                    dataset_data = model_org_data[model_org_data["Dataset"] == dataset]
+                    if not dataset_data.empty:
+                        for metric in metric_cols:
+                            col_name = f"{dataset} ({metric})"
+                            row[col_name] = dataset_data[metric].values[0]
+                    else:
+                        for metric in metric_cols:
+                            col_name = f"{dataset} ({metric})"
+                            row[col_name] = "-"
+                pivoted_data.append(row)
+
+    pivoted_df = pd.DataFrame(pivoted_data)
+
+    # Build column list for selector
+    metric_combo_cols = []
+    for dataset in datasets:
+        for metric in metric_cols:
+            metric_combo_cols.append(f"{dataset} ({metric})")
+
+    all_cols = ["Model", "Organization"] + metric_combo_cols
 
     with gr.TabItem(name, elem_id="llm-benchmark-tab-table"):
         with gr.Row():
@@ -68,7 +97,7 @@ def build_tab(df, name):
                 )
 
                 table = gr.Dataframe(
-                    value=df,
+                    value=pivoted_df,
                     wrap=True,
                     interactive=False,
                     elem_id="leaderboard-table"
@@ -91,22 +120,28 @@ def build_tab(df, name):
                     elem_classes="filter-group"
                 )
 
-                gr.Markdown("**Datasets**")
-                dataset_filter = gr.CheckboxGroup(
-                    choices=datasets,
-                    value=datasets,
-                    label="",
-                    elem_classes="filter-group"
-                )
+        def update(search, md, org, cols):
+            filtered = pivoted_df.copy()
+
+            if search:
+                mask = filtered.apply(lambda row: row.astype(str).str.contains(search, case=False).any(), axis=1)
+                filtered = filtered[mask]
 
-        def update(search, ds, md, org, cols):
-            return filter_and_search(df, search, ds, md, org, cols)
+            if md:
+                filtered = filtered[filtered["Model"].isin(md)]
+            if org:
+                filtered = filtered[filtered["Organization"].isin(org)]
 
-        search_bar.change(update, [search_bar, dataset_filter, model_filter, org_filter, col_selector], table)
-        dataset_filter.change(update, [search_bar, dataset_filter, model_filter, org_filter, col_selector], table)
-        model_filter.change(update, [search_bar, dataset_filter, model_filter, org_filter, col_selector], table)
-        org_filter.change(update, [search_bar, dataset_filter, model_filter, org_filter, col_selector], table)
-        col_selector.change(update, [search_bar, dataset_filter, model_filter, org_filter, col_selector], table)
+            if cols:
+                display_cols = [col for col in cols if col in filtered.columns]
+                filtered = filtered[display_cols]
+
+            return filtered
+
+        search_bar.change(update, [search_bar, model_filter, org_filter, col_selector], table)
+        model_filter.change(update, [search_bar, model_filter, org_filter, col_selector], table)
+        org_filter.change(update, [search_bar, model_filter, org_filter, col_selector], table)
+        col_selector.change(update, [search_bar, model_filter, org_filter, col_selector], table)
 
 
 custom_css = """
@@ -116,6 +151,49 @@ custom_css = """
 
 #leaderboard-table {
     margin-top: 15px;
+    max-height: 600px;
+    overflow-y: auto;
+}
+
+#leaderboard-table table {
+    width: 100%;
+    table-layout: auto;
+}
+
+#leaderboard-table thead th {
+    font-weight: bold;
+    text-align: center;
+    padding: 12px 8px;
+    background-color: #f8f9fa;
+    white-space: normal;
+    word-wrap: break-word;
+}
+
+#leaderboard-table tbody td {
+    text-align: center;
+    padding: 10px 8px;
+    white-space: nowrap;
+}
+
+#leaderboard-table tbody td:first-child,
+#leaderboard-table thead th:first-child {
+    text-align: left;
+    font-weight: 500;
+    min-width: 120px;
+    max-width: 200px;
+    white-space: nowrap;
+}
+
+#leaderboard-table tbody td:nth-child(2),
+#leaderboard-table thead th:nth-child(2) {
+    text-align: left;
+    min-width: 100px;
+}
+
+/* Remove any interactive elements from table */
+#leaderboard-table input[type="range"],
+#leaderboard-table .slider {
+    display: none !important;
 }
 
 #search-bar {
@@ -127,13 +205,6 @@ custom_css = """
     border-radius: 8px !important;
 }
 
-table td:first-child,
-table th:first-child {
-    max-width: 400px;
-    overflow: auto;
-    white-space: nowrap;
-}
-
 .tab-buttons button {
     font-size: 20px;
 }
@@ -186,8 +257,18 @@ with demo:
 
             To submit your model's results to the Mars Vision Leaderboard, please provide the following information.
             All submissions will be reviewed before being added to the leaderboard.
+            """)
+
+            gr.Markdown("""
+            ### How to submit:
+            1. Fill out the form below
+            2. Click "Generate Submission Text"
+            3. Copy the generated text
+            4. Go to the [Community tab](https://huggingface.co/spaces/gremlin97/MarsBoard/discussions)
+            5. Click "New discussion"
+            6. Paste the text and submit
 
-            **After filling out this form, click "Generate Submission Text" and then open a discussion on this Space's Community tab with the generated text.**
+            ---
             """)
 
             with gr.Row():
@@ -251,14 +332,6 @@ with demo:
             )
 
             gr.Markdown("""
-            ### How to submit:
-            1. Fill out the form above
-            2. Click "Generate Submission Text"
-            3. Copy the generated text
-            4. Go to the [Community tab](https://huggingface.co/spaces/gremlin97/MarsBoard/discussions)
-            5. Click "New discussion"
-            6. Paste the text and submit
-
             We'll review your submission and add it to the leaderboard if approved.
             """)