add rank, update css

app.py

@@ -8,16 +8,13 @@ current_dir = os.path.dirname(os.path.abspath(__file__))
 
 # Construct paths to CSS files
 base_css_file = os.path.join(current_dir, "static", "css", "style.css")
-default_css_file = os.path.join(current_dir, "static", "css", "default.css")
-si_css_file = os.path.join(current_dir, "static", "css", "single_image.css")
+table_css_file = os.path.join(current_dir, "static", "css", "table.css")
 
 # Read CSS files
 with open(base_css_file, "r") as f:
     base_css = f.read()
-with open(default_css_file, "r") as f:
-    default_css = f.read()
-with open(si_css_file, "r") as f:
-    si_css = f.read()
+with open(table_css_file, "r") as f:
+    table_css = f.read()
 
 # Initialize data loaders
 default_loader = MEGABenchEvalDataLoader("./static/eval_results/Default")
@@ -26,7 +23,7 @@ si_loader = MEGABenchEvalDataLoader("./static/eval_results/SI")
 with gr.Blocks() as block:
     # Add a style element that we'll update
     css_style = gr.HTML(
-        f"<style>{base_css}\n{default_css}</style>",
+        f"<style>{base_css}\n{table_css}</style>",
         visible=False
     )
     
@@ -81,7 +78,7 @@ with gr.Blocks() as block:
             data_component = gr.Dataframe(
                 value=initial_data,
                 headers=initial_headers,
-                datatype=["html"] + ["number"] * (len(initial_headers) - 1),
+                datatype=["number"] + ["html"] + ["number"] * (len(initial_headers) - 2),
                 interactive=False,
                 elem_classes="custom-dataframe",
                 max_height=2400,
@@ -91,21 +88,19 @@ with gr.Blocks() as block:
                 if table_type == "Default":
                     headers, data = default_loader.get_leaderboard_data(super_group, model_group)
                     caption = default_caption
-                    current_css = f"{base_css}\n{default_css}"
                 else:  # Single-image
                     headers, data = si_loader.get_leaderboard_data(super_group, model_group)
                     caption = single_image_caption
-                    current_css = f"{base_css}\n{si_css}"
                 
                 return [
                     gr.Dataframe(
                         value=data,
                         headers=headers,
-                        datatype=["html"] + ["number"] * (len(headers) - 1),
+                        datatype=["number"] + ["html"] + ["number"] * (len(headers) - 2),
                         interactive=False,
                     ),
                     caption,
-                    f"<style>{current_css}</style>"
+                    f"<style>{base_css}\n{table_css}</style>"
                 ]
 
             def update_selectors(table_type):

static/css/default.css

@@ -1,57 +0,0 @@
-.custom-dataframe thead th:nth-child(-n+4),
-.custom-dataframe tbody td:nth-child(-n+4) {
-    background-color: var(--global-column-background) !important;
-}
-
-.custom-dataframe thead th:nth-child(n+5),
-.custom-dataframe tbody td:nth-child(n+5) {
-    background-color: var(--dimension-column-background) !important;
-}
-
-.custom-dataframe tbody tr:nth-child(even) td:nth-child(-n+4) {
-    background-color: var(--row-even-global) !important;
-}
-
-.custom-dataframe tbody tr:nth-child(even) td:nth-child(n+5) {
-    background-color: var(--row-even-dimension) !important;
-}
-
-/* Dark mode styles */
-@media (prefers-color-scheme: dark) {
-    .custom-dataframe {
-        color: var(--text-color) !important;
-        background-color: var(--background-color) !important;
-    }
-
-    .custom-dataframe thead th {
-        background-color: var(--header-background) !important;
-        color: var(--text-color) !important;
-    }
-
-    .custom-dataframe tbody td {
-        background-color: var(--background-color) !important;
-        color: var(--text-color) !important;
-    }
-
-    .custom-dataframe thead th:nth-child(-n+4),
-    .custom-dataframe tbody td:nth-child(-n+4) {
-        background-color: var(--global-column-background) !important;
-    }
-
-    .custom-dataframe thead th:nth-child(n+5),
-    .custom-dataframe tbody td:nth-child(n+5) {
-        background-color: var(--dimension-column-background) !important;
-    }
-
-    .custom-dataframe tbody tr:nth-child(even) td:nth-child(-n+4) {
-        background-color: var(--row-even-global) !important;
-    }
-
-    .custom-dataframe tbody tr:nth-child(even) td:nth-child(n+5) {
-        background-color: var(--row-even-dimension) !important;
-    }
-
-    .custom-dataframe tbody tr:hover td {
-        background-color: var(--hover-background) !important;
-    }
-}

static/css/single_image.css

@@ -1,57 +0,0 @@
-.custom-dataframe thead th:nth-child(-n+4),
-.custom-dataframe tbody td:nth-child(-n+4) {
-    background-color: var(--global-column-background) !important;
-}
-
-.custom-dataframe thead th:nth-child(n+5),
-.custom-dataframe tbody td:nth-child(n+5) {
-    background-color: var(--dimension-column-background) !important;
-}
-
-.custom-dataframe tbody tr:nth-child(even) td:nth-child(-n+4) {
-    background-color: var(--row-even-global) !important;
-}
-
-.custom-dataframe tbody tr:nth-child(even) td:nth-child(n+5) {
-    background-color: var(--row-even-dimension) !important;
-}
-
-/* Dark mode styles */
-@media (prefers-color-scheme: dark) {
-    .custom-dataframe {
-        color: var(--text-color) !important;
-        background-color: var(--background-color) !important;
-    }
-
-    .custom-dataframe thead th {
-        background-color: var(--header-background) !important;
-        color: var(--text-color) !important;
-    }
-
-    .custom-dataframe tbody td {
-        background-color: var(--background-color) !important;
-        color: var(--text-color) !important;
-    }
-
-    .custom-dataframe thead th:nth-child(-n+4),
-    .custom-dataframe tbody td:nth-child(-n+4) {
-        background-color: var(--global-column-background) !important;
-    }
-
-    .custom-dataframe thead th:nth-child(n+5),
-    .custom-dataframe tbody td:nth-child(n+5) {
-        background-color: var(--dimension-column-background) !important;
-    }
-
-    .custom-dataframe tbody tr:nth-child(even) td:nth-child(-n+4) {
-        background-color: var(--row-even-global) !important;
-    }
-
-    .custom-dataframe tbody tr:nth-child(even) td:nth-child(n+5) {
-        background-color: var(--row-even-dimension) !important;
-    }
-
-    .custom-dataframe tbody tr:hover td {
-        background-color: var(--hover-background) !important;
-    }
-}

static/css/style.css

@@ -46,9 +46,17 @@
     color: var(--text-color);
 }
 
-.custom-dataframe td:first-child {
-    min-width: 220px !important;  /* Adjust minimum width for model names */
-    white-space: nowrap !important;  /* Prevent text wrapping */
+.custom-dataframe td:first-child,
+.custom-dataframe th:first-child {
+    width: 60px !important;
+    min-width: 60px !important;
+    max-width: 60px !important;
+    text-align: center !important;
+}
+
+.custom-dataframe td:nth-child(2) {
+    min-width: 220px !important;
+    white-space: nowrap !important;
 }
 
 .custom-dataframe a {

utils.py

@@ -130,16 +130,22 @@ class MEGABenchEvalDataLoader:
 
         # Define headers with task counts
         column_headers = {
+            "Rank": "Rank",
             "Models": "Models",
             "Overall": f"Overall({total_tasks})",
             "Core": f"Core({total_core_tasks})",
             "Open-ended": f"Open-ended({total_open_tasks})"
         }
         
+        # Add rank column to DataFrame
+        df = df.reset_index(drop=True)
+        df.insert(0, 'Rank', range(1, len(df) + 1))
+        
         # Rename the columns in DataFrame to match headers
         df = df.rename(columns=column_headers)
         
         headers = [
+            column_headers["Rank"],
             column_headers["Models"],
             column_headers["Overall"],
             column_headers["Core"],
@@ -147,6 +153,7 @@ class MEGABenchEvalDataLoader:
         ] + self.SUPER_GROUPS[selected_super_group]
         
         data = df[[
+            column_headers["Rank"],
             column_headers["Models"],
             column_headers["Overall"],
             column_headers["Core"],