fix display

charts.js

@@ -161,7 +161,7 @@ function updateScalingCharts(dimension) {
         const models = Object.keys(data);
         const yRange = SCALING_Y_RANGES[scenario] || [0, 100];
 
-        // Build new traces with all properties
+        // Prepare new data
         const newTraces = [];
         const allXValues = [];
 
@@ -192,62 +192,68 @@ function updateScalingCharts(dimension) {
         const maxX = Math.max(...allXValues);
         const minX = Math.min(...allXValues.filter(v => v > 0));
 
-        // Build complete new layout
-        let xaxisConfig;
+        // Determine final axis settings
+        let finalXaxis = {
+            'xaxis.title.text': xLabels[dimension]
+        };
+
         if (dimension === 'turn') {
-            xaxisConfig = {
-                ...darkLayout.xaxis,
-                title: { text: xLabels[dimension], font: { size: 11, color: '#e2e8f0' } },
-                type: 'linear',
-                dtick: 10,
-                range: [0, maxX + 5]
-            };
+            finalXaxis['xaxis.type'] = 'linear';
+            finalXaxis['xaxis.dtick'] = 10;
+            finalXaxis['xaxis.range'] = [0, maxX + 5];
+            finalXaxis['xaxis.tickformat'] = null;
         } else if (dimension === 'token') {
-            xaxisConfig = {
-                ...darkLayout.xaxis,
-                title: { text: xLabels[dimension], font: { size: 11, color: '#e2e8f0' } },
-                type: 'linear',
-                dtick: 10000,
-                tickformat: ',.0f',
-                range: [0, maxX * 1.05]
-            };
-        } else {
-            xaxisConfig = {
-                ...darkLayout.xaxis,
-                title: { text: xLabels[dimension], font: { size: 11, color: '#e2e8f0' } },
-                type: 'log',
-                tickformat: '$.3f',
-                exponentformat: 'none',
-                range: [Math.log10(minX * 0.5), Math.log10(maxX * 1.5)]
-            };
+            finalXaxis['xaxis.type'] = 'linear';
+            finalXaxis['xaxis.dtick'] = 10000;
+            finalXaxis['xaxis.range'] = [0, maxX * 1.05];
+            finalXaxis['xaxis.tickformat'] = ',.0f';
+        } else { // cost
+            finalXaxis['xaxis.type'] = 'log';
+            finalXaxis['xaxis.dtick'] = null;
+            finalXaxis['xaxis.range'] = [Math.log10(minX * 0.5), Math.log10(maxX * 1.5)];
+            finalXaxis['xaxis.tickformat'] = '$.3f';
+            finalXaxis['xaxis.exponentformat'] = 'none';
         }
 
-        const newLayout = {
-            ...darkLayout,
-            xaxis: xaxisConfig,
-            yaxis: {
-                ...darkLayout.yaxis,
-                title: { text: 'Accuracy (%)', font: { size: 11, color: '#e2e8f0' } },
-                dtick: 5,
-                range: yRange
-            },
-            showlegend: true
-        };
-
-        // Use Plotly.animate with BOTH data AND layout in single frame
-        // This ensures points, lines, and axis all animate together
-        Plotly.animate(`scaling-${scenario}`, {
-            data: newTraces,
-            layout: newLayout
-        }, {
-            transition: {
-                duration: 500,
-                easing: 'cubic-in-out'
-            },
-            frame: {
-                duration: 500,
-                redraw: true  // Important: redraw ensures lines update, not just markers
-            }
+        // STEP 1: Unset dtick/tickformat to prevent freezing during animation
+        // When switching range 100 -> 30000, if dtick stays 10, it tries to draw 3000 ticks!
+        Plotly.relayout(`scaling-${scenario}`, {
+            'xaxis.dtick': null,
+            'xaxis.tickformat': null
+        }).then(() => {
+            // STEP 2: Animate data and range together
+            // This creates the smooth "morphing" effect as axis scales with data
+            Plotly.animate(`scaling-${scenario}`, {
+                data: newTraces,
+                layout: {
+                    xaxis: {
+                        ...darkLayout.xaxis,
+                        title: { text: xLabels[dimension], font: { size: 11, color: '#e2e8f0' } },
+                        type: finalXaxis['xaxis.type'],
+                        range: finalXaxis['xaxis.range'],
+                        dtick: null, // Keep auto-ticks during animation
+                        tickformat: null
+                    },
+                    yaxis: {
+                        ...darkLayout.yaxis,
+                        title: { text: 'Accuracy (%)', font: { size: 11, color: '#e2e8f0' } },
+                        dtick: 5,
+                        range: yRange
+                    }
+                }
+            }, {
+                transition: {
+                    duration: 500,
+                    easing: 'cubic-in-out'
+                },
+                frame: {
+                    duration: 500,
+                    redraw: true
+                }
+            }).then(() => {
+                // STEP 3: Apply precise ticks after animation finishes
+                Plotly.relayout(`scaling-${scenario}`, finalXaxis);
+            });
         });
     });
 }