fix-style

app.py

@@ -1,6 +1,5 @@
 import html
 import json
-import re
 from pathlib import Path
 
 import gradio as gr
@@ -132,23 +131,81 @@ def dataframe_height(df: pd.DataFrame):
     return max(320, min(1200, height))
 
 
-def create_gr_dataframe(value, **kwargs):
-    dataframe_ctor = getattr(gr, "DataFrame", None) or getattr(gr, "Dataframe")
-    remaining_kwargs = dict(kwargs)
-
-    for _ in range(20):
-        try:
-            return dataframe_ctor(value, **remaining_kwargs)
-        except TypeError as e:
-            match = re.search(r"unexpected keyword argument '([^']+)'", str(e))
-            if match is None:
-                raise
-            bad_key = match.group(1)
-            if bad_key not in remaining_kwargs:
-                raise
-            remaining_kwargs.pop(bad_key)
+def create_grouped_score_table_html(df: pd.DataFrame):
+    if df is None or df.empty:
+        return '<div class="score-table-scroll"><table class="score-table"></table></div>'
+
+    fixed_cols = [c for c in ("ID", "Model") if c in df.columns]
+
+    group_to_cols = {}
+    group_order = []
+    data_cols_in_order = []
+
+    for col in df.columns:
+        if col in fixed_cols:
+            continue
+        if isinstance(col, str) and "\n" in col:
+            group, metric = col.split("\n", 1)
+        else:
+            group, metric = str(col), str(col)
+
+        if group not in group_to_cols:
+            group_to_cols[group] = []
+            group_order.append(group)
+
+        group_to_cols[group].append((metric, col))
+        data_cols_in_order.append(col)
+
+    parts = ['<div class="score-table-scroll"><table class="score-table">']
+
+    parts.append("<colgroup>")
+    if len(fixed_cols) >= 1:
+        parts.append('<col style="width:40px">')
+    if len(fixed_cols) >= 2:
+        parts.append('<col style="width:200px">')
+    for _ in range(len(data_cols_in_order)):
+        parts.append('<col style="width:180px">')
+    parts.append("</colgroup>")
+
+    parts.append("<thead>")
+
+    parts.append("<tr>")
+    for col in fixed_cols:
+        parts.append(f'<th rowspan="2"><div class="score-cell">{html.escape(str(col))}</div></th>')
+    merged_groups = set()
+    for group in group_order:
+        metrics = group_to_cols[group]
+        if len(metrics) == 1 and str(metrics[0][0]) == str(group):
+            merged_groups.add(group)
+            parts.append(f'<th rowspan="2"><div class="score-cell">{html.escape(str(group))}</div></th>')
+        else:
+            parts.append(
+                f'<th colspan="{len(metrics)}"><div class="score-cell">{html.escape(str(group))}</div></th>'
+            )
+    parts.append("</tr>")
+
+    parts.append("<tr>")
+    for group in group_order:
+        if group in merged_groups:
+            continue
+        for metric, _ in group_to_cols[group]:
+            parts.append(f"<th><div class=\"score-cell\">{html.escape(str(metric))}</div></th>")
+    parts.append("</tr>")
+
+    parts.append("</thead>")
+    parts.append("<tbody>")
+
+    col_indices = [df.columns.get_loc(c) for c in (fixed_cols + data_cols_in_order)]
+    for row in df.itertuples(index=False, name=None):
+        parts.append("<tr>")
+        for idx in col_indices:
+            value = row[idx]
+            text = "" if pd.isna(value) else str(value)
+            parts.append(f"<td><div class=\"score-cell\">{html.escape(text)}</div></td>")
+        parts.append("</tr>")
 
-    return dataframe_ctor(value, **remaining_kwargs)
+    parts.append("</tbody></table></div>")
+    return "".join(parts)
 
 
 def create_raw_score_df():
@@ -265,34 +322,21 @@ RAW_SCORE_DF = create_raw_score_df()
 UNWEIGHTED_Z_DF = create_unweighted_z_score_df()
 WEIGHTED_Z_DF = create_weighted_z_score_df()
 
-RAW_SCORE_COLUMN_WIDTHS = [40, 220] + [180] * (len(RAW_SCORE_DF.columns) - 2)
-UNWEIGHTED_Z_COLUMN_WIDTHS = [40, 220] + [180] * (len(UNWEIGHTED_Z_DF.columns) - 2)
-WEIGHTED_Z_COLUMN_WIDTHS = [40, 220] + [180] * (len(WEIGHTED_Z_DF.columns) - 2)
-
-DATAFRAME_HEIGHT_CSS = f"""
-#raw-score-table .table-wrap,
-#raw-score-table .wrap,
-#raw-score-table .wrap-inner {{
+SCORE_TABLE_HEIGHT_CSS = f"""
+#raw-score-table .score-table-scroll {{
     max-height: {dataframe_height(RAW_SCORE_DF)}px;
-    overflow-y: auto;
 }}
 
-#unweighted-z-table .table-wrap,
-#unweighted-z-table .wrap,
-#unweighted-z-table .wrap-inner {{
+#unweighted-z-table .score-table-scroll {{
     max-height: {dataframe_height(UNWEIGHTED_Z_DF)}px;
-    overflow-y: auto;
 }}
 
-#weighted-z-table .table-wrap,
-#weighted-z-table .wrap,
-#weighted-z-table .wrap-inner {{
+#weighted-z-table .score-table-scroll {{
     max-height: {dataframe_height(WEIGHTED_Z_DF)}px;
-    overflow-y: auto;
 }}
 """
 
-demo = gr.Blocks(css=custom_css + DATAFRAME_HEIGHT_CSS)
+demo = gr.Blocks(css=custom_css + SCORE_TABLE_HEIGHT_CSS)
 
 
 with demo:
@@ -304,34 +348,13 @@ with demo:
         with gr.TabItem("Result", elem_id="result-tab", id=0):
             with gr.Tabs(elem_classes="tab-buttons") as nested_tabs:
                 with gr.TabItem("Raw Score"):
-                    create_gr_dataframe(
-                        RAW_SCORE_DF,
-                        wrap=True,
-                        column_widths=RAW_SCORE_COLUMN_WIDTHS,
-                        row_count=(len(RAW_SCORE_DF), "fixed"),
-                        height=dataframe_height(RAW_SCORE_DF),
-                        elem_id="raw-score-table",
-                    )
+                    gr.HTML(create_grouped_score_table_html(RAW_SCORE_DF), elem_id="raw-score-table")
                 with gr.TabItem("Weights"):
                     gr.HTML(create_weights_table_html(), elem_id="weights-table")
                 with gr.TabItem("Unweighted Z-score"):
-                    create_gr_dataframe(
-                        UNWEIGHTED_Z_DF,
-                        wrap=True,
-                        column_widths=UNWEIGHTED_Z_COLUMN_WIDTHS,
-                        row_count=(len(UNWEIGHTED_Z_DF), "fixed"),
-                        height=dataframe_height(UNWEIGHTED_Z_DF),
-                        elem_id="unweighted-z-table",
-                    )
+                    gr.HTML(create_grouped_score_table_html(UNWEIGHTED_Z_DF), elem_id="unweighted-z-table")
                 with gr.TabItem("Weighted Z-score"):
-                    create_gr_dataframe(
-                        WEIGHTED_Z_DF,
-                        wrap=True,
-                        column_widths=WEIGHTED_Z_COLUMN_WIDTHS,
-                        row_count=(len(WEIGHTED_Z_DF), "fixed"),
-                        height=dataframe_height(WEIGHTED_Z_DF),
-                        elem_id="weighted-z-table",
-                    )
+                    gr.HTML(create_grouped_score_table_html(WEIGHTED_Z_DF), elem_id="weighted-z-table")
 
         with gr.TabItem("About", elem_id="llm-benchmark-tab-table", id=2):
             gr.Markdown(LLM_BENCHMARKS_TEXT, elem_classes="markdown-text")

src/display/css_html_js.py

@@ -132,6 +132,42 @@ custom_css = """
     white-space: nowrap;
 }
 
+.score-table-scroll {
+    overflow: auto;
+    max-width: 100%;
+}
+
+.score-table {
+    border-collapse: collapse;
+    width: max-content;
+    table-layout: fixed;
+}
+
+.score-table th,
+.score-table td {
+    border: 1px solid rgba(0,0,0,0.08);
+    padding: 8px 10px;
+    vertical-align: middle;
+    box-sizing: border-box;
+}
+
+.score-cell {
+    display: block;
+    margin: 0;
+}
+
+.score-table thead th {
+    font-weight: 600;
+    background: rgba(0,0,0,0.02);
+    text-align: center;
+}
+
+.score-table thead .score-cell {
+    white-space: normal;
+    overflow-wrap: break-word;
+    word-break: normal;
+}
+
 #weights-table {
     overflow-x: auto !important;
     max-width: 100%;