@ -51,6 +51,12 @@ The application uses a modular ES6 structure. All source code resides in the `/s
- **`/src/dataExplorer.js`**: **The Inspector**. Manages the "Data Explorer" panel. It uses AG-Grid to display data in a table and Chart.js to plot selected columns. It includes `throttledUpdateExplorer` to efficiently update the view during playback.
- **`/src/ui.js`**: **The UI Engine**. Manages all advanced interface interactions.
- `makeDraggableAndResizable()`: A unified utility that transforms any DOM element into a floating window with persistent memory.
- **Memory & Persistence**: Saves/Loads panel coordinates and GridStack layouts to `localStorage`.
- **Viewport Rescue**: Automatically recovers off-screen windows during browser resizing.
- **Auto-Focus**: Dynamically manages `z-index` to bring active windows to the front on click.
- **`/src/debug.js`**: **Debug Configuration**. Exports `debugFlags` to toggle logging for various subsystems (sync, drawing, file loading) and configure constants like video load timeouts.
- **`/src/utils.js`**: **Toolbox**. A collection of pure, reusable helper functions (e.g., `findRadarFrameIndexForTime` (binary search), timestamp parsers, `throttle`, `precomputeRadarVideoSync`).
@ -62,9 +68,9 @@ The application uses a modular ES6 structure. All source code resides in the `/s
- **`/src/constants.js`**: **Configuration**. Stores shared, static values like `VIDEO_FPS` and radar plot boundaries.
- **`/src/p5/`**: **Visualization Modules**.
- **`radarSketch.js`**: The main radar visualization (point cloud, tracks, axes, ego vehicle).
- **`speedGraphSketch.js`**: The time-series speed graph.
- **`zoomSketch.js`**: The "GOD MODE" magnified view.
- **`radarSketch.js`**: Master timer for God Mode auto-visibility (5s delay). Hardened with guards against 0-width crashes.
- **`zoomSketch.js`**: "GOD MODE" view. Includes the "Closing in..." countdown (3s) and "Out of Bounds" safety indicators.
- **`speedGraphSketch.js`**: Refined with initialization guards to handle rapid layout shifts.
- **`/src/drawUtils.js`**: **The Artist's Toolkit**. Contains pure drawing functions called by the p5 sketches (e.g., `drawPointCloud`, `drawTrajectories`). This is where the visual appearance of radar objects is defined.
@ -112,6 +118,15 @@ The `appState` object in `state.js` is the central hub. Key properties include:
- Shows Tree, Grid, and Plot views.
- Updates are throttled to prevent performance degradation during playback.
**God Mode Auto-Hide (`p5/*.js`)**:
- **Sequence**: The panel appears on hover. If the mouse stops moving over a relevant point, a 5-second "Analysis Period" begins. After 5s, a visual 3-second countdown appears. Total 8s before hiding.
- **Override**: Any new interaction or mouse movement resets the full 8-second timer.
**Layout Persistence (`ui.js` &`main.js`)**:
- **GridStack**: Uses a "Soft Restore" loop to update panel positions by ID, ensuring p5 canvases and Video elements are not destroyed during layout changes.
- **Floating Panels**: Tracks `top/left/width/height` individually per panel ID.
- **Nuclear Reset**: The "Clear Cache and Reload" button wipes all UI memory, returning the app to factory defaults.
**Session Management (`main.js` &`db.js`)**:
- `saveSessionBtn` saves current filenames, offset, and toggles to a JSON file.
- `loadSessionBtn` reads the session file. It verifies that the referenced files exist in `IndexedDB` (via `loadFreshFileFromDB`) before applying settings and reloading the page.
@ -46,106 +46,35 @@ On completion, the fully parsed object (data) is sent back.
The main thread receives the parsed data and passes it to fileParsers.js::parseVisualizationJson for post-processing (calculating relative timestampMs, determining global SNR range).
Calculates plot scales (plotScaleX, plotScaleY) based on canvas size and constants.js boundaries.
Draws axes, ego vehicle representation (drawUtils.js::drawEgoVehicle).
Draws dynamic elements: point clouds (drawUtils.js::drawPointCloud), tracks (drawUtils.js::drawTrajectories), track markers (drawUtils.js::drawTrackMarkers), predicted positions (now drawn for the current frame currentFrame, not currentFrame + 1), covariance ellipses (drawUtils.js::drawCovarianceEllipse), cluster centroids (drawUtils.js::drawClusterCentroids), and regions of interest (drawUtils.js::drawRegionsOfInterest).
Handles hover interactions for the Zoom Mode ("GOD MODE") tooltip via drawUtils.js::handleCloseUpDisplay.
Draws legends (SNR, Track TTC).
- Master timer for God Mode auto-visibility (5s delay).
- Hardened with guards against 0-width container crashes during layout shifts.
- "Mouse Out of Bounds" safety indicators for high-speed tracking.
speedGraphSketch.js: The secondary p5 sketch for the speed graph.
Manages the canvas within #speed-graph-container.
Draws time-series lines for Ego Speed (frame.egoVelocity[1] * 3.6) and CAN Speed (frame.canVehSpeed_kmph) from the JSON vizData.
Draws axes and legends.
Draws a vertical red line indicator synchronized with the current frame's timestamp (frameData.timestampMs).
- Refined with initialization guards to handle rapid GridStack resizing.
zoomSketch.js: p5 sketch for the magnified "GOD MODE" view.
- **Floating Overlay**: Now a standalone window decoupled from the dashboard grid.
- **Auto-Hide UX**: 5s analysis period + 3s visual countdown before fading.
- **Safety**: Includes "Out of Bounds" warning and "Closing in..." countdown labels.
Manages a separate canvas within #zoom-canvas-container.
Receives mouse coordinates and hovered items from radarSketch.js.
Redraws a scaled and translated portion of the main scene, providing a high-fidelity zoom.
Includes detailed tooltip drawing logic (drawZoomTooltip) showing extensive info for points, clusters, tracks (with speed), and predictions (with velocity).
Handles mouse wheel events for adjusting appState.zoomFactor.
drawUtils.js: Contains numerous helper functions responsible for the actual drawing logic (shapes, lines, colors, text) used by radarSketch.js and zoomSketch.js. Defines color palettes (snrColors, ttcColors, clusterColors). Refined tooltip data generation in handleCloseUpDisplay.
Data Explorer (dataExplorer.js, main.js, index.html):
A dedicated panel (#data-explorer-panel) for inspecting raw data of the current frame (appState.currentFrame).
Activated by pressing the <kbd>I</kbd> key or clicking on the main radar canvas (#canvas-container).
Features four views selectable via tabs:
Tree View (#tab-panel-tree): Displays the current frame's data structure as a formatted JSON string.
Grid View (#tab-panel-grid): Uses AG Grid (ag-grid-community.min.js) to display array data (e.g., pointCloud) in a sortable, filterable table. Populated via displayInGrid(data, title).
Track Grid View (#tab-panel-track-grid): Displays object tracking data for the current frame in a dedicated grid.
Plot View (#tab-panel-plot): Uses Chart.js (chart.js CDN) to generate a line plot of the numeric data from a column selected in the Grid View (by clicking the column header).
Panel Features: The Data Explorer panel is **draggable** (via the header) and **resizable** (via edges/corners).
Allows users to directly examine the underlying numerical values being visualized.
Checkboxes in the sidebar (#collapsible-menu) control boolean flags in appState (via main.js event listeners).
drawUtils.js functions read these flags (toggleSnrColor.checked, toggleConfirmedOnly.checked, etc.) to determine:
Which color palette/logic to apply to points and tracks.
Whether to show certain elements (tracks, velocity vectors, predicted positions, covariance).
SNR range inputs (snrMinInput, snrMaxInput) update appState.globalMinSnr/MaxSnr for color scaling.
TTC coloring mode (ttcModeDefault, ttcModeCustom) and custom inputs (ttcColorCritical, ttcTimeCritical, etc.) update appState.useCustomTtcScheme and appState.customTtcScheme respectively (dom.js event listeners). drawUtils.js::drawTrajectories uses this state to color tracks.
Standard buttons (playPauseBtn, stopBtn) modify appState.isPlaying and call videoPlayer.play/pause/currentTime.
timelineSlider input event updates appState.currentFrame and calls dom.js::updateFrame(frame, true) (forcing video seek). Throttled for performance during drag, debounced for final sync on release.
timelineSlider wheel event calculates scroll speed and dynamically seeks frames, also debounced for final sync (sync.js).
timelineSlider mousemove event calculates hover position to display frame/time in #timeline-tooltip (sync.js).
Sidebar (#collapsible-menu) visibility toggled by toggleMenuBtn, closeMenuBtn, and clicks on the #menu-scrim overlay (ui.js).
Fullscreen toggled via fullscreenBtn and monitored using the fullscreenchange event (ui.js).
UI & Workspace Engine (ui.js, index.html):
Persistent overlays (#radar-info-overlay, #video-info-overlay) updated by dom.js::updatePersistentOverlays with frame index, absolute time, color mode, and sync drift.
- **Hybrid Dashboard**: Combines a GridStack-based fixed background with standalone floating modules.
- **makeDraggableAndResizable**: A unified utility that transforms static UI elements into interactive windows.
- **Persistent Memory**: Automatically saves and restores panel coordinates and GridStack geometry using `localStorage`.
- **Soft-Restore**: Loads layout updates by ID without destroying inner DOM content (preserving p5 canvases and video players).
- **Viewport Rescue**: Automatically pulls off-screen panels back into the viewing area during window resize events.
- **Auto-Focus**: Clicking any floating panel dynamically increases its z-index (bringing it to the front).
Dark/Light theme managed by theme.js::setTheme, saving preference to localStorage, and triggering redraws in p5 sketches.
Startup Guide, Shortcuts, & Changelog:
- Includes a "First Run" experience with a loading screen and Quick Start Guide modal (ui.js).
- A **Changelog** modal ("What's New?") provides a history of updates and refactors (ui.js).
- The **"Clear Cache and Reload"** button acts as a full factory reset, wiping all UI memory and cached data.
**Startup Guide, Shortcuts, & Changelog**:
* Includes a "First Run" experience with a loading screen and Quick Start Guide modal (ui.js).
* A "Shortcuts" modal (toggle with <kbd>K</kbd> or via the UI) provides a reference for all keyboard interactions (ui.js).
* A **Changelog** modal ("What's New?") provides a history of updates and refactors (ui.js).
