fix display

charts.js

@@ -161,11 +161,14 @@ function updateScalingCharts(dimension) {
         const models = Object.keys(data);
         const yRange = SCALING_Y_RANGES[scenario] || [0, 100];
 
-        // Collect X values and build update data
+        // Build new traces with all properties
+        const newTraces = [];
         const allXValues = [];
-        const updateData = [];
 
-        models.forEach((model, idx) => {
+        const hoverLabels = { 'turn': 'Turns', 'token': 'Tokens', 'cost': 'Cost' };
+        const hoverFormat = dimension === 'token' ? '%{x:,.0f}' : (dimension === 'cost' ? '$%{x:.4f}' : '%{x}');
+
+        models.forEach(model => {
             const modelData = data[model];
             let xValues;
             switch (dimension) {
@@ -175,66 +178,76 @@ function updateScalingCharts(dimension) {
             }
             allXValues.push(...xValues);
 
-            updateData.push({ x: [xValues], y: [modelData.accuracy] });
+            newTraces.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>`
+            });
         });
 
         const maxX = Math.max(...allXValues);
         const minX = Math.min(...allXValues.filter(v => v > 0));
 
-        // Build X-axis config based on dimension
-        let xaxisUpdate = {
-            'xaxis.title.text': xLabels[dimension]
-        };
-
+        // Build complete new layout
+        let xaxisConfig;
         if (dimension === 'turn') {
-            xaxisUpdate['xaxis.type'] = 'linear';
-            xaxisUpdate['xaxis.dtick'] = 10;
-            xaxisUpdate['xaxis.range'] = [0, maxX + 5];
-            xaxisUpdate['xaxis.tickformat'] = 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') {
-            xaxisUpdate['xaxis.type'] = 'linear';
-            xaxisUpdate['xaxis.dtick'] = 10000;
-            xaxisUpdate['xaxis.range'] = [0, maxX * 1.05];
-            xaxisUpdate['xaxis.tickformat'] = ',.0f';
-        } else { // cost
-            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';
+            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)]
+            };
         }
 
-        // 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;
-            }
-        });
+        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 for smooth data transition
+        // 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: xUpdates.map((x, i) => ({ x })),
-            traces: models.map((_, i) => i)
+            data: newTraces,
+            layout: newLayout
         }, {
-            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]);
+            transition: {
+                duration: 500,
+                easing: 'cubic-in-out'
+            },
+            frame: {
+                duration: 500,
+                redraw: true  // Important: redraw ensures lines update, not just markers
+            }
         });
     });
 }
@@ -242,7 +255,6 @@ function updateScalingCharts(dimension) {
 
 
 
-
 // Dimension toggle event listeners
 document.querySelectorAll('.dim-btn:not(.probing-dim)').forEach(btn => {
     btn.addEventListener('click', () => {