From c72dc4392d0257788a98879366b65812ce93bffd Mon Sep 17 00:00:00 2001
From: Mikhael Skvortsov <mikhael.skvortsov@gmail.com>
Date: Wed, 17 Apr 2024 20:50:30 +0300
Subject: [PATCH] Tooltips for node ids

---
 meshmon.css | 26 ++++++++++++++++++++++++++
 meshmon.js  | 41 ++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/meshmon.css b/meshmon.css
index c98b9c7..ec940da 100644
--- a/meshmon.css
+++ b/meshmon.css
@@ -16,6 +16,8 @@
     --selected-header: #c2c260;
     --selected-header-outbound: #5fcc44;
     --selected-decoded: #f9f978;
+
+    --tooltip-bg-color: #bababa;
 }
 
 [data-theme="dark"] {
@@ -33,6 +35,8 @@
     --selected-header: #5b6053;
     --selected-header-outbound: #1c8100;
     --selected-decoded: #56563c;
+
+    --tooltip-bg-color: #111111;
 }
 
 body {
@@ -147,6 +151,28 @@ body {
     display: var(--logo-dark-mode);
 }
 
+/* Node id tooltips */
+
+.node-tooltip-text {
+    font-family: var(--font-family-verbatim);
+}
+
+.node-tooltip .node-tooltip-text {
+    display: none;
+    background-color: var(--tooltip-bg-color);
+    color: var(--font-color);
+    text-align: left;
+    border-radius: 5px;
+    padding: 6px;
+
+    position: absolute;
+    z-index: 1;
+}
+
+.node-tooltip:hover .node-tooltip-text {
+    display: block;
+}
+
 /* Theme switcher */
 
 .theme-switch-wrapper {
diff --git a/meshmon.js b/meshmon.js
index da6459a..670d90e 100644
--- a/meshmon.js
+++ b/meshmon.js
@@ -6,6 +6,7 @@ const defaultKey = CryptoJS.enc.Base64.parse('1PG7OiApB1nwvP+rz05pAQ==');
 const defaultMaxPackets = 2048;
 
 var packets = [];
+var users = new Map();
 
 var mqttUrlInput   = null;
 var mqttTopicInput = null;
@@ -299,6 +300,17 @@ const dummyHeader = {
     portnum: '75',
 };
 
+function tooltipOnMouseOver(e) {
+    const spanIdText = e.target;
+    const spanTooltipText = spanIdText.nextElementSibling;
+    const id = spanIdText.innerHTML;
+
+    const user = users.get(id);
+    if (user !== undefined) {
+        spanTooltipText.innerHTML = `${user.shortName} ${user.longName}`;
+    }
+}
+
 function render(se) {
     if (tbody.rows.length > defaultMaxPackets * 2) {
         tbody.deleteRow(0);
@@ -313,7 +325,28 @@ function render(se) {
     }
 
     fields.forEach((field) => {
-        headerRow.insertCell().innerHTML = se.header[field];
+        const cell = headerRow.insertCell();
+        var value = se.header[field];
+        if (value == '!ffffffff') {
+            cell.innerHTML = value;
+        } else if (field == 'gatewayId' || field == 'from' || field == 'to') {
+            const spanIdText = document.createElement('span');
+            spanIdText.innerHTML = value;
+            spanIdText.onmouseover = tooltipOnMouseOver;
+
+            const spanTooltipText = document.createElement('span');
+            spanTooltipText.className = 'node-tooltip-text';
+            spanTooltipText.innerHTML = '<i>Unknown</i>';
+
+            const spanTooltip = document.createElement('span');
+            spanTooltip.className = 'node-tooltip';
+
+            spanTooltip.appendChild(spanIdText);
+            spanTooltip.appendChild(spanTooltipText);
+            cell.appendChild(spanTooltip);
+        } else {
+            cell.innerHTML = value;
+        }
     });
 
     var text = '';
@@ -394,6 +427,12 @@ function mqttOnMessage(topic, message) {
     }
     packets.push(se);
 
+    if (se.packet.decoded.portnum == meshtastic.PortNum.values.NODEINFO_APP &&
+        se.parsed.status == ParseResult.Ok) {
+        const user = se.parsed.value.value;
+        users.set(user.id, user);
+    }
+
     const scrollDown = window.scrollY + window.innerHeight + 42 > document.body.scrollHeight;
     if (filterExpr(se.header)) {
         render(se);