Replacing Modals with Inline Details: A SCADA UI Pattern Evolution

I was working on the SCADA Coating project when we hit a familiar UX problem: our rectifier and scrubber monitoring tabs relied on modal popups to show detailed device states. Every click spawned a dialog box, breaking the flow of real-time monitoring. Time to kill the modals and embrace inline expansion.

The decision was straightforward—thumbnail + inline detail pattern. Instead of popping modals, clicking a device thumbnail would expand it right there on the page, revealing all the juicy operational data without context switching. This is particularly critical in SCADA systems where operators need to glance at multiple devices simultaneously without fighting a stack of dialogs.

For the rectifier tab, I stripped out the modal JSX and implemented inline state indicators using four visual dots: connection status, power supply, readiness, and automatic mode. Each device now displays its parameters inline—actual versus target current and voltage, ampere-hours, step level, and timer counts. Below that sits characteristic hardware info (model, max ratings, reversibility, bath type, suspension method) and action buttons for manual mode or power toggling. When a device loses connection, a yellow warning banner slides in automatically.

The scrubber tab followed the same architectural pattern. Instead of drilling into a modal, operators see level indicators (upper/lower points), ventilation status (primary/backup fans plus frequency), valve states, and pump status all expanded inline. The alarm state triggers a crimson banner—impossible to miss when something’s critical. Control buttons let you toggle ventilation and pump independently or confirm an alarm condition with a single tap.

The payoff was immediate. Removing modal JSX and their associated CSS reduced our style bundle by 4 kilobytes—small but meaningful in industrial environments where operators often run on modest hardware. More importantly, the cognitive load dropped. No more “wait, which device was I looking at?” because the active device stays visible, its details unfolding beneath the thumbnail.

The technical implementation leaned on CSS Grid for the parameter matrix layout and flexbox for the status dot rows. State dots use conditional coloring—green for healthy, amber for warnings, red for failures. The inline expansion uses a simple max-height transition to avoid jarring visual jumps.

One thing we learned: modals are trust killers in real-time monitoring dashboards. They fragment attention. The moment you pop a dialog to check one device, you’ve already lost sight of the others. Inline expansion keeps the whole picture in frame.

😄 Your momma’s SCADA system is so outdated, it still uses modal dialogs to monitor device status—she needs to switch to inline details just to keep up with modern UX.