Working before the comparison button.

steps/index.html

@@ -220,7 +220,7 @@
         <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 class="absolute bottom 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"
@@ -266,10 +266,10 @@
           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
+          class=" hidden bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors text-sm font-medium">Save
           Session</button>
         <button id="load-session-btn"
-          class="bg-teal-600 text-white px-4 py-2 rounded-lg hover:bg-teal-700 transition-colors text-sm font-medium">Load
+          class=" hidden 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 if radar

steps/src/drawUtils.js

@@ -20,7 +20,7 @@ export const snrColors = (p) => ({
   c1: p.color(0, 0, 255), // Blue
   c2: p.color(0, 255, 255), // Cyan
   c3: p.color(0, 255, 0), // Green
-  c4: p.color(186,142,35), // Dark Yellow
+  c4: p.color(186, 142, 35), // Dark Yellow
   c5: p.color(255, 0, 0), // Red
 });
 
@@ -285,8 +285,14 @@ export function drawTrajectories(p, plotScales) {
     const isCurrentlyStationary = lastLog.isStationary;
 
     // ... (trajectory point calculation logic remains the same)
-    let maxLen = isCurrentlyStationary ? Math.floor(MAX_TRAJECTORY_LENGTH / 4) : MAX_TRAJECTORY_LENGTH;
-    let trajPts = logs.filter((log) => log.correctedPosition && log.correctedPosition[0] !== null).map((log) => log.correctedPosition);
+    let maxLen = isCurrentlyStationary
+      ? Math.floor(MAX_TRAJECTORY_LENGTH / 4)
+      : MAX_TRAJECTORY_LENGTH;
+    let trajPts = logs
+      .filter(
+        (log) => log.correctedPosition && log.correctedPosition[0] !== null
+      )
+      .map((log) => log.correctedPosition);
     if (trajPts.length > maxLen) {
       trajPts = trajPts.slice(trajPts.length - maxLen);
     }
@@ -324,12 +330,24 @@ export function drawTrajectories(p, plotScales) {
       } else {
         // MODE 2: DEFAULT TTC SCHEME (Use pre-calculated category from JSON)
         switch (lastLog.ttcCategory) {
-            case 3: trajectoryColor = p.color(localTtcColors.critical); break;
-            case 2: trajectoryColor = p.color(localTtcColors.high); break;
-            case 1: trajectoryColor = p.color(localTtcColors.medium); break;
-            case 0: trajectoryColor = p.color(localTtcColors.low); break;
-            case -1: trajectoryColor = p.color(localTtcColors.away); break;
-            default: trajectoryColor = p.color(localTtcColors.default); break;
+          case 3:
+            trajectoryColor = p.color(localTtcColors.critical);
+            break;
+          case 2:
+            trajectoryColor = p.color(localTtcColors.high);
+            break;
+          case 1:
+            trajectoryColor = p.color(localTtcColors.medium);
+            break;
+          case 0:
+            trajectoryColor = p.color(localTtcColors.low);
+            break;
+          case -1:
+            trajectoryColor = p.color(localTtcColors.away);
+            break;
+          default:
+            trajectoryColor = p.color(localTtcColors.default);
+            break;
         }
       }
 
@@ -345,8 +363,10 @@ export function drawTrajectories(p, plotScales) {
         const prevPt = trajPts[i - 1];
         const currPt = trajPts[i];
         p.line(
-            prevPt[0] * plotScales.plotScaleX, prevPt[1] * plotScales.plotScaleY,
-            currPt[0] * plotScales.plotScaleX, currPt[1] * plotScales.plotScaleY
+          prevPt[0] * plotScales.plotScaleX,
+          prevPt[1] * plotScales.plotScaleY,
+          currPt[0] * plotScales.plotScaleX,
+          currPt[1] * plotScales.plotScaleY
         );
       }
       // --- END: New Dynamic Coloring Logic ---
@@ -629,3 +649,32 @@ export function drawCovarianceEllipse(
   );
   p.pop();
 }
+
+// In src/drawUtils.js
+
+/**
+ * Draws a simple representation of the ego vehicle at the origin (0,0).
+ * @param {p5.Graphics} b - The p5.Graphics buffer to draw on.
+ */
+function drawEgoVehicle(p, b) {
+  // Determine car color based on the current theme for better visibility.
+  const isDark = document.documentElement.classList.contains("dark");
+  const carColor = isDark ? p.color(200, 200, 220) : p.color(100, 100, 110);
+  
+  b.push(); // Start a new drawing state
+
+  // Set drawing properties for the car body
+  b.fill(carColor);
+  b.noStroke();
+  b.rectMode(p.CENTER); // Draw rectangles from their center point
+
+  // The car's dimensions in meters (width x length)
+  const carWidthMeters = 2;
+  const carLengthMeters = 4.5;
+  
+  // These dimensions are in "radar space", not pixels.
+  // The buffer's existing scaling will handle the conversion automatically.
+  b.rect(0, 0, carWidthMeters, carLengthMeters, 0.5); // Main body with rounded corners
+
+  b.pop(); // Restore original drawing state
+}

steps/src/main.js

@@ -704,7 +704,6 @@ colorToggles.forEach((t) => {
     }
     if (appState.p5_instance) appState.p5_instance.redraw();
     updatePersistentOverlays(videoPlayer.currentTime);
-
   });
 });
 
@@ -896,7 +895,6 @@ document.addEventListener("DOMContentLoaded", () => {
 
   initDB(async () => {
     console.log("DEBUG: Database initialized.");
-
     // --- START: Restore Session and UI State from localStorage ---
     const savedOffset = localStorage.getItem("visualizerOffset");
     if (savedOffset !== null) {

steps/src/p5/radarSketch.js

@@ -22,7 +22,7 @@ import {
   drawTrackMarkers,
   snrColors,
   handleCloseUpDisplay,
-  drawCovarianceEllipse, // BUG FIX 1: Import the close-up handler
+  drawCovarianceEllipse,
 } from "../drawUtils.js";
 
 export const radarSketch = function (p) {