Implement click-to-sort leaderboard using sorttable.js

app.py

@@ -7,7 +7,7 @@ from src.data_loader import DataLoader
 from src.leaderboard import Leaderboard
 from src.plotter import Plotter
 from src.radar_plotter import RadarPlotter
-from src.styling import get_academic_css
+from src.styling import dataframe_to_html, get_academic_css
 from src.utils import get_metric_choices, clean_metric_names
 
 # Initialize components
@@ -24,11 +24,11 @@ def reload_data():
         dummy_fig, ax = plt.subplots(figsize=(6, 3))
         ax.text(0.5, 0.5, msg, ha="center", va="center")
         ax.axis("off")
-        # Return empty DataFrame for leaderboard
+        placeholder_html = "<div class='placeholder'>No data available</div>"
         return "", gr.update(choices=["All"], value="All"), \
                gr.update(choices=["All"], value="All"), \
                gr.update(choices=["All"], value="All"), \
-               pd.DataFrame(), dummy_fig
+               placeholder_html, dummy_fig
 
     open_source_choices = data_loader.get_open_source_choices()
     year_choices = data_loader.get_year_choices()
@@ -47,12 +47,16 @@ def reload_data():
         selected_metrics=clean_metric_names(all_metrics_with_markers),
     )
 
+    # Convert DataFrame to HTML with sorting capability
+    html_table = dataframe_to_html(table_df)
+
     radar_fig = radar_plotter.create_radar_chart()
+
     return "", \
            gr.update(choices=open_source_choices, value="All"), \
            gr.update(choices=year_choices, value="All"), \
            gr.update(choices=category_choices, value="All"), \
-           table_df, radar_fig
+           html_table, radar_fig
 
 def update_leaderboard_wrapper(metric, top_k, model_filter, open_source_filter,
                                year_filter, category_filter, sort_mode, selected_metrics):
@@ -64,6 +68,9 @@ def update_leaderboard_wrapper(metric, top_k, model_filter, open_source_filter,
         year_filter, category_filter, sort_mode, clean_selected_metrics
     )
 
+    # Convert DataFrame to HTML with sorting capability
+    html_table = dataframe_to_html(table_df)
+
     displayed_models = table_df["Model"].tolist() if not table_df.empty else []
     if displayed_models and data_loader.df_all is not None:
         radar_df = data_loader.df_all[data_loader.df_all["Model"].isin(displayed_models)].copy()
@@ -71,7 +78,7 @@ def update_leaderboard_wrapper(metric, top_k, model_filter, open_source_filter,
         radar_df = pd.DataFrame()
 
     radar_fig = radar_plotter.create_radar_chart(radar_df)
-    return table_df, radar_fig
+    return html_table, radar_fig
 
 def create_comparison_plot_wrapper(model_filter, open_source_filter, year_filter,
                                   category_filter, selected_plot_metric, plot_sort_mode):
@@ -160,13 +167,10 @@ with gr.Blocks(css=academic_css) as demo:
         reload_button = gr.Button("🔄 Reload Data", variant="secondary", size="sm")
         update_button = gr.Button("✅ Update Leaderboard", variant="primary", size="sm")
 
-    # Leaderboard DataFrame with sorting enabled
-    leaderboard_df = gr.DataFrame(
-        label="Leaderboard",
-        headers=[],
-        datatable=True,  # Enable column sorting
-        interactive=False,
-        wrap=True,
+    # Leaderboard HTML with sorting capability
+    leaderboard_html = gr.HTML(
+        label="Leaderboard Table",
+        value="<div class='placeholder'>Leaderboard will be displayed here...</div>"
     )
 
     with gr.Row():
@@ -193,7 +197,7 @@ with gr.Blocks(css=academic_css) as demo:
     reload_button.click(
         fn=reload_data,
         inputs=[],
-        outputs=[status_box, open_source_dropdown, year_dropdown, category_dropdown, leaderboard_df, radar_plot],
+        outputs=[status_box, open_source_dropdown, year_dropdown, category_dropdown, leaderboard_html, radar_plot],
     )
 
     update_button.click(
@@ -203,7 +207,7 @@ with gr.Blocks(css=academic_css) as demo:
             open_source_dropdown, year_dropdown, category_dropdown,
             sort_mode_radio, metrics_select,
         ],
-        outputs=[leaderboard_df, radar_plot],
+        outputs=[leaderboard_html, radar_plot],
     )
 
     plot_update_button.click(
@@ -218,7 +222,7 @@ with gr.Blocks(css=academic_css) as demo:
     demo.load(
         fn=reload_data,
         inputs=[],
-        outputs=[status_box, open_source_dropdown, year_dropdown, category_dropdown, leaderboard_df, radar_plot],
+        outputs=[status_box, open_source_dropdown, year_dropdown, category_dropdown, leaderboard_html, radar_plot],
     )
 
 if __name__ == "__main__":

src/leaderboard.py

@@ -55,14 +55,7 @@ class Leaderboard:
                     lambda x: f"{x:.4f}" if pd.notna(x) and isinstance(x, (int, float)) else "-"
                 )
 
-        # Create hyperlinks if columns exist
-        if "Paper" in result_df.columns:
-            result_df["Paper"] = result_df["Paper"].apply(
-                lambda x: f'<a href="{x}" target="_blank">📄</a>' if pd.notna(x) and x != "-" else "-"
-            )
-        if "Code" in result_df.columns:
-            result_df["Code"] = result_df["Code"].apply(
-                lambda x: f'<a href="{x}" target="_blank">💻</a>' if pd.notna(x) and x != "-" else "-"
-            )
+        # Do NOT generate HTML links; keep as plain text
+        # (If you want links, you can add them here, but for sorting they are fine as text)
 
         return result_df

src/styling.py

@@ -3,7 +3,7 @@ import pandas as pd
 def get_academic_css() -> str:
     return """
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-    
+
     :root {
         /* Light mode (default) */
         --primary: #2563eb;
@@ -15,21 +15,20 @@ def get_academic_css() -> str:
         --border: #e5e5e5;
         --success: #10b981;
         --danger: #ef4444;
-        
-        /* Table colors - only for table, not affecting global background */
-        --table-bg: #ffffff;                /* overall table background */
-        --table-bg-odd: #f8fafc;            /* odd row background */
-        --table-bg-even: #f1f5f9;            /* even row background */
-        --table-bg-hover: #e2e8f0;           /* hover row background */
+
+        /* Table colors */
         --table-header: #64748b;
         --table-header-light: #94a3b8;
         --table-border: #cbd5e0;
+        --table-bg-odd: #f8fafc;
+        --table-bg-even: #f1f5f9;
+        --table-bg-hover: #e2e8f0;
         --best-score-bg: #e6fffa;
         --best-score-color: #2c7a7b;
         --category-bg: #e2e8f0;
         --category-color: #475569;
     }
-    
+
     @media (prefers-color-scheme: dark) {
         :root {
             --primary: #3b82f6;
@@ -41,66 +40,60 @@ def get_academic_css() -> str:
             --border: #3a4a5a;
             --success: #34d399;
             --danger: #f87171;
-            
-            --table-bg: #1a2632;
-            --table-bg-odd: #2a3745;
-            --table-bg-even: #1e2b38;
-            --table-bg-hover: #354454;
+
             --table-header: #4a5a6a;
             --table-header-light: #5a6a7a;
             --table-border: #3a4a5a;
+            --table-bg-odd: #2a3745;
+            --table-bg-even: #1e2b38;
+            --table-bg-hover: #354454;
             --best-score-bg: #1a3a3a;
             --best-score-color: #7fc9c9;
             --category-bg: #3a4a5a;
             --category-color: #cbd5e0;
         }
     }
-    
+
     body {
         font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
         color: var(--text-primary);
         margin: 0;
         padding: 0;
-        /* No background set - use system default */
+        /* Background set by system */
     }
-    
+
     .gradio-container {
         max-width: 1400px !important;
-        /* No background set - inherit from system */
+        /* Background set by system */
         color: var(--text-primary);
     }
-    
+
     h1 {
         color: var(--primary) !important;
         font-weight: 700 !important;
     }
-    
+
     .subtitle {
         color: var(--text-secondary);
         font-size: 1.1rem;
         margin-top: 0.5rem;
         opacity: 0.8;
     }
-    
+
     .emoji {
         font-size: 1.5em;
     }
-    
-    /* Tables - Low saturation, with backgrounds only within table */
-    .table-wrapper {
-        margin: 1.5rem 0;
-        overflow-x: auto;
-    }
-    
+
+    /* Leaderboard table styling */
     .leaderboard-table {
         width: 100%;
         border-collapse: collapse;
         font-size: 0.9rem;
         margin-top: 1rem;
         border: 1px solid var(--table-border);
-        background-color: var(--table-bg);  /* Table background */
+        background-color: transparent;
     }
-    
+
     .leaderboard-table th {
         background: var(--table-header);
         color: white;
@@ -110,12 +103,17 @@ def get_academic_css() -> str:
         position: sticky;
         top: 0;
         border-right: 1px solid rgba(255,255,255,0.15);
+        cursor: pointer;  /* Indicate sortable */
     }
-    
+
     .leaderboard-table th:last-child {
         border-right: none;
     }
-    
+
+    .leaderboard-table th:hover {
+        background-color: var(--table-header-light);
+    }
+
     .leaderboard-table td {
         padding: 10px 8px;
         text-align: center;
@@ -123,36 +121,35 @@ def get_academic_css() -> str:
         border-right: 1px solid var(--table-border);
         color: var(--text-secondary);
     }
-    
+
     .leaderboard-table td:last-child {
         border-right: none;
     }
-    
-    /* All rows have background colors */
+
     .leaderboard-table tr:nth-child(odd) {
         background-color: var(--table-bg-odd);
     }
-    
+
     .leaderboard-table tr:nth-child(even) {
         background-color: var(--table-bg-even);
     }
-    
+
     .leaderboard-table tr:hover {
         background-color: var(--table-bg-hover) !important;
     }
-    
-    /* Rank styles (override row colors) */
+
+    /* Rank styles */
     .rank-1 { background: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%) !important; font-weight: bold; color: #1a1a1a !important; }
     .rank-2 { background: linear-gradient(135deg, #c0c0c0 0%, #e5e7eb 100%) !important; font-weight: bold; color: #1a1a1a !important; }
     .rank-3 { background: linear-gradient(135deg, #cd7f32 0%, #fdba74 100%) !important; font-weight: bold; color: #1a1a1a !important; }
-    
+
     /* Best score highlight */
     .best-score {
         font-weight: 700;
         color: var(--best-score-color);
         background: var(--best-score-bg) !important;
     }
-    
+
     /* Category row (for group headers) */
     .category-row {
         background: var(--category-bg) !important;
@@ -161,25 +158,25 @@ def get_academic_css() -> str:
         text-align: left;
         font-size: 0.85rem;
     }
-    
+
     .category-row td {
         padding: 10px 15px;
         color: var(--category-color);
         border-bottom: 2px solid var(--table-border);
     }
-    
+
     .check { 
         color: var(--success); 
         font-weight: bold;
         font-size: 1.2em;
     }
-    
+
     .cross { 
         color: var(--danger); 
         font-weight: bold;
         font-size: 1.2em;
     }
-    
+
     .category-tag {
         display: inline-block;
         padding: 2px 8px;
@@ -190,7 +187,7 @@ def get_academic_css() -> str:
     .cat-text { background: #dbeafe; color: #1e40af; }
     .cat-onehot { background: #d1fae5; color: #065f46; }
     .cat-camera { background: #fef3c7; color: #92400e; }
-    
+
     /* Links */
     .leaderboard-table a {
         color: var(--primary);
@@ -200,74 +197,26 @@ def get_academic_css() -> str:
     .leaderboard-table a:hover {
         opacity: 0.7;
     }
-    
+
     /* Buttons */
     button.primary {
         background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
         color: white !important;
         border: none;
     }
-    
-    /* Status indicators (hidden) */
-        .status-success { color: var(--success); }
-        .status-error { color: var(--danger); }
-
-        table.dataframe {
-        width: 100%;
-        border-collapse: collapse;
-        font-size: 0.9rem;
-        border: 1px solid var(--table-border);
-        background-color: var(--table-bg);
-    }
-
-    table.dataframe thead tr th {
-        background: var(--table-header);
-        color: white;
-        padding: 12px 8px;
-        text-align: center;
-        font-weight: 600;
-        position: sticky;
-        top: 0;
-        border-right: 1px solid rgba(255,255,255,0.15);
-    }
-
-    table.dataframe thead tr th:last-child {
-        border-right: none;
-    }
-
-    table.dataframe tbody tr:nth-child(odd) {
-        background-color: var(--table-bg-odd);
-    }
-
-    table.dataframe tbody tr:nth-child(even) {
-        background-color: var(--table-bg-even);
-    }
-
-    table.dataframe tbody tr:hover {
-        background-color: var(--table-bg-hover) !important;
-    }
-
-    table.dataframe td {
-        padding: 10px 8px;
-        text-align: center;
-        border-bottom: 1px solid var(--table-border);
-        border-right: 1px solid var(--table-border);
-        color: var(--text-secondary);
-    }
-
-    table.dataframe td:last-child {
-        border-right: none;
-    }
-
 
+    /* Status indicators (hidden) */
+    .status-success { color: var(--success); }
+    .status-error { color: var(--danger); }
     """
 
-
-
 def dataframe_to_html(df: pd.DataFrame) -> str:
     if df.empty:
         return "<div class='placeholder'>No data available</div>"
-    html = ['<table class="leaderboard-table">']
+
+    # Include sorttable.js for column sorting
+    html = ['<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>']
+    html.append('<table class="leaderboard-table sortable">')
     html.append("<thead><tr>")
     for col in df.columns:
         html.append(f"<th>{col}</th>")