Add diagram take 2 (#110)

category_page_builder.py

@@ -3,18 +3,41 @@ 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
+CATEGORY_DIAGRAM_MAP = {
+    "Literature Understanding": "assets/literature-understanding.svg",
+    "Code & Execution": "assets/code-execution.svg",
+    "Data Analysis": "assets/data-analysis.svg",
+    "End-to-End Discovery": "assets/end-to-end-discovery.svg",
+}
 
 def build_category_page(CATEGORY_NAME, PAGE_DESCRIPTION):
     with gr.Column(elem_id="page-content-wrapper"):
-        gr.HTML(f'<h2>AstaBench {CATEGORY_NAME} Leaderboard <span style="font-weight: normal; color: inherit;">(Aggregate)</span></h2>', elem_id="main-header")
         validation_df, validation_tag_map = get_full_leaderboard_data("validation")
         test_df, test_tag_map = get_full_leaderboard_data("test")
-        with gr.Column(elem_id="validation_nav_container", visible=False) as validation_nav_container:
-            create_sub_navigation_bar(validation_tag_map, CATEGORY_NAME, validation=True)
+        with gr.Row(elem_id="intro-row"):
 
-        with gr.Column(elem_id="test_nav_container", visible=True) as test_nav_container:
-            create_sub_navigation_bar(test_tag_map, CATEGORY_NAME)
-        gr.Markdown(PAGE_DESCRIPTION, elem_id="category-intro")
+            with gr.Column(scale=1):
+                gr.HTML(f'<h2>AstaBench {CATEGORY_NAME} Leaderboard <span style="font-weight: normal; color: inherit;">(Aggregate)</span></h2>', elem_id="main-header")
+                with gr.Column(elem_id="validation_nav_container", visible=False) as validation_nav_container:
+                    create_sub_navigation_bar(validation_tag_map, CATEGORY_NAME, validation=True)
+
+                with gr.Column(elem_id="test_nav_container", visible=True) as test_nav_container:
+                    create_sub_navigation_bar(test_tag_map, CATEGORY_NAME)
+
+                gr.Markdown(PAGE_DESCRIPTION, elem_id="intro-category-paragraph")
+
+            # --- The Right Column ---
+            with gr.Column(scale=1):
+                image_path = CATEGORY_DIAGRAM_MAP.get(CATEGORY_NAME)
+                if image_path:
+                    gr.Image(
+                        value=image_path,
+                        show_label=False,
+                        show_download_button=False,
+                        show_fullscreen_button=False,
+                        interactive=False,
+                        elem_id="diagram-image"
+                    )
         # --- This page now has two main sections: Validation and Test ---
         with gr.Tabs():
             with gr.Tab("Results: Test Set") as test_tab:

content.py

@@ -254,9 +254,48 @@ h2 {
 
 #intro-paragraph {
     font-size: 18px;
-    max-width: 60%;
-    padding-left: 25px;
+    max-width: 90%;
+    padding-left: 35px;
+    margin-top: 20px;
+}
+
+#intro-paragraph p,
+#intro-paragraph li {
+    font-size: 16px; 
+    line-height: 1.8; 
+}
+
+#intro-paragraph ul {
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+#diagram-image {
+    height: 100%;
 }
+
+#diagram-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; 
+}
+#intro-category-paragraph {
+    font-size: 18px;
+    max-width: 90%;
+    margin-top: 20px;
+}
+
+#intro-category-paragraph p,
+#intro-category-paragraph li {
+    font-size: 16px; 
+    line-height: 1.8; 
+}
+
+#intro-category-paragraph ul {
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
 #about-content {
     font-size: 18px;
     max-width: 60%;
@@ -340,9 +379,9 @@ nav.svelte-ti537g.svelte-ti537g {
 }
 .sub-nav-bar-container {
     display: flex !important;
-    flex-wrap: nowrap !important; 
+    flex-wrap: wrap !important; 
     align-items: center !important; 
-    gap: 20px !important;
+    gap: 10px !important;
 }
 .dark .primary-link-button {
     color: var(--color-primary-green);
@@ -821,13 +860,6 @@ html {
         flex-direction: column;
     }
 }
-#home-page-content-wrapper{
-    margin: 40px;
-    max-width: 60%;
-}
-#intro-paragraph {
-    max-width: 90%;
-}
 /* Plot legend styles */
 .plot-legend-container {
     min-height: 572px;

main_page.py

@@ -16,8 +16,19 @@ CACHED_VIEWERS = {}
 CACHED_TAG_MAPS = {}
 
 def build_page():
-    with gr.Column(elem_id="home-page-content-wrapper"):
-        gr.HTML(INTRO_PARAGRAPH, elem_id="intro-paragraph")
+    with gr.Row(elem_id="intro-row"):
+        with gr.Column(scale=1):
+            gr.HTML(INTRO_PARAGRAPH, elem_id="intro-paragraph")
+
+        with gr.Column(scale=1):
+            gr.Image(
+                value="assets/overall.svg",
+                show_label=False,
+                interactive=False,
+                show_download_button=False,
+                show_fullscreen_button=False,
+                elem_id="diagram-image"
+            )
 
     # --- Leaderboard Display Section ---
     gr.Markdown("---")

ui_components.py

@@ -857,7 +857,7 @@ def create_sub_navigation_bar(tag_map: dict, category_name: str, validation: boo
     full_html = f"""
         <div class="sub-nav-bar-container">
             <span class="sub-nav-label">Benchmarks in this category:</span>
-            {''.join(html_buttons)}
+            {' | '.join(html_buttons)}
         </div>
     """