Update frame moved to videoframecallback. Now the Sync engine is 100% solid logic.

steps/src/debug.js

@@ -5,10 +5,10 @@
 
 export const debugFlags = {
   // Logs from videoFrameCallback and animationLoop in sync.js
-  sync: false,
+  sync: true,
 
   // Logs from the main p5.js draw() functions (e.g., radarSketch.js)
-  drawing: false,
+  drawing: true,
 
   // Logs related to file loading, parsing, and caching
   fileLoading: false,

steps/src/p5/radarSketch.js

@@ -75,40 +75,45 @@ export const radarSketch = function (p) {
       canvasContainer.offsetHeight
     );
     canvas.parent("canvas-container");
-    // --- START: ADD MOUSE WHEEL LISTENER HERE ---
-    canvas.mouseWheel((event) => {
-      // Only run this logic if the close-up mode is active
-      if (appState.isCloseUpMode) {
-        event.preventDefault(); // Prevent the page from scrolling
-
-        const zoomSpeed = 0.5;
-        const direction = Math.sign(event.deltaY);
-        let newZoomFactor = appState.zoomFactor - direction * zoomSpeed;
-
-        // Clamp the zoom factor to a reasonable range
-        newZoomFactor = p.constrain(newZoomFactor, 1.5, 30);
-        appState.zoomFactor = newZoomFactor;
-
-        // IMPORTANT: We must manually trigger a redraw of the zoom sketch
-        // so it immediately updates with the new zoom factor.
-        if (
-          appState.zoomSketchInstance &&
-          appState.zoomSketchInstance.updateAndDraw
-        ) {
-          // We just need to trigger an update; the zoom sketch will read the new
-          // appState.zoomFactor when it redraws.
-          // We find the current hovered items again to pass them.
-          const hoveredItems = handleCloseUpDisplay(p, plotScales);
-          appState.zoomSketchInstance.updateAndDraw(
-            p.mouseX,
-            p.mouseY,
-            hoveredItems,
-            plotScales
-          );
+
+    // --- START: Manual Mouse Wheel Listener for Passive Option ---
+    // We attach the listener manually to the canvas element to set the `passive` flag to `false`.
+    // This is necessary to allow `event.preventDefault()` and signals to the browser that
+    // we are intentionally handling the scroll behavior, resolving the console warning.
+    canvas.elt.addEventListener(
+      "wheel",
+      (event) => {
+        // Only run this logic if the close-up mode is active
+        if (appState.isCloseUpMode) {
+          event.preventDefault(); // Prevent the page from scrolling
+
+          const zoomSpeed = 0.5;
+          const direction = Math.sign(event.deltaY);
+          let newZoomFactor = appState.zoomFactor - direction * zoomSpeed;
+
+          // Clamp the zoom factor to a reasonable range
+          newZoomFactor = p.constrain(newZoomFactor, 1.5, 30);
+          appState.zoomFactor = newZoomFactor;
+
+          // IMPORTANT: We must manually trigger a redraw of the zoom sketch
+          // so it immediately updates with the new zoom factor.
+          if (
+            appState.zoomSketchInstance &&
+            appState.zoomSketchInstance.updateAndDraw
+          ) {
+            const hoveredItems = handleCloseUpDisplay(p, plotScales);
+            appState.zoomSketchInstance.updateAndDraw(
+              p.mouseX,
+              p.mouseY,
+              hoveredItems,
+              plotScales
+            );
+          }
         }
-      }
-    });
-    // --- END: ADD MOUSE WHEEL LISTENER HERE ---
+      },
+      { passive: false }
+    );
+    // --- END: Manual Mouse Wheel Listener ---
 
     // Initialize graphics buffers
     staticBackgroundBuffer = p.createGraphics(p.width, p.height);

steps/src/sync.js

@@ -170,6 +170,7 @@ export function videoFrameCallback(now, metadata) {
   // 3. Update the application state. This is the ONLY state this function changes.
   if (frameIndex !== appState.currentFrame) {
     appState.currentFrame = frameIndex;
+    updateFrame(appState.currentFrame); // <-- MOVE UI UPDATE CALL HERE
   }
 
   // Re-register the callback for the next frame to create a loop
@@ -183,11 +184,9 @@ export function videoFrameCallback(now, metadata) {
 export function animationLoop() {
   if (debugFlags.sync) console.log("anim_DEBUG: animationLoop running.");
 
-  // 1. Update all UI elements based on the current frame.
-  updateFrame(appState.currentFrame);
-
   // Update debug overlay information
   updatePersistentOverlays(videoPlayer.currentTime);
+  // updatePersistentOverlays(); // This is a duplicate call and can be removed
   updateDebugOverlay(videoPlayer.currentTime);
 
   // --- START: Centralized Redraw Logic ---