exact python match

charts.js

@@ -159,92 +159,92 @@ function updateScalingCharts(dimension) {
         if (!data) return;
 
         const models = Object.keys(data);
-        const traces = [];
+        const yRange = SCALING_Y_RANGES[scenario] || [0, 100];
 
+        // Collect all X values for this dimension
+        const allXValues = [];
         models.forEach(model => {
             const modelData = data[model];
             let xValues;
-
             switch (dimension) {
-                case 'turn':
-                    xValues = modelData.turns;
-                    break;
-                case 'token':
-                    xValues = modelData.tokens;
-                    break;
-                case 'cost':
-                    xValues = modelData.costs;
-                    break;
+                case 'turn': xValues = modelData.turns; break;
+                case 'token': xValues = modelData.tokens; break;
+                case 'cost': xValues = modelData.costs; break;
             }
+            allXValues.push(...xValues);
+        });
 
-            const hoverLabels = { 'turn': 'Turns', 'token': 'Tokens', 'cost': 'Cost' };
-            const hoverFormat = dimension === 'token' ? '%{x:,.0f}' : (dimension === 'cost' ? '$%{x:.4f}' : '%{x}');
+        const maxX = Math.max(...allXValues);
+        const minX = Math.min(...allXValues.filter(v => v > 0));
 
-            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>`
-            });
+        // Build new data arrays
+        const newData = models.map(model => {
+            const modelData = data[model];
+            let xValues;
+            switch (dimension) {
+                case 'turn': xValues = modelData.turns; break;
+                case 'token': xValues = modelData.tokens; break;
+                case 'cost': xValues = modelData.costs; break;
+            }
+            return { x: xValues, y: modelData.accuracy };
         });
 
-        // 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));
+        // Determine axis type and settings
+        const isLog = (dimension === 'cost');
+        let xRange, xType, xDtick, xTickformat;
 
-        // 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,
-                range: [0, maxX + 5]
-            };
+            xType = 'linear';
+            xRange = [0, maxX + 5];
+            xDtick = 10;
+            xTickformat = null;
         } 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]
-            };
-        } else { // cost
-            xaxis = {
-                ...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)]
-            };
+            xType = 'linear';
+            xRange = [0, maxX * 1.05];
+            xDtick = 10000;
+            xTickformat = ',.0f';
+        } else {
+            xType = 'log';
+            xRange = [Math.log10(minX * 0.5), Math.log10(maxX * 1.5)];
+            xDtick = null;
+            xTickformat = '$.3f';
         }
 
-        const layout = {
-            ...darkLayout,
-            xaxis: xaxis,
-            yaxis: {
-                ...darkLayout.yaxis,
-                title: { text: 'Accuracy (%)', font: { size: 11, color: '#e2e8f0' } },
-                dtick: 5,
-                range: yRange
-            },
-            showlegend: true
-        };
+        // Step 1: Animate data points with smooth transition
+        const animData = newData.map((d, i) => ({ x: d.x, y: d.y }));
+
+        Plotly.animate(`scaling-${scenario}`, {
+            data: animData,
+            traces: models.map((_, i) => i)
+        }, {
+            transition: { duration: 400, easing: 'cubic-in-out' },
+            frame: { duration: 400, redraw: true }
+        }).then(() => {
+            // Step 2: After animation, update axis labels and formatting
+            Plotly.relayout(`scaling-${scenario}`, {
+                'xaxis.title.text': xLabels[dimension],
+                'xaxis.type': xType,
+                'xaxis.range': xRange,
+                'xaxis.dtick': xDtick,
+                'xaxis.tickformat': xTickformat,
+                'xaxis.exponentformat': 'none'
+            });
 
-        // Use react for smooth update without animation freeze
-        Plotly.react(`scaling-${scenario}`, traces, layout, plotlyConfig);
+            // Step 3: Update hover templates
+            const hoverLabels = { 'turn': 'Turns', 'token': 'Tokens', 'cost': 'Cost' };
+            const hoverFormat = dimension === 'token' ? '%{x:,.0f}' : (dimension === 'cost' ? '$%{x:.4f}' : '%{x}');
+
+            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', () => {