Case study · Kestrel Grid · 2022
Kestrel Grid Console
A real-time monitoring console for an electricity distributor, rendering millions of telemetry points without freezing the control room.
01
The problem
Kestrel Grid's operators watch 1,400 substations. Their existing dashboard drew every chart as SVG and began to stutter beyond 60,000 points, which meant operators were zooming out less and trusting averages more than they should.
Alerts arrived in bursts during storms, and the list re-rendered so often that the row an operator was about to click moved under the cursor.
02
The approach
- 01
Move the work off the main thread
Telemetry parsing and downsampling run in Web Workers, using the Largest-Triangle-Three-Buckets algorithm so peaks and dips survive when zoomed out.
- 02
Canvas for density, SVG for interaction
Series are painted to canvas with D3 scales. Axes, brushes and tooltips stay in SVG so they remain crisp and accessible.
- 03
A calm alert list
The list is virtualised and ordering is frozen while the pointer or keyboard focus is inside it. New alerts queue behind a clear 'n new' control.
- 04
Tested with operators
Monthly sessions in the control room, with a keyboard-only mode for the night shift, kept the design honest.
03
The outcome
The console replaced the old dashboard across both control rooms, and it was the tool operators had open during the winter ice-storm response.
- 1.8M
- points per chart at 60 fps
- 640 → 90 ms
- interaction to next paint
- −27%
- median alert acknowledgement time
04
The stack
- React
- TypeScript
- D3
- Canvas 2D
- Web Workers
- WebSockets
- Vitest