Drill: 8 states: one table component, all 8 states (loading skeleton, empty, error, partial, filtered-empty, sorted, selected, overflow). Each state must be correct.
Interpretation: One telemetry event register for a drainage-board storm night (Wrenfoot Levels IDB, 14 pumping stations, Storm Corric), shown eight times β each state is the same register at a different moment of the night, from 21:38 loading to 02:50 overflow. Fully achromatic UI where color appears only as status semantics; Inter + JetBrains Mono with tnum/zero; a JS audit asserts 53 checks including per-state row counts and the masthead tally figures. Aesthetic reference: printed internal-drainage-board dispatch ledger.
Wrenfoot Levels Internal Drainage Board Β· Specimen sheet
Telemetered events from fourteen pumping stations on the night of 24β25 October 2026, Storm Corric. One table component, shown eight times β each state is the register at a different moment of the night.
State 01 Loading skeleton β 21:38, polls arriving
Placeholder bars inherit per-column widths from real content β a mono-width time bar, a long station bar, short right-aligned numerals β not uniform grey stripes. The register is marked busy; nothing shifts when data lands.
| Time | Station | Event | Level cm | Ξ cm | Pump | Energy kWh | Flag | |
|---|---|---|---|---|---|---|---|---|
| Fetching last night's events β usually under 2 seconds. | ||||||||
Correct when: bar widths vary by column, zero layout shift on data arrival, aria-busy set, motion honours reduced-motion.
State 02 Empty β 21:30, commissioning night
Empty is not an error and not "No data." It states what is empty, why, and the next thing that will change it.
| Time | Station | Event | Level cm | Ξ cm | Pump | Energy kWh | Flag |
|---|---|---|---|---|---|---|---|
|
No events yet β telemetry begins at commissioning. WF-13 Peat Wharf was commissioned at 21:12 tonight. The telemetry unit files its first poll within 15 minutes of commissioning; the register fills from then. | |||||||
Correct when: the message names the cause, the expected fill time, and offers a next action β never a bare "No data."
State 03 Error β 01:52, link down 3 h 30 m
Error is not empty: data exists but is stale. The banner names the failing component and the outage duration; the rows below are the last good poll, dimmed and tagged, never silently passed off as live.
| Time | Station | Event | Level cm | Ξ cm | Pump | Energy kWh | Flag |
|---|---|---|---|---|---|---|---|
| β Telemetry link down β Fen Gate RTU unreachable for 3 h 30 m (since 22:22). Rows below are the last good poll. Retry gatewayDuty engineer | |||||||
| 22:14STALE | Fen GateWF-08 | Level rise | 45.8 | +1.8 | Off | 0.0 | β |
| 21:44STALE | Fen GateWF-08 | Level rise | 44.0 | +1.2 | Off | 0.0 | β |
Correct when: banner distinguishes error from empty and from partial, stale rows are visibly devalued, and a retry path exists.
State 04 Partial β 02:50, storm degradation
Partial is not error: most stations are live. The register prints the reported fraction and names every silent station, and shows their last known state without inventing values.
| Time | Station | Event | Level cm | Ξ cm | Pump | Energy kWh | Flag |
|---|---|---|---|---|---|---|---|
|
9 of 14 stations reported in the last hour Β· silent: Eel Dyke, Fen Gate, Kestrel Sluice, North Drop, Tide Slack Β· degraded since 22:22 | |||||||
Correct when: silent stations appear as rows with honest em-dashes, never zeros or cached numbers passed as live.
State 05 Filtered-empty β 02:50, two filters active
A different emptiness from State 02: the register holds 35 events, and this combination excludes all of them. The message explains the collision and offers to undo it β it never reuses the commissioning message.
| Time | Station | Event | Level cm | Ξ cm | Pump | Energy kWh | Flag |
|---|---|---|---|---|---|---|---|
|
No events match these filters. Fen Gate went silent at 22:22 β before any warn-flagged event tonight β so "Fen Gate + Warn" can never match. The register itself holds 35 events. | |||||||
Correct when: message differs from State 02, active filters are visible and removable in one action, and the path back to data is one click.
State 06 Sorted β 02:50, by level, highest first
Exactly one column carries the indicator; the sort is stable and its tiebreak is stated, not implied β Salt Fleet's 76.2 cm leads, and the two 60.5 cm rows resolve by time, Cow Short before Lamb-marsh.
| Time | Station | Event | Level cmβΌ | Ξ cm | Pump | Energy kWh | Flag |
|---|
Correct when: a single βΌ, the column values are genuinely non-increasing, and the 60.5 cm tie resolves by time ascending as the caption promises.
State 07 Selected β 02:50, three of eight
The selection column appears only in select mode. Three rows are checked; the header checkbox is indeterminate (β), not checked; the action bar states the count and offers the bulk verb β acknowledge β plus a way out.
| Time | Station | Event | Level cm | Ξ cm | Pump | Energy kWh | Flag |
|---|
Correct when: count matches checked rows, indeterminate header state is honest, every bulk action is reachable by keyboard, Clear always visible.
State 08 Overflow β page 1 of 63
Both overflows at once, each with its instrument: the count line and pager own the vertical; the pinned Time column owns the horizontal β rows keep their anchor no matter how far right the register scrolls.
| Time | Station | Event | Level cm | Ξ cm | Pump | Energy kWh | Flag |
|---|
Wide register scrolls sideways β Time stays pinnedβ
Correct when: count line agrees with pager totals, current page is non-interactive, and the first column stays visually pinned while scrolling horizontally.