exact python match

charts.js

@@ -161,8 +161,10 @@ function updateScalingCharts(dimension) {
         const models = Object.keys(data);
         const yRange = SCALING_Y_RANGES[scenario] || [0, 100];
 
-        // Collect all X values for this dimension
+        // Build traces with new X values
+        const traces = [];
         const allXValues = [];
+
         models.forEach(model => {
             const modelData = data[model];
             let xValues;
@@ -172,79 +174,75 @@ function updateScalingCharts(dimension) {
                 case 'cost': xValues = modelData.costs; break;
             }
             allXValues.push(...xValues);
-        });
 
-        const maxX = Math.max(...allXValues);
-        const minX = Math.min(...allXValues.filter(v => v > 0));
+            const hoverLabels = { 'turn': 'Turns', 'token': 'Tokens', 'cost': 'Cost' };
+            const hoverFormat = dimension === 'token' ? '%{x:,.0f}' : (dimension === 'cost' ? '$%{x:.4f}' : '%{x}');
 
-        // 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 };
+            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>`
+            });
         });
 
-        // Determine axis type and settings
-        const isLog = (dimension === 'cost');
-        let xRange, xType, xDtick, xTickformat;
+        const maxX = Math.max(...allXValues);
+        const minX = Math.min(...allXValues.filter(v => v > 0));
 
+        // X-axis settings per dimension
+        let xaxisConfig;
         if (dimension === 'turn') {
-            xType = 'linear';
-            xRange = [0, maxX + 5];
-            xDtick = 10;
-            xTickformat = null;
+            xaxisConfig = {
+                ...darkLayout.xaxis,
+                title: { text: xLabels[dimension], font: { size: 11, color: '#e2e8f0' } },
+                type: 'linear',
+                dtick: 10,
+                range: [0, maxX + 5]
+            };
         } else if (dimension === 'token') {
-            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';
+            xaxisConfig = {
+                ...darkLayout.xaxis,
+                title: { text: xLabels[dimension], font: { size: 11, color: '#e2e8f0' } },
+                type: 'linear',
+                dtick: 10000,
+                tickformat: ',.0f',
+                range: [0, maxX * 1.05]
+            };
+        } 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)]
+            };
         }
 
-        // 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'
-            });
-
-            // Step 3: Update hover templates
-            const hoverLabels = { 'turn': 'Turns', 'token': 'Tokens', 'cost': 'Cost' };
-            const hoverFormat = dimension === 'token' ? '%{x:,.0f}' : (dimension === 'cost' ? '$%{x:.4f}' : '%{x}');
+        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' }
+        };
 
-            models.forEach((model, i) => {
-                Plotly.restyle(`scaling-${scenario}`, {
-                    hovertemplate: `<b>${model}</b><br>${hoverLabels[dimension]}: ${hoverFormat}<br>Accuracy: %{y:.2f}%<extra></extra>`
-                }, [i]);
-            });
-        });
+        // Use Plotly.react for complete redraw with transition
+        Plotly.react(`scaling-${scenario}`, traces, layout, plotlyConfig);
     });
 }
 
 
 
+
 // Dimension toggle event listeners
 document.querySelectorAll('.dim-btn:not(.probing-dim)').forEach(btn => {
     btn.addEventListener('click', () => {