Fix column colors

app.py

@@ -10,7 +10,7 @@ from src.about import (
     LLM_BENCHMARKS_TEXT,
     TITLE,
 )
-from src.display.css_html_js import custom_css, COLOR_COLUMNS_JS
+from src.display.css_html_js import custom_css
 
 
 # ============================================================
@@ -45,6 +45,30 @@ DEFAULT_GROUPS = [
 # Columns always shown regardless of group selection
 ALWAYS_VISIBLE_COLS = ["Model", "Type"]
 
+# ============================================================
+# Column-to-color mapping
+# Soft, harmonious palette: dark/light pairs for each group
+# ============================================================
+COLUMN_COLORS = {}
+# Overall (dark amber)
+for col in ["Overall"]:
+    COLUMN_COLORS[col] = "rgba(232, 180, 58, 0.30)"
+# Overall by Category (light amber)
+for col in ["Abst.(All)", "Know.(All)", "Perc.(All)", "Spat.(All)", "Trans.(All)"]:
+    COLUMN_COLORS[col] = "rgba(242, 200, 90, 0.15)"
+# In-Domain Overall (dark green)
+for col in ["Overall(In-Domain)"]:
+    COLUMN_COLORS[col] = "rgba(82, 183, 120, 0.30)"
+# In-Domain by Category (light green)
+for col in ["Abst.(ID)", "Know.(ID)", "Perc.(ID)", "Spat.(ID)", "Trans.(ID)"]:
+    COLUMN_COLORS[col] = "rgba(110, 200, 145, 0.15)"
+# Out-of-Domain Overall (dark blue)
+for col in ["Overall(Out-of-Domain)"]:
+    COLUMN_COLORS[col] = "rgba(95, 150, 215, 0.30)"
+# Out-of-Domain by Category (light blue)
+for col in ["Abst.(OOD)", "Know.(OOD)", "Perc.(OOD)", "Spat.(OOD)", "Trans.(OOD)"]:
+    COLUMN_COLORS[col] = "rgba(125, 175, 228, 0.15)"
+
 # ============================================================
 # Static model scores data
 # ============================================================
@@ -62,12 +86,6 @@ MODEL_LINKS = {
     "HunyuanVideo-I2V": "https://huggingface.co/tencent/HunyuanVideo-I2V",
 }
 
-def make_model_link(model_name):
-    """Create a clickable HTML link for a model if URL exists."""
-    if model_name in MODEL_LINKS:
-        return f'<a href="{MODEL_LINKS[model_name]}" target="_blank">{model_name}</a>'
-    return model_name
-
 MODELS_DATA = [
     {
         "Model": "Human",
@@ -168,25 +186,60 @@ def build_full_dataframe():
     # Round numeric columns to 3 decimal places for clean display
     numeric_cols = df.select_dtypes(include="number").columns
     df[numeric_cols] = df[numeric_cols].round(3)
-    # Add clickable links to model names
-    df["Model"] = df["Model"].apply(make_model_link)
     return df
 
 
 FULL_DF = build_full_dataframe()
 
 
-def get_filtered_df(selected_groups):
-    """Filter DataFrame columns based on selected column groups."""
+def render_html_table(selected_groups):
+    """Render the leaderboard as a styled HTML table with column group colors."""
     if not selected_groups:
-        selected_groups = ["Overall"]  # Always show at least Overall
+        selected_groups = ["Overall"]
 
     cols = list(ALWAYS_VISIBLE_COLS)
     for group_name, group_cols in COLUMN_GROUPS.items():
         if group_name in selected_groups:
             cols.extend(group_cols)
 
-    return FULL_DF[cols]
+    df = FULL_DF[cols]
+
+    # Build HTML table
+    html = '<div class="leaderboard-scroll"><table class="leaderboard-html-table">\n'
+
+    # Header
+    html += '<thead><tr>\n'
+    for col in cols:
+        bg = COLUMN_COLORS.get(col, "")
+        style = f' style="background-color: {bg};"' if bg else ''
+        html += f'  <th{style}>{col}</th>\n'
+    html += '</tr></thead>\n'
+
+    # Body
+    html += '<tbody>\n'
+    for _, row in df.iterrows():
+        html += '<tr>\n'
+        for col in cols:
+            bg = COLUMN_COLORS.get(col, "")
+            style = f' style="background-color: {bg};"' if bg else ''
+            val = row[col]
+
+            if col == "Model":
+                # Render model name with link
+                model_name = val
+                if model_name in MODEL_LINKS:
+                    cell = f'<a href="{MODEL_LINKS[model_name]}" target="_blank">{model_name}</a>'
+                else:
+                    cell = model_name
+            elif isinstance(val, float):
+                cell = f'{val:.3f}'
+            else:
+                cell = str(val)
+
+            html += f'  <td{style}>{cell}</td>\n'
+        html += '</tr>\n'
+    html += '</tbody>\n</table></div>'
+    return html
 
 
 # ============================================================
@@ -207,17 +260,15 @@ with demo:
                     interactive=True,
                 )
 
-            leaderboard_table = gr.Dataframe(
-                value=get_filtered_df(DEFAULT_GROUPS),
-                interactive=False,
+            leaderboard_html = gr.HTML(
+                value=render_html_table(DEFAULT_GROUPS),
                 elem_id="leaderboard-table",
-                datatype=["html"] + ["str"] * 20,  # First column (Model) renders as HTML for links
             )
 
             column_selector.change(
-                fn=get_filtered_df,
+                fn=render_html_table,
                 inputs=[column_selector],
-                outputs=[leaderboard_table],
+                outputs=[leaderboard_html],
             )
 
         with gr.TabItem("📝 About", elem_id="llm-benchmark-tab-table", id=1):
@@ -236,7 +287,4 @@ with demo:
                 show_copy_button=True,
             )
 
-    # Inject JS to dynamically color columns based on header text
-    gr.HTML(f"<script>{COLOR_COLUMNS_JS}</script>")
-
 demo.queue(default_concurrency_limit=40).launch()

src/display/css_html_js.py

@@ -22,11 +22,7 @@ custom_css = """
 }
 
 #leaderboard-table {
-    margin-top: 15px
-}
-
-#leaderboard-table-lite {
-    margin-top: 15px
+    margin-top: 15px;
 }
 
 #search-bar-table-box > div:first-child {
@@ -38,31 +34,6 @@ custom_css = """
     padding: 0px;
 }
 
-/* Model column — wider to avoid truncation */
-#leaderboard-table td:nth-child(1),
-#leaderboard-table th:nth-child(1) {
-    min-width: 220px !important;
-    white-space: nowrap;
-}
-
-/* Type column — wider to avoid truncation */
-#leaderboard-table td:nth-child(2),
-#leaderboard-table th:nth-child(2) {
-    min-width: 170px !important;
-    white-space: nowrap;
-}
-
-/* Model links: underline + hover color */
-#leaderboard-table td a {
-    color: #2563eb;
-    text-decoration: underline;
-    text-underline-offset: 2px;
-    transition: color 0.2s ease;
-}
-#leaderboard-table td a:hover {
-    color: #d97706;
-}
-
 .tab-buttons button {
     font-size: 20px;
 }
@@ -113,34 +84,71 @@ custom_css = """
 }
 
 /* ============================================================
-   Column group color coding for leaderboard table
-   Soft, harmonious palette with dark/light pairs per group.
-   Applied dynamically via JS based on column header text.
+   Styled HTML leaderboard table
    ============================================================ */
 
-/* Overall (dark amber) */
-#leaderboard-table .col-overall-dark {
-    background-color: rgba(232, 180, 58, 0.30) !important;
+.leaderboard-scroll {
+    overflow-x: auto;
+    width: 100%;
 }
-/* Overall by Category (light amber) */
-#leaderboard-table .col-overall-light {
-    background-color: rgba(242, 200, 90, 0.15) !important;
+
+.leaderboard-html-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
 }
-/* In-Domain Overall (dark green) */
-#leaderboard-table .col-id-dark {
-    background-color: rgba(82, 183, 120, 0.30) !important;
+
+.leaderboard-html-table thead th {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    padding: 10px 14px;
+    text-align: center;
+    font-weight: 600;
+    font-size: 13px;
+    border-bottom: 2px solid #d1d5db;
+    white-space: nowrap;
 }
-/* In-Domain by Category (light green) */
-#leaderboard-table .col-id-light {
-    background-color: rgba(110, 200, 145, 0.15) !important;
+
+.leaderboard-html-table tbody td {
+    padding: 8px 14px;
+    text-align: center;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+/* Model column — left-aligned, wider */
+.leaderboard-html-table th:first-child,
+.leaderboard-html-table td:first-child {
+    text-align: left;
+    min-width: 220px;
+    white-space: nowrap;
+    font-weight: 500;
+}
+
+/* Type column — left-aligned, wider */
+.leaderboard-html-table th:nth-child(2),
+.leaderboard-html-table td:nth-child(2) {
+    text-align: left;
+    min-width: 170px;
+    white-space: nowrap;
+}
+
+/* Row hover */
+.leaderboard-html-table tbody tr:hover td {
+    filter: brightness(0.95);
 }
-/* Out-of-Domain Overall (dark blue) */
-#leaderboard-table .col-ood-dark {
-    background-color: rgba(95, 150, 215, 0.30) !important;
+
+/* Model links: underline + hover color change */
+.leaderboard-html-table td a {
+    color: #2563eb;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    transition: color 0.2s ease;
 }
-/* Out-of-Domain by Category (light blue) */
-#leaderboard-table .col-ood-light {
-    background-color: rgba(125, 175, 228, 0.15) !important;
+.leaderboard-html-table td a:hover {
+    color: #d97706;
 }
 """
 
@@ -151,62 +159,3 @@ get_window_url_params = """
         return url_params;
     }
     """
-
-# JavaScript to dynamically color columns based on header text.
-# Runs on load and re-runs via MutationObserver whenever the table updates.
-COLOR_COLUMNS_JS = """
-function colorLeaderboardColumns() {
-    const table = document.querySelector('#leaderboard-table table');
-    if (!table) return;
-
-    const headers = table.querySelectorAll('thead th');
-    if (!headers.length) return;
-
-    // Map header text -> color class
-    const colorMap = {};
-    headers.forEach((th, idx) => {
-        const text = th.textContent.trim();
-        let cls = '';
-        if (text === 'Overall') {
-            cls = 'col-overall-dark';
-        } else if (text.includes('(All)')) {
-            cls = 'col-overall-light';
-        } else if (text === 'Overall(In-Domain)') {
-            cls = 'col-id-dark';
-        } else if (text.includes('(ID)')) {
-            cls = 'col-id-light';
-        } else if (text === 'Overall(Out-of-Domain)') {
-            cls = 'col-ood-dark';
-        } else if (text.includes('(OOD)')) {
-            cls = 'col-ood-light';
-        }
-        colorMap[idx] = cls;
-
-        // Apply to header cell
-        th.classList.remove('col-overall-dark','col-overall-light','col-id-dark','col-id-light','col-ood-dark','col-ood-light');
-        if (cls) th.classList.add(cls);
-    });
-
-    // Apply to body cells
-    const rows = table.querySelectorAll('tbody tr');
-    rows.forEach(row => {
-        const cells = row.querySelectorAll('td');
-        cells.forEach((td, idx) => {
-            td.classList.remove('col-overall-dark','col-overall-light','col-id-dark','col-id-light','col-ood-dark','col-ood-light');
-            if (colorMap[idx]) td.classList.add(colorMap[idx]);
-        });
-    });
-}
-
-// Run on initial load
-setTimeout(colorLeaderboardColumns, 500);
-
-// Re-run when table changes (column toggle, etc.)
-const observer = new MutationObserver(() => {
-    setTimeout(colorLeaderboardColumns, 100);
-});
-const target = document.querySelector('#leaderboard-table');
-if (target) {
-    observer.observe(target, { childList: true, subtree: true });
-}
-"""