Work
2025NDAA monitoring interface fed by a continuous stream of updates
Data arrived faster than the interface could repaint, and the naive implementation simply seized up.
Client under NDA. The problem, the approach and the stack are published; the name and the assets are not.
Role
- Client architecture
- Development
Stack
- React
- TypeScript
- WebSocket
The data stream is separated from the component tree
Every incoming message turned into a state update is a repaint, and at this rate they add up to more repaints than there are frames. Updates accumulate outside React and are handed to rendering in batches tied to the frame, not to the message. The table and the charts read from the same buffer, so they cannot show state from two different moments — a discrepancy here is more dangerous than a delay.
A dropped connection is a normal state, not an error
The connection drops regularly, and an interface that keeps presenting the last received numbers as current is misleading at precisely the moment people are looking at them hardest. Connection state is shown explicitly, and the data is marked stale as soon as the stream breaks. Reconnection and backfill happen on their own, but without a silent substitution: the user can see that there was a gap.
- Real time
- Performance
- Data visualisation