Shipped · temporal-track

Shipped: TimeController Now Drives Map Track Rendering

29 January 2026 · Ian · 3 min read

The time slider in Debrief’s VS Code sidebar now controls what you see on the map. Scrub to any moment and every track updates instantly — either showing a position marker (full mode) or growing as a snail-trail from its start point.

What We Built

This fix completes the temporal interaction pipeline that was half-wired. The TimeController UI already existed, the TemporalTrackLayer rendering logic already existed, and the message pipeline between them already existed — but the final receiver (the map webview) had a TODO stub that ignored incoming time updates.

We added:

  • Temporal rendering in TrackRenderer — the vanilla JS Leaflet map now responds to setCurrentTime and setDisplayMode messages
  • Binary search algorithms — ported from the shared React components into a standalone temporalUtils.ts module with 15 unit tests
  • Highlight markers — L.circleMarker per track in full mode, efficiently repositioned on each frame
  • DisplayMode forwarding — the setDisplayMode message type was added to the extension protocol, and MapPanel now forwards mode changes from SessionStore

How It Works

The pipeline is now complete end-to-end:

  1. User scrubs the TimeController slider
  2. The webview sends a time change message to the extension host
  3. SessionStore captures the new time
  4. MapPanel’s temporal subscription fires, forwarding setCurrentTime and setDisplayMode to the map webview
  5. TrackRenderer performs a binary search to find the nearest track point, then updates the polyline coordinates and marker position

All timestamp parsing (ISO to epoch) happens once on track load. The binary search is O(log n) per track per frame. Leaflet’s setLatLngs() handles efficient DOM updates.

Lessons Learned

Porting beats importing — Rather than pulling in the shared React components (which would have required React in the vanilla JS webview), we copied the two pure functions (60 lines) and unit-tested them independently. Simple, no dependency chain, easy to verify.

The message pipeline was the easy part — The infrastructure from Feature #029 (session state integration) meant the wiring was already 80% done. The real work was in TrackRenderer: managing cached timestamps, highlight markers, display mode state, and coordinate updates without flicker.

What’s Next

  • #030: Add replay mode and time acceleration to the temporal state schema
  • #026: Add annotation shape renderers to the VS Code extension
  • #038: Context-sensitive tool offering integration