Use gradio-leaderboard component for clickable author links

app.py

@@ -1,6 +1,7 @@
 import gradio as gr
 import pandas as pd
 import os
+from gradio_leaderboard import Leaderboard, ColumnFilter, SelectColumns
 
 # Load data from CSV files
 DATA_DIR = "data"
@@ -40,39 +41,6 @@ def filter_and_search(df, search, datasets, models, organizations, columns):
     return filtered
 
 
-def df_to_html(df):
-    """Convert DataFrame to HTML table with clickable links in First Author column"""
-    if df.empty:
-        return "<p>No data to display</p>"
-
-    html = '<table class="dataframe">\n<thead>\n<tr>'
-
-    # Add headers
-    for col in df.columns:
-        if col != "Author Link":  # Skip Author Link column in display
-            html += f'<th>{col}</th>'
-    html += '</tr>\n</thead>\n<tbody>\n'
-
-    # Add rows
-    for _, row in df.iterrows():
-        html += '<tr>'
-        for col in df.columns:
-            if col != "Author Link":  # Skip Author Link column in display
-                if col == "First Author" and "Author Link" in df.columns:
-                    # Create clickable link for First Author
-                    author_link = row["Author Link"]
-                    if pd.notna(author_link) and author_link.strip():
-                        html += f'<td><a href="{author_link}" target="_blank">{row[col]}</a></td>'
-                    else:
-                        html += f'<td>{row[col]}</td>'
-                else:
-                    html += f'<td>{row[col]}</td>'
-        html += '</tr>\n'
-
-    html += '</tbody>\n</table>'
-    return html
-
-
 def build_tab(df, name):
     """Build a leaderboard tab from a DataFrame"""
     if df.empty:
@@ -94,7 +62,13 @@ def build_tab(df, name):
                 first_author = model_org_data["First Author"].values[0]
                 author_link = model_org_data["Author Link"].values[0]
 
-                row = {"Model": model, "Organization": org, "First Author": first_author, "Author Link": author_link}
+                # Format as markdown link if author_link exists
+                if pd.notna(author_link) and author_link.strip():
+                    author_display = f"[{first_author}]({author_link})"
+                else:
+                    author_display = first_author
+
+                row = {"Model": model, "Organization": org, "First Author": author_display}
                 for dataset in datasets:
                     dataset_data = model_org_data[model_org_data["Dataset"] == dataset]
                     if not dataset_data.empty:
@@ -117,9 +91,6 @@ def build_tab(df, name):
 
     all_cols = ["Model", "Organization", "First Author"] + metric_combo_cols
 
-    # Keep Author Link for internal use but don't show in column selector
-    display_cols_for_selector = [col for col in all_cols if col != "Author Link"]
-
     with gr.TabItem(name, elem_id="llm-benchmark-tab-table"):
         with gr.Row():
             with gr.Column(scale=4):
@@ -130,15 +101,17 @@ def build_tab(df, name):
                 )
 
                 col_selector = gr.CheckboxGroup(
-                    choices=display_cols_for_selector,
-                    value=display_cols_for_selector,
+                    choices=all_cols,
+                    value=all_cols,
                     label="Select Columns to Display:",
                     elem_classes="column-select"
                 )
 
-                table = gr.HTML(
-                    value=df_to_html(pivoted_df),
-                    elem_id="leaderboard-table"
+                table = Leaderboard(
+                    value=pivoted_df,
+                    elem_id="leaderboard-table",
+                    interactive=False,
+                    select_columns=False
                 )
 
             with gr.Column(scale=1):
@@ -171,13 +144,10 @@ def build_tab(df, name):
                 filtered = filtered[filtered["Organization"].isin(org)]
 
             if cols:
-                # Always include "Author Link" for rendering, even if not in selection
                 display_cols = [col for col in cols if col in filtered.columns]
-                if "First Author" in display_cols and "Author Link" in filtered.columns:
-                    display_cols.append("Author Link")
                 filtered = filtered[display_cols]
 
-            return df_to_html(filtered)
+            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)
@@ -192,39 +162,29 @@ custom_css = """
 
 #leaderboard-table {
     margin-top: 15px;
-    max-height: 600px;
-    overflow-y: auto;
-    overflow-x: auto;
 }
 
-#leaderboard-table table.dataframe {
+#leaderboard-table table {
     width: 100%;
-    border-collapse: collapse;
     table-layout: auto;
 }
 
-#leaderboard-table table.dataframe thead th {
+#leaderboard-table thead th {
     font-weight: bold;
     text-align: center;
     padding: 12px 8px;
     white-space: normal;
     word-wrap: break-word;
-    border-bottom: 2px solid #ddd;
 }
 
-#leaderboard-table table.dataframe tbody td {
+#leaderboard-table tbody td {
     text-align: center;
     padding: 10px 8px;
     white-space: nowrap;
-    border-bottom: 1px solid #eee;
-}
-
-#leaderboard-table table.dataframe tbody tr:hover {
-    background-color: #f5f5f5;
 }
 
-#leaderboard-table table.dataframe tbody td:first-child,
-#leaderboard-table table.dataframe thead th:first-child {
+#leaderboard-table tbody td:first-child,
+#leaderboard-table thead th:first-child {
     text-align: left;
     font-weight: 500;
     min-width: 120px;
@@ -232,14 +192,14 @@ custom_css = """
     white-space: nowrap;
 }
 
-#leaderboard-table table.dataframe tbody td:nth-child(2),
-#leaderboard-table table.dataframe thead th:nth-child(2) {
+#leaderboard-table tbody td:nth-child(2),
+#leaderboard-table thead th:nth-child(2) {
     text-align: left;
     min-width: 100px;
 }
 
-#leaderboard-table table.dataframe tbody td:nth-child(3),
-#leaderboard-table table.dataframe thead th:nth-child(3) {
+#leaderboard-table tbody td:nth-child(3),
+#leaderboard-table thead th:nth-child(3) {
     text-align: left;
     min-width: 120px;
 }
@@ -252,7 +212,6 @@ custom_css = """
 
 #leaderboard-table a:hover {
     text-decoration: underline;
-    color: #004499;
 }
 
 #search-bar {

requirements.txt

@@ -1,2 +1,3 @@
 gradio>=4.0.0
 pandas>=2.0.0
+gradio-leaderboard