💄 Adapted displaying options in the leaderboard and color scheme

frontend/layout.py

@@ -20,7 +20,40 @@ def create_leaderboard_tab(refresh_callback: Callable = None) -> gr.TabItem:
     """Create the leaderboard tab layout"""
 
     with gr.TabItem("Leaderboard", elem_id="leaderboard-tab", id=0) as tab:
-        def apply_filters(search):
+
+        def get_default_columns(df: pd.DataFrame) -> list:
+            """
+            Get the list of columns that should be visible by default.
+
+            Visible by default:
+            - Rank, Type, Model, Organization, Publication
+            - Avg. AUC, Avg. ΔAUC-PR
+            - All ROC-AUC columns
+            - All ΔAUC-PR columns
+            - # Parameters
+
+            Hidden by default:
+            - Model Description, Publication Link, HF_Space_Tag
+            - Pretrained, Pretraining Data, Zero-shot, Few-shot, N-shot
+            - Date Added
+            """
+            default_visible = []
+
+            for col in df.columns:
+                col_group = col[0] if isinstance(col, tuple) else ""
+                col_name = col[1] if isinstance(col, tuple) else col
+
+                # Always show these columns
+                if col_name in ["Rank", "Type", "Model", "Organization", "Publication",
+                               "Avg. AUC", "Avg. ΔAUC-PR", "# Parameters"]:
+                    default_visible.append(col)
+                # Show all ROC-AUC and ΔAUC-PR task columns
+                elif col_group in ["ROC-AUC", "ΔAUC-PR"]:
+                    default_visible.append(col)
+
+            return default_visible
+
+        def apply_filters(search, type_filter, min_auc, selected_columns):
             new_data = (
                 refresh_callback().reset_index(drop=True)
                 if refresh_callback
@@ -40,22 +73,37 @@ def create_leaderboard_tab(refresh_callback: Callable = None) -> gr.TabItem:
                 else:
                     ranks.append(str(i))
             new_data.insert(0, ("", "Rank"), ranks)
-                
+
             filtered = new_data.copy()
 
-            if search:
+            # Search filter: search across Model, Organization, and Publication
+            if search and search.strip():
                 search = search.lower()
-                filtered = filtered[filtered[("", "Model")].str.lower().str.contains(search)]
+                mask = (
+                    filtered[("", "Model")].astype(str).str.lower().str.contains(search, na=False) |
+                    filtered[("", "Organization")].astype(str).str.lower().str.contains(search, na=False) |
+                    filtered[("", "Publication")].astype(str).str.lower().str.contains(search, na=False)
+                )
+                filtered = filtered[mask]
+
+            # Type filter
+            if type_filter and len(type_filter) > 0:
+                filtered = filtered[filtered[("", "Type")].isin(type_filter)]
+
+            # Min AUC filter
+            if min_auc and min_auc > 0:
+                filtered = filtered[filtered[("", "Avg. AUC")] >= min_auc]
 
-            # if few_shot is not None:
-            #     filtered = filtered[filtered["Few-shot (y/n)"] == few_shot]
+            return make_html_table(filtered, selected_columns)
 
-            # if zero_shot is not None:
-            #     filtered = filtered[filtered["Zero-shot (y/n)"] == zero_shot]
+        def make_html_table(df: pd.DataFrame, selected_columns=None) -> str:
+            # If no column selection provided, show default columns
+            if selected_columns is None:
+                selected_columns = get_default_columns(df)
+
+            # Always hide these columns (used for links and tooltips)
+            always_hidden = [("", "HF_Space_Tag"), ("", "Publication Link"), ("", "Model Description")]
 
-            return make_html_table(filtered)
-        
-        def make_html_table(df: pd.DataFrame) -> str:
             html = "<div class='leaderboard-container'><table class='leaderboard-table sortable-table'>"
 
             if isinstance(df.columns, pd.MultiIndex):
@@ -68,9 +116,13 @@ def create_leaderboard_tab(refresh_callback: Callable = None) -> gr.TabItem:
                 col_idx = 0
 
                 for i, (top, sub) in enumerate(df.columns):
-                    # Skip hidden columns (including Model Description)
-                    if (top, sub) in [("", "HF_Space_Tag"), ("", "Publication Link"), ("", "Model Description")]:
+                    # Skip always-hidden columns
+                    if (top, sub) in always_hidden:
+                        continue
+                    # Skip columns not in selected_columns
+                    if (top, sub) not in selected_columns:
                         continue
+
                     # Handle blank top headers directly (span both rows)
                     if top == "" or top is None:
                         # close any previous group first
@@ -101,8 +153,11 @@ def create_leaderboard_tab(refresh_callback: Callable = None) -> gr.TabItem:
                 html += "<tr>"
                 # col_idx continues from first row
                 for top, sub in df.columns:
-                    # Skip hidden columns (including Model Description)
-                    if (top, sub) in [("", "HF_Space_Tag"), ("", "Publication Link"), ("", "Model Description")]:
+                    # Skip always-hidden columns
+                    if (top, sub) in always_hidden:
+                        continue
+                    # Skip columns not in selected_columns
+                    if (top, sub) not in selected_columns:
                         continue
                     if top not in ("", None):
                         html += f"<th class='sortable-header' data-column='{col_idx}' onclick='sortTable({col_idx})'>{sub} <span class='sort-indicator'></span></th>"
@@ -114,7 +169,7 @@ def create_leaderboard_tab(refresh_callback: Callable = None) -> gr.TabItem:
                 html += "<thead><tr>"
                 col_idx = 0
                 for col in df.columns:
-                    if col not in [("", "HF_Space_Tag"), ("", "Publication Link"), ("", "Model Description")]:
+                    if col not in always_hidden and col in selected_columns:
                         html += f"<th class='sortable-header' data-column='{col_idx}' onclick='sortTable({col_idx})'>{col} <span class='sort-indicator'></span></th>"
                         col_idx += 1
                 html += "</tr></thead>"
@@ -136,8 +191,11 @@ def create_leaderboard_tab(refresh_callback: Callable = None) -> gr.TabItem:
                 # Second pass: render cells
                 html += "<tr>"
                 for col, val in zip(df.columns, row):
-                    # Skip hidden columns (now including Model Description)
-                    if col in [("", "HF_Space_Tag"), ("", "Publication Link"), ("", "Model Description")]:
+                    # Skip always-hidden columns
+                    if col in always_hidden:
+                        continue
+                    # Skip columns not in selected_columns
+                    if col not in selected_columns:
                         continue
 
                     # Determine CSS class based on column type
@@ -172,7 +230,7 @@ def create_leaderboard_tab(refresh_callback: Callable = None) -> gr.TabItem:
                         tag_str = str(hf_space_tag).strip().lower()
                         if hf_space_tag and tag_str and tag_str not in ['none', 'nan', '', '.']:
                             # Put title on the link itself, not the td
-                            html += f"<td class='{css_class}'><a href='https://huggingface.co/spaces/{hf_space_tag}' target='_blank' style='color: #20C2D9; text-decoration: none;'{title_attr}>{val}</a></td>"
+                            html += f"<td class='{css_class}'><a href='https://huggingface.co/spaces/{hf_space_tag}/blob/main/README.md' target='_blank' style='color: #20C2D9; text-decoration: none;'{title_attr}>{val}</a></td>"
                         else:
                             html += f"<td class='{css_class}'{title_attr}>{val}</td>"
 
@@ -382,27 +440,95 @@ def create_leaderboard_tab(refresh_callback: Callable = None) -> gr.TabItem:
         result_data.insert(0, ("", "Rank"), ranks)
 
         # result_data.columns = result_data.columns.map(str)
-        # Leaderboard at full width
-        search = gr.Textbox(show_label=False, placeholder="Search by model name…", elem_id="leaderboard-search", container=False, max_lines=1, type="text")
 
-        # with gr.Accordion("Advanced Filters", open=False):
-        #     with gr.Row():
-        #         few_shot = gr.Dropdown([True, False, ""], label="Few-shot?")
-        #         zero_shot = gr.Dropdown([True, False, ""], label="Zero-shot?")
+        # Search bar
+        search = gr.Textbox(
+            show_label=False,
+            placeholder="Search by model, organization, or publication…",
+            elem_id="leaderboard-search",
+            container=False,
+            max_lines=1,
+            type="text"
+        )
+
+        # Filters in an accordion
+        with gr.Accordion("Filters & Column Selection", open=False):
+            with gr.Row():
+                # Type filter (multi-select checkboxes)
+                type_filter = gr.CheckboxGroup(
+                    choices=["0️⃣", "1️⃣", "⤵️", "🔼"],
+                    label="Model Type",
+                    value=["0️⃣", "1️⃣", "⤵️", "🔼"],  # All selected by default
+                    interactive=True
+                )
+
+                # Min AUC filter
+                min_auc = gr.Number(
+                    label="Minimum Avg. AUC",
+                    value=0,
+                    minimum=0,
+                    maximum=1,
+                    step=0.01
+                )
+
+            # Column selection dropdown
+            # Get all column names for the dropdown
+            all_columns = [col for col in result_data.columns
+                          if col not in [("", "HF_Space_Tag"), ("", "Publication Link"), ("", "Model Description")]]
+            default_columns = get_default_columns(result_data)
+
+            # Format column names for display
+            column_choices = []
+            column_values = []
+            for col in all_columns:
+                if isinstance(col, tuple):
+                    display_name = f"{col[0]} - {col[1]}" if col[0] else col[1]
+                else:
+                    display_name = str(col)
+                column_choices.append(display_name)
+                column_values.append(col)
+
+            # Create mapping from display name to actual column
+            column_display_to_actual = dict(zip(column_choices, column_values))
+            default_display_names = [
+                display_name for display_name, col in column_display_to_actual.items()
+                if col in default_columns
+            ]
+
+            column_selector = gr.CheckboxGroup(
+                choices=column_choices,
+                value=default_display_names,
+                label="Select Columns to Display",
+                interactive=True
+            )
 
         # Refresh button
         refresh_btn = gr.Button(
             "↻", variant="secondary", size="lg", elem_classes=["refresh-button"]
         )
 
-        # table = gr.Dataframe(result_data, 
-        #                      column_widths=column_widths, 
+        # table = gr.Dataframe(result_data,
+        #                      column_widths=column_widths,
         #                      elem_classes=["leaderboard-table"],
         #                      interactive=False,
         # )
         table = gr.HTML(make_html_table(result_data))
 
-        refresh_btn.click(apply_filters, [search], table)
+        # Wire up the filter components
+        def apply_filters_wrapper(search, type_filter, min_auc, selected_display_names):
+            # Convert display names back to actual column tuples
+            selected_columns = [column_display_to_actual[name] for name in selected_display_names]
+            return apply_filters(search, type_filter, min_auc, selected_columns)
+
+        # Connect all inputs to apply_filters
+        for component in [search, type_filter, min_auc, column_selector]:
+            component.change(
+                fn=apply_filters_wrapper,
+                inputs=[search, type_filter, min_auc, column_selector],
+                outputs=table
+            )
+
+        refresh_btn.click(apply_filters_wrapper, [search, type_filter, min_auc, column_selector], table)
 
         # Connect refresh button
         def refresh_data():
@@ -714,7 +840,19 @@ function() {
 }
 """
 
-    with gr.Blocks(css=css, js=js, title="Tox21 Leaderboard") as app:
+    # Create custom theme with cyan accent color
+    theme = gr.themes.Default(
+        primary_hue="cyan",
+        secondary_hue="cyan",
+    ).set(
+        checkbox_background_color_selected="#20C2D9",
+        checkbox_border_color="#20C2D9",
+        checkbox_border_color_focus="#20C2D9",
+        checkbox_border_color_hover="#20C2D9",
+        radio_circle="#20C2D9",
+    )
+
+    with gr.Blocks(css=css, js=js, title="Tox21 Leaderboard", theme=theme) as app:
         # Tab container
         with gr.Tabs(elem_classes="tab-nav") as tabs:
 

frontend/leaderboard.py

@@ -78,10 +78,11 @@ def format_leaderboard_data(raw_data: dict) -> pd.DataFrame:
             ("", "Model Description"): config["model_description"],
             ("", "Avg. AUC"): results["overall_score"]["roc_auc"],
             ("", "Avg. ΔAUC-PR"): results["overall_score"].get("delta_auprc"),
+            ("", "# Parameters"): config.get("model_size", ""),  # Moved here after Avg. ΔAUC-PR
         }
         print(results["overall_score"])
 
-        # === Insert task columns immediately after ΔAUC-PR ===
+        # === Insert task columns immediately after # Parameters ===
         for task_key, task_result in results.items():
             if task_key != "overall_score":
                 row[("ROC-AUC", task_key)] = task_result.get("roc_auc", "")
@@ -93,7 +94,6 @@ def format_leaderboard_data(raw_data: dict) -> pd.DataFrame:
         # === Then continue with the rest of the metadata columns ===
 
         row.update({
-            ("", "# Parameters"): config.get("model_size", ""),
             ("", "Pretrained"): pretrained,
             ("", "Pretraining Data"): config.get("pretraining_data", ""),
             ("", "Zero-shot"): zero_shot,

frontend/styles.css

@@ -46,24 +46,24 @@ body, .gradio-container {
 }
 
 a {
-  color: darkorange;
-  text-decoration: underline;
+  color: #20C2D9;
+  text-decoration: none;
 }
 
 /* Visited link */
 a:visited {
-  color: #cc7000; /* slightly darker orange (optional) */
+  color: #20C2D9;
 }
 
 /* Hover */
 a:hover {
-  color: #ff8c00;
-  text-decoration: underline;
+  color: #20C2D9;
+  text-decoration: none;
 }
 
 /* Active (when clicked) */
 a:active {
-  color: #c05a00;
+  color: #20C2D9;
 }
 
 
@@ -76,6 +76,15 @@ a:active {
   --text-color: black;
   --scroll-thumb: #cbd5e1;
   --scroll-thumb-hover: #7E848C;
+
+  /* Override Gradio's theme colors for checkboxes and radio buttons */
+  --checkbox-border-color: #20C2D9;
+  --checkbox-border-color-focus: #20C2D9;
+  --checkbox-border-color-hover: #20C2D9;
+  --checkbox-background-color-selected: #20C2D9;
+  --radio-circle: #20C2D9;
+  --color-accent: #20C2D9;
+  --color-accent-soft: #20C2D9;
 }
 
 .dark {
@@ -218,16 +227,16 @@ a:active {
 
 /* Prettier search bar */
 #leaderboard-search {
-  width: 60% !important;
+  width: 100% !important;
   min-width: 320px;
-  padding: 6px 8px 6px 8px !important;
+  padding: 10px 14px !important;
   font-size: 16px !important;
-  border-radius: 30px !important;
-  border: 1.5px solid #d1d5db !important;
+  border-radius: 8px !important;
+  border: 1px solid #d1d5db !important;
   background-repeat: no-repeat;
   background-position: 14px center;
   background-size: 18px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+  box-shadow: none;
   display: block !important;
   margin: 6px auto 6px auto !important;
   transition: all 0.2s ease;
@@ -235,7 +244,7 @@ a:active {
 
 #leaderboard-search:focus {
   border-color: #6366f1 !important;
-  box-shadow: 0 0 0 4px rgba(99,102,241,0.2) !important;
+  box-shadow: 0 0 0 2px rgba(99,102,241,0.1) !important;
   outline: none !important;
 }
 
@@ -402,7 +411,7 @@ a:active {
 
 /* === Checkbox input itself === */
 .form-container-checkbox input[type="checkbox"] {
-  accent-color: #3b82f6;
+  accent-color: #20C2D9;
   transform: scale(1.1);
   margin-left: 4px;
   cursor: pointer;
@@ -427,6 +436,53 @@ a:active {
   border: none !important;
 }
 
+/* === Radio button input itself === */
+.form-container-radio input[type="radio"] {
+  accent-color: #20C2D9;
+  transform: scale(1.1);
+  cursor: pointer;
+}
+
+/* === Global styles for all checkboxes and radio buttons === */
+input[type="checkbox"],
+input[type="radio"] {
+  accent-color: #20C2D9 !important;
+}
+
+/* === Gradio-specific checkbox and radio button overrides === */
+.gradio-container input[type="checkbox"],
+.gradio-container input[type="radio"],
+label input[type="checkbox"],
+label input[type="radio"],
+.gr-checkbox input[type="checkbox"],
+.gr-radio input[type="radio"],
+.gr-check-radio input[type="checkbox"],
+.gr-check-radio input[type="radio"] {
+  accent-color: #20C2D9 !important;
+}
+
+/* Additional Gradio 5.x specific selectors */
+.svelte-1gfkn6j input[type="checkbox"],
+.svelte-1gfkn6j input[type="radio"],
+input[type="checkbox"]:checked,
+input[type="radio"]:checked {
+  accent-color: #20C2D9 !important;
+  border-color: #20C2D9 !important;
+  background-color: #20C2D9 !important;
+}
+
+/* Override any Gradio checkbox/radio SVG or background */
+input[type="checkbox"]::before,
+input[type="radio"]::before {
+  background-color: #20C2D9 !important;
+}
+
+/* Target Gradio's custom checkbox/radio wrapper */
+.wrap input[type="checkbox"],
+.wrap input[type="radio"] {
+  accent-color: #20C2D9 !important;
+}
+