shortcut for theme toggle button (q)

steps/index.html

@@ -81,10 +81,14 @@
     <div class="absolute top-4 right-4 flex items-center gap-2">
       <button id="fullscreen-btn" type="button"
         class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 font-medium rounded-lg text-xs px-4 py-2 transition-colors">
-        FULLSCREEN ( F11 )
+        FULLSCREEN
+        <span
+          class="text-xs font-mono bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 px-1.5 py-0.5 rounded">
+          (F11)
+        </span>
       </button>
       <button id="theme-toggle" type="button"
-        class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
+        class=" flex flex-row items-center gap-2 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
         <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
           <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
         </svg>
@@ -93,6 +97,10 @@
             d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm-.707 12.122l.707-.707a1 1 0 011.414 1.414l-.707.707a1 1 0 01-1.414-1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
             fill-rule="evenodd" clip-rule="evenodd"></path>
         </svg>
+        <span
+          class="text-xs font-mono bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 px-1.5 py-0.5 rounded">
+          (q)
+        </span>
       </button>
     </div>
   </header>
@@ -207,7 +215,7 @@
   <!-- START: ADD THIS NEW SCRIM ELEMENT -->
   <div id="menu-scrim" class="fixed inset-0 bg-black/50 z-20 hidden"></div>
   <!-- END: ADD THIS NEW SCRIM ELEMENT -->
-  
+
   <!-- Main Content -->
   <main class="flex-grow container mx-auto p-4 pt-8 flex flex-col lg:flex-row gap-6">
     <div class="lg:w-1/2 flex flex-col gap-4">
@@ -240,7 +248,8 @@
       </div>
       <div id="speed-graph-container"
         class="w-full h-[25vh] bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg shadow-inner flex items-center justify-center">
-        <p id="speed-graph-placeholder" class="text-gray-500 dark:text-gray-400 text-lg">Load JSON & Video to see speed graph
+        <p id="speed-graph-placeholder" class="text-gray-500 dark:text-gray-400 text-lg">Load JSON & Video to see speed
+          graph
         </p>
       </div>
     </div>

steps/src/dom.js

@@ -5,6 +5,7 @@ import { VIDEO_FPS } from "./constants.js";
 
 // --- DOM Element References --- //
 
+export const themeToggleBtn = document.getElementById("theme-toggle");
 export const canvasContainer = document.getElementById("canvas-container");
 export const canvasPlaceholder = document.getElementById("canvas-placeholder");
 export const videoPlayer = document.getElementById("video-player");
@@ -24,39 +25,25 @@ export const speedSlider = document.getElementById("speed-slider");
 export const speedDisplay = document.getElementById("speed-display");
 export const featureToggles = document.getElementById("feature-toggles");
 export const toggleSnrColor = document.getElementById("toggle-snr-color");
-export const toggleClusterColor = document.getElementById(
-  "toggle-cluster-color"
-);
+export const toggleClusterColor = document.getElementById("toggle-cluster-color");
 export const toggleInlierColor = document.getElementById("toggle-inlier-color");
-export const toggleStationaryColor = document.getElementById(
-  "toggle-stationary-color"
-);
+export const toggleStationaryColor = document.getElementById("toggle-stationary-color");
 export const toggleVelocity = document.getElementById("toggle-velocity");
 export const toggleTracks = document.getElementById("toggle-tracks");
 export const toggleEgoSpeed = document.getElementById("toggle-ego-speed");
 export const toggleFrameNorm = document.getElementById("toggle-frame-norm");
-export const toggleDebugOverlay = document.getElementById(
-  "toggle-debug-overlay"
-);
+export const toggleDebugOverlay = document.getElementById("toggle-debug-overlay");
 export const egoSpeedDisplay = document.getElementById("ego-speed-display");
 export const canSpeedDisplay = document.getElementById("can-speed-display");
 export const debugOverlay = document.getElementById("debug-overlay");
-export const toggleDebug2Overlay = document.getElementById(
-  "toggle-debug2-overlay"
-);
+export const toggleDebug2Overlay = document.getElementById("toggle-debug2-overlay");
 export const snrMinInput = document.getElementById("snr-min-input");
 export const snrMaxInput = document.getElementById("snr-max-input");
 export const applySnrBtn = document.getElementById("apply-snr-btn");
-export const autoOffsetIndicator = document.getElementById(
-  "auto-offset-indicator"
-);
+export const autoOffsetIndicator = document.getElementById("auto-offset-indicator");
 export const clearCacheBtn = document.getElementById("clear-cache-btn");
-export const speedGraphContainer = document.getElementById(
-  "speed-graph-container"
-);
-export const speedGraphPlaceholder = document.getElementById(
-  "speed-graph-placeholder"
-);
+export const speedGraphContainer = document.getElementById("speed-graph-container");
+export const speedGraphPlaceholder = document.getElementById("speed-graph-placeholder");
 export const modalContainer = document.getElementById("modal-container");
 export const modalOverlay = document.getElementById("modal-overlay");
 export const modalContent = document.getElementById("modal-content");
@@ -64,13 +51,9 @@ export const modalText = document.getElementById("modal-text");
 export const modalOkBtn = document.getElementById("modal-ok-btn");
 export const modalCancelBtn = document.getElementById("modal-cancel-btn");
 export const toggleCloseUp = document.getElementById("toggle-close-up");
-export const togglePredictedPos = document.getElementById(
-  "toggle-predicted-pos"
-);
+export const togglePredictedPos = document.getElementById("toggle-predicted-pos");
 export const toggleCovariance = document.getElementById("toggle-covariance");
-export const modalProgressContainer = document.getElementById(
-  "modal-progress-container"
-);
+export const modalProgressContainer = document.getElementById("modal-progress-container");
 export const modalProgressBar = document.getElementById("modal-progress-bar");
 export const modalProgressText = document.getElementById("modal-progress-text");
 export const timelineTooltip = document.getElementById("timeline-tooltip");
@@ -98,7 +81,6 @@ export const fullscreenEnterIcon = document.getElementById("fullscreen-enter-ico
 export const fullscreenExitIcon = document.getElementById("fullscreen-exit-icon");
 export const menuScrim = document.getElementById("menu-scrim");
 
-
 //----------------------UPDATE FRAME Function----------------------//
 // Updates the UI to reflect the current radar frame and synchronizes video playback.
 export function updateFrame(frame, forceVideoSeek) {
@@ -292,7 +274,7 @@ export function updatePersistentOverlays(currentMediaTime) {
   // If we don't have the necessary data, hide the overlays and exit.
   const isDebug1Visible = toggleDebugOverlay.checked;
   const isDebug2Visible = toggleDebug2Overlay.checked;
-  
+
   if (!appState.vizData || !appState.videoStartDate) {
     radarInfoOverlay.classList.add("hidden");
     videoInfoOverlay.classList.add("hidden");
@@ -303,6 +285,10 @@ export function updatePersistentOverlays(currentMediaTime) {
     videoInfoOverlay.classList.add("hidden");
     return;
   }
+  if(isDebug1Visible || isDebug2Visible){
+    videoInfoOverlay.classList.add("hidden");
+    return;
+  }
   // Otherwise, make sure they are visible.
   radarInfoOverlay.classList.remove("hidden");
   videoInfoOverlay.classList.remove("hidden");
@@ -310,7 +296,9 @@ export function updatePersistentOverlays(currentMediaTime) {
   // --- Update Radar Overlay ---
   const currentRadarFrame = appState.vizData.radarFrames[appState.currentFrame];
   if (currentRadarFrame) {
-    const absRadarTime = new Date(appState.videoStartDate.getTime() + currentRadarFrame.timestampMs);
+    const absRadarTime = new Date(
+      appState.videoStartDate.getTime() + currentRadarFrame.timestampMs
+    );
     const targetRadarTimeMs = currentRadarFrame.timestampMs;
     const offsetMs = parseFloat(offsetInput.value) || 0;
     const driftMs = currentMediaTime * 1000 + offsetMs - targetRadarTimeMs;
@@ -321,7 +309,9 @@ export function updatePersistentOverlays(currentMediaTime) {
             Frame: ${appState.currentFrame + 1}
             | Abs Time: ${formatUTCTime(absRadarTime)}
             | Color Mode: <b>${colorMode}</b>
-            | Drift: <b style="color: ${driftColor};">${driftMs.toFixed(0)}ms  </b>
+            | Drift: <b style="color: ${driftColor};">${driftMs.toFixed(
+      0
+    )}ms  </b>
         `;
   }
 

steps/src/theme.js

@@ -1,6 +1,5 @@
 import { appState } from "./state.js";
-import { videoPlayer } from "./dom.js";
-const themeToggleBtn = document.getElementById("theme-toggle");
+import { videoPlayer, themeToggleBtn} from "./dom.js";
 const darkIcon = document.getElementById("theme-toggle-dark-icon");
 const lightIcon = document.getElementById("theme-toggle-light-icon");