Reduces white spaces in panel gaps and tab margins.

Refactored panel header / subheader from Markdown to HTML component.

src/components/{quizbowl/commons.py → commons.py}

@@ -24,3 +24,12 @@ def get_pipeline_selector(model_options: list[str]):
         container=False,
         elem_classes="pipeline-selector",
     )
+
+
+def get_panel_header(header: str, subheader: str | None = None):
+    html = f"<h4 class='panel-header'>{header}</h4>"
+    if subheader:
+        html += f"<p class='panel-subheader'>{subheader}</p>"
+    with gr.Row(elem_classes="panel-header-container") as row:
+        gr.HTML(html)
+    return row

src/components/model_pipeline/model_pipeline.py

@@ -3,6 +3,7 @@ import yaml
 from loguru import logger
 
 from app_configs import UNSELECTED_VAR_NAME
+from components import commons
 from components.model_pipeline.state_manager import (
     ModelStepUIState,
     PipelineState,
@@ -160,8 +161,9 @@ class PipelineInterface:
         dropdowns = {}
         variable_options = [UNSELECTED_VAR_NAME] + [v for v in available_variables if v not in self.input_variables]
         with gr.Column(elem_classes="step-accordion control-panel"):
-            with gr.Row(elem_classes="output-fields-header"):
-                gr.Markdown("#### Final output variables mapping:")
+            commons.get_panel_header(
+                header="Final output variables mapping:",
+            )
             with gr.Row(elem_classes="output-fields-row"):
                 for output_field in self.required_output_variables:
                     value = pipeline_state.workflow.outputs.get(output_field, UNSELECTED_VAR_NAME)
@@ -214,8 +216,8 @@ class PipelineInterface:
         else:
             instruction = "Create a pipeline that takes in the following input variables and outputs the following output variables:"
         gr.Markdown(f"### {instruction}")
-        gr.Markdown(f"Input Variables: {input_variables_str}")
-        gr.Markdown(f"Output Variables: {output_variables_str}")
+        gr.Markdown(f"* Input Variables: {input_variables_str}")
+        gr.Markdown(f"* Output Variables: {output_variables_str}")
 
         # if not self.simple:
         #     self._render_add_step_button(0)
@@ -267,9 +269,12 @@ class PipelineInterface:
 
         # Add a code box to display the workflow JSON
         # with gr.Column(elem_classes="workflow-json-container"):
-        with gr.Accordion("Pipeline Preview", open=False, elem_classes="pipeline-preview") as self.config_accordion:
+        with gr.Accordion(
+            "Pipeline Preview (click to expand and edit)", open=False, elem_classes="pipeline-preview"
+        ) as self.config_accordion:
             self.config_output = gr.Code(
                 label="Workflow Configuration",
+                show_label=False,
                 language="yaml",
                 elem_classes="workflow-json",
                 interactive=True,

src/components/model_pipeline/tossup_pipeline.py

@@ -2,6 +2,7 @@ import gradio as gr
 import numpy as np
 
 from app_configs import AVAILABLE_MODELS, UNSELECTED_VAR_NAME
+from components import commons
 from workflows.structs import Buzzer, TossupWorkflow
 
 from .model_pipeline import PipelineInterface, PipelineState, PipelineUIState
@@ -86,8 +87,9 @@ class TossupPipelineInterface(PipelineInterface):
         dropdowns = {}
         variable_options = [UNSELECTED_VAR_NAME] + [v for v in available_variables if v not in self.input_variables]
         with gr.Column(elem_classes="step-accordion control-panel"):
-            with gr.Row(elem_classes="output-fields-header"):
-                gr.Markdown("#### Final output variables mapping:")
+            commons.get_panel_header(
+                header="Final output variables mapping:",
+            )
             with gr.Row(elem_classes="output-fields-row"):
                 for output_field in self.required_output_variables:
                     value = pipeline_state.workflow.outputs.get(output_field, UNSELECTED_VAR_NAME)
@@ -105,10 +107,10 @@ class TossupPipelineInterface(PipelineInterface):
                         outputs=[self.pipeline_state],
                     )
                     dropdowns[output_field] = dropdown
-            with gr.Row(elem_classes="output-fields-header"):
-                gr.Markdown(
-                    "#### Buzzer settings:\n Set your thresholds for confidence and output tokens probability."
-                )
+            commons.get_panel_header(
+                header="Buzzer settings:",
+                subheader="Set your thresholds for confidence and output tokens probability.",
+            )
             with gr.Row(elem_classes="control-panel"):
                 self.confidence_slider = gr.Slider(
                     minimum=0.0,

src/components/quizbowl/bonus.py

@@ -7,13 +7,14 @@ from datasets import Dataset
 from loguru import logger
 
 from app_configs import UNSELECTED_PIPELINE_NAME
+from components import commons
 from components.model_pipeline.model_pipeline import PipelineInterface, PipelineState, PipelineUIState
 from display.formatting import styled_error
 from submission import submit
 from workflows.qb_agents import QuizBowlBonusAgent
 from workflows.structs import ModelStep, Workflow
 
-from . import commons, populate
+from . import populate
 from .plotting import (
     create_bonus_confidence_plot,
     create_bonus_html,

src/components/quizbowl/tossup.py

@@ -8,6 +8,7 @@ from datasets import Dataset
 from loguru import logger
 
 from app_configs import UNSELECTED_PIPELINE_NAME
+from components import commons
 from components.model_pipeline.model_pipeline import PipelineInterface, PipelineState, PipelineUIState
 from components.model_pipeline.tossup_pipeline import TossupPipelineInterface, TossupPipelineState
 from display.formatting import styled_error
@@ -15,7 +16,7 @@ from submission import submit
 from workflows.qb_agents import QuizBowlTossupAgent, TossupResult
 from workflows.structs import ModelStep, TossupWorkflow
 
-from . import commons, populate
+from . import populate
 from .plotting import (
     create_scatter_pyplot,
     create_tossup_confidence_pyplot,

src/display/css_html_js.py

@@ -111,9 +111,6 @@ workflow_json_css = """
     overflow-y: auto;
 }
 
-.tab-buttons button {
-    font-size: 20px;
-}
 """
 
 get_window_url_params = """

src/display/custom_css.py

@@ -97,6 +97,15 @@ css_pipeline = """
     gap: 0px
 }
 
+.tabs {
+    gap: var(--spacing-md) !important;
+}
+
+.tab-buttons button {
+    font-size: 20px;
+}
+
+
 .step-container {
     background-color: var(--card-bg-color);
     padding: 0px 0px;
@@ -122,7 +131,7 @@ css_pipeline = """
 }
 
 .control-panel {
-    gap: var(--spacing-lg) !important;
+    gap: var(--spacing-xs) !important;
 }
 
 .toggleable {
@@ -267,13 +276,17 @@ css_pipeline = """
     gap: 0px !important;
 }
 
-.output-fields-header {
+.panel-header-container {
     padding: 0px 8px;
 }
 
-.output-fields-panel {
-    background-color: var(--block-background-fill) !important;
-    padding: 8px 8px;
+.panel-header {
+    margin-bottom: 0px;
+}
+
+.panel-subheader {
+    margin-top: 0px;
+    margin-bottom: 0px;
 }
 
 .output-field-variable {