realtime-graph

Source: realtime-graph.js:25

The left column: a scrollable distance plot with a FIXED time scale.

Two things here are load-bearing and easy to undo by accident.

1. FIXED SCALE. The prototype stretched whatever history it had across the full canvas height, so ten points and two hundred points both filled the panel and a trace's steepness meant nothing. Every sample now occupies the same number of pixels. The visible window is 60 seconds, always.

2. CONTINUOUS QUALITY STATES. Descriptor values keep flowing when pose, framing or light are not comparable, but their background says why they are excluded from measurements. No-face ticks keep time without inventing a value. Each state can be hidden non-destructively from the legend.

Rendering is virtualised: the canvas is sticky and sized to the scroll viewport, a spacer supplies the scroll height, and only the visible slice is drawn. Render work and canvas memory stay bounded; compact timeline entries grow with the session. Growing one tall canvas instead would hit the ~32k px dimension cap after ~45 minutes and hold ~30MB on the way there.

Instance Methods

formatClock(timestamp: number): string

Formats a timestamp as a zero-padded wall clock label.

Parameters

• timestamp (number) — Epoch milliseconds.

Returns

• string — Clock label such as "14:32:07".

token(el: Element, name: string, fallback: string): string

Reads a resolved CSS custom property from an element with a fallback.

Parameters

• el (Element) — Element whose computed style is read.
• name (string) — Custom property name including leading dashes.
• fallback (string) — Value used when the property resolves empty.

Returns

• string — Resolved colour string.

stats(): object

Reports timeline size for diagnostics and tests.

Returns

• object — Timeline counts and filter state.

destroy(): void

Disconnects observers held by the graph.

Returns

• void

Static Methods

formatDuration(ms: number): string

Formats a duration in milliseconds as a compact human string.

Parameters

• ms (number) — Duration in milliseconds.

Returns

• string — Compact duration such as "8m 12s" or "4s".

createGraph(options: object): object

Creates the virtualised distance graph controller.

Parameters

• options (object) — Wiring and tuning options.
  • options.scrollEl (HTMLElement) — Scroll container element.
  • options.spacerEl (HTMLElement) — Spacer element supplying scroll height.
  • options.canvasEl (HTMLCanvasElement) — Sticky canvas element.
  • options.followEl (HTMLElement) — "Jump to now" button.
  • options.windowSeconds (number) — Seconds visible in one viewport.
  • options.samplesPerSecond (number) — Sample cadence used for layout.
  • options.maxDistance (number) — Right edge of the distance axis.
  • options.threshold (number) — Cited match threshold line.
  • options.onMarkerClick (function) — Marker click handler.

Returns

• object — Graph controller.