chart loading issue

tabs/leaderboard.py

@@ -480,7 +480,6 @@ def filter_leaderboard(df, model_type, category, sort_by):
 
 
 def create_leaderboard_tab(df, CATEGORIES, METHODOLOGY, HEADER_CONTENT, CARDS):
-    # Improved CSS for responsive chart sizing
     chart_container_css = """
     <style>
         /* Chart container styling */
@@ -542,169 +541,169 @@ def create_leaderboard_tab(df, CATEGORIES, METHODOLOGY, HEADER_CONTENT, CARDS):
     </style>
     """
 
-    with gr.Tab("Leaderboard"):
-        gr.HTML(HEADER_CONTENT + CARDS)
-        gr.HTML(DESCRIPTION_HTML)
-
-        # Add our custom CSS
-        gr.HTML(chart_container_css)
-
-        # Filters row
-        with gr.Row(equal_height=True):
-            with gr.Column(scale=1):
-                model_type = gr.Dropdown(
-                    choices=["All"] + df["Model Type"].unique().tolist(),
-                    value="All",
-                    label="Model Type",
-                )
-            with gr.Column(scale=1):
-                category = gr.Dropdown(
-                    choices=list(CATEGORIES.keys()),
-                    value=list(CATEGORIES.keys())[0],
-                    label="Category",
-                )
-            with gr.Column(scale=1):
-                sort_by = gr.Radio(
-                    choices=["Performance", "Cost"],
-                    value="Performance",
-                    label="Sort by",
-                )
-
-        # Content
-        output = gr.HTML()
-
-        # Performance chart - don't specify height in HTML
-        with gr.Row():
-            with gr.Column():
-                gr.HTML('<div class="chart-container">')
-                plot1 = gr.Plot(elem_id="plot1")
-                gr.HTML("</div>")
-
-        # Cost performance chart - don't specify height in HTML
-        with gr.Row():
-            with gr.Column():
-                gr.HTML('<div class="chart-container">')
-                plot2 = gr.Plot(elem_id="plot2")
-                gr.HTML("</div>")
-
-        gr.HTML(
-            """<div class="note-box">
-                <p style="margin: 0; font-size: 1em;">
-                    Note: API pricing for sorting by cost uses a 3-to-1 input/output ratio calculation.            
-                </p>
-            </div>"""
-        )
+    # Start content directly
+    gr.HTML(HEADER_CONTENT + CARDS)
+    gr.HTML(DESCRIPTION_HTML)
+
+    # Add our custom CSS
+    gr.HTML(chart_container_css)
+
+    # Filters row
+    with gr.Row(equal_height=True):
+        with gr.Column(scale=1):
+            model_type = gr.Dropdown(
+                choices=["All"] + df["Model Type"].unique().tolist(),
+                value="All",
+                label="Model Type",
+            )
+        with gr.Column(scale=1):
+            category = gr.Dropdown(
+                choices=list(CATEGORIES.keys()),
+                value=list(CATEGORIES.keys())[0],
+                label="Category",
+            )
+        with gr.Column(scale=1):
+            sort_by = gr.Radio(
+                choices=["Performance", "Cost"],
+                value="Performance",
+                label="Sort by",
+            )
+
+    # Content
+    output = gr.HTML()
+
+    # Performance chart - don't specify height in HTML
+    with gr.Row():
+        with gr.Column():
+            gr.HTML('<div class="chart-container">')
+            plot1 = gr.Plot(elem_id="plot1")
+            gr.HTML("</div>")
+
+    # Cost performance chart - don't specify height in HTML
+    with gr.Row():
+        with gr.Column():
+            gr.HTML('<div class="chart-container">')
+            plot2 = gr.Plot(elem_id="plot2")
+            gr.HTML("</div>")
+
+    gr.HTML(
+        """<div class="note-box">
+            <p style="margin: 0; font-size: 1em;">
+                Note: API pricing for sorting by cost uses a 3-to-1 input/output ratio calculation.            
+            </p>
+        </div>"""
+    )
 
-        gr.HTML(METHODOLOGY)
-
-        # Enhanced resize script - improved to be more responsive
-        resize_js = """
-        <script>
-        // Improved function to handle responsive Plotly charts
-        function resizePlots() {
-            // Find all plot containers
-            const plotContainers = document.querySelectorAll('.js-plotly-plot');
-            if (!plotContainers.length) {
-                // If containers aren't ready yet, retry shortly
-                setTimeout(resizePlots, 100);
-                return;
+    gr.HTML(METHODOLOGY)
+
+    # Enhanced resize script - improved to be more responsive
+    resize_js = """
+    <script>
+    // Improved function to handle responsive Plotly charts
+    function resizePlots() {
+        // Find all plot containers
+        const plotContainers = document.querySelectorAll('.js-plotly-plot');
+        if (!plotContainers.length) {
+            // If containers aren't ready yet, retry shortly
+            setTimeout(resizePlots, 100);
+            return;
+        }
+        
+        // Get the available width for the container
+        const containerWidth = document.querySelector('.chart-container').offsetWidth;
+        
+        plotContainers.forEach(container => {
+            // Calculate appropriate dimensions based on container width
+            let containerHeight;
+            
+            // Different height calculation based on chart type
+            if (container.id.includes('plot1')) {
+                // Performance chart - use sizing from reference code
+                const barCount = container.querySelectorAll('.bars .point').length || 20; // Default if can't detect
+                // Convert from matplotlib sizing approach: height = max(8, len(df_sorted) * 0.8) in inches * pixels per inch
+                const heightInInches = Math.max(8, barCount * 0.8);
+                containerHeight = heightInInches * 80; // Convert inches to pixels (approx)
+            } else {
+                // Cost chart - use fixed size from reference code (12x8 inches)
+                containerHeight = 640; // 8 inches * 80 pixels per inch
+                // Keep width proportional to container up to max width
+                const maxWidth = 960; // 12 inches * 80 pixels per inch
+                container.style.maxWidth = maxWidth + 'px';
             }
             
-            // Get the available width for the container
-            const containerWidth = document.querySelector('.chart-container').offsetWidth;
+            // Apply dimensions
+            container.style.width = '100%';
+            container.style.height = containerHeight + 'px';
             
-            plotContainers.forEach(container => {
-                // Calculate appropriate dimensions based on container width
-                let containerHeight;
-                
-                // Different height calculation based on chart type
-                if (container.id.includes('plot1')) {
-                    // Performance chart - use sizing from reference code
-                    const barCount = container.querySelectorAll('.bars .point').length || 20; // Default if can't detect
-                    // Convert from matplotlib sizing approach: height = max(8, len(df_sorted) * 0.8) in inches * pixels per inch
-                    const heightInInches = Math.max(8, barCount * 0.8);
-                    containerHeight = heightInInches * 80; // Convert inches to pixels (approx)
-                } else {
-                    // Cost chart - use fixed size from reference code (12x8 inches)
-                    containerHeight = 640; // 8 inches * 80 pixels per inch
-                    // Keep width proportional to container up to max width
-                    const maxWidth = 960; // 12 inches * 80 pixels per inch
-                    container.style.maxWidth = maxWidth + 'px';
-                }
-                
-                // Apply dimensions
-                container.style.width = '100%';
-                container.style.height = containerHeight + 'px';
-                
-                // Find and resize the SVG elements
-                const svgElements = container.querySelectorAll('svg');
-                svgElements.forEach(svg => {
-                    svg.style.width = '100%';
-                    svg.style.height = containerHeight + 'px';
-                });
-                
-                // Find the main SVG container and resize it
-                const svgContainer = container.querySelector('.svg-container');
-                if (svgContainer) {
-                    svgContainer.style.width = '100%';
-                    svgContainer.style.height = containerHeight + 'px';
-                }
+            // Find and resize the SVG elements
+            const svgElements = container.querySelectorAll('svg');
+            svgElements.forEach(svg => {
+                svg.style.width = '100%';
+                svg.style.height = containerHeight + 'px';
             });
             
-            // Trigger window resize to make Plotly redraw
-            window.dispatchEvent(new Event('resize'));
-        }
+            // Find the main SVG container and resize it
+            const svgContainer = container.querySelector('.svg-container');
+            if (svgContainer) {
+                svgContainer.style.width = '100%';
+                svgContainer.style.height = containerHeight + 'px';
+            }
+        });
         
-        // Functions to run when content changes or window resizes
-        function setupResizeHandlers() {
-            // Initial resize
+        // Trigger window resize to make Plotly redraw
+        window.dispatchEvent(new Event('resize'));
+    }
+    
+    // Functions to run when content changes or window resizes
+    function setupResizeHandlers() {
+        // Initial resize
+        resizePlots();
+        
+        // Handle window resize
+        window.addEventListener('resize', function() {
             resizePlots();
-            
-            // Handle window resize
-            window.addEventListener('resize', function() {
-                resizePlots();
-            });
-            
-            // Set up a mutation observer to detect when plots are added/changed
-            const observer = new MutationObserver(function(mutations) {
-                mutations.forEach(function(mutation) {
-                    if (mutation.addedNodes.length || 
-                        mutation.type === 'attributes' && 
-                        mutation.target.classList.contains('js-plotly-plot')) {
-                        resizePlots();
-                    }
-                });
-            });
-            
-            // Observe the entire document for changes
-            observer.observe(document.body, { 
-                childList: true, 
-                subtree: true,
-                attributes: true,
-                attributeFilter: ['style', 'class']
-            });
-        }
+        });
         
-        // Run when DOM is fully loaded
-        if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', setupResizeHandlers);
-        } else {
-            setupResizeHandlers();
-        }
+        // Set up a mutation observer to detect when plots are added/changed
+        const observer = new MutationObserver(function(mutations) {
+            mutations.forEach(function(mutation) {
+                if (mutation.addedNodes.length || 
+                    mutation.type === 'attributes' && 
+                    mutation.target.classList.contains('js-plotly-plot')) {
+                    resizePlots();
+                }
+            });
+        });
         
-        // Also resize periodically for a bit after initial load to ensure everything renders properly
-        for (let i = 1; i <= 10; i++) {
-            setTimeout(resizePlots, i * 500);
-        }
-        </script>
-        """
-        gr.HTML(resize_js)
+        // Observe the entire document for changes
+        observer.observe(document.body, { 
+            childList: true, 
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['style', 'class']
+        });
+    }
+    
+    // Run when DOM is fully loaded
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', setupResizeHandlers);
+    } else {
+        setupResizeHandlers();
+    }
+    
+    // Also resize periodically for a bit after initial load to ensure everything renders properly
+    for (let i = 1; i <= 10; i++) {
+        setTimeout(resizePlots, i * 500);
+    }
+    </script>
+    """
+    gr.HTML(resize_js)
 
-        for input_comp in [model_type, category, sort_by]:
-            input_comp.change(
-                fn=lambda m, c, s: filter_leaderboard(df, m, c, s),
-                inputs=[model_type, category, sort_by],
-                outputs=[output, plot1, plot2],
-            )
+    for input_comp in [model_type, category, sort_by]:
+        input_comp.change(
+            fn=lambda m, c, s: filter_leaderboard(df, m, c, s),
+            inputs=[model_type, category, sort_by],
+            outputs=[output, plot1, plot2],
+        )
 
-        return output, plot1, plot2
+    return output, plot1, plot2