🛠️

Codebase Overview

Visual Navigation Map

Click a UI element to see its code
Data Explorer & Sidebar
Radar Visualization Canvas
(p5.js Render Loop)
Video Player
(Sync Engine)
Speed Graph
Playback Controls & Timeline
Data Pipeline & Storage (Loader/DB)

Project Files src/

  • index.html
  • readme.md
  • src/
    • main.js
    • state.js
    • constants.js
    • fileLoader.js
    • fileParsers.js
    • parser.worker.js
    • db.js
    • sync.js
    • utils.js
    • dom.js
    • ui.js
    • keyboard.js
    • dataExplorer.js
    • session.js
    • theme.js
    • modal.js
    • debug.js
    • drawUtils.js
    • p5/
      • radarSketch.js
      • speedGraphSketch.js
      • zoomSketch.js
🧠

Core Architecture

State management and application initialization.

src/main.js

Core
  • Entry Point: Initializes the application sequence.
  • Orchestrator: Sets up Theme, DB, Session Manager.
  • Glue Code: Wires independent modules together.
Links to: state.js, dom.js, sync.js

src/state.js

  • Source of Truth: Central appState object.
  • Runtime Variables: Stores current frame, playback status.
  • Global Settings: SNR limits, boolean toggles.
Imported by: Almost all modules

src/constants.js

  • Configuration: Immutable system constants.
  • Parameters: VIDEO_FPS, Radar boundaries.
  • Visuals: Canvas aspect ratios.
Used by: p5 Sketches, fileParsers.js
💾

Data Pipeline & Storage

Input handling, parsing, and persistent caching.

src/fileLoader.js

Core
  • Input Handling: Detects JSON/Video from Drag & Drop.
  • Offset Logic: Extracts timestamps for sync offset.
  • Control: Triggers Web Worker parsing.
Triggers: parser.worker.js

src/parser.worker.js

  • Background Thread: Prevents UI freezing.
  • Streaming: Uses Clarinet.js for chunk parsing.
  • Messaging: Reports real-time progress.
Dependency: vendor/clarinet.min.js

src/fileParsers.js

  • Post-Processing: Refines raw JSON data.
  • Calculations: Computes timestampMs & global SNR.
  • Smoothing: Pre-calculates inter-frame times.
Called by: fileLoader.js

src/db.js

  • Wrapper: Abstraction for IndexedDB.
  • Caching: Stores blobs for instant reloads.
  • Management: Handles "load fresh" & metadata.
Used by: session.js, main.js
⏱️

Synchronization Engine

Time-critical logic, playback loops, and drift correction.

src/sync.js

Core
  • Master Clock: Uses performance.now().
  • Loop: Custom animation loop decoupled from video.
  • Drift Correction: Forces seek if drift > 150ms.
  • Mapping: Finds exact radar frame for video time.
Controls: Video Element, P5 Loop

src/utils.js

  • Binary Search: O(log n) frame lookups.
  • Regex: Extract timestamps from filenames.
  • Formatting: Time display helpers (MM:SS.ms).
Used by: sync.js, fileLoader.js
🎨

Visualization

P5.js sketches and drawing primitives.

src/p5/radarSketch.js

Core
  • Main Canvas: Primary renderer.
  • Scene: Draws Ego, points, tracks.
  • Scaling: World-to-Screen mapping.

src/drawUtils.js

Core
  • Library: Optimized drawing functions.
  • Decoupling: Separates logic from render.
  • Palettes: SNR & TTC colors.

src/p5/zoomSketch.js

  • GOD MODE: Magnified cursor view.
  • Tracking: Follows mouse coordinates.
  • Details: Tooltips for hovered items.

src/p5/speedGraphSketch.js

  • Graphing: Bottom-right chart.
  • Plotting: Ego vs. CAN Speed.
  • Sync: Playback indicator.
🖥️

UI & Interaction

DOM manipulation and user input.

src/dom.js

Core
  • Caching: Stores DOM references.
  • Access: Efficient element lookup.
  • Updates: Overlays & Debug.

src/ui.js

  • Management: High-level UI interactions.
  • Components: Sidebar, Manual, Shortcuts.
  • Toggles: Fullscreen switching.

src/keyboard.js

  • Listener: Intercepts keydown events.
  • Mapping: Binds keys to functions.
  • Controller: Hardware input layer.

src/dataExplorer.js

  • Inspector: Panel logic (AG Grid).
  • Plot View: Integrates Chart.js.

src/session.js

  • Persistence: Serializes state to JSON.
  • Restoration: Re-hydrates from files.

src/theme.js

  • Theming: Dark/Light mode toggle.
  • Storage: Persists user preference.