From a633838a7f61e688b873e5ab9ecf0f968795d7be Mon Sep 17 00:00:00 2001
From: Simon Ruderich <simon@ruderich.org>
Date: Sat, 11 May 2024 15:17:38 +0200
Subject: [PATCH] visualizer: assign id to identify packets

The id is displayed in the graph, the packet information and in the
trace (on mouse over).
---
 impl/utils/visualizer/static/index.js | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/impl/utils/visualizer/static/index.js b/impl/utils/visualizer/static/index.js
index 747104b..fa76e17 100644
--- a/impl/utils/visualizer/static/index.js
+++ b/impl/utils/visualizer/static/index.js
@@ -6,7 +6,6 @@ const traceMaxEvents = 200;
 
 
 const state = {
-    start: new Date(),
     paused: false,
     global: {
         preambles_found: 0,
@@ -48,7 +47,11 @@ function addTrace(type, data) {
     span.style.color = data.color;
     span.style.cursor = 'default';
     if (type !== tracePlaceholder) {
-        span.title = getTime();
+        let title = getTime();
+        if (data.packet !== undefined) {
+            title = `${data.packet._id} (${title})`;
+        }
+        span.title = title;
     }
 
     if (type === tracePacket) {
@@ -122,7 +125,8 @@ function updateChart(packet) {
 function updateData(packet) {
     const keys = [];
     for (const x in packet) {
-        if (x === 'preamble_symbols'
+        if (x === '_id'
+            || x === 'preamble_symbols'
             || x === 'header_symbols'
             || x === 'data_symbols') {
             continue
@@ -132,6 +136,11 @@ function updateData(packet) {
     keys.sort();
 
     const divs = [];
+    {
+        const div = document.createElement('div');
+        div.textContent = `Packet: ${packet._id}`;
+        divs.push(div);
+    }
     for (const x of keys) {
         const div = document.createElement('div');
         div.textContent = `${x}: ${packet[x]}`;
@@ -143,7 +152,8 @@ function updateData(packet) {
 function addHistory(packet) {
     const keys = [];
     for (const x in packet) {
-        if (x === 'preamble_symbols'
+        if (x === '_id'
+            || x === 'preamble_symbols'
             || x === 'header_symbols'
             || x === 'data_symbols') {
             continue;
@@ -170,7 +180,7 @@ function addHistory(packet) {
         chartHistory.data.datasets[i].data.push(data);
         i++;
     }
-    chartHistory.data.labels.push((new Date() - state.start)/1000);
+    chartHistory.data.labels.push(packet._id);
     // .update() is deferred, see redrawPlots()
 }
 
@@ -193,6 +203,8 @@ function redrawPlots() {
 }
 
 
+let packet_id = 0;
+
 const ws = new WebSocket(location.origin.replace(/^http/, 'ws') + '/events');
 ws.onmessage = (evt) => {
     if (state.paused) {
@@ -242,6 +254,7 @@ ws.onmessage = (evt) => {
         }
 
     } else if ('data_symbols' in msg) {
+        msg._id = packet_id++;
         updateChart(msg);
         updateData(msg);
         addHistory(msg);