fix display

charts.js

@@ -279,27 +279,24 @@ function updateScalingCharts(dimension) {
             });
         });
 
+        // 4. Animation Strategy: Hide Lines -> Move Points -> Draw Lines
 
-        // 4. Synchronous Animation: Points Move + Lines Draw
-
-        // A. Hide Lines BEFORE updating data (so new lines start hidden)
         const graphDiv = document.getElementById(`scaling-${scenario}`);
+
+        // A. Hide lines via opacity (keep DOM elements)
         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
+            path.style.opacity = '0';
         });
 
-        // B. Update Ticks (Instant Layout Update)
+        // B. Update Ticks
         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)
+        // C. Animate Points (with lines hidden)
         Plotly.animate(`scaling-${scenario}`, {
             data: newTraces,
             traces: models.map((_, i) => i),
@@ -311,25 +308,23 @@ function updateScalingCharts(dimension) {
             },
             frame: {
                 duration: 500,
-                redraw: true // TRUE: Need to redraw to update line paths to new positions
+                redraw: true
             }
-        });
-
-        // D. Trigger Line Drawing (CSS Animation) - Start immediately
-        // Wait one frame for Plotly to create the new path elements
-        requestAnimationFrame(() => {
+        }).then(() => {
+            // D. After points arrive, draw lines from left to right
             requestAnimationFrame(() => {
                 const newPaths = graphDiv.querySelectorAll('.js-line path');
                 newPaths.forEach(path => {
-                    const len = path.getTotalLength() || 10000;
-                    // Set initial hidden state
+                    const len = path.getTotalLength();
+                    // Setup for drawing animation
+                    path.style.opacity = '1';
                     path.style.transition = 'none';
                     path.style.strokeDasharray = len;
-                    path.style.strokeDashoffset = len;
+                    path.style.strokeDashoffset = len; // Start hidden
                     path.getBoundingClientRect(); // Force reflow
-                    // Animate to visible
-                    path.style.transition = 'stroke-dashoffset 0.5s ease-out';
-                    path.style.strokeDashoffset = '0';
+                    // Animate: draw from left to right
+                    path.style.transition = 'stroke-dashoffset 0.6s ease-out';
+                    path.style.strokeDashoffset = '0'; // Reveal
                 });
             });
         });