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,8 +75,14 @@ export const radarSketch = function (p) {
       canvasContainer.offsetHeight
     );
     canvas.parent("canvas-container");
-    // --- START: ADD MOUSE WHEEL LISTENER HERE ---
-    canvas.mouseWheel((event) => {
+
+    // --- 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
@@ -95,9 +101,6 @@ export const radarSketch = function (p) {
             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,
@@ -107,8 +110,10 @@ export const radarSketch = function (p) {
             );
           }
         }
-    });
-    // --- 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 ---