debug and persistent overlays fixed.

predicted position independent of tracks visibility.

steps/src/main.js

@@ -38,6 +38,7 @@ import {
 } from "./utils.js";
 import { appState } from "./state.js";
 import {
+  themeToggleBtn,
   canvasContainer,
   canvasPlaceholder,
   videoPlayer,
@@ -559,7 +560,8 @@ stopBtn.addEventListener("click", () => {
 
 timelineSlider.addEventListener("input", (event) => {
   if (!appState.vizData) return;
-
+  updateDebugOverlay(videoPlayer.currentTime);
+  updatePersistentOverlays(videoPlayer.currentTime);
   // --- 1. Live Seeking (Throttled for performance) ---
   // This part gives you the immediate visual feedback as you drag the slider.
   // We use a simple timestamp check to prevent it from running too often.
@@ -599,7 +601,6 @@ timelineSlider.addEventListener("input", (event) => {
 
 timelineSlider.addEventListener("wheel", (event) => {
   if (!appState.vizData) return;
-
   // 1. Prevent the page from scrolling up and down
   event.preventDefault();
 
@@ -637,6 +638,7 @@ timelineSlider.addEventListener("wheel", (event) => {
     console.log("Scrolling stopped. Performing final, debounced resync.");
     updateFrame(newFrame, true);
     updatePersistentOverlays(videoPlayer.currentTime);
+    updateDebugOverlay(videoPlayer.currentTime);
   }, 300); // Wait 300ms after the last scroll event
 });
 
@@ -726,6 +728,8 @@ colorToggles.forEach((t) => {
     }
     if (t === toggleDebugOverlay || t === toggleDebug2Overlay) {
       updateDebugOverlay(videoPlayer.currentTime);
+      updatePersistentOverlays(videoPlayer.currentTime);
+
     }
   });
 });
@@ -780,6 +784,7 @@ document.addEventListener("keydown", (event) => {
     "a",
     "s",
     "m",
+    "q",
   ];
 
   if (!appState.vizData || !recognizedKeys.includes(key)) {
@@ -825,6 +830,9 @@ document.addEventListener("keydown", (event) => {
       colorToggles[toggleIndex].click();
     }
   }
+  if (key === "q") {
+    themeToggleBtn.click();
+  }
   if (key === "t") {
     toggleTracks.click();
   }
@@ -839,6 +847,7 @@ document.addEventListener("keydown", (event) => {
   }
   if (key === "p") {
     togglePredictedPos.click();
+    appState.p5_instance.redraw();
   }
   if (key === "s") {
     toggleSnrColor.click();
@@ -846,6 +855,14 @@ document.addEventListener("keydown", (event) => {
   if (key === "a") {
     toggleDebugOverlay.click();
     toggleDebug2Overlay.click();
+    if (isDebug1Visible && isDebug2Visible) {
+        radarInfoOverlay.classList.add("hidden");
+        videoInfoOverlay.classList.add("hidden");
+        return;
+      }
+      // Otherwise, make sure they are visible.
+      radarInfoOverlay.classList.remove("hidden");
+      videoInfoOverlay.classList.remove("hidden");
   }
   if (key === "m") {
     if (collapsibleMenu.classList.contains("-translate-x-full")) {

steps/src/p5/radarSketch.js

@@ -12,7 +12,7 @@ import {
   toggleTracks,
   togglePredictedPos,
   toggleCovariance,
-  toggleVelocity
+  toggleVelocity,
 } from "../dom.js";
 import {
   drawStaticRegionsToBuffer,
@@ -90,13 +90,36 @@ export const radarSketch = function (p) {
     calculatePlotScales();
     // Draw coordinate axes
     drawAxes(p, plotScales);
-    drawEgoVehicle(p, plotScales)
+    drawEgoVehicle(p, plotScales);
     // Get current frame data
     const frameData = appState.vizData.radarFrames[appState.currentFrame];
     if (frameData) {
       // Draw object trajectories and markers if enabled
-      if (toggleVelocity.checked){
-        drawTrackMarkers(p, plotScales)
+      if (toggleVelocity.checked) {
+        drawTrackMarkers(p, plotScales);
+      }
+      if (togglePredictedPos.checked) {
+        for (const track of appState.vizData.tracks) {
+          const log = track.historyLog.find(
+            (log) => log.frameIdx === appState.currentFrame + 1
+          );
+          if (
+            log &&
+            log.predictedPosition &&
+            log.predictedPosition[0] !== null
+          ) {
+            const pos = log.predictedPosition;
+            const x = pos[0] * plotScales.plotScaleX;
+            const y = pos[1] * plotScales.plotScaleY;
+
+            p.push();
+            p.stroke(255, 0, 0); // Red for predicted
+            p.strokeWeight(2);
+            p.line(x - 4, y - 4, x + 4, y + 4);
+            p.line(x + 4, y - 4, x - 4, y + 4);
+            p.pop();
+          }
+        }
       }
       if (toggleTracks.checked) {
         drawTrajectories(p, plotScales);
@@ -119,30 +142,6 @@ export const radarSketch = function (p) {
             }
           }
         }
-
-        if (togglePredictedPos.checked) {
-          for (const track of appState.vizData.tracks) {
-            const log = track.historyLog.find(
-              (log) => log.frameIdx === appState.currentFrame + 1
-            );
-            if (
-              log &&
-              log.predictedPosition &&
-              log.predictedPosition[0] !== null
-            ) {
-              const pos = log.predictedPosition;
-              const x = pos[0] * plotScales.plotScaleX;
-              const y = pos[1] * plotScales.plotScaleY;
-
-              p.push();
-              p.stroke(255, 0, 0); // Red for predicted
-              p.strokeWeight(2);
-              p.line(x - 4, y - 4, x + 4, y + 4);
-              p.line(x + 4, y - 4, x - 4, y + 4);
-              p.pop();
-            }
-          }
-        }
       }
       // Draw the point cloud for the current frame
       drawPointCloud(p, frameData.pointCloud, plotScales);