exact python match

charts.js

@@ -159,8 +159,7 @@ function updateScalingCharts(dimension) {
         if (!data) return;
 
         const models = Object.keys(data);
-        const newX = [];
-        const newY = [];
+        const traces = [];
 
         models.forEach(model => {
             const modelData = data[model];
@@ -178,69 +177,70 @@ function updateScalingCharts(dimension) {
                     break;
             }
 
-            newX.push(xValues);
-            newY.push(modelData.accuracy);
-        });
+            const hoverLabels = { 'turn': 'Turns', 'token': 'Tokens', 'cost': 'Cost' };
+            const hoverFormat = dimension === 'token' ? '%{x:,.0f}' : (dimension === 'cost' ? '$%{x:.4f}' : '%{x}');
 
-        const maxX = Math.max(...newX.flat());
+            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>`
+            });
+        });
 
-        // Calculate proper axis settings for each dimension
-        const xAxisSettings = {
-            'turn': {
+        // Use exact Y-axis range from Python
+        const yRange = SCALING_Y_RANGES[scenario] || [0, 100];
+        const allX = traces.flatMap(t => t.x);
+        const maxX = Math.max(...allX);
+        const minX = Math.min(...allX.filter(v => v > 0));
+
+        // X-axis settings per dimension
+        let xaxis;
+        if (dimension === 'turn') {
+            xaxis = {
+                ...darkLayout.xaxis,
+                title: { text: xLabels[dimension], font: { size: 11, color: '#e2e8f0' } },
                 type: 'linear',
                 dtick: 10,
-                tickformat: null,
-                range: [0, maxX + 5],
-                tick0: 0
-            },
-            'token': {
+                range: [0, maxX + 5]
+            };
+        } else if (dimension === 'token') {
+            xaxis = {
+                ...darkLayout.xaxis,
+                title: { text: xLabels[dimension], font: { size: 11, color: '#e2e8f0' } },
                 type: 'linear',
                 dtick: 10000,
                 tickformat: ',.0f',
-                range: [0, maxX * 1.05],
-                tick0: 0
-            },
-            'cost': {
+                range: [0, maxX * 1.05]
+            };
+        } else { // cost
+            xaxis = {
+                ...darkLayout.xaxis,
+                title: { text: xLabels[dimension], font: { size: 11, color: '#e2e8f0' } },
                 type: 'log',
-                dtick: null,  // auto for log scale
                 tickformat: '$.3f',
-                range: null,  // auto for log scale
-                tick0: null
-            }
-        };
-
-        const settings = xAxisSettings[dimension];
-
-        // Animate the transition
-        Plotly.animate(`scaling-${scenario}`, {
-            data: newX.map((x, i) => ({ x, y: newY[i] })),
-            traces: models.map((_, i) => i),
-            layout: {
-                xaxis: {
-                    title: { text: xLabels[dimension], font: { size: 11, color: '#e2e8f0' } },
-                    type: settings.type,
-                    dtick: settings.dtick,
-                    tickformat: settings.tickformat,
-                    range: settings.range,
-                    tick0: settings.tick0,
-                    exponentformat: 'none'
-                }
-            }
-        }, animationSettings);
+                exponentformat: 'none',
+                range: [Math.log10(minX * 0.5), Math.log10(maxX * 1.5)]
+            };
+        }
 
-        // Update hover templates
-        const hoverLabels = {
-            'turn': 'Turns',
-            'token': 'Total Tokens',
-            'cost': 'Cost'
+        const layout = {
+            ...darkLayout,
+            xaxis: xaxis,
+            yaxis: {
+                ...darkLayout.yaxis,
+                title: { text: 'Accuracy (%)', font: { size: 11, color: '#e2e8f0' } },
+                dtick: 5,
+                range: yRange
+            },
+            showlegend: true
         };
 
-        models.forEach((model, i) => {
-            const hoverFormat = dimension === 'token' ? '%{x:,.0f}' : (dimension === 'cost' ? '$%{x:.4f}' : '%{x}');
-            Plotly.restyle(`scaling-${scenario}`, {
-                hovertemplate: `<b>${model}</b><br>${hoverLabels[dimension]}: ${hoverFormat}<br>Accuracy: %{y:.2f}%<extra></extra>`
-            }, [i]);
-        });
+        // Use react for smooth update without animation freeze
+        Plotly.react(`scaling-${scenario}`, traces, layout, plotlyConfig);
     });
 }