visualizer: draw marker in history plot after selecting a packet

impl/utils/visualizer/static/index.js

@@ -22,6 +22,10 @@ function updatePause(pause) {
         button.value = 'Continue';
     } else {
         button.value = 'Pause';
+        // Hide line markers
+        chartHistoryHz.options.plugins.lineMarker.index = undefined;
+        chartHistoryDb.options.plugins.lineMarker.index = undefined;
+        chartHistoryMisc.options.plugins.lineMarker.index = undefined;
     }
     state.paused = pause;
 }
@@ -60,8 +64,16 @@ function addTrace(type, data) {
             updatePause(true);
             updateChart(data.packet);
             updateData(data.packet);
+            // Mark current packet in history plot
+            const index = data.packet._id - chartHistoryHz.data.labels[0];
+            chartHistoryHz.options.plugins.lineMarker.index = index;
+            chartHistoryDb.options.plugins.lineMarker.index = index;
+            chartHistoryMisc.options.plugins.lineMarker.index = index;
             // Redraw
             chartConstellation.update();
+            chartHistoryHz.update();
+            chartHistoryDb.update();
+            chartHistoryMisc.update();
         };
         span.style.cursor = 'pointer';
     }
@@ -74,6 +86,30 @@ function addTrace(type, data) {
 }
 
 
+const lineMarkerPlugin = {
+    id: 'lineMarker',
+    beforeDatasetsDraw: (chart, args, plugins) => {
+        // Nothing drawn yet
+        if (chart.scales.x === undefined) {
+            return;
+        }
+        // Not yet configured to show a line
+        if (plugins.index === undefined) {
+            return;
+        }
+        const x = chart.scales.x.getPixelForValue(plugins.index);
+
+        const ctx = chart.ctx;
+        ctx.save();
+        ctx.beginPath();
+        ctx.strokeStyle = 'black';
+        ctx.lineWidth = 3;
+        ctx.moveTo(x, chart.chartArea.top);
+        ctx.lineTo(x, chart.chartArea.bottom);
+        ctx.stroke();
+    },
+};
+
 const chartConstellation = new Chart(
     document.querySelector('#constellation-canvas'), {
         type: 'scatter',
@@ -114,7 +150,13 @@ const chartHistoryHz = new Chart(
         options: {
             animation: false,
             maintainAspectRatio: false, // use full width
+            plugins: {
+                lineMarker: {},
             },
+        },
+        plugins: [
+            lineMarkerPlugin,
+        ],
     });
 const chartHistoryDb = new Chart(
     document.querySelector('#history-db-canvas'), {
@@ -126,7 +168,13 @@ const chartHistoryDb = new Chart(
         options: {
             animation: false,
             maintainAspectRatio: false, // use full width
+            plugins: {
+                lineMarker: {},
             },
+        },
+        plugins: [
+            lineMarkerPlugin,
+        ],
     });
 const chartHistoryMisc = new Chart(
     document.querySelector('#history-misc-canvas'), {
@@ -138,7 +186,13 @@ const chartHistoryMisc = new Chart(
         options: {
             animation: false,
             maintainAspectRatio: false, // use full width
+            plugins: {
+                lineMarker: {},
             },
+        },
+        plugins: [
+            lineMarkerPlugin,
+        ],
     });
 
 function updateChart(packet) {