fix display

charts.js

@@ -274,50 +274,61 @@ function updateScalingCharts(dimension) {
                 x: modelNormX,
                 y: data[model].accuracy,
                 customdata: rawValues,
-                mode: 'markers', // Hide lines during transition
+                mode: 'lines+markers', // KEEP LINES - we'll hide them via CSS
                 hovertemplate: `<b>${model}</b><br>${hoverLabels[dimension]}: %{customdata}<br>Accuracy: %{y:.2f}%<extra></extra>`
             });
         });
 
-        // 4. Animate Points (Lines Hidden)
+
+        // 4. Synchronous Animation: Points Move + Lines Draw
+
+        // A. Hide Lines BEFORE updating data (so new lines start hidden)
+        const graphDiv = document.getElementById(`scaling-${scenario}`);
+        let currentPaths = graphDiv.querySelectorAll('.js-line path');
+        currentPaths.forEach(path => {
+            const len = path.getTotalLength() || 10000;
+            path.style.transition = 'none';
+            path.style.strokeDasharray = len;
+            path.style.strokeDashoffset = len; // Hide
+        });
+
+        // B. Update Ticks (Instant Layout Update)
+        Plotly.relayout(`scaling-${scenario}`, {
+            'xaxis.title.text': xLabels[dimension],
+            'xaxis.tickvals': tickVals,
+            'xaxis.ticktext': tickText
+        });
+
+        // C. Animate Points (Data Update with redraw to create new line paths)
         Plotly.animate(`scaling-${scenario}`, {
             data: newTraces,
-            layout: {
-                'xaxis.title.text': xLabels[dimension],
-                'xaxis.tickvals': tickVals,
-                'xaxis.ticktext': tickText
-            }
+            traces: models.map((_, i) => i),
+            layout: {}
         }, {
             transition: {
-                duration: 800,
+                duration: 500,
                 easing: 'cubic-in-out'
             },
             frame: {
-                duration: 800,
-                redraw: true
+                duration: 500,
+                redraw: true // TRUE: Need to redraw to update line paths to new positions
             }
-        }).then(() => {
-            // 5. After points arrive, Draw Lines
-            // First, enable lines mode
-            Plotly.restyle(`scaling-${scenario}`, { mode: 'lines+markers' });
+        });
 
-            // Then, animate the SVG paths
+        // D. Trigger Line Drawing (CSS Animation) - Start immediately
+        // Wait one frame for Plotly to create the new path elements
+        requestAnimationFrame(() => {
             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)
+                const newPaths = graphDiv.querySelectorAll('.js-line path');
+                newPaths.forEach(path => {
+                    const len = path.getTotalLength() || 10000;
+                    // Set initial hidden state
                     path.style.transition = 'none';
                     path.style.strokeDasharray = len;
                     path.style.strokeDashoffset = len;
-
-                    // Force reflow
-                    path.getBoundingClientRect();
-
+                    path.getBoundingClientRect(); // Force reflow
                     // Animate to visible
-                    path.style.transition = 'stroke-dashoffset 1s ease-out';
+                    path.style.transition = 'stroke-dashoffset 0.5s ease-out';
                     path.style.strokeDashoffset = '0';
                 });
             });