timescale.info#70 · UI interaction benchmarks against the capacity budgets (browser and platform)
- timeline-app
- pull request
Part 1 of #51. The desktop driver, through `tauri-driver`, follows in a second PR. ## What it measures `bench/ui.mjs` (`npm run bench:ui`) drives the editor with **real input**: Playwright mouse, keyboard and touch through CDP. It times **24 interactions** from the input event's `timeStamp` to the frame that paints the result. For gestures it records the longest frame. - **Navigation:** drag-pan, wheel zoom (response and frames), arrow-key pan, plus-key zoom, Fit all, pinch and vertical pinch. - **Editing:** open a moment, typing per key, Save and Cancel (time until the dialog starts closing), undo and redo, delete with confirmation, new duration, the endpoint moment picker (list and search). - **Find and organise:** open search, search results, group summary, Separate by tags and rejoin, separate connected. - **Files and saving:** open, export, the pause after an edit, save to server, and a live update from another writer. Timing is done by an injected probe (`bench/ui/probe.js`): rAF then a posted message for "after paint", with no browser-specific APIs and no `eval`. That works under the platform's CSP and in WebKit for the desktop PR. ## Pass rules They come from `src/capacity.ts`, which now holds `BUDGETS` and `COMFORTABLE`: | Budget | Limit | Derived from | |---|---:|---| | response | 100 ms | `THRESHOLDS.edit` | | view, frame | 150 ms | `THRESHOLDS.redraw` | | results | 1 s | the 1 s line in the capacity report | | open | 1.5 s | `THRESHOLDS.open` | 1. **Within the comfortable size** (browser 4,000; throttled 1,000; platform 200,000), every interaction meets its budget. 2. **Beyond it,** any miss must coincide with the in-app advice being shown; otherwise the run reports an **advice gap**. `--gate` fails on either. Frame budgets started at 50 ms, but each wheel step redraws for 70–80 ms even at 1,000 moments. So gesture frames use the redraw threshold, as the systems benchmarks define, and #68 tracks making them smoother. ## Where it runs - **CI** (PostgreSQL job): browser and platform at 1,000 moments, with 3 samples and 1.5× tolerance. Everything passes there locally. - **Benchmarks workflow:** sizes 1,000 / 4,000 / 10,000 / 100,000 / 200,000, browser ×1 and ×4, plus the platform, which it builds now. - **`bench/report.mjs`:** adds an **Interactions** table: one row per interaction, one column per platform and size, with each status spelled out (✓ / over budget / over, advised / over, no advice). ## Findings The full table is in `docs/benchmarks.md#interactions`. - **Navigation misses budget at the documented comfortable sizes.** - Browser at 4,000: wheel zoom 215 ms, pinch 233 ms. - Throttled at 1,000: 190–370 ms. - Platform at 10,000: wheel zoom 316 ms, but fast at 100,000, where the view collapses into summaries. Discrete actions are well within budget almost everywhere. **→ #68** - **37 advice gaps:** the advice compares the editor's drawing time with 150 ms, while users wait from input to paint. **→ #69** (measure the wait, then recalibrate `COMFORTABLE`) - **Two bugs found while building this, fixed separately:** - **#66:** writers couldn't open API-created server timelines ("Use at most 40 tags."). - **#67:** redo after undo showed a server moment twice. **Merge #67 before this PR:** the platform gate's undo-redo step depends on it. ## Tests - `--gate` passes for the browser at 1,000 moments. - The platform passes at 1,000 moments with the #66 and #67 fixes applied. - Unit tests pass (199). Prettier and typecheck are clean.