visualizer: skip redraws when they take too long

impl/utils/visualizer/static/index.js

@@ -56,6 +56,8 @@ function addTrace(type, data) {
             updatePause(true);
             updateChart(data.packet);
             updateData(data.packet);
+            // Redraw
+            chartConstellation.update();
         };
         span.style.cursor = 'pointer';
     }
@@ -114,7 +116,7 @@ function updateChart(packet) {
     chartConstellation.data.datasets[0].data = packet['preamble_symbols'];
     chartConstellation.data.datasets[1].data = packet['header_symbols'];
     chartConstellation.data.datasets[2].data = packet['data_symbols'];
-    chartConstellation.update();
+    // .update() is deferred, see redrawPlots()
 }
 
 function updateData(packet) {
@@ -169,7 +171,25 @@ function addHistory(packet) {
         i++;
     }
     chartHistory.data.labels.push((new Date() - state.start)/1000);
-    chartHistory.update();
+    // .update() is deferred, see redrawPlots()
+}
+
+let redrawPending = false;
+
+function redrawPlots() {
+    // Updating the plots is too slow for live updates for all received
+    // messages. Instead of falling behind, skip redraws when the messages
+    // arrive too quickly.
+    if (redrawPending) {
+        return;
+    }
+
+    redrawPending = true;
+    window.setTimeout(() => {
+        chartHistory.update();
+        chartConstellation.update();
+        redrawPending = false;
+    }, 10 /* ms */);
 }
 
 
@@ -225,6 +245,7 @@ ws.onmessage = (evt) => {
         updateChart(msg);
         updateData(msg);
         addHistory(msg);
+        redrawPlots();
 
         addTrace(tracePacket, {
             string: 'P',