fix display

charts.js

@@ -161,11 +161,11 @@ function updateScalingCharts(dimension) {
         const models = Object.keys(data);
         const yRange = SCALING_Y_RANGES[scenario] || [0, 100];
 
-        // Build traces with new X values
-        const traces = [];
+        // Collect X values and build update data
         const allXValues = [];
+        const updateData = [];
 
-        models.forEach(model => {
+        models.forEach((model, idx) => {
             const modelData = data[model];
             let xValues;
             switch (dimension) {
@@ -175,74 +175,74 @@ function updateScalingCharts(dimension) {
             }
             allXValues.push(...xValues);
 
-            const hoverLabels = { 'turn': 'Turns', 'token': 'Tokens', 'cost': 'Cost' };
-            const hoverFormat = dimension === 'token' ? '%{x:,.0f}' : (dimension === 'cost' ? '$%{x:.4f}' : '%{x}');
-
-            traces.push({
-                x: xValues,
-                y: modelData.accuracy,
-                mode: 'lines+markers',
-                name: model,
-                line: { color: DDR_DATA.modelColors[model] || '#888', width: 2 },
-                marker: { size: 6, color: DDR_DATA.modelColors[model] || '#888' },
-                hovertemplate: `<b>${model}</b><br>${hoverLabels[dimension]}: ${hoverFormat}<br>Accuracy: %{y:.2f}%<extra></extra>`
-            });
+            updateData.push({ x: [xValues], y: [modelData.accuracy] });
         });
 
         const maxX = Math.max(...allXValues);
         const minX = Math.min(...allXValues.filter(v => v > 0));
 
-        // X-axis settings per dimension
-        let xaxisConfig;
+        // Build X-axis config based on dimension
+        let xaxisUpdate = {
+            '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]
-            };
+            xaxisUpdate['xaxis.type'] = 'linear';
+            xaxisUpdate['xaxis.dtick'] = 10;
+            xaxisUpdate['xaxis.range'] = [0, maxX + 5];
+            xaxisUpdate['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]
-            };
+            xaxisUpdate['xaxis.type'] = 'linear';
+            xaxisUpdate['xaxis.dtick'] = 10000;
+            xaxisUpdate['xaxis.range'] = [0, maxX * 1.05];
+            xaxisUpdate['xaxis.tickformat'] = ',.0f';
         } else { // cost
-            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)]
-            };
+            xaxisUpdate['xaxis.type'] = 'log';
+            xaxisUpdate['xaxis.dtick'] = null;
+            xaxisUpdate['xaxis.range'] = [Math.log10(minX * 0.5), Math.log10(maxX * 1.5)];
+            xaxisUpdate['xaxis.tickformat'] = '$.3f';
+            xaxisUpdate['xaxis.exponentformat'] = 'none';
         }
 
-        const layout = {
-            ...darkLayout,
-            xaxis: xaxisConfig,
-            yaxis: {
-                ...darkLayout.yaxis,
-                title: { text: 'Accuracy (%)', font: { size: 11, color: '#e2e8f0' } },
-                dtick: 5,
-                range: yRange
-            },
-            showlegend: true,
-            transition: { duration: 300, easing: 'cubic-in-out' }
-        };
+        // Update hover templates
+        const hoverLabels = { 'turn': 'Turns', 'token': 'Tokens', 'cost': 'Cost' };
+        const hoverFormat = dimension === 'token' ? '%{x:,.0f}' : (dimension === 'cost' ? '$%{x:.4f}' : '%{x}');
+
+        // First: Update layout (axis) - this happens instantly
+        Plotly.relayout(`scaling-${scenario}`, xaxisUpdate);
+
+        // Then: Animate data points to new positions
+        const xUpdates = models.map(model => {
+            const modelData = data[model];
+            switch (dimension) {
+                case 'turn': return modelData.turns;
+                case 'token': return modelData.tokens;
+                case 'cost': return modelData.costs;
+            }
+        });
 
-        // Use Plotly.react for complete redraw with transition
-        Plotly.react(`scaling-${scenario}`, traces, layout, plotlyConfig);
+        // Use Plotly.animate for smooth data transition
+        Plotly.animate(`scaling-${scenario}`, {
+            data: xUpdates.map((x, i) => ({ x })),
+            traces: models.map((_, i) => i)
+        }, {
+            transition: { duration: 400, easing: 'cubic-in-out' },
+            frame: { duration: 400, redraw: false }
+        });
+
+        // Update hover templates after animation
+        models.forEach((model, i) => {
+            Plotly.restyle(`scaling-${scenario}`, {
+                hovertemplate: `<b>${model}</b><br>${hoverLabels[dimension]}: ${hoverFormat}<br>Accuracy: %{y:.2f}%<extra></extra>`
+            }, [i]);
+        });
     });
 }
 
 
 
 
+
 // Dimension toggle event listeners
 document.querySelectorAll('.dim-btn:not(.probing-dim)').forEach(btn => {
     btn.addEventListener('click', () => {