fix display

charts.js

@@ -311,35 +311,55 @@ function updateScalingCharts(dimension) {
             }
         }).then(() => {
             // Phase 2: Add lines back and animate them drawing
-            // First, update to lines+markers mode
             const linesAndMarkersTraces = newTraces.map(trace => ({
                 ...trace,
                 mode: 'lines+markers'
             }));
 
+            // Use Plotly.react and wait for it to complete
             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();
-                    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 2s ease-out';
-                        path.style.strokeDashoffset = '0';
-                    }
+            }, plotlyConfig).then(() => {
+                // Give browser time to render
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        // Try multiple selectors to find the line paths
+                        let paths = graphDiv.querySelectorAll('.scatterlayer .js-line path');
+                        if (paths.length === 0) {
+                            paths = graphDiv.querySelectorAll('.js-line path');
+                        }
+                        if (paths.length === 0) {
+                            paths = graphDiv.querySelectorAll('path.js-line');
+                        }
+                        if (paths.length === 0) {
+                            paths = graphDiv.querySelectorAll('.scatter path');
+                        }
+
+                        console.log(`Found ${paths.length} paths for ${scenario}`);
+
+                        paths.forEach((path, idx) => {
+                            const len = path.getTotalLength();
+                            console.log(`Path ${idx}: length = ${len}`);
+
+                            if (len > 0) {
+                                // Reset any previous animation
+                                path.style.transition = 'none';
+                                path.style.strokeDasharray = len + ' ' + len;
+                                path.style.strokeDashoffset = len;
+
+                                // Force reflow
+                                path.getBoundingClientRect();
+
+                                // Start animation after a tiny delay
+                                setTimeout(() => {
+                                    path.style.transition = 'stroke-dashoffset 2s ease-out';
+                                    path.style.strokeDashoffset = '0';
+                                }, 10);
+                            }
+                        });
+                    });
                 });
-            }, 50); // Small delay to ensure DOM is ready
+            });
         });
     });
 }