How it works › Performance

Performance

Zach: "It's important we are writing code that is fast, particularly as you are loading the data." npm run bench loads data-ui on real data from Zach's apps in headless Chromium, drives real input, and times it from the browser's own clock, never data-ui's word.

Where the numbers are. bench/publish.py writes each run to the data-ui producer in Vibe Tracks, which draws every KPI against its budget, per scenario and per host, with a noisy machine's points hollow. Vibe Tracks has no public page yet, so this page shows what is measured and the budgets, not the numbers.

The KPIs and their budgets

Live

The catalog the bench publishes against, drawn by data-ui itself: a table with tree: {parent}, so each diagnostic sits under the KPI it explains. Click a KPI for its formula.

The live view starts when it scrolls into sight.

kpis.base

# data-ui's speed KPIs: bench/kpi_catalog.json as rows (site/docs-pages.mjs writes kpis.json at build time)
data: kpis.json
properties:
  title: { displayName: KPI }
  level: { displayName: Level }
  target: { displayName: Budget }
  description: { displayName: What }
  formula: { displayName: Formula }
views:
  - type: table
    name: KPIs
    order: [title, level, target, description]
    tree: { parent: parent }
    columnSize: { title: 260, description: 560 }

From bench/kpi_catalog.json (Vibe Tracks' vt-kpi-catalog/1), 15 KPIs and the gate no_page_errors

The rules every KPI follows

Lower is better, for all of them; each is a p95 over its runs unless it says otherwise.
"Painted" means the frame after the work: the bench waits for the next presented frame, not for data-ui's render event.
Cold and warm: a new browser context (empty cache) and the same page reloaded.
Trust: the machine is shared, so each scenario records the load and a calibration loop; a noisy point is published and drawn hollow, never hidden.
FAILED, never fast: a scenario with a page error, a fallback view or a missing rail publishes no numbers at all (the gate no_page_errors).

The scenarios

Scenario	App	Rows	Views	What it stresses
`robotparts-actuators`	robotparts	1,149	grouped table, pivot	the headline: rich cells, 48 brand groups, nine facets
`robotparts-catalog`	robotparts	2,068	table, grouped	the part catalog
`object-database`	object database	2,196	table, cards (2,196 thumbnails)	images
`vibetracks-runs`	Vibe Tracks	700	table, pivot, chart	real producer runs
`vibetracks-kpis`	Vibe Tracks	161	KPI cards, chart	the KPI view
`vibetracks-board`	Vibe Tracks	76	kanban	the board
`rack-model-runs`	robotparts models	623	KPI, leaderboard table, pivot, chart	15 presets on one dataset
`actuator-charts`	robotparts	1,149	Ashby charts	Vega (the 850 KB bundle)
`actuator-pivot`	robotparts	1,149	pivot	the pivot
`robotparts-photos`	robotparts	175	cards with photos	the media grid
`robotparts-timeline`	robotparts	30	timeline	vis-timeline
`robotparts-sellers-map`	robotparts	322	map	MapLibre
`systemsketch-blocks`	SystemSketch	8	graph	React Flow
`robotparts-calendar`	robotparts	172	calendar	EventCalendar
`large-table@N`	synthetic	1k, 10k, 100k, 150k	table, grouped, pivot	scaling (sampled from the real actuators; `generate.py`, seeded)

Run it

terminal

npm --prefix ~/data-ui run bench
npm --prefix ~/data-ui run bench -- --scenario robotparts-actuators --runs 3
python3 ~/data-ui/bench/publish.py --to ~/vt/zach/producers/data-ui --event "after X"

data-ui also leaves its own marks in the browser's timeline, so DevTools' Performance panel shows them: data-ui:data, data-ui:start, data-ui:first-render, and the measures data-ui:model, data-ui:render, data-ui:rail.

Comes from bench/KPIS.md, bench/kpi_catalog.json and bench/README.md in docs/.