fix display

charts.js

@@ -211,6 +211,16 @@ function initScalingCharts() {
     });
 }
 
+
+// Inject CSS for line drawing animation
+const style = document.createElement('style');
+style.textContent = `
+    .js-line path {
+        transition: stroke-dashoffset 1s ease-out;
+    }
+`;
+document.head.appendChild(style);
+
 function updateScalingCharts(dimension) {
     const scenarios = ['mimic', '10k', 'globem'];
     const xLabels = {
@@ -248,7 +258,7 @@ function updateScalingCharts(dimension) {
         const hoverFormat = dimension === 'token' ? (v) => v.toLocaleString() : (dimension === 'cost' ? (v) => '$' + v.toFixed(4) : (v) => v);
 
         models.forEach((model, i) => {
-            const len = data[model].turns.length; // Assuming all arrays same length
+            const len = data[model].turns.length;
             const modelNormX = allNormX.slice(offset, offset + len);
 
             // Get raw values for customdata (hover)
@@ -264,12 +274,12 @@ function updateScalingCharts(dimension) {
                 x: modelNormX,
                 y: data[model].accuracy,
                 customdata: rawValues,
+                mode: 'markers', // Hide lines during transition
                 hovertemplate: `<b>${model}</b><br>${hoverLabels[dimension]}: %{customdata}<br>Accuracy: %{y:.2f}%<extra></extra>`
             });
         });
 
-        // 4. Animate!
-        // Since axis range is fixed [-0.05, 1.05], we only animate points and update tick labels
+        // 4. Animate Points (Lines Hidden)
         Plotly.animate(`scaling-${scenario}`, {
             data: newTraces,
             layout: {
@@ -286,6 +296,31 @@ function updateScalingCharts(dimension) {
                 duration: 800,
                 redraw: true
             }
+        }).then(() => {
+            // 5. After points arrive, Draw Lines
+            // First, enable lines mode
+            Plotly.restyle(`scaling-${scenario}`, { mode: 'lines+markers' });
+
+            // Then, animate the SVG paths
+            requestAnimationFrame(() => {
+                const graphDiv = document.getElementById(`scaling-${scenario}`);
+                const paths = graphDiv.querySelectorAll('.js-line path');
+
+                paths.forEach(path => {
+                    const len = path.getTotalLength();
+                    // Set initial state (hidden)
+                    path.style.transition = 'none';
+                    path.style.strokeDasharray = len;
+                    path.style.strokeDashoffset = len;
+
+                    // Force reflow
+                    path.getBoundingClientRect();
+
+                    // Animate to visible
+                    path.style.transition = 'stroke-dashoffset 1s ease-out';
+                    path.style.strokeDashoffset = '0';
+                });
+            });
         });
     });
 }