fix display

charts.js

@@ -279,28 +279,27 @@ function updateScalingCharts(dimension) {
             });
         });
 
-        // 4. Animation Strategy: Hide Lines -> Move Points -> Draw Lines
+        // 4. Two-Phase Animation: Points Only -> Add Lines with Drawing Effect
 
         const graphDiv = document.getElementById(`scaling-${scenario}`);
 
-        // A. Hide lines via opacity (keep DOM elements)
-        let currentPaths = graphDiv.querySelectorAll('.js-line path');
-        currentPaths.forEach(path => {
-            path.style.opacity = '0';
-        });
+        // Phase 1: Update to markers-only mode and animate points
+        const markersOnlyTraces = newTraces.map(trace => ({
+            ...trace,
+            mode: 'markers'  // Remove lines completely
+        }));
 
-        // B. Update Ticks
+        // Update ticks
         Plotly.relayout(`scaling-${scenario}`, {
             'xaxis.title.text': xLabels[dimension],
             'xaxis.tickvals': tickVals,
             'xaxis.ticktext': tickText
         });
 
-        // C. Animate Points (with lines hidden)
+        // Animate points to new positions (no lines)
         Plotly.animate(`scaling-${scenario}`, {
-            data: newTraces,
-            traces: models.map((_, i) => i),
-            layout: {}
+            data: markersOnlyTraces,
+            traces: models.map((_, i) => i)
         }, {
             transition: {
                 duration: 500,
@@ -311,22 +310,36 @@ function updateScalingCharts(dimension) {
                 redraw: true
             }
         }).then(() => {
-            // D. After points arrive, draw lines from left to right
-            requestAnimationFrame(() => {
-                const newPaths = graphDiv.querySelectorAll('.js-line path');
-                newPaths.forEach(path => {
+            // Phase 2: Add lines back and animate them drawing
+            // First, update to lines+markers mode
+            const linesAndMarkersTraces = newTraces.map(trace => ({
+                ...trace,
+                mode: 'lines+markers'
+            }));
+
+            Plotly.react(`scaling-${scenario}`, linesAndMarkersTraces, {
+                ...graphDiv.layout
+            }, plotlyConfig);
+
+            // Now animate the newly created line paths
+            setTimeout(() => {
+                const paths = graphDiv.querySelectorAll('.js-line path');
+                paths.forEach(path => {
                     const len = path.getTotalLength();
-                    // Setup for drawing animation
-                    path.style.opacity = '1';
-                    path.style.transition = 'none';
-                    path.style.strokeDasharray = len;
-                    path.style.strokeDashoffset = len; // Start hidden
-                    path.getBoundingClientRect(); // Force reflow
-                    // Animate: draw from left to right
-                    path.style.transition = 'stroke-dashoffset 0.6s ease-out';
-                    path.style.strokeDashoffset = '0'; // Reveal
+                    if (len > 0) {
+                        // Set up for drawing animation
+                        path.style.strokeDasharray = `${len}`;
+                        path.style.strokeDashoffset = `${len}`;
+
+                        // Force browser to register the initial state
+                        void path.offsetWidth;
+
+                        // Trigger animation
+                        path.style.transition = 'stroke-dashoffset 0.8s ease-out';
+                        path.style.strokeDashoffset = '0';
+                    }
                 });
-            });
+            }, 50); // Small delay to ensure DOM is ready
         });
     });
 }