Killing Modals: How SCADA Operators Got Their Flow Back

I was deep in the SCADA Coating project when the reality hit: our rectifier and scrubber monitoring interface was drowning in modal dialogs. Every click to inspect a device spawned a full-screen popup, breaking the operator’s rhythm. In real-time industrial monitoring, that friction costs seconds—and seconds cost money.

The original architecture was textbook modal hell. Two massive popups—RectifierDetailModal and ScrubberDetailModal—each carrying 8–10 parameters, status indicators, and control buttons. Operators had to tunnel into a dialog, absorb information, close it, then repeat for the next device. It felt like navigating a file browser instead of monitoring live equipment.

The breakthrough came when I realized we didn’t need to hide this information—we needed to expand it inline. I pivoted to a thumbnail + inline detail pattern: each device renders as a compact card, and clicking it unfolds all the details right there on the page, no context switching required.

For rectifiers, I implemented four visual status dots—connection, power supply, readiness, and automatic mode—stacked vertically beside the device name. Below that, the inline expansion reveals the operational matrix: actual versus target current and voltage, ampere-hours burned, step level, timer state, and characteristic hardware specs (model, max ratings, reversibility, bath type). Management buttons sit at the bottom, toggling manual mode or cutting power. When the device loses connection, a yellow warning banner slides in automatically—unmissable to an operator’s eye.

Scrubbers got the same treatment. Instead of a modal dialog, you see level indicators (upper and lower points), ventilation status (primary fan, backup fan, frequency), valve positions, and pump state all laid out in an expandable grid. An alarm triggers a crimson banner that dominates the card’s top—there’s no misreading a red warning in an industrial context. Control buttons let you toggle ventilation or pump independently, or acknowledge the alarm with a single tap.

The technical win was cleaner than expected. Dumping the modal JSX and its associated CSS shrunk the bundle by 4 kilobytes. More importantly, operators could now see multiple devices simultaneously without fighting a stack of overlapping dialogs. CSS Grid handled the parameter matrix layout, flexbox managed the status rows, and conditional coloring (green for healthy, amber for caution, red for critical) made state at-a-glance.

The real insight: good UX doesn’t hide complexity—it unfolds it. The inline pattern kept all information accessible while respecting the operator’s cognitive load. No more hunting for the close button. No more “which device was I looking at again?”

---

Q: Why do programmers prefer dark mode? Because light attracts bugs. 😄