Added the summary page, issues with component height

app.py

@@ -223,6 +223,89 @@ def get_model_stats_summary(model_name: str) -> tuple:
     
     return total, success_rate, status_class
 
+def create_summary_page() -> plt.Figure:
+    """Create a summary page with model names and both AMD/NVIDIA test stats bars."""
+    fig, ax = plt.subplots(figsize=(12, len(MODELS) * 4 + 1), facecolor='#000000')
+    ax.set_facecolor('#000000')
+    
+    colors = {
+        'passed': '#4CAF50',
+        'failed': '#E53E3E', 
+        'skipped': '#FFD54F',
+        'error': '#8B0000'
+    }
+    
+    for i, (model_name, model_data) in enumerate(MODELS.items()):
+        # Process AMD and NVIDIA data
+        amd_stats = {k: len(v) for k, v in model_data['amd'].items()}
+        amd_total = sum(amd_stats.values())
+        nvidia_stats = {k: len(v) for k, v in model_data['nvidia'].items()}
+        nvidia_total = sum(nvidia_stats.values())
+        
+        if amd_total == 0 and nvidia_total == 0:
+            continue
+            
+        # Position for this model - tighter spacing between groups
+        y_base = (len(MODELS) - i - 1) * 3.2
+        y_amd_text = y_base + 2.0  # AMD label
+        y_amd_bar = y_base + 1.5   # AMD bar
+        y_nvidia_text = y_base + 0.8  # NVIDIA label  
+        y_nvidia_bar = y_base + 0.3   # NVIDIA bar
+        
+        # AMD bar and label
+        if amd_total > 0:
+            ax.text(0, y_amd_text, f"{model_name.lower()} - AMD", 
+                   ha='left', va='center', color='#FFFFFF', 
+                   fontsize=24, fontfamily='monospace', fontweight='normal')
+            
+            left = 0
+            for category in ['passed', 'failed', 'skipped', 'error']:
+                if amd_stats[category] > 0:
+                    width = amd_stats[category] / amd_total * 100
+                    ax.barh(y_amd_bar, width, left=left, height=0.45, 
+                           color=colors[category], alpha=0.9)
+                    if width > 6:
+                        ax.text(left + width/2, y_amd_bar, str(amd_stats[category]), 
+                               ha='center', va='center', color='black', 
+                               fontweight='bold', fontsize=10, fontfamily='monospace')
+                    left += width
+        
+        # NVIDIA bar and label
+        if nvidia_total > 0:
+            ax.text(0, y_nvidia_text, f"{model_name.lower()} - NVIDIA", 
+                   ha='left', va='center', color='#FFFFFF', 
+                   fontsize=24, fontfamily='monospace', fontweight='normal')
+            
+            left = 0
+            for category in ['passed', 'failed', 'skipped', 'error']:
+                if nvidia_stats[category] > 0:
+                    width = nvidia_stats[category] / nvidia_total * 100
+                    ax.barh(y_nvidia_bar, width, left=left, height=0.45, 
+                           color=colors[category], alpha=0.9)
+                    if width > 6:
+                        ax.text(left + width/2, y_nvidia_bar, str(nvidia_stats[category]), 
+                               ha='center', va='center', color='black', 
+                               fontweight='bold', fontsize=10, fontfamily='monospace')
+                    left += width
+    
+    # Style the axes to be completely invisible and span full width
+    ax.set_xlim(0, 100)
+    ax.set_ylim(-1, len(MODELS) * 3.2)
+    ax.set_xlabel('')
+    ax.set_ylabel('')
+    ax.spines['bottom'].set_visible(False)
+    ax.spines['left'].set_visible(False)
+    ax.spines['top'].set_visible(False)
+    ax.spines['right'].set_visible(False)
+    ax.set_xticks([])
+    ax.set_yticks([])
+    
+    # Remove all margins to make bars span full width
+    plt.tight_layout()
+    plt.subplots_adjust(left=0.02, right=0.98, top=0.98, bottom=0.02)
+    
+    return fig
+
 # Custom CSS for dark theme
 dark_theme_css = """
 /* Global dark theme */
@@ -328,11 +411,34 @@ dark_theme_css = """
     border-color: #666666 !important;
 }
 
-/* Plot container with smooth transitions */
+/* Plot container with smooth transitions and controlled scrolling */
 .plot-container {
     background-color: #000000 !important;
     border: none !important;
     transition: opacity 0.6s ease-in-out !important;
+    max-height: 70vh !important;
+    overflow-y: auto !important;
+    scrollbar-width: thin !important;
+    scrollbar-color: #333333 #000000 !important;
+}
+
+/* Custom scrollbar for plot container */
+.plot-container::-webkit-scrollbar {
+    width: 8px !important;
+    background: #000000 !important;
+}
+
+.plot-container::-webkit-scrollbar-track {
+    background: #000000 !important;
+}
+
+.plot-container::-webkit-scrollbar-thumb {
+    background-color: #333333 !important;
+    border-radius: 4px !important;
+}
+
+.plot-container::-webkit-scrollbar-thumb:hover {
+    background-color: #555555 !important;
 }
 
 /* Gradio plot component styling */
@@ -443,6 +549,32 @@ h1, h2, h3, p, .markdown {
     background-color: #000000 !important;
     padding: 20px !important;
     margin-left: 300px !important;
+    height: 100vh !important;
+    overflow: hidden !important;
+}
+
+/* Custom scrollbar for main content */
+.main-content {
+    scrollbar-width: thin !important;
+    scrollbar-color: #333333 #000000 !important;
+}
+
+.main-content::-webkit-scrollbar {
+    width: 8px !important;
+    background: #000000 !important;
+}
+
+.main-content::-webkit-scrollbar-track {
+    background: #000000 !important;
+}
+
+.main-content::-webkit-scrollbar-thumb {
+    background-color: #333333 !important;
+    border-radius: 4px !important;
+}
+
+.main-content::-webkit-scrollbar-thumb:hover {
+    background-color: #555555 !important;
 }
 
 /* Failed tests display - seamless appearance with fixed height */
@@ -519,6 +651,24 @@ h1, h2, h3, p, .markdown {
     background-color: #000000 !important;
 }
 
+/* Summary display styling */
+.summary-display textarea {
+    background-color: #000000 !important;
+    color: #FFFFFF !important;
+    font-family: monospace !important;
+    font-size: 24px !important;
+    border: none !important;
+    padding: 20px !important;
+    outline: none !important;
+    line-height: 2 !important;
+    text-align: right !important;
+    resize: none !important;
+}
+
+.summary-display {
+    background-color: #000000 !important;
+}
+
 
 
 /* JavaScript to reset scroll position */
@@ -543,6 +693,14 @@ with gr.Blocks(title="Model Test Results Dashboard", css=dark_theme_css) as demo
             gr.Markdown("# 🤖 AI Models")
             gr.Markdown("**Select a model to analyze test results**\n\n*Interactive dashboard with detailed metrics*")
             
+            # Summary button at the top
+            summary_button = gr.Button(
+                "summary", 
+                variant="primary",
+                size="lg",
+                elem_classes=["model-button"]
+            )
+            
             # Model selection buttons in sidebar
             model_buttons = []
             for model_name in MODELS.keys():
@@ -556,50 +714,67 @@ with gr.Blocks(title="Model Test Results Dashboard", css=dark_theme_css) as demo
         
         # Main content area
         with gr.Column(scale=4, elem_classes=["main-content"]):
-            gr.Markdown("# 📈 Test Results Dashboard")
-            
-            # Create the plot output
-            plot_output = gr.Plot(
+            # Summary display (default view)
+            summary_display = gr.Plot(
+                value=create_summary_page(),
                 label="", 
                 format="png",
-                elem_classes=["plot-container"]
+                elem_classes=["plot-container"],
+                visible=True
             )
             
-            # Create two separate failed tests displays in a row layout
-            with gr.Row():
-                with gr.Column(scale=1):
-                    amd_failed_tests_output = gr.Textbox(
-                        value="Failures on AMD (exclusive):\n─────────────────────────────\nnetwork_timeout\n\nFailures on AMD (common):\n────────────────────────\ndistributed",
-                        lines=8,
-                        max_lines=8,
-                        interactive=False,
-                        container=False,
-                        elem_classes=["failed-tests"]
-                    )
-                with gr.Column(scale=1):
-                    nvidia_failed_tests_output = gr.Textbox(
-                        value="Failures on NVIDIA (exclusive):\n─────────────────────────────────\nmulti_gpu\n\nFailures on NVIDIA (common):\n────────────────────────────\ndistributed",
-                        lines=8,
-                        max_lines=8,
-                        interactive=False,
-                        container=False,
-                        elem_classes=["failed-tests"]
-                    )
+            # Detailed view components (hidden by default)
+            with gr.Column(visible=False, elem_classes=["detail-view"]) as detail_view:
+                gr.Markdown("# 📈 Test Results Dashboard")
+                
+                # Create the plot output
+                plot_output = gr.Plot(
+                    label="", 
+                    format="png",
+                    elem_classes=["plot-container"]
+                )
+                
+                # Create two separate failed tests displays in a row layout
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        amd_failed_tests_output = gr.Textbox(
+                            value="Failures on AMD (exclusive):\n─────────────────────────────\nnetwork_timeout\n\nFailures on AMD (common):\n────────────────────────\ndistributed",
+                            lines=8,
+                            max_lines=8,
+                            interactive=False,
+                            container=False,
+                            elem_classes=["failed-tests"]
+                        )
+                    with gr.Column(scale=1):
+                        nvidia_failed_tests_output = gr.Textbox(
+                            value="Failures on NVIDIA (exclusive):\n─────────────────────────────────\nmulti_gpu\n\nFailures on NVIDIA (common):\n────────────────────────────\ndistributed",
+                            lines=8,
+                            max_lines=8,
+                            interactive=False,
+                            container=False,
+                            elem_classes=["failed-tests"]
+                        )
     
     # Set up click handlers for each button
     for i, (model_name, button) in enumerate(zip(MODELS.keys(), model_buttons)):
         button.click(
             fn=lambda name=model_name: plot_model_stats(name),
             outputs=[plot_output, amd_failed_tests_output, nvidia_failed_tests_output]
+        ).then(
+            fn=lambda: [gr.update(visible=False), gr.update(visible=True)],
+            outputs=[summary_display, detail_view]
         ).then(
             fn=None,
             js="() => { setTimeout(() => { document.querySelectorAll('textarea').forEach(t => { if (t.closest('.failed-tests')) { t.scrollTop = 0; setTimeout(() => { t.style.scrollBehavior = 'smooth'; t.scrollTo({ top: 0, behavior: 'smooth' }); t.style.scrollBehavior = 'auto'; }, 50); } }); }, 300); }"
         )
     
-    # Initialize with the first model
-    demo.load(
-        fn=lambda: plot_model_stats(list(MODELS.keys())[0]),
-        outputs=[plot_output, amd_failed_tests_output, nvidia_failed_tests_output]
+    # Summary button click handler
+    summary_button.click(
+        fn=lambda: create_summary_page(),
+        outputs=[summary_display]
+    ).then(
+        fn=lambda: [gr.update(visible=True), gr.update(visible=False)],
+        outputs=[summary_display, detail_view]
     )
 
 if __name__ == "__main__":