Nav styling (#17)

content.py

@@ -24,6 +24,7 @@ To support domain-specific insight, AstaBench also provides per-category leaderb
 <br>
 - End-to-End Discovery
 <br>
+<br>
 Each category page includes a summary table (average score and cost per problem for that domain), as well as per-benchmark leaderboards for detailed comparisons on specific tasks.
 <br>
 <br>
@@ -100,11 +101,6 @@ CITATION_BUTTON_TEXT = r"""@article{asta-bench,
     primaryClass={cs.AI},
     secondaryClass={cs.CL}
 }"""
-# legend_tooltips = {
-#     "pareto": "The Pareto frontier represents optimal agents where you cannot improve score without increasing cost.",
-#     "openness": "Describes the accessibility of the agent's core model (e.g., Open, Closed, API).",
-#     "tooling": "Describes the tools an agent uses (e.g., Standard, Custom)."
-# }
 
 def format_error(msg):
     return f"<p style='color: red; font-size: 20px; text-align: center;'>{msg}</p>"
@@ -143,6 +139,7 @@ def hf_uri_to_web_url(uri: str) -> str:
     namespace, repo, path = parts
     return f"https://huggingface.co/datasets/{namespace}/{repo}/tree/main/{path}"
 
+
 css = """
 #intro-paragraph {
     font-size: 18px;
@@ -297,14 +294,12 @@ html:not(.dark) #legend-markdown .light-mode-icon,
 #leaderboard-accordion {
     overflow: visible !important;
 }
-
 .tooltip-icon {
     display: inline-block;
     margin-left: 6px;
     cursor: help;
     position: relative;
 }
-
 .tooltip-icon::after {
     content: attr(data-tooltip);
     position: absolute;
@@ -333,4 +328,48 @@ html:not(.dark) #legend-markdown .light-mode-icon,
     cursor: help;
     text-decoration: underline dotted 1px;
 }
+/* Main Nav bar styling */
+.nav-holder nav {
+    display: grid !important;
+    grid-template-columns: auto auto auto auto 1fr auto auto !important;
+    gap: 10px 20px !important; /* Vertical and horizontal spacing */
+    width: 100% !important;
+}
+.nav-holder nav a[href*="/"] {
+    grid-row: 1 !important;
+    grid-column: 1 !important;
+    justify-self: start !important;
+    width: fit-content !important;
+}
+.nav-holder nav a[href*="about"] {
+    grid-row: 1 !important;
+    grid-column: 6 !important;
+}
+.nav-holder nav a[href*="submit"] {
+    grid-row: 1 !important;
+    grid-column: 7 !important;
+}
+.nav-holder nav a[href*="literature-understanding"] {
+    grid-row: 3 !important;
+    grid-column: 1 !important;
+}
+.nav-holder nav a[href*="code-execution"] {
+    grid-row: 3 !important;
+    grid-column: 2 !important;
+}
+.nav-holder nav a[href*="data-analysis"] {
+    grid-row: 3 !important;
+    grid-column: 3 !important;
+}
+.nav-holder nav a[href*="discovery"] {
+    grid-row: 3 !important;
+    grid-column: 4 !important;
+}
+.nav-holder nav::after {
+    content: ''; /* Required for pseudo-elements to appear */
+    background-color: #C9C9C3;
+    height: 1px; 
+    grid-row: 2 !important;
+    grid-column: 1 / -1 !important;
+}
 """

ui_components.py

@@ -333,7 +333,7 @@ def create_leaderboard_display(
 
     plot_component = gr.Plot(
         value=scatter_plot,
-        label=f"Score vs. Cost ({category_name})"
+        show_label=False
     )
     gr.HTML(SCATTER_DISCLAIMER, elem_id="scatter-disclaimer")
 
@@ -482,7 +482,7 @@ def create_benchmark_details_display(
             y=benchmark_score_col,
             agent_col="Agent"
         )
-        gr.Plot(value=benchmark_plot)
+        gr.Plot(value=benchmark_plot, show_label=False)
         gr.HTML(SCATTER_DISCLAIMER, elem_id="scatter-disclaimer")
         # Put table and key into an accordion
         with gr.Accordion("Details", open=True, elem_id="leaderboard-accordion"):