Better model bar

app.py

@@ -70,7 +70,9 @@ def get_description_text():
 def load_css():
     try:
         with open("styles.css", "r") as f:
-            return f.read()
+            css_content = f.read()
+        
+        return css_content
     except FileNotFoundError:
         logger.warning("styles.css not found, using minimal default styles")
         return "body { background: #000; color: #fff; }"
@@ -79,6 +81,7 @@ def load_css():
 # Create the Gradio interface with sidebar and dark theme
 with gr.Blocks(title="Model Test Results Dashboard", css=load_css()) as demo:
 
+
     with gr.Row():
         # Sidebar for model selection
         with gr.Column(scale=1, elem_classes=["sidebar"]):
@@ -96,19 +99,24 @@ with gr.Blocks(title="Model Test Results Dashboard", css=load_css()) as demo:
                 elem_classes=["summary-button"]
             )
 
-            # Model selection header
-            gr.Markdown(f"**Select model ({len(Ci_results.available_models)}):**", elem_classes=["model-header"])
+            # Model selection header (clickable toggle)
+            model_toggle_button = gr.Button(
+                f"▼ Select model ({len(Ci_results.available_models)})",
+                variant="secondary",
+                elem_classes=["model-header"]
+            )
 
-            # Scrollable container for model buttons
-            with gr.Column(scale=1, elem_classes=["model-container"]):
+            # Model buttons container (collapsible)
+            with gr.Column(elem_classes=["model-list", "model-list-visible"]) as model_list_container:
                 # Create individual buttons for each model
                 model_buttons = []
                 model_choices = [model.lower() for model in Ci_results.available_models] if Ci_results.available_models else ["auto", "bert", "clip", "llama"]
+                
+                print(f"Creating {len(model_choices)} model buttons: {model_choices}")
 
                 for model_name in model_choices:
                     # Check if model has failures to determine styling
                     has_failures = model_has_failures(model_name)
-                    # print(f"{model_name = }, {has_failures = }")
                     button_classes = ["model-button"]
                     if has_failures:
                         button_classes.append("model-button-failed")
@@ -177,6 +185,31 @@ with gr.Blocks(title="Model Test Results Dashboard", css=load_css()) as demo:
             outputs=[summary_display, detail_view]
         )
 
+    # Model toggle functionality
+    def toggle_model_list(current_visible):
+        """Toggle the visibility of the model list."""
+        new_visible = not current_visible
+        arrow = "▼" if new_visible else "►"
+        button_text = f"{arrow} Select model ({len(Ci_results.available_models)})"
+        
+        # Use CSS classes instead of Gradio visibility
+        css_classes = ["model-list"]
+        if new_visible:
+            css_classes.append("model-list-visible")
+        else:
+            css_classes.append("model-list-hidden")
+            
+        return gr.update(value=button_text), gr.update(elem_classes=css_classes), new_visible
+
+    # Track model list visibility state
+    model_list_visible = gr.State(True)
+
+    model_toggle_button.click(
+        fn=toggle_model_list,
+        inputs=[model_list_visible],
+        outputs=[model_toggle_button, model_list_container, model_list_visible]
+    )
+
     # Summary button click handler
     def show_summary_and_update_links():
         """Show summary page and update CI links."""

styles.css

@@ -82,18 +82,19 @@ div[data-testid="column"]:has(.sidebar) {
 
 .model-header {
     margin-bottom: 10px !important;
+    background: linear-gradient(135deg, #2a2a2a, #1e1e1e) !important;
+    color: white !important;
+    border: 1px solid #333 !important;
+    border-radius: 5px !important;
+    font-weight: 600 !important;
+    font-size: 14px !important;
+    font-family: monospace !important;
+    text-align: left !important;
+    width: 100% !important;
 }
 
-.model-container {
-    height: 300px !important;
-    overflow-y: auto !important;
-    overflow-x: hidden !important;
-    margin-bottom: 15px !important;
-    scrollbar-width: none !important;
-    -ms-overflow-style: none !important;
-    border: 1px solid #333 !important;
-    border-radius: 8px !important;
-    padding: 5px !important;
+.model-header:hover {
+    background: linear-gradient(135deg, #3a3a3a, #2e2e2e) !important;
 }
 
 .sidebar-links {
@@ -142,24 +143,37 @@ div[data-testid="column"]:has(.sidebar) {
     background-color: #555555 !important;
 }
 
-/* Target Gradio column containing model-container */
-div[data-testid="column"]:has(.model-container) {
-    flex: 1 1 auto !important;
-    overflow-y: auto !important;
-    overflow-x: hidden !important;
-    max-height: calc(100vh - 350px) !important;
-}
-
-/* Force button containers to single column in model container */
-.model-container .gr-button,
-.model-container button {
+/* Force button containers to single column in model list */
+.model-list .gr-button,
+.model-list button {
     display: block !important;
     width: 100% !important;
     max-width: 100% !important;
-    margin: 2px 0 !important;
+    margin: 4px 0 !important;
     flex: none !important;
 }
 
+/* Simple unfolding menu with invisible scrollbar */
+.model-list-visible {
+    max-height: 200px !important;
+    overflow-y: auto !important;
+    transition: max-height 0.3s ease !important;
+    scrollbar-width: none !important;
+    -ms-overflow-style: none !important;
+}
+
+.model-list-visible::-webkit-scrollbar {
+    width: 0px !important;
+    background: transparent !important;
+}
+
+.model-list-hidden {
+    max-height: 0 !important;
+    overflow: hidden !important;
+    transition: max-height 0.3s ease !important;
+}
+
+
 /* Model button styling */
 .model-button {
     background: linear-gradient(135deg, #2a2a2a, #1e1e1e) !important;
@@ -178,6 +192,8 @@ div[data-testid="column"]:has(.model-container) {
     display: block !important;
     cursor: pointer !important;
     transition: all 0.3s ease !important;
+    border: 1px solid #333 !important;
+    border-radius: 5px !important;
 }
 
 .model-button:hover {
@@ -650,3 +666,4 @@ h1, h2, h3, p, .markdown {
     0% { scroll-behavior: auto; }
     100% { scroll-behavior: auto; }
 }
+