This commit introduces a specialized visualization for ADAS radar data and significantly
improves the Data Explorer's responsiveness at small window dimensions.
Key Changes:
- ADAS Visualization: Replaced the horizontal AG Grid for the ADAS tab with a custom
Vertical Property View. This uses a card-based layout with clean Key-Value tables,
optimizing for high-column counts and narrow panels.
- Layout Optimizations:
- Reduced minimum window dimensions for the Data Explorer from 400x300 to 250x200.
- Implemented horizontal scrolling for the tab navigation row to prevent UI breakage
at narrow widths.
- Added 'flex-shrink-0' guards to the panel header and tabs to ensure they remain
visible and stable during vertical resizing.
- UI Refinement: Cleaned up the ADAS view by removing redundant property IDs from
headers and centering all data within a structured 2-column grid.
- Documentation:
- Updated the /intel folder (readme.md, context.md, GEMINI.md) to reflect new features.
- Added "Rationale" comments to source code (index.html, dataExplorer.js) to document
architectural decisions and prevent future UI regressions.
Fixes: #ADAS-Explorer-Overhaul
- Decoupled 'God Mode' from GridStack into a standalone floating fixed overlay.
- Extracted 'makeDraggableAndResizable' utility with persistent localStorage memory.
- Implemented "Soft-Reload" for GridStack: restores panel positions by gs-id without destructive DOM replacement.
- Added viewport-aware "Rescue Logic" to pull off-screen panels back into view on window resize.
- Re-architected God Mode auto-hide sequence (5s delay + 3s countdown with visual warning).
- Implemented 'Auto-Focus' logic: clicking any floating panel populates it to the front (z-index: 40).
- Hardened all p5.js sketches with 0-width guards to prevent crashes during container shifts.
- Cleaned up redundant UI text overlays and unified the visual presentation.
- Extracted drag/resize logic from Data Explorer into reusable `ui.js` utility.
- Migrated Zoom Sketch from GridStack into a free-floating, draggable, and resizable `z-30` overlay (default size 900x455).
- Restored and optimized auto-hide timing lifecycle for Close-Up mode:
- 0-5s: Clean freeze for data inspection without hovering.
- 5-8s: Fading visual countdown warning prior to panel closure.
- Implemented state flag `zoomPanelExplicitlyClosed` guaranteeing the "X" button correctly masks rapid re-triggers.
- Bound 'g' toggle shortcut to aggressively wipe/close panels when exiting God Mode entirely.
- Added visual "Mouse pointer Out of Bounds" overlay when cursor exits main radar canvas.
- Downloaded GridStack.js and CSS assets (v10.1.2) to the vendor folder for offline support.
- Configured index.html with local-first script loading and CDN fallback logic.
- Hardened server.py to explicitly bind to 127.0.0.1 and anchor to the script directory.
- Optimized Visualization_Start.bat with working directory anchoring and a delayed browser launch to ensure the server is fully ready.
- Implemented GridStack.js as the core dashboard manager, enabling responsive dragging and resizing of the Radar, Video, and SpeedGraph panels.
- Replaced global windowResized events with debounced ResizeObserver instances attached to the specific panel containers.
- Fixed a massive memory leak in p5.js sketches by explicitly calling .remove() on old Graphics buffers before recreation.
- Optimized zoomSketch.js by removing destructive canvas teardown calls from radarSketch and using smoothed camera coordinates for tooltip bounding logic.
- Patched tooltip overflow bugs in drawUtils.js and speedGraphSketch.js to intelligently clamp within panel edges, even in narrow columns.
- Disabled native p5 windowResized triggers to prevent double-firing when moving the web app across multiple monitors.
Features & Enhancements:
- Stability: Implemented custom server.py with zero-cache headers and V3.3.0 asset versioning to ensure latest code availability.
- Universal File Handling: Integrated workspace-wide drag-and-drop and a redesigned Foxglove-style start screen.
- Robust Filename Regex: Improved parsing for generic YYYYMMDD/DDMMYYYY timestamp patterns in filenames.
- Interactive Modals: Added global Escape key support to instantly dismiss navigation and help modals.
- Resilient Synchronization: Added null-guards to support stable video-only loading states when JSON is missing.
Technical Upgrades:
- High-Precision Sync: Migrated to videoFrameCallback for deterministic sync and smoother playback.
- Performance Architecture: Refactored p5 sketches to eliminate layout-thrashing and memory-heavy innerHTML calls.
- Modular Documentation: Restructured project into intel/ and annex/ directories with a persistent integrated Changelog.
- Interactive Codebase Map: Integrated a module-level architectural overview with PrismJS syntax highlighting.
Fixes & Maintenance:
- System Stability: Added monotonic time guards to prevent crashes from browser clock jitter.
- Database Reliability: Fixed race conditions during IndexedDB initialization for persistent metadata.
- Management Utilities: Added simple_log_cfg.py for automated radar command extraction from logs.
- Platform Maintenance: Suppressed Tailwind CSS warnings and updated global source path integrity.
- Expanded start screen card and drop zone visuals for better accessibility.
- Implemented a global #global-drag-overlay that appears on drag over the entire window.
- Attached drag-and-drop listeners to document.body for universal file loading.
- Refined dragCounter logic to prevent overlay flickering during child element transit.
Ran command: `git diff -U0`
fix: resolve console warnings and add configurable debug logging
This commit addresses active console warnings and reduces logging noise in the SpeedGraph component.
### Changes:
- **index.html**: Fixed `[Deprecation]` warning by replacing the non-standard `-webkit-appearance: slider-vertical` with modern CSS properties (`writing-mode: vertical-lr; direction: rtl;`).
- **speedGraphSketch.js**:
- Resolved `pop() was called without matching push()` error by removing an orphaned `pop()` call in [drawStaticGraphToBuffer](cci//file:///d:/Work/Repo/refactor/steps/src/p5/speedGraphSketch.js:41:2-295:4).
- Muted "Density Info" messages by gating them behind a configurable debug flag.
- **debug.js**: Added a new [speedGraph](cci:1://file:///d:/Work/Repo/refactor/steps/src/p5/speedGraphSketch.js:7:0-538:2) flag (defaulted to `false`) to `debugFlags` to allow selective enabling of SpeedGraph logs.
This commit refactors the initialization phase of the Visualizer to act as a Single Page Application (SPA). A persistent workspace shell is now initially hidden behind a "Data Synchronizer" Start Screen, which handles file ingestion before seamlessly revealing the canvas.
Part 1: Implement SPA Start Screen Modal and Data Routing
* steps/index.html: Added the full-screen `start-screen-modal` overlay to intercept the user on load. Removed text placeholders inside the video and canvas containers since the workspace is now exclusively visible when populated.
* steps/src/dom.js: Exported references for the new modal, drop zone, and primary load buttons.
* steps/src/main.js: Routed standard drag-and-drop and click events to target the new Start Screen elements rather than the legacy footer buttons, initiating the existing file pipeline.
Part 2: Integrate Loading Progress Natively
* steps/index.html: Added a hidden `start-progress-container` directly inside the Start Screen card to prevent overlapping popups.
* steps/src/dom.js: Exported references to the native progress bar and text elements.
* steps/src/modal.js: Refactored `showLoadingModal`, `updateLoadingModal`, and `hideModal` to dynamically route progress updates. If the Start Screen is active, it renders the inline progress bar and disables background buttons rather than spawning the generic popup modal.
* steps/src/fileLoader.js: Updated `processFilePipeline` to fully dismiss the `start-screen-modal` upon successful data ingestion and precomputation, seamlessly transitioning the user.
Part 3: Replicate Accessibility and Theme Controls
* steps/index.html: Duplicated the Quick Start Guide, Codebase Overview, What's New, and Theme Toggle buttons, positioning them in the top-right corner of the Start Screen. Also fixed a `-webkit-appearance` CSS warning on the range slider.
* steps/src/dom.js: Exported references for the new accessibility buttons and theme toggle SVGs.
* steps/src/ui.js: Attached existing `toggleGuideModal`, `toggleCodebaseModal`, and `toggleChangelogModal` event listeners to the new replicated buttons, granting users access to documentation before data load.
* steps/src/theme.js: Updated `initializeTheme()` so switching the theme from either the workspace or the Start Screen bidirectionally syncs the Light/Dark SVGs on both buttons simultaneously.
- Expanded Visual Navigation Map to utilize full width and increased height by 30%.
- Removed visible scrollbar from the Project Files panel.
- Adjusted padding in the file tree view for better alignment.
- Implement robust fallback and safety logic to prevent division-by-zero or invalid state crashes.
- Update scale calculations and drawing utilities to use dynamic boundaries from appState.
- Refine radar-info-overlay to match plot width and center text content for better alignment.
- Add double-click reset functionality to the range slider to revert to default constants.
- Fix hover detection bug in God Mode during scroll-zoom interactions.
- Ensure Regions of Interest (ROI) scale proportionally with the dynamic plot range.
Vehicle Dimensions:
- Added "Show Dimensions" toggle to the display settings.
- Implemented `drawObjectDimensions` in `drawUtils.js` to render object extents as oriented rectangles based on `objectExtentRadii` and `objectExtentAngle`.
- Updated `radarSketch.js` to draw dimensions when enabled.
- Ensured dimensions and covariance ellipses are drawn at the `correctedPosition` for accurate alignment with track markers.
Track Visualization:
- Updated `drawTrajectories` to prioritize the `risk` property on track logs for coloring (0=Low/Blue, 1=Medium/Orange, 2=High/Red).
- Added fallback to `ttcCategoryTimeline` for backward compatibility.
- Fixed off-by-one error in trajectory history filtering to prevent drawing future points.
Frame Synchronization & UI:
- Refactored frame number display logic across Overlays, Data Explorer, and Timeline.
- UI now displays the actual `frameIdx` from the data source instead of the internal array index, resolving discrepancies between the Data Explorer and the main view.
- Create shortcuts.html as a standalone reference page.
- Implement #shortcuts-modal in index.html to display key bindings.
- Implement #guide-modal with an iframe to embed User_Manual.html directly in the app.
- Refactor header navigation into color-coded buttons (Green/Blue/Amber-Indigo).
- Update src/dom.js and src/ui.js to handle modal visibility and interactions (ESC key, 'k' key, click-to-close).
- Improve visual consistency of header button heights and modal styling.
Create `shortcuts.html` as a standalone reference page.
Implement `#shortcuts-modal` in `index.html` to display key bindings.
Implement `#guide-modal` with an iframe to embed `User_Manual.html` directly in the app.
Refactor header navigation into color-coded buttons (Green/Blue/Amber-Indigo).
Update `src/dom.js` and `src/ui.js` to handle modal visibili and interactions (ESC key, 'k' key, click-to-close).
Improve visual consistency of header button heights and moda styling.
This commit introduces a resilient fallback mechanism for all third-party JavaScript libraries, ensuring the application remains functional even if local files are unavailable.
Previously, the application would fail to load if any of the JavaScript files in the `/vendor` directory were missing or failed to load. This change implements an "offline-first, online-fallback" strategy.
The implementation checks for the existence of each library's global object (e.g., `window.p5`) immediately after attempting to load the local script. If the object is not found, indicating a load failure, a new `<script>` tag is dynamically and asynchronously created and appended to the document's head. This new script then loads the library from its public CDN.
This approach was chosen after evaluating two other methods:
1. The `<script onerror="...">` attribute was found to be unreliable, as local development servers often return a 404 HTML page (with a `200 OK` status and `text/html` MIME type) instead of a network error, which does not trigger the `onerror` event.
2. Using `document.write()` was functional but generated numerous parser-blocking warnings in the browser console and is considered a poor practice for performance.
The final implementation is non-blocking and follows modern web development best practices, making the application significantly more resilient for both development and production environments.
This commit introduces several major improvements to the "God Mode" zoom sketch, making it more intuitive and robust. It also resolves two critical race-condition bugs related to canvas resizing and initial data loading.
**Features:**
- **Automatic Zoom on Hover:** The zoom sketch now appears automatically when the user hovers over any data point (track, point cloud, etc.) and disappears after a configurable cooling-off period. This provides a more dynamic and professional user experience, allowing for quick inspection without manual toggling. The zoom window now smoothly follows the cursor during this cooling-off period.
- **Point Index in Tooltip:** The zoom sketch tooltip has been enhanced to display the index of the hovered point within its `pointCloud` array (e.g., "Point 123"). This adds valuable context for debugging and detailed data analysis.
**Bug Fixes:**
- **fix(p5):** Resolves a critical bug where the zoom sketch would go blank after the browser window was resized. This was caused by a race condition where the sketch's canvas was being resized to 0x0 before its container had updated. The fix defers the resize call and correctly destroys the old canvas, allowing it to be recreated with the proper dimensions.
- **fix(loading):** Corrects a race condition in the drag-and-drop file loading pipeline (`processFilePipeline`). The speed graph sketch will now reliably initialize on the first load, as the code now uses `Promise.all` to ensure both the JSON data is parsed and the video's metadata (duration) is available before attempting to render the visualization.
Adds a new zoom panel that provides a magnified, real-time view of the area under the cursor when "Close-Up Mode" is active. This feature enhances the tool's precision for detailed data analysis.
Key features and fixes include:
- Renders a high-fidelity, vector-based redraw of the scene, not a pixelated image.
- Implemented dynamic zoom control via the mouse wheel when hovering over the main radar canvas.
- The zoom sketch is fully decoupled from the main radar sketch to ensure stability and prevent UI freezes.
- Includes a self-contained tooltip within the zoom window that correctly scales its size and text to match the zoom level.
- The tooltip's position is now smart, dynamically moving to the least cluttered quadrant to avoid obstructing data points.
- Connector lines and item highlighting are now fully functional and styled to match the main view's tooltip.
Motion state added in the persistent overlays
This commit introduces a major feature release, adding powerful new tools for data analysis and significantly enhancing the user experience and application robustness.
### ✨ Advanced Visualization & Analysis
* **Custom TTC Coloring Scheme**: Implemented a new UI panel allowing users to switch between the default TTC coloring and a fully customizable scheme. Users can now define their own time thresholds and colors for Critical, High, Medium, and Low risk TTC categories on the fly, with the visualization updating in real-time. [cite: steps/src/drawUtils.js, steps/index.html]
* **Persistent Info Overlays**: Added new, always-on overlays to the top-left of both the radar and video views. These display critical diagnostic information, including frame numbers, absolute UTC time, and real-time synchronization drift. [cite: steps/src/dom.js]
### 🚀 Workflow & UX Enhancements
* **Session Management**: Added "Save Session" and "Load Session" functionality. Users can now save their complete setup (loaded filenames, time offset, toggle states) to a JSON file and restore it later, which reloads the application with the exact same configuration. [cite: steps/src/main.js]
* **Advanced Timeline Navigation**:
* **Scroll-to-Seek**: The timeline slider now supports seeking via the mouse scroll wheel, with a dynamic acceleration feature for faster navigation through long recordings. [cite: steps/src/main.js]
* **Scrub Preview**: A tooltip now appears when hovering over the timeline, showing the precise frame and timestamp under the cursor for more accurate seeking. [cite: steps/src/main.js]
### 🐛 Bug Fixes & Robustness
* **Malformed Data Handling**: The application is now resilient to malformed `track` objects in the JSON data. The drawing functions in `drawUtils.js` now include robust safeguards that detect tracks missing a `historyLog`, print a detailed warning to the console, and safely skip them instead of crashing. [cite: steps/src/drawUtils.js]
* **File Load Order**: Fixed a critical bug where the speed graph would fail to load if the video file was loaded before the JSON file. The logic now correctly creates the graph regardless of the file loading sequence. [cite: steps/src/main.js]
* **UI Initialization**: Resolved a `ReferenceError` caused by event listeners running before the DOM was fully loaded. The custom TTC control logic is now correctly initialized after the `DOMContentLoaded` event, ensuring stability.
This commit introduces a suite of major improvements focused on application robustness, user experience, and bug fixes. The changes overhaul the caching system, enhance the file loading experience, and resolve critical state management issues.
### ✨ New Features & Enhancements
1. **Robust Caching System**:
- The IndexedDB caching logic now stores file metadata (filename, size) alongside the file blob.
- Implemented a **versioning check** by comparing filenames to prevent loading stale, outdated cache.
- Added an **integrity check** by comparing file sizes to detect and discard corrupted or incomplete cached data.
- Implemented graceful error handling for browser `QuotaExceededError`.
2. **Progress Bar for All Loading Operations**:
- The smooth, worker-based progress bar now appears when loading JSON data from the **IndexedDB cache**, providing a consistent experience with fresh file loads.
- A new progress bar has been implemented for **video file loading**. It tracks the browser's buffering progress and appears for both fresh file selections and cached reloads.
3. **UI Polish**:
- A **favicon** has been added to the application tab for a more professional look.
### 🐛 Bug Fixes
1. **Corrected Worker Parsing Logic**:
- Fixed a critical bug in the JSON parsing web worker (`parser.worker.js`) where its logic failed to handle nested objects (like `pointCloud` arrays). The worker now uses a robust algorithm to correctly build the entire JSON tree, ensuring data is always parsed accurately.
2. **Fixed JSON Reloading**:
- Resolved an issue where loading a new JSON file over an existing one would fail. The application now properly removes old p5.js visualization instances before creating new ones, ensuring a clean state for the new data.
3. **Fixed Speed Graph on Cached Load**:
- Corrected a bug where the speed graph would not appear when the application started up from a cached session. The initialization logic now correctly creates and updates the speed graph after the cached video's metadata is loaded.
