Scaling Industrial Telecom & Solar Monitoring Dashboards with WebSockets & AG Grid

Industrial monitoring platforms operate under entirely different constraints than typical web applications. While building PizGloria (telecom tower monitoring for ATC Ghana) and iSOL (solar energy plant analytics for ATC India), we had to solve a unique engineering challenge:

How do you ingest tens of thousands of continuous sensor telemetry events (alarms, generator fuel levels, AC voltage, inverter efficiency) without freezing the React DOM or exhausting user browser memory?

The Bottleneck: Uncontrolled State Re-Renders

In our earliest internal prototypes, incoming WebSocket payloads triggered standard React setState dispatches. When 50 towers simultaneously fired heartbeat notifications or battery status updates:

1. Re-render cascades: Component trees re-evaluated 40+ times per second.
2. Dropped animation frames: Chart panning and scrolling stuttered severely.
3. Garbage collection pauses: Continuous object allocation caused noticeable 500ms UI freezes.

1. Decoupled Buffer & RAF Batching

Instead of dispatching state directly into React components upon every WebSocket frame, we introduced an off-state ring buffer:

class TelemetryStreamManager {
  private buffer: Map<string, TowerTelemetry> = new Map();
  private rafId: number | null = null;
  private subscribers: Set<(updates: TowerTelemetry[]) => void> = new Set();

  public push(message: TowerTelemetry) {
    this.buffer.set(message.towerId, message);

    if (!this.rafId) {
      this.rafId = requestAnimationFrame(() => this.flush());
    }
  }

  private flush() {
    const updates = Array.from(this.buffer.values());
    this.buffer.clear();
    this.rafId = null;

    for (const callback of this.subscribers) {
      callback(updates);
    }
  }
}

By throttling component updates to the browser's native animation refresh rate (requestAnimationFrame), we reduced render cycles from hundreds of times per second down to smooth 60fps intervals.

2. Using AG Grid Transaction Updates

Standard table components require passing a new array reference on every update, which forces complete row reconciliation.

With AG Grid, we utilized applyTransactionAsync:

// Applying high-frequency delta updates directly to AG Grid memory
gridApi.applyTransactionAsync({
  update: telemetryBatchUpdates
});

AG Grid updates only the individual dirty cells in the virtualized viewport, bypassing the React virtual DOM diffing entirely for tabular updates.

3. Highcharts Boost Engine for GPU Acceleration

For solar plant generation charts tracking minute-by-minute energy outputs across hundreds of inverters, SVG chart rendering struggled past 5,000 points.

We configured the Highcharts Boost module, which switches rendering to WebGL (GPU accelerated Canvas) when dataset points exceed thresholds:

plotOptions: {
  series: {
    boostThreshold: 2000, // Seamlessly switches to WebGL
    turboThreshold: 0
  }
}

This allowed operations managers to scrub through 6 months of historical generation data smoothly without a hint of lag.

Conclusion

Building mission-critical enterprise platforms requires prioritizing browser main-thread efficiency, smart batching, and utilizing specialized rendering engines like WebGL and virtualized tables.

Written by Omprakash K M, Full Stack Developer. Discover more case studies and enterprise work on omee.dev.