timescale.info
Sign inSign up

How OpenChronology was built

Every merged pull request of openchronology/timeline-app, its first week of commits and its releases; and before them the 2020 PureScript editor, from snapshots of its deleted repositories in the Wayback Machine. Written to this server through the HTTP API.

327 moments · 2020-03-09T00:15:08Z CE – 2026-11-02T20:11:21Z CE · by @athan · @athan

#235 · Draw the halo without filtering whole layers, so panning keeps up

  • timeline-app
  • pull request

Fixes #232. Panning and zooming lagged on timelines with background images. The cause was the halo from #220: three `drop-shadow` filters on the `.axis` and `.edge-arcs` layers. Both fill the stage, so both were re-rasterized on every frame as the view moved. ### Measurements Pan-and-zoom script on the Marine Corps timeline, 1900–1950, Chromium with 4× CPU throttling, frame intervals in ms: | | mean | median | p90 | | --- | --- | --- | --- | | v0.3.0 | 100 | 67 | 233 | | this PR | 63 | 33 | 150 | | no image plugins at all | 55 | 17 | 133 | Switching suspects off one at a time on v0.3.0: - **Filters:** removing the halo filters altogether brought the median to 17ms. The arcs layer's filter was the most expensive, then the axis layer's. The same filter on markers and stems was close to free. - **Images:** their edge masks, and the labels' backdrop blur, each made only a small difference. What's left is mostly the redraw work a timeline does without images (last row). Headless Chromium renders in software, so absolute times run high, but the comparison holds. ### Change - **Axis:** the baseline and tick marks take a `box-shadow` in the halo color; tick labels already had a text-shadow. - **Arcs:** each relationship arc gets an `edge-arc-halo` path beneath it, a 5px stroke in the halo color along the same path. It shows only over backgrounds and ignores the pointer. - **Markers and stems** keep their filter, which follows shaped markers' outlines. It looks the same with the default white halo and with the Timeline theme's navy one. ### Tests - The duration-backgrounds browser test checks the new halo: the baseline's shadow, the markers' filter, and no filter on the axis or arcs layers. - The relationships browser test checks each arc's halo stroke: same path, just beneath it, hidden without backgrounds. - `npm test` (301), prettier and the browser suite (19) pass.

Sources

Open #235 · Draw the halo without filtering whole layers, so panning keeps up in the timeline