Refactor pages and improve tooltips! (#13)

c_and_e.py

@@ -1,81 +1,10 @@
 import gradio as gr
-import pandas as pd
-
-# Import our UI factories and the data loader
-from ui_components import create_leaderboard_display, create_benchmark_details_display, get_full_leaderboard_data,create_sub_navigation_bar
 from content import CODE_EXECUTION_DESCRIPTION
+from category_page_builder import build_category_page
+
 # Define the category for this page
 CATEGORY_NAME = "Code Execution"
 
 with gr.Blocks() as demo:
     gr.Markdown(f"## Astabench {CATEGORY_NAME} Leaderboard")
-    validation_df, validation_tag_map = get_full_leaderboard_data("validation")
-    test_df, test_tag_map = get_full_leaderboard_data("test")
-    gr.Markdown(CODE_EXECUTION_DESCRIPTION, elem_id="category-intro")
-    with gr.Column(elem_id="validation_nav_container", visible=False) as validation_nav_container:
-        create_sub_navigation_bar(validation_tag_map, CATEGORY_NAME)
-    with gr.Column(elem_id="test_nav_container", visible=True) as test_nav_container:
-        create_sub_navigation_bar(test_tag_map, CATEGORY_NAME)
-
-
-    # --- This page now has two main sections: Validation and Test ---
-    with gr.Tabs():
-        with gr.Tab("Results: Test Set") as test_tab:
-            # Repeat the process for the "test" split
-            test_df, test_tag_map = get_full_leaderboard_data("test")
-
-            if not test_df.empty:
-                create_leaderboard_display(
-                    full_df=test_df,
-                    tag_map=test_tag_map,
-                    category_name=CATEGORY_NAME,
-                    split_name="test"
-                )
-                create_benchmark_details_display(
-                    full_df=test_df,
-                    tag_map=test_tag_map,
-                    category_name=CATEGORY_NAME
-                )
-            else:
-                gr.Markdown("No data available for test split.")
-        with gr.Tab("Results: Validation Set") as validation_tab:
-            # 1. Load all necessary data for the "validation" split ONCE.
-            validation_df, validation_tag_map = get_full_leaderboard_data("validation")
-
-            if not validation_df.empty:
-                # 2. Render the main category display using the loaded data.
-                create_leaderboard_display(
-                    full_df=validation_df,
-                    tag_map=validation_tag_map,
-                    category_name=CATEGORY_NAME,
-                    split_name="validation"
-                )
-
-                # 3. Render the detailed breakdown for each benchmark in the category.
-                create_benchmark_details_display(
-                    full_df=validation_df,
-                    tag_map=validation_tag_map,
-                    category_name=CATEGORY_NAME
-                )
-            else:
-                gr.Markdown("No data available for validation split.")
-
-    show_validation_js = """
-    () => {
-        document.getElementById('validation_nav_container').style.display = 'block';
-        document.getElementById('test_nav_container').style.display = 'none';
-        setTimeout(() => { window.dispatchEvent(new Event('resize')) }, 0);
-    }
-    """
-
-    # JavaScript to show the TEST nav, hide the VALIDATION nav, AND fix the plots.
-    show_test_js = """
-    () => {
-        document.getElementById('validation_nav_container').style.display = 'none';
-        document.getElementById('test_nav_container').style.display = 'block';
-    }
-    """
-
-    # Assign the pure JS functions to the select events. No Python `fn` is needed.
-    validation_tab.select(fn=None, inputs=None, outputs=None, js=show_validation_js)
-    test_tab.select(fn=None, inputs=None, outputs=None, js=show_test_js)
+    build_category_page(CATEGORY_NAME, CODE_EXECUTION_DESCRIPTION)

category_page_builder.py

@@ -0,0 +1,80 @@
+import gradio as gr
+import pandas as pd
+
+# Import our UI factories and the data loader
+from ui_components import create_leaderboard_display, create_benchmark_details_display, get_full_leaderboard_data, create_sub_navigation_bar
+
+def build_category_page(CATEGORY_NAME, PAGE_DESCRIPTION):
+    validation_df, validation_tag_map = get_full_leaderboard_data("validation")
+    test_df, test_tag_map = get_full_leaderboard_data("test")
+    gr.Markdown(PAGE_DESCRIPTION, elem_id="category-intro")
+    with gr.Column(elem_id="validation_nav_container", visible=False) as validation_nav_container:
+        create_sub_navigation_bar(validation_tag_map, CATEGORY_NAME)
+
+    with gr.Column(elem_id="test_nav_container", visible=True) as test_nav_container:
+        create_sub_navigation_bar(test_tag_map, CATEGORY_NAME)
+
+    # --- This page now has two main sections: Validation and Test ---
+    with gr.Tabs():
+        with gr.Tab("Results: Test Set") as test_tab:
+            # Repeat the process for the "test" split
+            test_df, test_tag_map = get_full_leaderboard_data("test")
+
+            if not test_df.empty:
+                create_leaderboard_display(
+                    full_df=test_df,
+                    tag_map=test_tag_map,
+                    category_name=CATEGORY_NAME,
+                    split_name="test"
+                )
+                create_benchmark_details_display(
+                    full_df=test_df,
+                    tag_map=test_tag_map,
+                    category_name=CATEGORY_NAME
+                )
+            else:
+                gr.Markdown("No data available for test split.")
+        with gr.Tab("Results: Validation Set") as validation_tab:
+            # 1. Load all necessary data for the "validation" split ONCE.
+            validation_df, validation_tag_map = get_full_leaderboard_data("validation")
+
+            if not validation_df.empty:
+                # 2. Render the main category display using the loaded data.
+                create_leaderboard_display(
+                    full_df=validation_df,
+                    tag_map=validation_tag_map,
+                    category_name=CATEGORY_NAME,
+                    split_name="validation"
+                )
+
+                # 3. Render the detailed breakdown for each benchmark in the category.
+                create_benchmark_details_display(
+                    full_df=validation_df,
+                    tag_map=validation_tag_map,
+                    category_name=CATEGORY_NAME
+                )
+            else:
+                gr.Markdown("No data available for validation split.")
+
+
+    show_validation_js = """
+        () => {
+            document.getElementById('validation_nav_container').style.display = 'block';
+            document.getElementById('test_nav_container').style.display = 'none';
+            setTimeout(() => { window.dispatchEvent(new Event('resize')) }, 0);
+        }
+        """
+
+    # JavaScript to show the TEST nav, hide the VALIDATION nav, AND fix the plots.
+    show_test_js = """
+        () => {
+            document.getElementById('validation_nav_container').style.display = 'none';
+            document.getElementById('test_nav_container').style.display = 'block';
+        }
+        """
+
+    # Assign the pure JS functions to the select events. No Python `fn` is needed.
+    validation_tab.select(fn=None, inputs=None, outputs=None, js=show_validation_js)
+    test_tab.select(fn=None, inputs=None, outputs=None, js=show_test_js)
+
+    return validation_nav_container, test_nav_container

content.py

@@ -305,17 +305,21 @@ html:not(.dark) #legend-markdown .light-mode-icon,
     content: attr(data-tooltip);
     position: absolute;
     bottom: 125%;
-    background-color: #333;
+    background-color: #105257;
     color: #fff;
-    padding: 12px 16px;
+    padding: 0px 10px 10px;
     border-radius: 4px;
     font-size: 12px;
     opacity: 0;
     transition: opacity 0.2s;
     white-space: pre-line;
-    width: 500px;
+    width: max-content;
+    max-width: 350px; /* Limit width for better readability */
     text-align: left;
     pointer-events: none;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000; /* Ensure it appears above other elements */
 }
 
 .tooltip-icon:hover::after {

data_analysis.py

@@ -1,80 +1,9 @@
 import gradio as gr
-import pandas as pd
-
-# Import our UI factories and the data loader
-from ui_components import create_leaderboard_display, create_benchmark_details_display, get_full_leaderboard_data, create_sub_navigation_bar
 from content import DATA_ANALYSIS_DESCRIPTION
+from category_page_builder import build_category_page
 # Define the category for this page
 CATEGORY_NAME = "Data Analysis"
 
 with gr.Blocks() as demo:
     gr.Markdown(f"## Astabench{CATEGORY_NAME} Leaderboard")
-    validation_df, validation_tag_map = get_full_leaderboard_data("validation")
-    test_df, test_tag_map = get_full_leaderboard_data("test")
-    gr.Markdown(DATA_ANALYSIS_DESCRIPTION, elem_id="category-intro")
-    with gr.Column(elem_id="validation_nav_container", visible=False) as validation_nav_container:
-        create_sub_navigation_bar(validation_tag_map, CATEGORY_NAME)
-    with gr.Column(elem_id="test_nav_container", visible=True) as test_nav_container:
-        create_sub_navigation_bar(test_tag_map, CATEGORY_NAME)
-    # --- This page now has two main sections: Validation and Test ---
-    with gr.Tabs():
-        with gr.Tab("Results: Test") as test_tab:
-            # Repeat the process for the "test" split
-            test_df, test_tag_map = get_full_leaderboard_data("test")
-
-            if not test_df.empty:
-                create_leaderboard_display(
-                    full_df=test_df,
-                    tag_map=test_tag_map,
-                    category_name=CATEGORY_NAME,
-                    split_name="test"
-                )
-                create_benchmark_details_display(
-                    full_df=test_df,
-                    tag_map=test_tag_map,
-                    category_name=CATEGORY_NAME
-                )
-            else:
-                gr.Markdown("No data available for test split.")
-        with gr.Tab("Results: Validation") as validation_tab:
-            # 1. Load all necessary data for the "validation" split ONCE.
-            validation_df, validation_tag_map = get_full_leaderboard_data("validation")
-
-            if not validation_df.empty:
-                # 2. Render the main category display using the loaded data.
-                create_leaderboard_display(
-                    full_df=validation_df,
-                    tag_map=validation_tag_map,
-                    category_name=CATEGORY_NAME,
-                    split_name="validation"
-                )
-
-                # 3. Render the detailed breakdown for each benchmark in the category.
-                create_benchmark_details_display(
-                    full_df=validation_df,
-                    tag_map=validation_tag_map,
-                    category_name=CATEGORY_NAME
-                )
-            else:
-                gr.Markdown("No data available for validation split.")
-
-
-    show_validation_js = """
-    () => {
-        document.getElementById('validation_nav_container').style.display = 'block';
-        document.getElementById('test_nav_container').style.display = 'none';
-        setTimeout(() => { window.dispatchEvent(new Event('resize')) }, 0);
-    }
-    """
-
-    # JavaScript to show the TEST nav, hide the VALIDATION nav, AND fix the plots.
-    show_test_js = """
-    () => {
-        document.getElementById('validation_nav_container').style.display = 'none';
-        document.getElementById('test_nav_container').style.display = 'block';
-    }
-    """
-
-    # Assign the pure JS functions to the select events. No Python `fn` is needed.
-    validation_tab.select(fn=None, inputs=None, outputs=None, js=show_validation_js)
-    test_tab.select(fn=None, inputs=None, outputs=None, js=show_test_js)
+    build_category_page(CATEGORY_NAME, DATA_ANALYSIS_DESCRIPTION)

e2e.py

@@ -1,80 +1,9 @@
 import gradio as gr
-import pandas as pd
-
-# Import our UI factories and the data loader
-from ui_components import create_leaderboard_display, create_benchmark_details_display, get_full_leaderboard_data, create_sub_navigation_bar
 from content import DISCOVERY_DESCRIPTION
+from category_page_builder import build_category_page
 # Define the category for this page
 CATEGORY_NAME = "Discovery"
 
 with gr.Blocks() as demo:
     gr.Markdown(f"## Astabench{CATEGORY_NAME} Leaderboard")
-    validation_df, validation_tag_map = get_full_leaderboard_data("validation")
-    test_df, test_tag_map = get_full_leaderboard_data("test")
-    gr.Markdown(DISCOVERY_DESCRIPTION, elem_id="category-intro")
-    with gr.Column(elem_id="validation_nav_container", visible=False) as validation_nav_container:
-        create_sub_navigation_bar(validation_tag_map, CATEGORY_NAME)
-    with gr.Column(elem_id="test_nav_container", visible=True) as test_nav_container:
-        create_sub_navigation_bar(test_tag_map, CATEGORY_NAME)
-    # --- This page now has two main sections: Validation and Test ---
-    with gr.Tabs():
-        with gr.Tab("Results: Test") as test_tab:
-            # Repeat the process for the "test" split
-            test_df, test_tag_map = get_full_leaderboard_data("test")
-
-            if not test_df.empty:
-                create_leaderboard_display(
-                    full_df=test_df,
-                    tag_map=test_tag_map,
-                    category_name=CATEGORY_NAME,
-                    split_name="test"
-                )
-                create_benchmark_details_display(
-                    full_df=test_df,
-                    tag_map=test_tag_map,
-                    category_name=CATEGORY_NAME
-                )
-            else:
-                gr.Markdown("No data available for test split.")
-        with gr.Tab("Results: Validation") as validation_tab:
-            # 1. Load all necessary data for the "validation" split ONCE.
-            validation_df, validation_tag_map = get_full_leaderboard_data("validation")
-
-            if not validation_df.empty:
-                # 2. Render the main category display using the loaded data.
-                create_leaderboard_display(
-                    full_df=validation_df,
-                    tag_map=validation_tag_map,
-                    category_name=CATEGORY_NAME,
-                    split_name="validation"
-                )
-
-                # 3. Render the detailed breakdown for each benchmark in the category.
-                create_benchmark_details_display(
-                    full_df=validation_df,
-                    tag_map=validation_tag_map,
-                    category_name=CATEGORY_NAME
-                )
-            else:
-                gr.Markdown("No data available for validation split.")
-
-
-    show_validation_js = """
-    () => {
-        document.getElementById('validation_nav_container').style.display = 'block';
-        document.getElementById('test_nav_container').style.display = 'none';
-        setTimeout(() => { window.dispatchEvent(new Event('resize')) }, 0);
-    }
-    """
-
-    # JavaScript to show the TEST nav, hide the VALIDATION nav, AND fix the plots.
-    show_test_js = """
-    () => {
-        document.getElementById('validation_nav_container').style.display = 'none';
-        document.getElementById('test_nav_container').style.display = 'block';
-    }
-    """
-
-    # Assign the pure JS functions to the select events. No Python `fn` is needed.
-    validation_tab.select(fn=None, inputs=None, outputs=None, js=show_validation_js)
-    test_tab.select(fn=None, inputs=None, outputs=None, js=show_test_js)
+    build_category_page(CATEGORY_NAME, DISCOVERY_DESCRIPTION)

literature_understanding.py

@@ -1,83 +1,10 @@
 import gradio as gr
-import pandas as pd
-
-# Import our UI factories and the data loader
-from ui_components import create_leaderboard_display, create_benchmark_details_display, get_full_leaderboard_data, create_sub_navigation_bar
 from content import LIT_DESCRIPTION
+from category_page_builder import build_category_page
+
 # Define the category for this page
 CATEGORY_NAME = "Literature Understanding"
 
 with gr.Blocks() as demo:
     gr.Markdown(f"## Astabench{CATEGORY_NAME} Leaderboard")
-
-    validation_df, validation_tag_map = get_full_leaderboard_data("validation")
-    test_df, test_tag_map = get_full_leaderboard_data("test")
-    gr.Markdown(LIT_DESCRIPTION, elem_id="category-intro")
-    with gr.Column(elem_id="validation_nav_container", visible=False) as validation_nav_container:
-        create_sub_navigation_bar(validation_tag_map, CATEGORY_NAME)
-
-    with gr.Column(elem_id="test_nav_container", visible=True) as test_nav_container:
-        create_sub_navigation_bar(test_tag_map, CATEGORY_NAME)
-
-    # --- This page now has two main sections: Validation and Test ---
-    with gr.Tabs():
-        with gr.Tab("Results: Test Set") as test_tab:
-            # Repeat the process for the "test" split
-            test_df, test_tag_map = get_full_leaderboard_data("test")
-
-            if not test_df.empty:
-                create_leaderboard_display(
-                    full_df=test_df,
-                    tag_map=test_tag_map,
-                    category_name=CATEGORY_NAME,
-                    split_name="test"
-                )
-                create_benchmark_details_display(
-                    full_df=test_df,
-                    tag_map=test_tag_map,
-                    category_name=CATEGORY_NAME
-                )
-            else:
-                gr.Markdown("No data available for test split.")
-        with gr.Tab("Results: Validation Set") as validation_tab:
-            # 1. Load all necessary data for the "validation" split ONCE.
-            validation_df, validation_tag_map = get_full_leaderboard_data("validation")
-
-            if not validation_df.empty:
-                # 2. Render the main category display using the loaded data.
-                create_leaderboard_display(
-                    full_df=validation_df,
-                    tag_map=validation_tag_map,
-                    category_name=CATEGORY_NAME,
-                    split_name="validation"
-                )
-
-                # 3. Render the detailed breakdown for each benchmark in the category.
-                create_benchmark_details_display(
-                    full_df=validation_df,
-                    tag_map=validation_tag_map,
-                    category_name=CATEGORY_NAME
-                )
-            else:
-                gr.Markdown("No data available for validation split.")
-
-
-    show_validation_js = """
-    () => {
-        document.getElementById('validation_nav_container').style.display = 'block';
-        document.getElementById('test_nav_container').style.display = 'none';
-        setTimeout(() => { window.dispatchEvent(new Event('resize')) }, 0);
-    }
-    """
-
-    # JavaScript to show the TEST nav, hide the VALIDATION nav, AND fix the plots.
-    show_test_js = """
-    () => {
-        document.getElementById('validation_nav_container').style.display = 'none';
-        document.getElementById('test_nav_container').style.display = 'block';
-    }
-    """
-
-    # Assign the pure JS functions to the select events. No Python `fn` is needed.
-    validation_tab.select(fn=None, inputs=None, outputs=None, js=show_validation_js)
-    test_tab.select(fn=None, inputs=None, outputs=None, js=show_test_js)
+    build_category_page(CATEGORY_NAME, LIT_DESCRIPTION)

ui_components.py

@@ -159,26 +159,34 @@ tooling_html = " ".join(tooling_html_items)
 # Your final legend_markdown string (the structure of this does not change)
 legend_markdown = f"""
 <div style="display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; font-size: 14px; padding-bottom: 8px;">
-
+        
     <div> <!-- Container for the Pareto section -->
-        <b>Pareto</b>
+        <b>Pareto</b><span class="tooltip-icon" data-tooltip="
+        •Pareto: Indicates if agent is on the Pareto frontier
+        ">ⓘ</span>
         <div style="padding-top: 4px;"><span>📈 On frontier</span></div>
     </div>
 
     <div> <!-- Container for the Openness section -->
-        <b>Agent Openness</b>
+        <b>Agent Openness</b><span class="tooltip-icon" data-tooltip="
+        •Closed: No API or code available
+        •API Available: API available, but no code
+        •Open Source: Code available, but no weights
+        •Open Source + Open Weights: Code and weights available
+        ">ⓘ</span>
         <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px;">{openness_html}</div>
     </div>
 
     <div> <!-- Container for the Tooling section -->
-        <b>Agent Tooling</b>
+        <b>Agent Tooling</b><span class="tooltip-icon" data-tooltip="
+        • Standard: Standard Approach used by the agent
+        • Custom with Standard Search: Standard search used by the agent
+        • Fully Custom: Fully custom tools used by the agent
+        ">ⓘ</span>
         <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px;">{tooling_html}</div>
     </div>
-
-    <div><b>Column Descriptions</b><span class="tooltip-icon" data-tooltip="• Pareto: Indicates if agent is on the Pareto frontier
-        • Openness: Level of accessibility to model and implementation 
-        • Agent Tooling: Approach used by the agent
-        • Agent: Name of the AI agent
+    
+     <div><b>Column Descriptions</b><span class="tooltip-icon" data-tooltip="
         • Overall Score: Performance across all benchmarks
         • Overall Cost: Cost per task in USD
         • Literature Understanding Score: Performance on scientific literature tasks