Replaying real-time telemetry through a live rendering pipeline, without touching the components
I have a set of React components that render live telemetry: an attitude indicator, a moving map, tapes and gauges, a scrolling event log. They take a data source, subscribe to it, and paint whatever numbers arrive. That works for a live feed. The obvious next thing you want is replay: load a recorded session, scrub a timeline, watch the same instruments play it back. The naive version of this is…
During live telemetry rendering, components subscribe to a data source and display real-time values like an attitude indicator, moving map, tapes, gauges, and an event log. The obvious next step is adding replay functionality, but a naive approach of simply loading samples and feeding them into components results in empty charts.
The issue stems from the fact that component timestamps are anchored to the current time, while the recorded session has its own timeline. To reconcile the two timelines, two clocks are introduced: recording time and wall-clock time. The replay source maps between the two clocks based on the current playhead position. This enables time-based controls like scrubbing, speed adjustments, and pausing without causing issues.
However, a subtle bug can arise when a chart is paused during replay. The playhead remains fixed while the wall-clock keeps advancing, causing the replayed window to slide further into the past over time. To prevent this, the replay source re-anchors the window when paused, ensuring the chart displays the intended data range.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
