From 4d0e7fe5cd7d6650e408859b419d8e3cf0104d08 Mon Sep 17 00:00:00 2001
From: rakadu1 <rakadu1@bajajauto.co.in>
Date: Mon, 8 Sep 2025 14:29:36 +0530
Subject: [PATCH] Debug Overlays fixed.

---
 steps/index.html  | 313 ++++++++++++++++++++--------------------------
 steps/src/dom.js  | 192 +++++++++++++++++-----------
 steps/src/main.js |  71 ++++++++++-
 steps/src/sync.js |   2 +
 4 files changed, 321 insertions(+), 257 deletions(-)
diff --git a/steps/index.html b/steps/index.html
index 92e5118..6f27dc0 100644
--- a/steps/index.html
+++ b/steps/index.html
@@ -1,5 +1,4 @@
 <!DOCTYPE html>
-<!-- DARK MODE: The 'dark' class will be toggled here by JavaScript -->
 <html lang="en">
 
 <head>
@@ -7,16 +6,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Radar and Video Visualizer - Timestamp Synchronized</title>
   <link rel="icon" type="image/png" sizes="32x32" href="favicon.png" />
-  <script src="https://cdn.tailwindcss.com"></script> <!--CSS link-->
-  <script src="https://unpkg.com/oboe@2.1.5/dist/oboe-browser.min.js"></script><!--Oboe link-->
-
-  <!-- DARK MODE: Step 1 - Configure Tailwind to use the 'class' strategy for dark mode -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/oboe@2.1.5/dist/oboe-browser.min.js"></script>
   <script>
     tailwind.config = {
       darkMode: "class",
     };
   </script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script> <!--P5 link-->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link
@@ -31,12 +28,7 @@
       font-family: "Roboto Mono", monospace;
     }
 
-    .p5Canvas {
-      border-radius: 0.5rem;
-      box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
-        0 2px 4px -2px rgb(0 0 0 / 0.1);
-    }
-
+    .p5Canvas,
     video {
       border-radius: 0.5rem;
       box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
@@ -67,22 +59,11 @@
         0 -2px 4px -2px rgb(0 0 0 / 0.1);
     }
 
-    #modal-overlay {
-      transition: opacity 0.2s ease-in-out;
-    }
-
+    #modal-overlay,
     #modal-content {
-      transition: transform 0.2s ease-in-out;
+      transition: all 0.2s ease-in-out;
     }
 
-
-    /* ... (your existing styles) ... */
-
-    #modal-content {
-      transition: transform 0.2s ease-in-out;
-    }
-
-    /* ADD THIS NEW CSS RULE */
     #progress-bar {
       transition: width 0.1s linear;
     }
@@ -90,16 +71,18 @@
 </head>
 
 <body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 flex flex-col min-h-screen">
-  <header class="bg-white dark:bg-gray-800 shadow-md p-4 z-10 relative">
+  <header class="bg-white dark:bg-gray-800 shadow-md p-4 z-20 relative">
     <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
       Radar and Video Synchronizer
     </h1>
     <p class="text-sm text-gray-600 dark:text-gray-400">
       High-precision, timestamp-synchronized playback.
     </p>
-
-    <!-- DARK MODE: Step 2 - Add the toggle button -->
-    <div class="absolute top-4 right-4">
+    <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 )
+      </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">
         <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
@@ -114,160 +97,146 @@
     </div>
   </header>
 
-  <main class="flex-grow container mx-auto p-4 flex flex-col lg:flex-row gap-6">
-    <div class="lg:w-1/2 flex flex-col gap-4">
-      <div class="relative">
-        <div id="canvas-container"
-          class="w-full h-[60vh] 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="canvas-placeholder" class="text-gray-500 dark:text-gray-400 text-lg">
-            Load JSON data to start visualization
-          </p>
-        </div>
-        <!-- START: Add the new Radar Info Overlay here -->
-        <div id="radar-info-overlay"
-          class="absolute top-1 left-2 z-10 bg-black bg-opacity-60 text-white font-mono text-xs p-2 rounded-md hidden">
-          <!-- Content will be added by JavaScript -->
-        </div>
-        <!-- END: Add the new Radar Info Overlay here -->
-        <div class="absolute bottom-2 left-1/2 -translate-x-1/2 flex items-center justify-center gap-4">
-          <div id="ego-speed-display"
-            class="bg-black bg-opacity-60 text-white text-sm px-3 py-1.5 rounded-md hidden font-mono"></div>
-          <div id="can-speed-display"
-            class="bg-black bg-opacity-60 text-white text-sm px-3 py-1.5 rounded-md hidden font-mono"></div>
-        </div>
-      </div>
-      <div id="feature-toggles"
-        class="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border dark:border-gray-700 flex flex-col items-center gap-4 hidden">
-        <div class="flex flex-wrap justify-center gap-x-6 gap-y-2">
+  <!-- Sidebar (Initially hidden) -->
+  <aside id="collapsible-menu"
+    class="fixed top-0 left-0 h-full bg-white dark:bg-gray-800 shadow-xl z-30 transform -translate-x-full transition-transform duration-300 ease-in-out w-full max-w-sm flex flex-col">
+    <div class="flex items-center justify-between p-4 border-b dark:border-gray-700">
+      <h2 class="text-xl font-bold">Display Settings</h2>
+      <button id="close-menu-btn"
+        class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
+        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+        </svg>
+      </button>
+    </div>
+
+    <!-- Scrollable Content Area -->
+    <div class="flex-grow p-4 overflow-y-auto">
+      <div id="feature-toggles" class="flex flex-col items-start gap-4">
+        <!-- Checkboxes -->
+        <div class="flex flex-col items-start gap-3 w-full">
           <label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" id="toggle-snr-color"
-              class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" />
-            Color by SNR</label>
+              class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" /> Color by SNR (S)</label>
           <label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" id="toggle-cluster-color"
-              class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" />
-            Color by Cluster</label>
+              class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" /> Color by Cluster</label>
           <label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" id="toggle-inlier-color"
-              class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" />
-            Color by Inlier</label>
+              class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" /> Color by Inlier</label>
           <label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox"
               id="toggle-stationary-color" class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" />
             Color by Stationary</label>
           <label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" id="toggle-velocity"
-              class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" checked />
-            Show Object Details</label>
+              class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" checked /> Show Object Details
+            (D)</label>
           <label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" id="toggle-tracks"
-              class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" checked />
-            Show Tracks</label>
+              class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" checked /> Show Tracks (T)</label>
           <label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" id="toggle-ego-speed"
-              class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" checked />
-            Show Ego Speed</label>
+              class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" checked /> Show Ego Speed</label>
           <label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" id="toggle-frame-norm"
-              class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" />
-            Per-Frame SNR</label>
+              class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" /> Per-Frame SNR</label>
           <label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" id="toggle-debug-overlay"
-              class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" />
-            Show Debug Info</label>
+              class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" /> Show Debug Info</label>
           <label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox"
-              id="toggle-debug2-overlay" class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" />
-            Show Advanced Debug</label>
+              id="toggle-debug2-overlay" class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" /> Show
+            Advanced Debug (A)</label>
           <label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" id="toggle-close-up"
-              class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" />
-            CLOSE-UP</label>
-          <label class="flex items-center gap-2 text-sm cursor-pointer">
-            <input type="checkbox" id="toggle-predicted-pos"
-              class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" />
-            Show Predicted Position</label>
-          <label class="flex items-center gap-2 text-sm cursor-pointer">
-            <input type="checkbox" id="toggle-covariance"
-              class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" />
-            Show Covariance</label>
+              class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" /> CLOSE-UP (C)</label>
+          <label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" id="toggle-predicted-pos"
+              class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" /> Show Predicted Position
+            (P)</label>
+          <label class="flex items-center gap-2 text-sm cursor-pointer"><input type="checkbox" id="toggle-covariance"
+              class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500" /> Show Covariance</label>
         </div>
-        <!-- START: Add This Entire New Block for Custom TTC Controls -->
-        <div class="border-t border-gray-200 dark:border-gray-700 w-full mt-4 pt-4">
-          <div class="text-sm font-medium mb-2 text-center">Track Coloring Mode</div>
-          <div class="flex justify-center items-center gap-6 mb-3">
-            <label class="flex items-center gap-2 text-sm cursor-pointer">
-              <input type="radio" name="ttc-mode" id="ttc-mode-default" class="form-radio h-4 w-4 text-blue-600"
-                checked>
-              Default TTC
-            </label>
-            <label class="flex items-center gap-2 text-sm cursor-pointer">
-              <input type="radio" name="ttc-mode" id="ttc-mode-custom" class="form-radio h-4 w-4 text-blue-600">
-              Custom TTC
-            </label>
-          </div>
 
-          <!-- This container will be shown/hidden by JavaScript -->
-          <div id="custom-ttc-panel"
-            class="hidden flex-col md:flex-row flex-wrap justify-center items-center gap-x-6 gap-y-3">
-            <!-- Critical Risk -->
-            <div class="flex items-center gap-2">
-              <input type="color" id="ttc-color-critical" value="#ff0000" class="w-8 h-8 rounded-md">
-              <label for="ttc-time-critical" class="text-sm">Critical if TTC &lt;=</label>
-              <input type="number" id="ttc-time-critical" value="1" step="0.1"
-                class="w-20 p-2 border border-gray-300 dark:bg-gray-600 dark:border-gray-500 rounded-lg text-sm">
-              <span class="text-sm">s</span>
-            </div>
-            <!-- High Risk -->
-            <div class="flex items-center gap-2">
-              <input type="color" id="ttc-color-high" value="#ffa500" class="w-8 h-8 rounded-md">
-              <label for="ttc-time-high" class="text-sm">High if TTC &lt;=</label>
-              <input type="number" id="ttc-time-high" value="2" step="0.1"
-                class="w-20 p-2 border border-gray-300 dark:bg-gray-600 dark:border-gray-500 rounded-lg text-sm">
-              <span class="text-sm">s</span>
-            </div>
-            <!-- Medium Risk -->
-            <div class="flex items-center gap-2">
-              <input type="color" id="ttc-color-medium" value="#FFC300" class="w-8 h-8 rounded-md">
-              <label for="ttc-time-medium" class="text-sm">Medium if TTC &lt;=</label>
-              <input type="number" id="ttc-time-medium" value="3" step="0.1"
-                class="w-20 p-2 border border-gray-300 dark:bg-gray-600 dark:border-gray-500 rounded-lg text-sm">
-              <span class="text-sm">s</span>
-            </div>
-            <div class="flex items-center gap-2">
-              <input type="color" id="ttc-color-low" value="#00ff00" class="w-8 h-8 rounded-md">
-              <label class="text-sm">Low Risk (everything else)</label>
-            </div>
+        <!-- SNR Controls -->
+        <div class="border-t border-gray-200 dark:border-gray-700 w-full mt-4 pt-4 flex flex-col gap-3">
+          <h3 class="text-sm font-medium text-center">Global SNR Range</h3>
+          <div class="flex items-center gap-2"><label for="snr-min-input" class="text-sm font-medium w-16">Min
+              SNR:</label><input type="number" id="snr-min-input" step="0.1"
+              class="w-full p-2 border border-gray-300 dark:bg-gray-600 dark:border-gray-500 dark:text-white rounded-lg text-sm" />
+          </div>
+          <div class="flex items-center gap-2"><label for="snr-max-input" class="text-sm font-medium w-16">Max
+              SNR:</label><input type="number" id="snr-max-input" step="0.1"
+              class="w-full p-2 border border-gray-300 dark:bg-gray-600 dark:border-gray-500 dark:text-white rounded-lg text-sm" />
           </div>
+          <button id="apply-snr-btn"
+            class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors text-sm font-medium">Apply
+            Manual SNR</button>
         </div>
-        <!-- END: Add This Entire New Block -->
-        <div class="flex items-center gap-4 hidden">
-          <div class="flex items-center gap-2">
-            <label for="snr-min-input" class="text-sm font-medium">Min SNR:</label><input type="number"
-              id="snr-min-input" step="0.1"
-              class="w-20 p-2 border border-gray-300 dark:bg-gray-600 dark:border-gray-500 dark:text-white rounded-lg text-sm" />
+
+        <!-- TTC Controls -->
+        <div class="border-t border-gray-200 dark:border-gray-700 w-full mt-4 pt-4">
+          <div class="text-sm font-medium mb-2 text-center">Track Coloring Mode</div>
+          <div class="flex justify-center items-center gap-6 mb-3">
+            <label class="flex items-center gap-2 text-sm cursor-pointer"><input type="radio" name="ttc-mode"
+                id="ttc-mode-default" class="form-radio h-4 w-4 text-blue-600" checked> Default TTC </label>
+            <label class="flex items-center gap-2 text-sm cursor-pointer"><input type="radio" name="ttc-mode"
+                id="ttc-mode-custom" class="form-radio h-4 w-4 text-blue-600"> Custom TTC </label>
           </div>
-          <div class="flex items-center gap-2">
-            <label for="snr-max-input" class="text-sm font-medium">Max SNR:</label><input type="number"
-              id="snr-max-input" step="0.1"
-              class="w-20 p-2 border border-gray-300 dark:bg-gray-600 dark:border-gray-500 dark:text-white rounded-lg text-sm" />
+          <div id="custom-ttc-panel" class="hidden flex flex-col gap-3">
+            <div class="flex items-center gap-2"><input type="color" id="ttc-color-critical" value="#ff0000"
+                class="w-8 h-8 rounded-md"><label for="ttc-time-critical" class="text-sm">Critical &lt;=</label><input
+                type="number" id="ttc-time-critical" value="1" step="0.1"
+                class="w-20 p-2 border border-gray-300 dark:bg-gray-600 dark:border-gray-500 rounded-lg text-sm"><span
+                class="text-sm">s</span></div>
+            <div class="flex items-center gap-2"><input type="color" id="ttc-color-high" value="#ffa500"
+                class="w-8 h-8 rounded-md"><label for="ttc-time-high" class="text-sm">High &lt;=</label><input
+                type="number" id="ttc-time-high" value="2" step="0.1"
+                class="w-20 p-2 border border-gray-300 dark:bg-gray-600 dark:border-gray-500 rounded-lg text-sm"><span
+                class="text-sm">s</span></div>
+            <div class="flex items-center gap-2"><input type="color" id="ttc-color-medium" value="#FFC300"
+                class="w-8 h-8 rounded-md"><label for="ttc-time-medium" class="text-sm">Medium &lt;=</label><input
+                type="number" id="ttc-time-medium" value="3" step="0.1"
+                class="w-20 p-2 border border-gray-300 dark:bg-gray-600 dark:border-gray-500 rounded-lg text-sm"><span
+                class="text-sm">s</span></div>
+            <div class="flex items-center gap-2"><input type="color" id="ttc-color-low" value="#00ff00"
+                class="w-8 h-8 rounded-md"><label class="text-sm">Low Risk (else)</label></div>
           </div>
-          <button id="apply-snr-btn"
-            class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors text-sm font-medium">
-            Apply
-          </button>
         </div>
       </div>
     </div>
+  </aside>
 
+  <!-- Open Menu Button -->
+  <button id="toggle-menu-btn"
+    class="fixed top-20 left-3 z-20 bg-white dark:bg-gray-700 p-2 rounded-md shadow-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-all">
+    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+    </svg>
+  </button>
+
+  <!-- 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">
+      <div class="relative">
+        <div id="canvas-container"
+          class="w-full h-[75vh] 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="canvas-placeholder" class="text-gray-500 dark:text-gray-400 text-lg">Load JSON data to start
+            visualization</p>
+        </div>
+        <div id="radar-info-overlay"
+          class="absolute top-1 left-2 z-10 bg-black bg-opacity-60 text-white font-mono text-xs p-2 rounded-md hidden">
+        </div>
+        <div class="absolute bottom-2 left-1/2 -translate-x-1/2 flex items-center justify-center gap-4">
+          <div id="ego-speed-display"
+            class="bg-black bg-opacity-60 text-white text-sm px-3 py-1.5 rounded-md hidden font-mono"></div>
+          <div id="can-speed-display"
+            class="bg-black bg-opacity-60 text-white text-sm px-3 py-1.5 rounded-md hidden font-mono"></div>
+        </div>
+      </div>
+    </div>
     <div class="lg:w-1/2 flex flex-col gap-4">
-      <div class="w-full h-[45vh] bg-black rounded-lg shadow-inner flex items-center justify-center relative">
+      <div class="w-full h-[50vh] bg-black rounded-lg shadow-inner flex items-center justify-center relative">
         <video id="video-player" class="w-full h-full object-contain hidden" muted playsinline></video>
-        <p id="video-placeholder" class="text-gray-500 dark:text-gray-400 text-lg">
-          Load a video file
-        </p>
-        <!-- START: Add the new Video Info Overlay here -->
+        <p id="video-placeholder" class="text-gray-500 dark:text-gray-400 text-lg">Load a video file</p>
         <div id="video-info-overlay"
           class="absolute top-1 left-2 z-10 bg-black bg-opacity-60 text-white font-mono text-xs p-2 rounded-md hidden">
-          <!-- Content will be added by JavaScript -->
         </div>
-        <!-- END: Add the new Video Info Overlay here -->
         <div id="debug-overlay"
           class="absolute top-0 left-0 bg-black bg-opacity-60 text-white p-2 font-mono text-xs hidden w-full"></div>
       </div>
       <div id="speed-graph-container"
         class="w-full h-[27vh] 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 to see speed graph
+        <p id="speed-graph-placeholder" class="text-gray-500 dark:text-gray-400 text-lg">Load JSON to see speed graph
         </p>
       </div>
     </div>
@@ -277,25 +246,21 @@
     <div class="mb-4">
       <div id="timeline-tooltip"
         class="absolute hidden bg-gray-900 dark:bg-gray-700 text-white text-xs rounded py-1 px-2 pointer-events-none text-center"
-        style="transform: translate(-50%, -125%);">
-      </div>
+        style="transform: translate(-50%, -125%);"></div>
       <input type="range" id="timeline-slider" min="0" max="0" value="0"
         class="w-full h-2 bg-gray-300 dark:bg-gray-600 rounded-lg appearance-none cursor-pointer" />
     </div>
     <div class="flex flex-wrap items-center justify-center md:justify-between gap-4">
       <div class="flex items-center gap-4 justify-center">
         <button id="load-json-btn"
-          class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium">
-          Load JSON
-        </button>
+          class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium">Load
+          JSON</button>
         <button id="load-video-btn"
-          class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors text-sm font-medium">
-          Load Video
-        </button>
+          class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors text-sm font-medium">Load
+          Video</button>
         <button id="clear-cache-btn"
-          class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors text-sm font-medium">
-          Clear Cache
-        </button>
+          class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors text-sm font-medium">Clear
+          Cache</button>
         <button id="save-session-btn"
           class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors text-sm font-medium">Save
           Session</button>
@@ -303,9 +268,8 @@
           class="bg-teal-600 text-white px-4 py-2 rounded-lg hover:bg-teal-700 transition-colors text-sm font-medium">Load
           Session</button>
         <div class="flex items-center gap-2">
-          <label for="offset-input" class="text-sm font-medium">
-            Offset (ms):<br /><small>(+ve values if radar<br />
-              lags behind video)</small></label>
+          <label for="offset-input" class="text-sm font-medium">Offset (ms):<br /><small>(+ve if radar
+              lags)</small></label>
           <input type="number" id="offset-input" value="0"
             class="w-20 p-2 border border-gray-300 dark:bg-gray-600 dark:border-gray-500 dark:text-white rounded-lg text-sm" />
           <span id="auto-offset-indicator" class="text-green-600 font-semibold text-sm hidden">(auto)</span>
@@ -313,13 +277,9 @@
       </div>
       <div class="flex items-center justify-center gap-4">
         <button id="play-pause-btn"
-          class="px-5 py-2 rounded-lg bg-gray-200 dark:bg-gray-600 dark:hover:bg-gray-500 hover:bg-gray-300 font-semibold w-20">
-          Play
-        </button>
+          class="px-5 py-2 rounded-lg bg-gray-200 dark:bg-gray-600 dark:hover:bg-gray-500 hover:bg-gray-300 font-semibold w-20">Play</button>
         <button id="stop-btn"
-          class="px-5 py-2 rounded-lg bg-gray-200 dark:bg-gray-600 dark:hover:bg-gray-500 hover:bg-gray-300 font-semibold">
-          Stop
-        </button>
+          class="px-5 py-2 rounded-lg bg-gray-200 dark:bg-gray-600 dark:hover:bg-gray-500 hover:bg-gray-300 font-semibold">Stop</button>
         <div class="text-center">
           <span id="frame-counter" class="font-mono text-lg">Frame: 0 / 0</span>
         </div>
@@ -343,18 +303,15 @@
           style="width: 0%"></div>
       </div>
       <span id="modal-progress-text" class="text-sm text-gray-500 dark:text-gray-400 mt-1 block text-center"></span>
-      <div id="modal-buttons" class="flex justify-end gap-4">
-      </div>
-      <div id="modal-buttons" class="flex justify-end gap-4">
+      <div class="flex justify-end gap-4 mt-4">
         <button id="modal-cancel-btn"
-          class="px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-600 dark:hover:bg-gray-500 hover:bg-gray-300 font-semibold">
-          Cancel</button><button id="modal-ok-btn"
-          class="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 font-semibold">
-          OK
-        </button>
+          class="px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-600 dark:hover:bg-gray-500 hover:bg-gray-300 font-semibold">Cancel</button>
+        <button id="modal-ok-btn"
+          class="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 font-semibold">OK</button>
       </div>
     </div>
   </div>
+
   <input type="file" id="json-file-input" class="hidden" accept=".json" />
   <input type="file" id="video-file-input" class="hidden" accept="video/*" />
   <input type="file" id="session-file-input" class="hidden" accept=".json" />
diff --git a/steps/src/dom.js b/steps/src/dom.js
index 235f1e9..2903d22 100644
--- a/steps/src/dom.js
+++ b/steps/src/dom.js
@@ -24,25 +24,39 @@ 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");
@@ -50,9 +64,13 @@ 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");
@@ -61,17 +79,27 @@ export const videoInfoOverlay = document.getElementById("video-info-overlay");
 export const saveSessionBtn = document.getElementById("save-session-btn");
 export const loadSessionBtn = document.getElementById("load-session-btn");
 export const sessionFileInput = document.getElementById("session-file-input");
-export const ttcModeDefault = document.getElementById('ttc-mode-default');
-export const ttcModeCustom = document.getElementById('ttc-mode-custom');
-export const customTtcPanel = document.getElementById('custom-ttc-panel');
-export const ttcColorCritical = document.getElementById('ttc-color-critical');
-export const ttcTimeCritical = document.getElementById('ttc-time-critical');
-export const ttcColorHigh = document.getElementById('ttc-color-high');
-export const ttcTimeHigh = document.getElementById('ttc-time-high');
-export const ttcColorMedium = document.getElementById('ttc-color-medium');
-export const ttcTimeMedium = document.getElementById('ttc-time-medium');
-export const ttcColorLow = document.getElementById('ttc-color-low');
-
+export const ttcModeDefault = document.getElementById("ttc-mode-default");
+export const ttcModeCustom = document.getElementById("ttc-mode-custom");
+export const customTtcPanel = document.getElementById("custom-ttc-panel");
+export const ttcColorCritical = document.getElementById("ttc-color-critical");
+export const ttcTimeCritical = document.getElementById("ttc-time-critical");
+export const ttcColorHigh = document.getElementById("ttc-color-high");
+export const ttcTimeHigh = document.getElementById("ttc-time-high");
+export const ttcColorMedium = document.getElementById("ttc-color-medium");
+export const ttcTimeMedium = document.getElementById("ttc-time-medium");
+export const ttcColorLow = document.getElementById("ttc-color-low");
+export const collapsibleMenu = document.getElementById("collapsible-menu");
+export const toggleMenuBtn = document.getElementById("toggle-menu-btn");
+export const fullscreenBtn = document.getElementById("fullscreen-btn");
+export const mainContent = document.querySelector("main");
+export const closeMenuBtn = document.getElementById("close-menu-btn");
+export const fullscreenEnterIcon = document.getElementById(
+  "fullscreen-enter-icon"
+);
+export const fullscreenExitIcon = document.getElementById(
+  "fullscreen-exit-icon"
+);
 
 //----------------------UPDATE FRAME Function----------------------//
 // Updates the UI to reflect the current radar frame and synchronizes video playback.
@@ -253,82 +281,94 @@ export function updateDebugOverlay(currentMediaTime) {
   debugOverlay.innerHTML = content.join("<br>"); // Update debug overlay content.
 }
 
-
 export function updatePersistentOverlays(currentMediaTime) {
-    // If we don't have the necessary data, hide the overlays and exit.
-    if (!appState.vizData || !appState.videoStartDate) {
-        radarInfoOverlay.classList.add('hidden');
-        videoInfoOverlay.classList.add('hidden');
-        return;
-    }
-
-    // Otherwise, make sure they are visible.
-    radarInfoOverlay.classList.remove('hidden');
-    videoInfoOverlay.classList.remove('hidden');
-
-    // --- Update Radar Overlay ---
-    const currentRadarFrame = appState.vizData.radarFrames[appState.currentFrame];
-    if (currentRadarFrame) {
-        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;
-        const driftColor = Math.abs(driftMs) > 50 ? "#FF6347" : "#98FB98"; // Tomato red or Pale green
+  // 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");
+    return;
+  }
+  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");
+
+  // --- Update Radar Overlay ---
+  const currentRadarFrame = appState.vizData.radarFrames[appState.currentFrame];
+  if (currentRadarFrame) {
+    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;
+    const driftColor = Math.abs(driftMs) > 50 ? "#FF6347" : "#98FB98"; // Tomato red or Pale green
 
-        radarInfoOverlay.innerHTML = `
+    radarInfoOverlay.innerHTML = `
             Frame: ${appState.currentFrame + 1}
             Abs Time: ${formatUTCTime(absRadarTime)}
             Drift: <b style="color: ${driftColor};">${driftMs.toFixed(0)}ms</b>
         `;
-    }
-    
-    // --- Update Video Overlay ---
-    const absVideoTime = new Date(appState.videoStartDate.getTime() + (currentMediaTime * 1000));
-    const videoFrame = Math.floor(currentMediaTime * VIDEO_FPS);
+  }
+
+  // --- Update Video Overlay ---
+  const absVideoTime = new Date(
+    appState.videoStartDate.getTime() + currentMediaTime * 1000
+  );
+  const videoFrame = Math.floor(currentMediaTime * VIDEO_FPS);
 
-    videoInfoOverlay.innerHTML = `
+  videoInfoOverlay.innerHTML = `
         Frame: ${videoFrame}
         Abs Time: ${formatUTCTime(absVideoTime)}
     `;
 }
 
-
 const customTtcInputs = [
-    ttcColorCritical, ttcTimeCritical,
-    ttcColorHigh, ttcTimeHigh,
-    ttcColorMedium, ttcTimeMedium, 
+  ttcColorCritical,
+  ttcTimeCritical,
+  ttcColorHigh,
+  ttcTimeHigh,
+  ttcColorMedium,
+  ttcTimeMedium,
 ];
 
 function updateCustomTtcScheme() {
-    appState.customTtcScheme.critical.time = parseFloat(ttcTimeCritical.value);
-    appState.customTtcScheme.critical.color = ttcColorCritical.value;
-    appState.customTtcScheme.high.time = parseFloat(ttcTimeHigh.value);
-    appState.customTtcScheme.high.color = ttcColorHigh.value;
-    appState.customTtcScheme.medium.time = parseFloat(ttcTimeMedium.value);
-    appState.customTtcScheme.medium.color = ttcColorMedium.value;
-
-    if (appState.p5_instance) {
-        appState.p5_instance.redraw();
-    }
+  appState.customTtcScheme.critical.time = parseFloat(ttcTimeCritical.value);
+  appState.customTtcScheme.critical.color = ttcColorCritical.value;
+  appState.customTtcScheme.high.time = parseFloat(ttcTimeHigh.value);
+  appState.customTtcScheme.high.color = ttcColorHigh.value;
+  appState.customTtcScheme.medium.time = parseFloat(ttcTimeMedium.value);
+  appState.customTtcScheme.medium.color = ttcColorMedium.value;
+
+  if (appState.p5_instance) {
+    appState.p5_instance.redraw();
+  }
 }
 
-ttcModeDefault.addEventListener('change', () => {
-    if (ttcModeDefault.checked) {
-        appState.useCustomTtcScheme = false;
-        customTtcPanel.classList.add('hidden');
-        if (appState.p5_instance) appState.p5_instance.redraw();
-    }
+ttcModeDefault.addEventListener("change", () => {
+  if (ttcModeDefault.checked) {
+    appState.useCustomTtcScheme = false;
+    customTtcPanel.classList.add("hidden");
+    if (appState.p5_instance) appState.p5_instance.redraw();
+  }
 });
 
-ttcModeCustom.addEventListener('change', () => {
-    if (ttcModeCustom.checked) {
-        appState.useCustomTtcScheme = true;
-        customTtcPanel.classList.remove('hidden');
-        updateCustomTtcScheme(); // Apply current custom values immediately
-    }
+ttcModeCustom.addEventListener("change", () => {
+  if (ttcModeCustom.checked) {
+    appState.useCustomTtcScheme = true;
+    customTtcPanel.classList.remove("hidden");
+    updateCustomTtcScheme(); // Apply current custom values immediately
+  }
 });
 
 // Add listeners to all custom inputs to update the scheme on the fly
-customTtcInputs.forEach(input => {
-    input.addEventListener('input', updateCustomTtcScheme);
-});
\ No newline at end of file
+customTtcInputs.forEach((input) => {
+  input.addEventListener("input", updateCustomTtcScheme);
+});
diff --git a/steps/src/main.js b/steps/src/main.js
index cdbb850..373bbd8 100644
--- a/steps/src/main.js
+++ b/steps/src/main.js
@@ -84,6 +84,13 @@ import {
   togglePredictedPos,
   toggleCovariance,
   updatePersistentOverlays,
+  collapsibleMenu,
+  toggleMenuBtn,
+  fullscreenBtn,
+  mainContent,
+  closeMenuBtn,
+  fullscreenEnterIcon,
+  fullscreenExitIcon,
 } from "./dom.js";
 
 import { initializeTheme } from "./theme.js";
@@ -343,6 +350,44 @@ sessionFileInput.addEventListener("change", (event) => {
 
 // --- END: Add Session Management Logic ---
 
+// --- Collapsible Menu Logic ---
+function toggleMenu(show) {
+  if (show) {
+    collapsibleMenu.classList.remove("-translate-x-full");
+    mainContent.classList.add("lg:ml-96");
+  } else {
+    collapsibleMenu.classList.add("-translate-x-full");
+    mainContent.classList.remove("lg:ml-96");
+  }
+}
+
+// Open the menu
+toggleMenuBtn.addEventListener("click", () => toggleMenu(true));
+
+// Close the menu
+closeMenuBtn.addEventListener("click", () => toggleMenu(false));
+
+// --- Fullscreen Logic ---
+fullscreenBtn.addEventListener("click", () => {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen();
+  } else if (document.exitFullscreen) {
+    document.exitFullscreen();
+  }
+});
+
+// This listener updates the icon whenever fullscreen state changes,
+// whether it's triggered by our button or the F11 key.
+document.addEventListener("fullscreenchange", () => {
+  if (document.fullscreenElement) {
+    fullscreenEnterIcon.classList.add("hidden");
+    fullscreenExitIcon.classList.remove("hidden");
+  } else {
+    fullscreenEnterIcon.classList.remove("hidden");
+    fullscreenExitIcon.classList.add("hidden");
+  }
+});
+
 // In main.js, REPLACE your existing jsonFileInput event listener with this entire block:
 
 jsonFileInput.addEventListener("change", (event) => {
@@ -703,7 +748,9 @@ document.addEventListener("keydown", (event) => {
   // --- FIX APPLIED HERE ---
   // We only want to block shortcuts if the user is actively typing in a text or number input.
   // This allows shortcuts to work even when other elements, like the timeline slider, are focused.
-  const isTextInputFocused = event.target.tagName === 'INPUT' && (event.target.type === 'text' || event.target.type === 'number');
+  const isTextInputFocused =
+    event.target.tagName === "INPUT" &&
+    (event.target.type === "text" || event.target.type === "number");
   if (isTextInputFocused) {
     return;
   }
@@ -711,7 +758,22 @@ document.addEventListener("keydown", (event) => {
 
   const key = event.key;
   // We can add any new shortcut keys to this array.
-  const recognizedKeys = ["ArrowRight", "ArrowLeft", " ", "1", "2", "3", "4", "t", "d", "c", "r", "p", "a", "s"];
+  const recognizedKeys = [
+    "ArrowRight",
+    "ArrowLeft",
+    " ",
+    "1",
+    "2",
+    "3",
+    "4",
+    "t",
+    "d",
+    "c",
+    "r",
+    "p",
+    "a",
+    "s",
+  ];
 
   if (!appState.vizData || !recognizedKeys.includes(key)) {
     return;
@@ -744,7 +806,7 @@ document.addEventListener("keydown", (event) => {
   }
 
   // --- Number keys for color modes ---
-  if (key >= '1' && key <= '4') {
+  if (key >= "1" && key <= "4") {
     const colorToggles = [
       toggleSnrColor,
       toggleClusterColor,
@@ -778,6 +840,9 @@ document.addEventListener("keydown", (event) => {
     toggleDebugOverlay.click();
     toggleDebug2Overlay.click();
   }
+  if (key === "m") {
+    toggleMenuBtn.click();
+  }
 });
 
 function calculateAndSetOffset() {
diff --git a/steps/src/sync.js b/steps/src/sync.js
index 298516c..40ce955 100644
--- a/steps/src/sync.js
+++ b/steps/src/sync.js
@@ -69,6 +69,8 @@ export function animationLoop() {
 
   // Update debug overlay information
   updatePersistentOverlays(currentMediaTime);
+  updateDebugOverlay(currentMediaTime); 
+
   // Redraw the speed graph if an instance exists
   if (appState.speedGraphInstance) appState.speedGraphInstance.redraw();
 
