Update screenshot.png

Ny Funktionalitet för kopplingar och signalstyrka

Dockerfile

@@ -1,15 +1,29 @@
-FROM node:lts-alpine
-
-WORKDIR /app
+FROM node:lts-alpine AS build
 
 RUN apk add --no-cache openssl
 
+WORKDIR /app
+
 # Copy only package files and install deps
 # This layer will be cached as long as package*.json don't change
 COPY package*.json package-lock.json* ./
-RUN npm ci
+RUN --mount=type=cache,target=/root/.npm npm ci --omit=dev
 
-# Copy the rest of the source
+# Copy the rest of your source
 COPY . .
 
-EXPOSE 8080
+# Pre-generate prisma client
+RUN node_modules/.bin/prisma generate
+
+FROM node:lts-alpine
+
+RUN apk add --no-cache openssl
+
+USER node:node
+
+WORKDIR /app
+
+COPY --from=build --chown=node:node /app .
+
+
+EXPOSE 8080

README.md

@@ -65,6 +65,11 @@ git clone https://github.com/liamcottle/meshtastic-map
 cd meshtastic-map
 ```
 
+Install Meshtastic protobufs definitions
+```
+git clone https://github.com/meshtastic/protobufs src/protobufs
+```
+
 Install NodeJS dependencies
 
 ```

docker-compose.yml

@@ -30,6 +30,18 @@ services:
       DATABASE_URL: "mysql://root:password@database:3306/meshtastic-map?connection_limit=100"
       MAP_OPTS: "" # add any custom index.js options here
 
+  # publishes mqtt packets via websocket
+  meshtastic-ws:
+    container_name: meshtastic-ws
+    build:
+      context: .
+      dockerfile: ./Dockerfile
+    command: /app/docker/ws.sh
+    ports:
+      - 8081:8081/tcp
+    environment:
+      WS_OPTS: ""
+
   # runs the database to store everything from mqtt
   database:
     container_name: database

docker/ws.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+
+echo "Starting websocket publisher"
+exec node src/ws.js ${WS_OPTS}
+

package.json

@@ -14,12 +14,13 @@
     "command-line-usage": "^7.0.3",
     "compression": "^1.8.1",
     "cors": "^2.8.5",
-    "express": "^5.0.0",
+    "express": "^5.2.1",
     "mqtt": "^5.14.1",
-    "protobufjs": "^7.5.4"
+    "protobufjs": "^7.5.4",
+    "ws": "^8.18.3"
   },
   "devDependencies": {
-    "jest": "^30.2.0",
+    "jest": "^30.1.3",
     "prisma": "^6.16.2"
   }
 }

prisma/migrations/20260106151912_add_edges/migration.sql

@@ -0,0 +1,23 @@
+-- CreateTable
+CREATE TABLE `edges` (
+    `id` BIGINT NOT NULL AUTO_INCREMENT,
+    `from_node_id` BIGINT NOT NULL,
+    `to_node_id` BIGINT NOT NULL,
+    `snr` INTEGER NOT NULL,
+    `from_latitude` INTEGER NULL,
+    `from_longitude` INTEGER NULL,
+    `to_latitude` INTEGER NULL,
+    `to_longitude` INTEGER NULL,
+    `packet_id` BIGINT NOT NULL,
+    `channel_id` VARCHAR(191) NULL,
+    `gateway_id` BIGINT NULL,
+    `source` VARCHAR(191) NOT NULL,
+    `created_at` DATETIME(3) NOT NULL DEFAULT CURRENT_TIMESTAMP(3),
+    `updated_at` DATETIME(3) NOT NULL DEFAULT CURRENT_TIMESTAMP(3),
+
+    INDEX `edges_from_node_id_idx`(`from_node_id`),
+    INDEX `edges_to_node_id_idx`(`to_node_id`),
+    INDEX `edges_created_at_idx`(`created_at`),
+    INDEX `edges_from_node_id_to_node_id_idx`(`from_node_id`, `to_node_id`),
+    PRIMARY KEY (`id`)
+) DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

prisma/schema.prisma

@@ -347,4 +347,28 @@ model ChannelUtilizationStats {
   @@index([channel_id])
   @@index([recorded_at])
   @@map("channel_utilization_stats")
+}
+
+model Edge {
+  id             BigInt  @id @default(autoincrement())
+  from_node_id   BigInt
+  to_node_id     BigInt
+  snr            Int
+  from_latitude  Int?
+  from_longitude Int?
+  to_latitude    Int?
+  to_longitude   Int?
+  packet_id      BigInt
+  channel_id     String?
+  gateway_id     BigInt?
+  source         String
+
+  created_at DateTime @default(now())
+  updated_at DateTime @default(now()) @updatedAt
+
+  @@index(from_node_id)
+  @@index(to_node_id)
+  @@index(created_at)
+  @@index([from_node_id, to_node_id])
+  @@map("edges")
 }

src/admin.js

@@ -1,6 +1,7 @@
 // node src/admin.js --purge-node-id 123
 // node src/admin.js --purge-node-id '!AABBCCDD'
 
+require('./utils/logger');
 const commandLineArgs = require("command-line-args");
 const commandLineUsage = require("command-line-usage");
 

src/index.js

@@ -1,3 +1,4 @@
+require('./utils/logger');
 const path = require('path');
 const express = require('express');
 const compression = require('compression');
@@ -154,6 +155,15 @@ app.get('/api', async (req, res) => {
                 "time_to": "Only include traceroutes updated before this unix timestamp (milliseconds)"
             }
         },
+        {
+            "path": "/api/v1/connections",
+            "description": "Aggregated edges between nodes from traceroutes",
+            "params": {
+                "node_id": "Only include connections involving this node id",
+                "time_from": "Only include edges created after this unix timestamp (milliseconds)",
+                "time_to": "Only include edges created before this unix timestamp (milliseconds)"
+            }
+        },
         {
             "path": "/api/v1/nodes/:nodeId/position-history",
             "description": "Position history for a meshtastic node",
@@ -219,6 +229,10 @@ app.get('/api/v1/nodes', async (req, res) => {
             where: {
                 role: role,
                 hardware_model: hardwareModel,
+                // Since we removed retention; only include nodes that have been updated in the last 30 days
+                updated_at: {
+                    gte: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000) // within last 30 days
+                }
             },
         });
 
@@ -693,6 +707,194 @@ app.get('/api/v1/traceroutes', async (req, res) => {
     }
 });
 
+// Aggregated edges endpoint
+// GET /api/v1/connections?node_id=...&time_from=...&time_to=...
+app.get('/api/v1/connections', async (req, res) => {
+    try {
+        const nodeId = req.query.node_id ? parseInt(req.query.node_id) : undefined;
+        const timeFrom = req.query.time_from ? parseInt(req.query.time_from) : undefined;
+        const timeTo = req.query.time_to ? parseInt(req.query.time_to) : undefined;
+
+        // Query edges from database
+        const edges = await prisma.edge.findMany({
+            where: {
+                created_at: {
+                    ...(timeFrom && { gte: new Date(timeFrom) }),
+                    ...(timeTo && { lte: new Date(timeTo) }),
+                },
+                // Only include edges where both nodes have positions
+                from_latitude: { not: null },
+                from_longitude: { not: null },
+                to_latitude: { not: null },
+                to_longitude: { not: null },
+                // If node_id is provided, filter edges where either from_node_id or to_node_id matches
+                ...(nodeId !== undefined && {
+                    OR: [
+                        { from_node_id: nodeId },
+                        { to_node_id: nodeId },
+                    ],
+                }),
+            },
+            orderBy: [
+                { created_at: 'desc' },
+                { packet_id: 'desc' },
+            ],
+        });
+
+        // Collect all unique node IDs from edges
+        const nodeIds = new Set();
+        for (const edge of edges) {
+            nodeIds.add(edge.from_node_id);
+            nodeIds.add(edge.to_node_id);
+        }
+
+        // Fetch current positions for all nodes
+        const nodes = await prisma.node.findMany({
+            where: {
+                node_id: { in: Array.from(nodeIds) },
+            },
+            select: {
+                node_id: true,
+                latitude: true,
+                longitude: true,
+            },
+        });
+
+        // Create a map of current node positions
+        const nodePositions = new Map();
+        for (const node of nodes) {
+            nodePositions.set(node.node_id, {
+                latitude: node.latitude,
+                longitude: node.longitude,
+            });
+        }
+
+        // Filter edges: only include edges where both nodes are still at the same location
+        const validEdges = edges.filter(edge => {
+            const fromCurrentPos = nodePositions.get(edge.from_node_id);
+            const toCurrentPos = nodePositions.get(edge.to_node_id);
+
+            // Skip if either node doesn't exist or doesn't have a current position
+            if (!fromCurrentPos || !toCurrentPos || 
+                fromCurrentPos.latitude === null || fromCurrentPos.longitude === null ||
+                toCurrentPos.latitude === null || toCurrentPos.longitude === null) {
+                return false;
+            }
+
+            // Check if stored positions match current positions
+            const fromMatches = fromCurrentPos.latitude === edge.from_latitude && 
+                               fromCurrentPos.longitude === edge.from_longitude;
+            const toMatches = toCurrentPos.latitude === edge.to_latitude && 
+                             toCurrentPos.longitude === edge.to_longitude;
+
+            return fromMatches && toMatches;
+        });
+
+        // Normalize node pairs: always use min/max to treat A->B and B->A as same connection
+        const connectionsMap = new Map();
+
+        for (const edge of validEdges) {
+            const nodeA = edge.from_node_id < edge.to_node_id ? edge.from_node_id : edge.to_node_id;
+            const nodeB = edge.from_node_id < edge.to_node_id ? edge.to_node_id : edge.from_node_id;
+            const key = `${nodeA}-${nodeB}`;
+
+            if (!connectionsMap.has(key)) {
+                connectionsMap.set(key, {
+                    node_a: nodeA,
+                    node_b: nodeB,
+                    direction_ab: [], // A -> B edges
+                    direction_ba: [], // B -> A edges
+                });
+            }
+
+            const connection = connectionsMap.get(key);
+            const isAB = edge.from_node_id === nodeA;
+
+            // Add edge to appropriate direction
+            if (isAB) {
+                connection.direction_ab.push({
+                    snr: edge.snr,
+                    snr_db: edge.snr / 4, // Convert to dB
+                    created_at: edge.created_at,
+                    packet_id: edge.packet_id,
+                    source: edge.source,
+                });
+            } else {
+                connection.direction_ba.push({
+                    snr: edge.snr,
+                    snr_db: edge.snr / 4,
+                    created_at: edge.created_at,
+                    packet_id: edge.packet_id,
+                    source: edge.source,
+                });
+            }
+        }
+
+        // Aggregate each connection
+        const connections = Array.from(connectionsMap.values()).map(conn => {
+            // Deduplicate edges by packet_id for each direction (keep first occurrence, which is most recent)
+            const dedupeByPacketId = (edges) => {
+                const seen = new Set();
+                return edges.filter(edge => {
+                    if (seen.has(edge.packet_id)) {
+                        return false;
+                    }
+                    seen.add(edge.packet_id);
+                    return true;
+                });
+            };
+
+            const deduplicatedAB = dedupeByPacketId(conn.direction_ab);
+            const deduplicatedBA = dedupeByPacketId(conn.direction_ba);
+
+            // Calculate average SNR for A->B (using deduplicated edges)
+            const avgSnrAB = deduplicatedAB.length > 0
+                ? deduplicatedAB.reduce((sum, e) => sum + e.snr_db, 0) / deduplicatedAB.length
+                : null;
+
+            // Calculate average SNR for B->A (using deduplicated edges)
+            const avgSnrBA = deduplicatedBA.length > 0
+                ? deduplicatedBA.reduce((sum, e) => sum + e.snr_db, 0) / deduplicatedBA.length
+                : null;
+
+            // Get last 5 edges for each direction (already sorted by created_at DESC, packet_id DESC, now deduplicated)
+            const last5AB = deduplicatedAB.slice(0, 5);
+            const last5BA = deduplicatedBA.slice(0, 5);
+
+            // Determine worst average SNR
+            const worstAvgSnrDb = [avgSnrAB, avgSnrBA]
+                .filter(v => v !== null)
+                .reduce((min, val) => val < min ? val : min, Infinity);
+
+            return {
+                node_a: conn.node_a,
+                node_b: conn.node_b,
+                direction_ab: {
+                    avg_snr_db: avgSnrAB,
+                    last_5_edges: last5AB,
+                    total_count: deduplicatedAB.length, // Use deduplicated count
+                },
+                direction_ba: {
+                    avg_snr_db: avgSnrBA,
+                    last_5_edges: last5BA,
+                    total_count: deduplicatedBA.length, // Use deduplicated count
+                },
+                worst_avg_snr_db: worstAvgSnrDb !== Infinity ? worstAvgSnrDb : null,
+            };
+        }).filter(conn => conn.worst_avg_snr_db !== null); // Only return connections with at least one direction
+
+        res.json({
+            connections: connections,
+        });
+
+    } catch (err) {
+        console.error(err);
+        res.status(500).json({
+            message: "Something went wrong, try again later.",
+        });
+    }
+});
+
 app.get('/api/v1/nodes/:nodeId/position-history', async (req, res) => {
     try {
 

src/mqtt.js

@@ -1,3 +1,4 @@
+require('./utils/logger');
 const crypto = require("crypto");
 const path = require("path");
 const mqtt = require("mqtt");
@@ -983,7 +984,12 @@ client.on("message", async (topic, message) => {
                     },
                 });
             } catch (e) {
-                console.error(e);
+                // Ignore MySQL error 1020 "Record has changed since last read" - this is a race condition
+                // that occurs when multiple packets arrive concurrently for the same node
+                const errorMessage = e.message || String(e);
+                if (!errorMessage.includes('Record has changed since last read')) {
+                    console.error(e);
+                }
             }
 
             // Keep track of the names a node has been using.
@@ -1006,7 +1012,12 @@ client.on("message", async (topic, message) => {
                     } 
                   });                  
             } catch (e) {
-                console.error(e);
+                // Ignore MySQL error 1020 "Record has changed since last read" - this is a race condition
+                // that occurs when multiple packets arrive concurrently for the same node
+                const errorMessage = e.message || String(e);
+                if (!errorMessage.includes('Record has changed since last read')) {
+                    console.error(e);
+                }
             }
         }
 
@@ -1083,6 +1094,70 @@ client.on("message", async (topic, message) => {
                 console.error(e);
             }
 
+            // Extract edges from neighbour info
+            try {
+                const toNodeId = envelope.packet.from;
+                const neighbors = neighbourInfo.neighbors || [];
+                const packetId = envelope.packet.id;
+                const channelId = envelope.channelId;
+                const gatewayId = envelope.gatewayId ? convertHexIdToNumericId(envelope.gatewayId) : null;
+                const edgesToCreate = [];
+
+                for(const neighbour of neighbors) {
+                    // Skip if no node ID
+                    if(!neighbour.nodeId) {
+                        continue;
+                    }
+
+                    // Skip if SNR is invalid (0 or null/undefined)
+                    // Note: SNR can be negative, so we check for 0 specifically
+                    if(neighbour.snr === 0 || neighbour.snr == null) {
+                        continue;
+                    }
+
+                    const fromNodeId = neighbour.nodeId;
+                    const snr = neighbour.snr;
+
+                    // Fetch node positions from Node table
+                    const [fromNode, toNode] = await Promise.all([
+                        prisma.node.findUnique({
+                            where: { node_id: fromNodeId },
+                            select: { latitude: true, longitude: true },
+                        }),
+                        prisma.node.findUnique({
+                            where: { node_id: toNodeId },
+                            select: { latitude: true, longitude: true },
+                        }),
+                    ]);
+
+                    // Create edge record
+                    edgesToCreate.push({
+                        from_node_id: fromNodeId,
+                        to_node_id: toNodeId,
+                        snr: snr,
+                        from_latitude: fromNode?.latitude ?? null,
+                        from_longitude: fromNode?.longitude ?? null,
+                        to_latitude: toNode?.latitude ?? null,
+                        to_longitude: toNode?.longitude ?? null,
+                        packet_id: packetId,
+                        channel_id: channelId,
+                        gateway_id: gatewayId,
+                        source: "NEIGHBORINFO_APP",
+                    });
+                }
+
+                // Bulk insert edges
+                if(edgesToCreate.length > 0) {
+                    await prisma.edge.createMany({
+                        data: edgesToCreate,
+                        skipDuplicates: true, // Skip if exact duplicate exists
+                    });
+                }
+            } catch (e) {
+                // Log error but don't crash - edge extraction is non-critical
+                console.error("Error extracting edges from neighbour info:", e);
+            }
+
             // don't store all neighbour infos, but we want to update the existing node above
             if(!collectNeighbourInfo){
                 return;
@@ -1325,6 +1400,160 @@ client.on("message", async (topic, message) => {
                 console.error(e);
             }
 
+            // Extract edges from traceroute (only for response packets)
+            if(!envelope.packet.decoded.wantResponse) {
+                try {
+                    const route = routeDiscovery.route || [];
+                    const snrTowards = routeDiscovery.snrTowards || [];
+                    const originNodeId = envelope.packet.to;
+                    const destinationNodeId = envelope.packet.from;
+                    const packetId = envelope.packet.id;
+                    const channelId = envelope.channelId;
+                    const gatewayId = envelope.gatewayId ? convertHexIdToNumericId(envelope.gatewayId) : null;
+
+                    // Determine number of edges: route.length + 1
+                    const numEdges = route.length + 1;
+                    const edgesToCreate = [];
+
+                    // Extract edges from the route path
+                    for(let i = 0; i < numEdges; i++) {
+                        // Get SNR for this edge
+                        if(i >= snrTowards.length) {
+                            // Array length mismatch - skip this edge
+                            continue;
+                        }
+
+                        const snr = snrTowards[i];
+                        
+                        // Skip if SNR is -128 (no SNR recorded)
+                        if(snr === -128) {
+                            continue;
+                        }
+
+                        // Determine from_node and to_node
+                        let fromNodeId, toNodeId;
+
+                        if(route.length === 0) {
+                            // Empty route: direct connection (to -> from)
+                            fromNodeId = originNodeId;
+                            toNodeId = destinationNodeId;
+                        } else if(i === 0) {
+                            // First edge: origin -> route[0]
+                            fromNodeId = originNodeId;
+                            toNodeId = route[0];
+                        } else if(i === route.length) {
+                            // Last edge: route[route.length-1] -> destination
+                            fromNodeId = route[route.length - 1];
+                            toNodeId = destinationNodeId;
+                        } else {
+                            // Middle edge: route[i-1] -> route[i]
+                            fromNodeId = route[i - 1];
+                            toNodeId = route[i];
+                        }
+
+                        // Fetch node positions from Node table
+                        const [fromNode, toNode] = await Promise.all([
+                            prisma.node.findUnique({
+                                where: { node_id: fromNodeId },
+                                select: { latitude: true, longitude: true },
+                            }),
+                            prisma.node.findUnique({
+                                where: { node_id: toNodeId },
+                                select: { latitude: true, longitude: true },
+                            }),
+                        ]);
+
+                        // Create edge record (skip if nodes don't exist, but still create edge with null positions)
+                        edgesToCreate.push({
+                            from_node_id: fromNodeId,
+                            to_node_id: toNodeId,
+                            snr: snr,
+                            from_latitude: fromNode?.latitude ?? null,
+                            from_longitude: fromNode?.longitude ?? null,
+                            to_latitude: toNode?.latitude ?? null,
+                            to_longitude: toNode?.longitude ?? null,
+                            packet_id: packetId,
+                            channel_id: channelId,
+                            gateway_id: gatewayId,
+                            source: "TRACEROUTE_APP",
+                        });
+                    }
+
+                    // Extract edges from route_back path
+                    const routeBack = routeDiscovery.routeBack || [];
+                    const snrBack = routeDiscovery.snrBack || [];
+                    
+                    if(routeBack.length > 0) {
+                        // Number of edges in route_back equals route_back.length
+                        for(let i = 0; i < routeBack.length; i++) {
+                            // Get SNR for this edge
+                            if(i >= snrBack.length) {
+                                // Array length mismatch - skip this edge
+                                continue;
+                            }
+
+                            const snr = snrBack[i];
+                            
+                            // Skip if SNR is -128 (no SNR recorded)
+                            if(snr === -128) {
+                                continue;
+                            }
+
+                            // Determine from_node and to_node
+                            let fromNodeId, toNodeId;
+
+                            if(i === 0) {
+                                // First edge: from -> route_back[0]
+                                fromNodeId = destinationNodeId; // 'from' in the packet
+                                toNodeId = routeBack[0];
+                            } else {
+                                // Subsequent edges: route_back[i-1] -> route_back[i]
+                                fromNodeId = routeBack[i - 1];
+                                toNodeId = routeBack[i];
+                            }
+
+                            // Fetch node positions from Node table
+                            const [fromNode, toNode] = await Promise.all([
+                                prisma.node.findUnique({
+                                    where: { node_id: fromNodeId },
+                                    select: { latitude: true, longitude: true },
+                                }),
+                                prisma.node.findUnique({
+                                    where: { node_id: toNodeId },
+                                    select: { latitude: true, longitude: true },
+                                }),
+                            ]);
+
+                            // Create edge record
+                            edgesToCreate.push({
+                                from_node_id: fromNodeId,
+                                to_node_id: toNodeId,
+                                snr: snr,
+                                from_latitude: fromNode?.latitude ?? null,
+                                from_longitude: fromNode?.longitude ?? null,
+                                to_latitude: toNode?.latitude ?? null,
+                                to_longitude: toNode?.longitude ?? null,
+                                packet_id: packetId,
+                                channel_id: channelId,
+                                gateway_id: gatewayId,
+                                source: "TRACEROUTE_APP",
+                            });
+                        }
+                    }
+
+                    // Bulk insert edges
+                    if(edgesToCreate.length > 0) {
+                        await prisma.edge.createMany({
+                            data: edgesToCreate,
+                            skipDuplicates: true, // Skip if exact duplicate exists
+                        });
+                    }
+                } catch (e) {
+                    // Log error but don't crash - edge extraction is non-critical
+                    console.error("Error extracting edges from traceroute:", e);
+                }
+            }
+
         }
 
         else if(portnum === 73) {
@@ -1429,6 +1658,7 @@ client.on("message", async (topic, message) => {
                     || portnum === 0 // ignore UNKNOWN_APP
                     || portnum === 1 // ignore TEXT_MESSAGE_APP
                     || portnum === 5 // ignore ROUTING_APP
+                    || portnum === 6 // ignore ADMIN_APP
                     || portnum === 34 // ignore PAXCOUNTER_APP
                     || portnum === 65 // ignore STORE_FORWARD_APP
                     || portnum === 66 // ignore RANGE_TEST_APP

src/protobufs

@@ -1 +1 @@
-Subproject commit 46b81e822af1b8e408f437092337f129dee693e6
+Subproject commit c2e45a3fc9cda6aedb72ad3b5b88fcccfa78073e

src/public/assets/css/styles.css

@@ -0,0 +1,115 @@
+/* used to prevent ui flicker before vuejs loads */
+[v-cloak] {
+    display: none;
+}
+
+.icon-longfast {
+    background-color: #009016;
+    border-radius: 25px;
+    border: 1px solid #2C2D3C;
+}
+
+.icon-mediumfast {
+    background-color: #326be7; 
+    border-radius: 25px;
+    border: 1px solid #2C2D3C;
+}
+
+.icon-shortslow {
+    background-color: #0077e6;
+    border-radius: 25px;
+    border: 1px solid #2C2D3C;
+}
+
+.icon-mqtt-connected {
+    background-color: #2563eb; /* Change to use same color as disconnected // #16a34a; */
+    border-radius: 25px;
+    border: 1px solid #2C2D3C;
+}
+
+.icon-mqtt-disconnected {
+    background-color: #2563eb;
+    border-radius: 25px;
+    border: 1px solid #2C2D3C;
+}
+
+.icon-offline {
+    background-color: #e2286c;
+    border-radius: 25px;
+    border: 1px solid #2C2D3C;
+}
+
+.icon-position-history {
+    background-color: #a855f7;
+    border-radius: 25px;
+    border: 1px solid #2C2D3C;
+}
+
+.icon-traceroute-start {
+    background-color: #16a34a; /* green */
+    border-radius: 25px;
+    border: 1px solid #2C2D3C;
+}
+
+.icon-traceroute-end {
+    background-color: #dc2626; /* red */
+    border-radius: 25px;
+    border: 1px solid #2C2D3C;
+}
+
+.waypoint-label {
+    font-size: 26px;
+    background-color: transparent;
+}
+
+.link {
+    color: #2563eb;
+}
+
+.link:hover {
+    text-decoration: underline;
+}
+
+.tooltip {
+    position: relative;
+    display: inline-block;
+}
+
+.tooltip .tooltip-text {
+    visibility: hidden;
+    width: 80px;
+    background-color: black;
+    color: #fff;
+    text-align: center;
+    padding: 4px 0;
+    border-radius: 6px;
+    position: absolute;
+    z-index: 10000;
+    top: 100%;
+    left: 50%;
+    margin-top: 8px;
+    margin-left: -40px; /* Use half of the width (120/2 = 60), to center the tooltip */
+}
+
+.tooltip .tooltip-text::after {
+    content: " ";
+    position: absolute;
+    bottom: 100%;  /* At the top of the tooltip */
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent black transparent;
+}
+
+.tooltip:hover .tooltip-text {
+    visibility: visible;
+}
+
+.z-search {
+    z-index: 1001;
+}
+
+.z-sidebar {
+    z-index: 1002;
+}

src/public/assets/js/app.js

@@ -0,0 +1,956 @@
+Vue.createApp({
+    data() {
+        return {
+
+            isShowingAnnouncement: this.shouldShowAnnouncement(),
+
+            configNodesMaxAgeInSeconds: window.getConfigNodesMaxAgeInSeconds(),
+            configNodesOfflineAgeInSeconds: window.getConfigNodesOfflineAgeInSeconds(),
+            configWaypointsMaxAgeInSeconds: window.getConfigWaypointsMaxAgeInSeconds(),
+            configConnectionsMaxDistanceInMeters: window.getConfigConnectionsMaxDistanceInMeters(),
+            configZoomLevelGoToNode: window.getConfigZoomLevelGoToNode(),
+            configAutoUpdatePositionInUrl: window.getConfigAutoUpdatePositionInUrl(),
+            configEnableMapAnimations: window.getConfigEnableMapAnimations(),
+            configTemperatureFormat: window.getConfigTemperatureFormat(),
+            configConnectionsTimePeriodInSeconds: window.getConfigConnectionsTimePeriodInSeconds(),
+            configConnectionsColoredLines: window.getConfigConnectionsColoredLines(),
+            configConnectionsBidirectionalOnly: window.getConfigConnectionsBidirectionalOnly(),
+            configConnectionsMinSnrDb: window.getConfigConnectionsMinSnrDb(),
+            configConnectionsBidirectionalMinSnr: window.getConfigConnectionsBidirectionalMinSnr(),
+
+            isShowingHardwareModels: false,
+            hardwareModelStats: null,
+
+            isShowingInfoModal: this.shouldShowInfoModal(),
+            isShowingMobileSearch: false,
+            isShowingSettings: false,
+
+            nodes: [],
+            searchText: "",
+
+            selectedNode: null,
+            selectedNodeDeviceMetrics: [],
+            selectedNodeEnvironmentMetrics: [],
+            selectedNodePowerMetrics: [],
+            selectedNodeMqttMetrics: [],
+            selectedNodeTraceroutes: [],
+
+            deviceMetricsTimeRange: "7d",
+            environmentMetricsTimeRange: "7d",
+            powerMetricsTimeRange: "7d",
+
+            isPositionHistoryModalExpanded: true,
+            positionHistoryDateTimeFrom: null,
+            positionHistoryDateTimeTo: null,
+            selectedNodePositionHistory: [],
+            selectedNodeToShowPositionHistory: null,
+            selectedNodePositionHistoryMarkers: [],
+            selectedNodePositionHistoryPolyLines: [],
+
+            selectedTraceRoute: null,
+            tracerouteEdges: [],
+
+            selectedNodeToShowConnections: null,
+
+            moment: window.moment,
+
+        };
+    },
+    mounted: function() {
+
+        // load data
+        this.loadHardwareModelStats();
+
+        // handle map click callback from outside of vue
+        window._onMapClick = () => {
+            this.searchText = "";
+            this.isShowingMobileSearch = false;
+        };
+
+        // handle node callback from outside of vue
+        window._onNodeClick = (node) => {
+            this.selectedNode = node;
+            this.loadNodeDeviceMetrics(node.node_id);
+            this.loadNodeEnvironmentMetrics(node.node_id);
+            this.loadNodePowerMetrics(node.node_id);
+            this.loadNodeMqttMetrics(node.node_id);
+            this.loadNodeTraceroutes(node.node_id);
+            //this.loadNodePositionHistory(node.node_id);
+        };
+
+        // handle node callback from outside of vue
+        window._onShowNodeConnectionsClick = (node) => {
+            this.selectedNodeToShowConnections = node;
+        };
+
+        // handle nodes updated callback from outside of vue
+        window._onNodesUpdated = (nodes) => {
+            this.nodes = nodes;
+        };
+
+    },
+    methods: {
+        getAnnouncementId: function() {
+            // change this when making a new announcement
+            return "1";
+        },
+        shouldShowAnnouncement: function() {
+            const lastSeenAnnouncementId = window.localStorage.getItem("last-seen-announcement-id");
+            return lastSeenAnnouncementId?.toString() !== this.getAnnouncementId();
+        },
+        dismissAnnouncement: function() {
+            window.localStorage.setItem("last-seen-announcement-id", this.getAnnouncementId());
+            this.isShowingAnnouncement = false;
+        },
+        shouldShowInfoModal: function() {
+            return !window.getConfigHasSeenInfoModal()
+                && !window.isMobile();
+        },
+        loadHardwareModelStats: function() {
+            window.axios.get('/api/v1/stats/hardware-models').then((response) => {
+                this.hardwareModelStats = response.data.hardware_model_stats;
+            }).catch((error) => {
+                // do nothing
+            });
+        },
+        loadNodeDeviceMetrics: function(nodeId) {
+
+            // calculate unix timestamps in milliseconds for supported time ranges
+            const oneDayAgoInMilliseconds = new Date().getTime() - (86400 * 1000);
+            const threeDaysAgoInMilliseconds = new Date().getTime() - (259200 * 1000);
+            const sevenDaysAgoInMilliseconds = new Date().getTime() - (604800 * 1000);
+            const thirtyDaysAgoInMilliseconds = new Date().getTime() - (259200 * 1000 * 10);
+
+            // determine how long back to load device metrics from
+            var timeFrom = threeDaysAgoInMilliseconds;
+            switch(this.deviceMetricsTimeRange){
+                case "1d": {
+                    timeFrom = oneDayAgoInMilliseconds;
+                    break;
+                }
+                case "3d": {
+                    timeFrom = threeDaysAgoInMilliseconds;
+                    break;
+                }
+                case "7d": {
+                    timeFrom = sevenDaysAgoInMilliseconds;
+                    break;
+                }
+                case "30d": {
+                    timeFrom = thirtyDaysAgoInMilliseconds;
+                    break;
+                }
+            }
+
+            window.axios.get(`/api/v1/nodes/${nodeId}/device-metrics`, {
+                params: {
+                    time_from: timeFrom,
+                },
+            }).then((response) => {
+                // reverse response, as it's newest to oldest, but we want oldest to newest
+                this.selectedNodeDeviceMetrics = response.data.device_metrics.reverse();
+                this.renderDeviceMetricCharts();
+            }).catch(() => {
+                this.selectedNodeDeviceMetrics = [];
+                this.renderDeviceMetricCharts();
+            });
+        },
+        loadNodeEnvironmentMetrics: function(nodeId) {
+
+            // calculate unix timestamps in milliseconds for supported time ranges
+            const oneDayAgoInMilliseconds = new Date().getTime() - (86400 * 1000);
+            const threeDaysAgoInMilliseconds = new Date().getTime() - (259200 * 1000);
+            const sevenDaysAgoInMilliseconds = new Date().getTime() - (604800 * 1000);
+            const thirtyDaysAgoInMilliseconds = new Date().getTime() - (259200 * 1000 * 10);
+
+            // determine how long back to load environment metrics from
+            var timeFrom = threeDaysAgoInMilliseconds;
+            switch(this.environmentMetricsTimeRange){
+                case "1d": {
+                    timeFrom = oneDayAgoInMilliseconds;
+                    break;
+                }
+                case "3d": {
+                    timeFrom = threeDaysAgoInMilliseconds;
+                    break;
+                }
+                case "7d": {
+                    timeFrom = sevenDaysAgoInMilliseconds;
+                    break;
+                }
+                case "30d": {
+                    timeFrom = thirtyDaysAgoInMilliseconds;
+                    break;
+                }
+            }
+
+            window.axios.get(`/api/v1/nodes/${nodeId}/environment-metrics`, {
+                params: {
+                    time_from: timeFrom,
+                },
+            }).then((response) => {
+                // reverse response, as it's newest to oldest, but we want oldest to newest
+                this.selectedNodeEnvironmentMetrics = response.data.environment_metrics.reverse();
+                this.renderEnvironmentMetricCharts();
+            }).catch(() => {
+                this.selectedNodeEnvironmentMetrics = [];
+                this.renderEnvironmentMetricCharts();
+            });
+        },
+        loadNodePowerMetrics: function(nodeId) {
+
+            // calculate unix timestamps in milliseconds for supported time ranges
+            const oneDayAgoInMilliseconds = new Date().getTime() - (86400 * 1000);
+            const threeDaysAgoInMilliseconds = new Date().getTime() - (259200 * 1000);
+            const sevenDaysAgoInMilliseconds = new Date().getTime() - (604800 * 1000);
+            const thirtyDaysAgoInMilliseconds = new Date().getTime() - (259200 * 1000 * 10);
+
+            // determine how long back to load power metrics from
+            var timeFrom = threeDaysAgoInMilliseconds;
+            switch(this.powerMetricsTimeRange){
+                case "1d": {
+                    timeFrom = oneDayAgoInMilliseconds;
+                    break;
+                }
+                case "3d": {
+                    timeFrom = threeDaysAgoInMilliseconds;
+                    break;
+                }
+                case "7d": {
+                    timeFrom = sevenDaysAgoInMilliseconds;
+                    break;
+                }
+                case "30d": {
+                    timeFrom = thirtyDaysAgoInMilliseconds;
+                    break;
+                }
+            }
+
+            window.axios.get(`/api/v1/nodes/${nodeId}/power-metrics`, {
+                params: {
+                    time_from: timeFrom,
+                },
+            }).then((response) => {
+                // reverse response, as it's newest to oldest, but we want oldest to newest
+                this.selectedNodePowerMetrics = response.data.power_metrics.reverse();
+                this.renderPowerMetricCharts();
+            }).catch(() => {
+                this.selectedNodePowerMetrics = [];
+                this.renderPowerMetricCharts();
+            });
+        },
+        loadNodeMqttMetrics: function(nodeId) {
+            this.selectedNodeMqttMetrics = [];
+            window.axios.get(`/api/v1/nodes/${nodeId}/mqtt-metrics`).then((response) => {
+                this.selectedNodeMqttMetrics = response.data.mqtt_metrics;
+            }).catch(() => {
+                // do nothing
+            });
+        },
+        loadNodeTraceroutes: function(nodeId) {
+            this.selectedNodeTraceroutes = [];
+            window.axios.get(`/api/v1/nodes/${nodeId}/traceroutes`, {
+                params: {
+                    count: 5,
+                },
+            }).then((response) => {
+                this.selectedNodeTraceroutes = response.data.traceroutes;
+            }).catch(() => {
+                // do nothing
+            });
+        },
+        loadNodePositionHistory: function(nodeId) {
+            this.selectedNodePositionHistory = [];
+            window.axios.get(`/api/v1/nodes/${nodeId}/position-history`, {
+                params: {
+                    // parse from datetime-local format, and send as unix timestamp in milliseconds
+                    time_from: moment(this.positionHistoryDateTimeFrom, "YYYY-MM-DDTHH:mm").format("x"),
+                    time_to: moment(this.positionHistoryDateTimeTo, "YYYY-MM-DDTHH:mm").format("x"),
+                },
+            }).then((response) => {
+                this.selectedNodePositionHistory = response.data.position_history;
+                if(this.selectedNodeToShowPositionHistory != null){
+                    clearAllPositionHistory();
+                    onPositionHistoryUpdated(response.data.position_history);
+                }
+
+            }).catch(() => {
+                // do nothing
+            });
+        },
+        renderDeviceMetricCharts: function() {
+            try {
+                this.updateDeviceMetricsChart();
+            } catch(e) {
+                console.log(e);
+            }
+        },
+        updateDeviceMetricsChart: function() {
+
+            // destroy existing chart
+            const chartElementId = "deviceMetricsChart";
+            const existingChart = window.Chart.getChart(chartElementId);
+            if(existingChart != null){
+                existingChart.destroy();
+            }
+
+            // get chart element
+            const chartElement = window.document.getElementById(chartElementId);
+            if(!chartElement){
+                return;
+            }
+
+            // create chart data
+            const labels = [];
+            const batteryMetrics = [];
+            const channelUtilizationMetrics = [];
+            const airUtilTxMetrics = [];
+            for(const deviceMetric of this.selectedNodeDeviceMetrics){
+                labels.push(moment(deviceMetric.created_at));
+                batteryMetrics.push(deviceMetric.battery_level);
+                channelUtilizationMetrics.push(deviceMetric.channel_utilization);
+                airUtilTxMetrics.push(deviceMetric.air_util_tx);
+            }
+
+            // create chart
+            new window.Chart(chartElement, {
+                type: 'line',
+                data: {
+                    labels: labels,
+                    datasets: [
+                        {
+                            label: 'Battery Level',
+                            borderColor: '#3b82f6',
+                            backgroundColor: '#3b82f6',
+                            pointStyle: false, // no points
+                            fill: false,
+                            data: batteryMetrics,
+                        },
+                        {
+                            label: 'Channel Util',
+                            borderColor: '#22c55e',
+                            backgroundColor: '#22c55e',
+                            showLine: false, // no lines between points
+                            fill: false,
+                            data: channelUtilizationMetrics,
+                        },
+                        {
+                            label: 'Air Util TX',
+                            borderColor: '#f97316',
+                            backgroundColor: '#f97316',
+                            showLine: false, // no lines between points
+                            fill: false,
+                            data: airUtilTxMetrics,
+
+                        },
+                    ],
+                },
+                options: {
+                    responsive: true,
+                    borderWidth: 2,
+                    elements: {
+                        point: {
+                            radius: 2,
+                        },
+                    },
+                    scales: {
+                        x: {
+                            position: 'top',
+                            type: 'time',
+                            time: {
+                                unit: 'day',
+                                displayFormats: {
+                                    day: 'MMM DD', // Jan 01
+                                },
+                            },
+                        },
+                        y: {
+                            min: 0,
+                            max: 101, // 101 is "Plugged In", need to include for tooltip to work
+                            ticks: {
+                                callback: (label) => `${label}%`,
+                            },
+                        },
+                    },
+                    plugins: {
+                        legend: {
+                            display: false,
+                        },
+                        tooltip: {
+                            mode: "index",
+                            intersect: false,
+                            callbacks: {
+                                label: (item) => {
+                                    return `${item.dataset.label}: ${item.formattedValue}%`;
+                                },
+                            },
+                        },
+                    },
+                }
+            });
+
+        },
+        renderEnvironmentMetricCharts: function() {
+            try {
+                this.updateEnvironmentMetricsChart();
+            } catch(e) {
+                console.log(e);
+            }
+        },
+        updateEnvironmentMetricsChart: function() {
+
+            // destroy existing chart
+            const chartElementId = "environmentMetricsChart";
+            const existingChart = window.Chart.getChart(chartElementId);
+            if(existingChart != null){
+                existingChart.destroy();
+            }
+
+            // get chart element
+            const chartElement = window.document.getElementById(chartElementId);
+            if(!chartElement){
+                return;
+            }
+
+            // create chart data
+            const labels = [];
+            const temperatureMetrics = [];
+            const relativeHumidityMetrics = [];
+            const barometricPressureMetrics = [];
+            const iaqMetrics = [];
+            for(const deviceMetric of this.selectedNodeEnvironmentMetrics){
+                labels.push(moment(deviceMetric.created_at));
+                temperatureMetrics.push(deviceMetric.temperature);
+                relativeHumidityMetrics.push(deviceMetric.relative_humidity);
+                barometricPressureMetrics.push(deviceMetric.barometric_pressure);
+                iaqMetrics.push(deviceMetric.iaq);
+            }
+
+            // create chart
+            new window.Chart(chartElement, {
+                type: 'line',
+                data: {
+                    labels: labels,
+                    datasets: [
+                        {
+                            label: 'Temperature',
+                            suffix: '°C',
+                            borderColor: '#3b82f6',
+                            backgroundColor: '#3b82f6',
+                            pointStyle: false, // no points
+                            fill: false,
+                            data: temperatureMetrics,
+                            yAxisID: 'y',
+                        },
+                        {
+                            label: 'Humidity',
+                            suffix: '%',
+                            borderColor: '#22c55e',
+                            backgroundColor: '#22c55e',
+                            pointStyle: false, // no points
+                            fill: false,
+                            data: relativeHumidityMetrics,
+                            yAxisID: 'y',
+                        },
+                        {
+                            label: 'Pressure',
+                            suffix: 'hPa',
+                            borderColor: '#f97316',
+                            backgroundColor: '#f97316',
+                            pointStyle: false, // no points
+                            fill: false,
+                            data: barometricPressureMetrics,
+                            yAxisID: 'y1',
+
+                        },
+                        {
+                            label: 'IAQ',
+                            suffix: 'IAQ',
+                            borderColor: '#f472b6',
+                            backgroundColor: '#f472b6',
+                            pointStyle: false, // no points
+                            fill: false,
+                            data: iaqMetrics,
+                            yAxisID: 'yIAQ',
+
+                        },
+                    ],
+                },
+                options: {
+                    responsive: true,
+                    borderWidth: 2,
+                    spanGaps: 1000 * 60 * 60 * 24, // only show lines between metrics with a 24 hour or less gap
+                    elements: {
+                        point: {
+                            radius: 2,
+                        },
+                    },
+                    scales: {
+                        x: {
+                            position: 'top',
+                            type: 'time',
+                            time: {
+                                unit: 'day',
+                                displayFormats: {
+                                    day: 'MMM DD', // Jan 01
+                                },
+                            },
+                        },
+                        y: {
+                            min: -20,
+                            max: 100,
+                        },
+                        y1: {
+                            min: 800,
+                            max: 1100,
+                            ticks: {
+                                stepSize: 10,
+                                callback: (label) => `${label} hPa`,
+                            },
+                            position: 'right',
+                            grid: {
+                                drawOnChartArea: false, // only want the grid lines for one axis to show up
+                            },
+                        },
+                        yIAQ: {
+                            type: 'linear',
+                            display: false,
+                        },
+                    },
+                    plugins: {
+                        legend: {
+                            display: false,
+                        },
+                        tooltip: {
+                            mode: "index",
+                            intersect: false,
+                            callbacks: {
+                                label: (item) => {
+                                    return `${item.dataset.label}: ${item.formattedValue}${item.dataset.suffix}`;
+                                },
+                            },
+                        },
+                    },
+                }
+            });
+
+        },
+        renderPowerMetricCharts: function() {
+            try {
+                this.updatePowerMetricsChart();
+            } catch(e) {
+                console.log(e);
+            }
+        },
+        updatePowerMetricsChart: function() {
+
+            // destroy existing chart
+            const chartElementId = "powerMetricsChart";
+            const existingChart = window.Chart.getChart(chartElementId);
+            if(existingChart != null){
+                existingChart.destroy();
+            }
+
+            // get chart element
+            const chartElement = window.document.getElementById(chartElementId);
+            if(!chartElement){
+                return;
+            }
+
+            // create chart data
+            const labels = [];
+            const channel1VoltageReadings = [];
+            const channel2VoltageReadings = [];
+            const channel3VoltageReadings = [];
+            const channel1CurrentReadings = [];
+            const channel2CurrentReadings = [];
+            const channel3CurrentReadings = [];
+            for(const powerMetric of this.selectedNodePowerMetrics){
+                labels.push(moment(powerMetric.created_at));
+                channel1VoltageReadings.push(powerMetric.ch1_voltage);
+                channel2VoltageReadings.push(powerMetric.ch2_voltage);
+                channel3VoltageReadings.push(powerMetric.ch3_voltage);
+                channel1CurrentReadings.push(powerMetric.ch1_current);
+                channel2CurrentReadings.push(powerMetric.ch2_current);
+                channel3CurrentReadings.push(powerMetric.ch3_current);
+            }
+
+            // create chart
+            new window.Chart(chartElement, {
+                type: 'line',
+                data: {
+                    labels: labels,
+                    datasets: [
+                        {
+                            label: 'Ch1 Voltage',
+                            suffix: "V",
+                            borderColor: '#3b82f6',
+                            backgroundColor: '#3b82f6',
+                            pointStyle: false, // no points
+                            fill: false,
+                            data: channel1VoltageReadings,
+                            yAxisID: 'y',
+                        },
+                        {
+                            label: 'Ch2 Voltage',
+                            suffix: "V",
+                            borderColor: '#22c55e',
+                            backgroundColor: '#22c55e',
+                            pointStyle: false, // no points
+                            fill: false,
+                            data: channel2VoltageReadings,
+                            yAxisID: 'y',
+                        },
+                        {
+                            label: 'Ch3 Voltage',
+                            suffix: "V",
+                            borderColor: '#f97316',
+                            backgroundColor: '#f97316',
+                            pointStyle: false, // no points
+                            fill: false,
+                            data: channel3VoltageReadings,
+                            yAxisID: 'y',
+                        },
+                        {
+                            label: 'Ch1 Current',
+                            suffix: "mA",
+                            borderColor: '#93c5fd',
+                            backgroundColor: '#93c5fd',
+                            pointStyle: false, // no points
+                            fill: false,
+                            data: channel1CurrentReadings,
+                            yAxisID: 'y1',
+                        },
+                        {
+                            label: 'Ch2 Current',
+                            suffix: "mA",
+                            borderColor: '#86efac',
+                            backgroundColor: '#86efac',
+                            pointStyle: false, // no points
+                            fill: false,
+                            data: channel2CurrentReadings,
+                            yAxisID: 'y1',
+                        },
+                        {
+                            label: 'Ch3 Current',
+                            suffix: "mA",
+                            borderColor: '#fdba74',
+                            backgroundColor: '#fdba74',
+                            pointStyle: false, // no points
+                            fill: false,
+                            data: channel3CurrentReadings,
+                            yAxisID: 'y1',
+                        },
+                    ],
+                },
+                options: {
+                    responsive: true,
+                    borderWidth: 2,
+                    spanGaps: 1000 * 60 * 60 * 3, // only show lines between metrics with a 3 hour or less gap
+                    elements: {
+                        point: {
+                            radius: 2,
+                        },
+                    },
+                    scales: {
+                        x: {
+                            position: 'top',
+                            type: 'time',
+                            time: {
+                                unit: 'day',
+                                displayFormats: {
+                                    day: 'MMM DD', // Jan 01
+                                },
+                            },
+                        },
+                        y: {
+                            min: 0,
+                            suggestedMax: 6,
+                            ticks: {
+                                callback: (label) => `${label}V`,
+                            },
+                        },
+                        y1: {
+                            suggestedMin: -50,
+                            suggestedMax: 50,
+                            ticks: {
+                                stepSize: 50,
+                                callback: (label) => `${label}mA`,
+                            },
+                            position: 'right',
+                            grid: {
+                                drawOnChartArea: false, // only want the grid lines for one axis to show up
+                            },
+                        },
+                    },
+                    plugins: {
+                        legend: {
+                            display: false,
+                        },
+                        tooltip: {
+                            mode: "index",
+                            intersect: false,
+                            callbacks: {
+                                label: (item) => {
+                                    return `${item.dataset.label}: ${item.formattedValue}${item.dataset.suffix}`;
+                                },
+                            },
+                        },
+                    },
+                }
+            });
+
+        },
+        showTraceRoute: function(traceroute) {
+            this.selectedTraceRoute = traceroute;
+        },
+        findNodeById: function(id) {
+            return window.findNodeById(id);
+        },
+        findNodeMarkerById: function(id) {
+            return window.findNodeMarkerById(id);
+        },
+        onSearchResultNodeClick: function(node) {
+
+            // clear search
+            this.searchText = "";
+
+            // hide search
+            this.isShowingMobileSearch = false;
+
+            // go to node
+            if(window.goToNode(node.node_id)){
+                return;
+            }
+
+            // fallback to showing node details since we can't go to the node
+            window.showNodeDetails(node.node_id);
+
+        },
+        dismissInfoModal: function() {
+            this.isShowingInfoModal = false;
+            window.setConfigHasSeenInfoModal(true);
+        },
+        getRegionFrequencyRange: function(regionName) {
+            return window.getRegionFrequencyRange(regionName);
+        },
+        showNodePositionHistory: function(nodeId) {
+
+            // find node
+            const node = findNodeById(nodeId);
+            if(!node){
+                return;
+            }
+
+            // update ui
+            this.selectedNode = null;
+            this.selectedNodeToShowPositionHistory = node;
+            this.isPositionHistoryModalExpanded = true;
+
+            // close node info tooltip as position history shows under it
+            window.closeAllTooltips();
+
+            // reset default time range when opening position history ui
+            // YYYY-MM-DDTHH:mm is the format expected by the datetime-local input type
+            this.positionHistoryDateTimeFrom = moment().subtract(1, "hours").format('YYYY-MM-DDTHH:mm');
+            this.positionHistoryDateTimeTo = moment().format('YYYY-MM-DDTHH:mm');
+
+            // load position history
+            this.loadNodePositionHistory(nodeId);
+
+        },
+        onPositionHistoryQuickRangeClick: function(range) {
+
+            // update position history time range
+            switch(range){
+                case "1h": {
+                    this.positionHistoryDateTimeFrom = moment().subtract(1, "hours").format('YYYY-MM-DDTHH:mm');
+                    this.positionHistoryDateTimeTo = moment().format('YYYY-MM-DDTHH:mm');
+                    break;
+                }
+                case "24h": {
+                    this.positionHistoryDateTimeFrom = moment().subtract(24, "hours").format('YYYY-MM-DDTHH:mm');
+                    this.positionHistoryDateTimeTo = moment().format('YYYY-MM-DDTHH:mm');
+                    break;
+                }
+                case "7d": {
+                    this.positionHistoryDateTimeFrom = moment().subtract(7, "days").format('YYYY-MM-DDTHH:mm');
+                    this.positionHistoryDateTimeTo = moment().format('YYYY-MM-DDTHH:mm');
+                    break;
+                }
+            }
+
+            // reload position history
+            const node = this.selectedNodeToShowPositionHistory;
+            if(node){
+                this.loadNodePositionHistory(node.node_id);
+            }
+
+        },
+        getShareLinkForNode: function(nodeId) {
+            return window.location.origin + `/?node_id=${nodeId}`;
+        },
+        copyShareLinkForNode: function(nodeId) {
+
+            // make sure copy to clipboard is supported
+            if(!navigator.clipboard || !navigator.clipboard.writeText){
+                alert("Clipboard not supported. Site must be served via https on iOS.");
+                return;
+            }
+
+            // copy share link to clipboard
+            const url = this.getShareLinkForNode(nodeId);
+            navigator.clipboard.writeText(url);
+
+            // tell user we copied it
+            alert("Link copied to clipboard!");
+
+        },
+        dismissShowingNodeConnections: function() {
+            window._onHideNodeConnectionsClick();
+            this.selectedNodeToShowConnections = null;
+        },
+        dismissShowingNodePositionHistory: function() {
+            this.selectedNodePositionHistory = [];
+            this.selectedNodeToShowPositionHistory = null;
+            this.selectedNodePositionHistoryMarkers = [];
+            this.selectedNodePositionHistoryPolyLines = [];
+            cleanUpPositionHistory();
+        },
+        formatUptimeSeconds: function(secondsToFormat) {
+            secondsToFormat = Number(secondsToFormat);
+            var days = Math.floor(secondsToFormat / (3600 * 24));
+            var hours = Math.floor((secondsToFormat % (3600 * 24)) / 3600);
+            var minutes = Math.floor((secondsToFormat % 3600) / 60);
+            var seconds = Math.floor(secondsToFormat % 60);
+            var daysPlural = days === 1 ? 'day' : 'days';
+            return `${days} ${daysPlural} ${hours}h ${minutes}m ${seconds}s`;
+        },
+        formatTemperature: function(celsius) {
+            switch(this.configTemperatureFormat){
+                case "celsius": {
+                    return `${Number(celsius).toFixed(0)}°C`;
+                }
+                case "fahrenheit": {
+                    const fahrenheit = this.celsiusToFahrenheit(celsius);
+                    return `${fahrenheit.toFixed(0)}°F`;
+                }
+            }
+        },
+        convertTemperature: function(celsius) {
+            switch(this.configTemperatureFormat){
+                case "celsius": {
+                    return celsius;
+                }
+                case "fahrenheit": {
+                    return this.celsiusToFahrenheit(celsius);
+                }
+            }
+        },
+        getTemperatureUnit: function() {
+            switch(this.configTemperatureFormat){
+                case "celsius": return "°C";
+                case "fahrenheit": return "°F";
+            }
+        },
+        celsiusToFahrenheit: function(celsius) {
+            return (celsius * 9/5) + 32;
+        },
+        getNodeColour(nodeId) {
+            // convert node id to a hex colour
+            return "#" + (nodeId & 0x00FFFFFF).toString(16).padStart(6, '0');
+        },
+        getNodeTextColour(nodeId) {
+
+            // extract rgb components
+            const r = (nodeId & 0xFF0000) >> 16;
+            const g = (nodeId & 0x00FF00) >> 8;
+            const b = nodeId & 0x0000FF;
+
+            // calculate brightness
+            const brightness = ((r * 0.299) + (g * 0.587) + (b * 0.114)) / 255;
+
+            // determine text color based on brightness
+            return brightness > 0.5 ? "#000000" : "#FFFFFF";
+
+        },
+    },
+    computed: {
+        searchedNodes() {
+
+            // search nodes
+            const nodes = this.nodes.filter((node) => {
+                const matchesId = node.node_id?.toLowerCase()?.includes(this.searchText.toLowerCase());
+                const matchesHexId = node.node_id_hex?.toLowerCase()?.includes(this.searchText.toLowerCase());
+                const matchesLongName = node.long_name?.toLowerCase()?.includes(this.searchText.toLowerCase());
+                const matchesShortName = node.short_name?.toLowerCase()?.includes(this.searchText.toLowerCase());
+                return matchesId || matchesHexId || matchesLongName || matchesShortName;
+            });
+
+            // order alphabetically by long name
+            nodes.sort((nodeA, nodeB) => {
+                const nodeALongName = nodeA.long_name || "";
+                const nodeBLongName = nodeB.long_name || "";
+                return nodeALongName.localeCompare(nodeBLongName);
+            });
+
+            // only return the first 500 results to avoid ui lag...
+            return nodes.slice(0, 500);
+
+        },
+        selectedNodeLatestPowerMetric() {
+            const [ latestPowerMetric ] = this.selectedNodePowerMetrics.slice(-1);
+            return latestPowerMetric;
+        },
+    },
+    watch: {
+        configNodesMaxAgeInSeconds() {
+            window.setConfigNodesMaxAgeInSeconds(this.configNodesMaxAgeInSeconds);
+        },
+        configNodesOfflineAgeInSeconds() {
+            window.setConfigNodesOfflineAgeInSeconds(this.configNodesOfflineAgeInSeconds);
+        },
+        configWaypointsMaxAgeInSeconds() {
+            window.setConfigWaypointsMaxAgeInSeconds(this.configWaypointsMaxAgeInSeconds);
+        },
+        configConnectionsMaxDistanceInMeters() {
+            window.setConfigConnectionsMaxDistanceInMeters(this.configConnectionsMaxDistanceInMeters);
+        },
+        configZoomLevelGoToNode() {
+            window.setConfigZoomLevelGoToNode(this.configZoomLevelGoToNode);
+        },
+        configAutoUpdatePositionInUrl() {
+            window.setConfigAutoUpdatePositionInUrl(this.configAutoUpdatePositionInUrl);
+        },
+        configEnableMapAnimations() {
+            window.setConfigEnableMapAnimations(this.configEnableMapAnimations);
+        },
+        configTemperatureFormat() {
+            window.setConfigTemperatureFormat(this.configTemperatureFormat);
+        },
+        configConnectionsTimePeriodInSeconds() {
+            window.setConfigConnectionsTimePeriodInSeconds(this.configConnectionsTimePeriodInSeconds);
+        },
+        configConnectionsColoredLines() {
+            window.setConfigConnectionsColoredLines(this.configConnectionsColoredLines);
+        },
+        configConnectionsBidirectionalOnly() {
+            window.setConfigConnectionsBidirectionalOnly(this.configConnectionsBidirectionalOnly);
+        },
+        configConnectionsMinSnrDb() {
+            window.setConfigConnectionsMinSnrDb(this.configConnectionsMinSnrDb);
+        },
+        configConnectionsBidirectionalMinSnr() {
+            window.setConfigConnectionsBidirectionalMinSnr(this.configConnectionsBidirectionalMinSnr);
+        },
+        deviceMetricsTimeRange() {
+            this.loadNodeDeviceMetrics(this.selectedNode.node_id);
+        },
+        environmentMetricsTimeRange() {
+            this.loadNodeEnvironmentMetrics(this.selectedNode.node_id);
+        },
+        powerMetricsTimeRange() {
+            this.loadNodePowerMetrics(this.selectedNode.node_id);
+        },
+    },
+}).mount('#app');

src/public/assets/js/config.js

@@ -0,0 +1,199 @@
+function getConfigHasSeenInfoModal() {
+    return localStorage.getItem("config_has_seen_info_modal") === "true";
+}
+
+function setConfigHasSeenInfoModal(value) {
+    return localStorage.setItem("config_has_seen_info_modal", value);
+}
+
+function getConfigAutoUpdatePositionInUrl() {
+    // use user preference, or enable by default
+    const value = localStorage.getItem("config_auto_update_position_in_url");
+    return value === "true" || value == null;
+}
+
+function setConfigAutoUpdatePositionInUrl(value) {
+    return localStorage.setItem("config_auto_update_position_in_url", value);
+}
+
+function getConfigEnableMapAnimations() {
+
+    const value = localStorage.getItem("config_enable_map_animations");
+
+    // enable animations by default
+    if(value === null){
+        return true;
+    }
+
+    return value === "true";
+
+}
+
+function setConfigEnableMapAnimations(value) {
+    return localStorage.setItem("config_enable_map_animations", value);
+}
+
+function getConfigTemperatureFormat() {
+    return localStorage.getItem("config_temperature_format") || "celsius";
+}
+
+function setConfigTemperatureFormat(format) {
+    return localStorage.setItem("config_temperature_format", format);
+}
+
+function getConfigMapSelectedTileLayer() {
+    return localStorage.getItem("config_map_selected_tile_layer") || "Thunderforest Neighbourhood";
+}
+
+function setConfigMapSelectedTileLayer(layer) {
+    return localStorage.setItem("config_map_selected_tile_layer", layer);
+}
+
+function getConfigMapEnabledOverlayLayers() {
+
+    try {
+        const value = localStorage.getItem("config_map_enabled_overlay_layers");
+        if(value){
+            return JSON.parse(value);
+        }
+    } catch(e) {}
+
+    // overlays enabled by default
+    return ["Legend", "Position History", "Traceroutes"];
+
+}
+
+function setConfigMapEnabledOverlayLayers(layers) {
+    return localStorage.setItem("config_map_enabled_overlay_layers", JSON.stringify(layers));
+}
+
+function getConfigNodesMaxAgeInSeconds() {
+    const value = localStorage.getItem("config_nodes_max_age_in_seconds");
+    return value != null ? parseInt(value) : null;
+}
+
+function setConfigNodesMaxAgeInSeconds(value) {
+    if(value != null){
+        return localStorage.setItem("config_nodes_max_age_in_seconds", value);
+    } else {
+        return localStorage.removeItem("config_nodes_max_age_in_seconds");
+    }
+}
+
+function getConfigNodesOfflineAgeInSeconds() {
+    const value = localStorage.getItem("config_nodes_offline_age_in_seconds");
+    return value != null ? parseInt(value) : 10800;
+}
+
+function setConfigNodesOfflineAgeInSeconds(value) {
+    if(value != null){
+        return localStorage.setItem("config_nodes_offline_age_in_seconds", value);
+    } else {
+        return localStorage.removeItem("config_nodes_offline_age_in_seconds");
+    }
+}
+
+function getConfigWaypointsMaxAgeInSeconds() {
+    const value = localStorage.getItem("config_waypoints_max_age_in_seconds");
+    return value != null ? parseInt(value) : null;
+}
+
+function setConfigWaypointsMaxAgeInSeconds(value) {
+    if(value != null){
+        return localStorage.setItem("config_waypoints_max_age_in_seconds", value);
+    } else {
+        return localStorage.removeItem("config_waypoints_max_age_in_seconds");
+    }
+}
+
+function getConfigConnectionsMaxDistanceInMeters() {
+    const value = localStorage.getItem("config_connections_max_distance_in_meters");
+    // default to 70km (70,000 meters)
+    return value != null ? parseInt(value) : 70000;
+}
+
+function setConfigConnectionsMaxDistanceInMeters(value) {
+    return localStorage.setItem("config_connections_max_distance_in_meters", value);
+}
+
+function getConfigZoomLevelGoToNode() {
+    const value = localStorage.getItem("config_zoom_level_go_to_node");
+    const parsedValue = value != null ? parseInt(value) : null;
+    return parsedValue || 15;
+}
+
+function setConfigZoomLevelGoToNode(value) {
+    return localStorage.setItem("config_zoom_level_go_to_node", value);
+}
+
+function getConfigConnectionsTimePeriodInSeconds() {
+    const value = localStorage.getItem("config_connections_time_period_in_seconds");
+    // default to 7 days if unset
+    return value != null ? parseInt(value) : 604800;
+}
+
+function setConfigConnectionsTimePeriodInSeconds(value) {
+    return localStorage.setItem("config_connections_time_period_in_seconds", value);
+}
+
+function getConfigConnectionsColoredLines() {
+    const value = localStorage.getItem("config_connections_colored_lines");
+    // disable colored lines by default
+    if(value === null){
+        return false;
+    }
+    return value === "true";
+}
+
+function setConfigConnectionsColoredLines(value) {
+    return localStorage.setItem("config_connections_colored_lines", value);
+}
+
+function getConfigConnectionsBidirectionalOnly() {
+    const value = localStorage.getItem("config_connections_bidirectional_only");
+    // disable bidirectional filter by default
+    if(value === null){
+        return false;
+    }
+    return value === "true";
+}
+
+function setConfigConnectionsBidirectionalOnly(value) {
+    return localStorage.setItem("config_connections_bidirectional_only", value);
+}
+
+function getConfigConnectionsMinSnrDb() {
+    const value = localStorage.getItem("config_connections_min_snr_db");
+    // default to null (unset)
+    if(value === null || value === ""){
+        return null;
+    }
+    const parsed = parseFloat(value);
+    return isNaN(parsed) ? null : parsed;
+}
+
+function setConfigConnectionsMinSnrDb(value) {
+    if(value === null || value === "" || value === undefined){
+        return localStorage.removeItem("config_connections_min_snr_db");
+    }
+    // Convert to string for localStorage (handles both number and string inputs)
+    const stringValue = typeof value === "number" ? value.toString() : String(value);
+    return localStorage.setItem("config_connections_min_snr_db", stringValue);
+}
+
+function getConfigConnectionsBidirectionalMinSnr() {
+    const value = localStorage.getItem("config_connections_bidirectional_min_snr");
+    // disable bidirectional minimum SNR by default
+    if(value === null){
+        return false;
+    }
+    return value === "true";
+}
+
+function setConfigConnectionsBidirectionalMinSnr(value) {
+    return localStorage.setItem("config_connections_bidirectional_min_snr", value);
+}
+
+function isMobile() {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+}

src/stats.js

@@ -21,6 +21,12 @@ router.get('/hardware-models', async (req, res) => {
         // get nodes from db
         const results = await prisma.node.groupBy({
             by: ['hardware_model'],
+            where: {
+                 // Since we removed retention; only include nodes that have been updated in the last 30 days
+                updated_at: {
+                    gte: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000) // within last 30 days
+                }
+            },
             orderBy: {
                 _count: {
                     hardware_model: 'desc',
@@ -91,7 +97,9 @@ router.get('/messages-per-hour', async (req, res) => {
 
 router.get('/most-active-nodes', async (req, res) => {
     try {
-        const result = await prisma.$queryRaw`
+        const channelId = req.query.channel_id;
+        const result = await prisma.$queryRaw(
+            Prisma.sql`
         SELECT n.long_name, COUNT(*) AS count
         FROM (
             SELECT DISTINCT \`from\`, packet_id
@@ -101,12 +109,14 @@ router.get('/most-active-nodes', async (req, res) => {
                 AND packet_id IS NOT NULL
                 AND portnum != 73
                 AND \`to\` != 1
+                ${channelId ? Prisma.sql`AND channel_id = ${channelId}` : Prisma.sql``}
         ) AS unique_packets
         JOIN nodes n ON unique_packets.from = n.node_id
         GROUP BY n.long_name
         ORDER BY count DESC
         LIMIT 25;
-        `;
+            `
+        );
   
       res.set('Cache-Control', 'public, max-age=600'); // 10 min cache
       res.json(result);
@@ -119,6 +129,7 @@ router.get('/most-active-nodes', async (req, res) => {
 
 router.get('/portnum-counts', async (req, res) => {
     const nodeId = req.query.nodeId ? parseInt(req.query.nodeId, 10) : null;
+    const channelId = req.query.channel_id;
     const hours = 24;
     const now = new Date();
     const startTime = new Date(now.getTime() - hours * 60 * 60 * 1000);
@@ -128,6 +139,7 @@ router.get('/portnum-counts', async (req, res) => {
             where: {
                 created_at: { gte: startTime },
                 ...(Number.isInteger(nodeId) ? { from: nodeId } : {}),
+                ...(channelId ? { channel_id: channelId } : {}),
                 packet_id: { not: null },
                 to: { not: 1 }, // Filter out NODENUM_BROADCAST_NO_LORA
                 OR: [

src/utils/logger.js

@@ -0,0 +1,33 @@
+// Override console methods to add formatted timestamps
+const originalLog = console.log;
+const originalError = console.error;
+const originalWarn = console.warn;
+const originalInfo = console.info;
+
+function formatTimestamp() {
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = String(now.getMonth() + 1).padStart(2, '0');
+    const day = String(now.getDate()).padStart(2, '0');
+    const hours = String(now.getHours()).padStart(2, '0');
+    const minutes = String(now.getMinutes()).padStart(2, '0');
+    const seconds = String(now.getSeconds()).padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+
+console.log = function(...args) {
+    originalLog(`${formatTimestamp()} [Info]`, ...args);
+};
+
+console.error = function(...args) {
+    originalError(`${formatTimestamp()} [Error]`, ...args);
+};
+
+console.warn = function(...args) {
+    originalWarn(`${formatTimestamp()} [Warn]`, ...args);
+};
+
+console.info = function(...args) {
+    originalInfo(`${formatTimestamp()} [Info]`, ...args);
+};
+

src/ws.js

@@ -0,0 +1,314 @@
+require('./utils/logger');
+const crypto = require("crypto");
+const path = require("path");
+const http = require("http");
+const mqtt = require("mqtt");
+const protobufjs = require("protobufjs");
+const commandLineArgs = require("command-line-args");
+const commandLineUsage = require("command-line-usage");
+const { WebSocketServer } = require("ws");
+
+const optionsList = [
+    {
+        name: 'help',
+        alias: 'h',
+        type: Boolean,
+        description: 'Display this usage guide.'
+    },
+    {
+        name: "mqtt-broker-url",
+        type: String,
+        description: "MQTT Broker URL (e.g: mqtt://mqtt.meshtastic.org)",
+    },
+    {
+        name: "mqtt-username",
+        type: String,
+        description: "MQTT Username (e.g: meshdev)",
+    },
+    {
+        name: "mqtt-password",
+        type: String,
+        description: "MQTT Password (e.g: large4cats)",
+    },
+    {
+        name: "mqtt-client-id",
+        type: String,
+        description: "MQTT Client ID (e.g: map.example.com)",
+    },
+    {
+        name: "mqtt-topic",
+        type: String,
+        multiple: true,
+        typeLabel: '<topic> ...',
+        description: "MQTT Topic to subscribe to (e.g: msh/#)",
+    },
+    {
+        name: "decryption-keys",
+        type: String,
+        multiple: true,
+        typeLabel: '<base64DecryptionKey> ...',
+        description: "Decryption keys encoded in base64 to use when decrypting service envelopes.",
+    },
+    {
+        name: "ws-port",
+        type: Number,
+        description: "WebSocket server port (default: 8081)",
+    },
+];
+
+// parse command line args
+const options = commandLineArgs(optionsList);
+
+// show help
+if(options.help){
+    const usage = commandLineUsage([
+        {
+            header: 'Meshtastic WebSocket Publisher',
+            content: 'Publishes real-time Meshtastic packets via WebSocket.',
+        },
+        {
+            header: 'Options',
+            optionList: optionsList,
+        },
+    ]);
+    console.log(usage);
+    process.exit(0);
+}
+
+// get options and fallback to default values
+const mqttBrokerUrl = options["mqtt-broker-url"] ?? "mqtt://mqtt.meshtastic.org";
+const mqttUsername = options["mqtt-username"] ?? "meshdev";
+const mqttPassword = options["mqtt-password"] ?? "large4cats";
+const mqttClientId = options["mqtt-client-id"] ?? null;
+const mqttTopics = options["mqtt-topic"] ?? ["msh/#"];
+const decryptionKeys = options["decryption-keys"] ?? [
+    "1PG7OiApB1nwvP+rz05pAQ==", // add default "AQ==" decryption key
+];
+const wsPort = options["ws-port"] ?? 8081;
+
+// create mqtt client
+const client = mqtt.connect(mqttBrokerUrl, {
+    username: mqttUsername,
+    password: mqttPassword,
+    clientId: mqttClientId,
+});
+
+// load protobufs
+const root = new protobufjs.Root();
+root.resolvePath = (origin, target) => path.join(__dirname, "protobufs", target);
+root.loadSync('meshtastic/mqtt.proto');
+const Data = root.lookupType("Data");
+const ServiceEnvelope = root.lookupType("ServiceEnvelope");
+const RouteDiscovery = root.lookupType("RouteDiscovery");
+
+// create HTTP server for WebSocket
+const server = http.createServer();
+const wss = new WebSocketServer({ server });
+
+// track connected clients
+const clients = new Set();
+
+wss.on('connection', (ws) => {
+    clients.add(ws);
+    console.log(`WebSocket client connected. Total clients: ${clients.size}`);
+
+    ws.on('close', () => {
+        clients.delete(ws);
+        console.log(`WebSocket client disconnected. Total clients: ${clients.size}`);
+    });
+
+    ws.on('error', (error) => {
+        console.error('WebSocket error:', error);
+        clients.delete(ws);
+    });
+});
+
+// broadcast message to all connected clients
+function broadcast(message) {
+    const messageStr = JSON.stringify(message);
+    clients.forEach((client) => {
+        if (client.readyState === 1) { // WebSocket.OPEN
+            try {
+                client.send(messageStr);
+            } catch (error) {
+                console.error('Error sending message to client:', error);
+            }
+        }
+    });
+}
+
+function createNonce(packetId, fromNode) {
+    // Expand packetId to 64 bits
+    const packetId64 = BigInt(packetId);
+
+    // Initialize block counter (32-bit, starts at zero)
+    const blockCounter = 0;
+
+    // Create a buffer for the nonce
+    const buf = Buffer.alloc(16);
+
+    // Write packetId, fromNode, and block counter to the buffer
+    buf.writeBigUInt64LE(packetId64, 0);
+    buf.writeUInt32LE(fromNode, 8);
+    buf.writeUInt32LE(blockCounter, 12);
+
+    return buf;
+}
+
+/**
+ * References:
+ * https://github.com/crypto-smoke/meshtastic-go/blob/develop/radio/aes.go#L42
+ * https://github.com/pdxlocations/Meshtastic-MQTT-Connect/blob/main/meshtastic-mqtt-connect.py#L381
+ */
+function decrypt(packet) {
+    // attempt to decrypt with all available decryption keys
+    for(const decryptionKey of decryptionKeys){
+        try {
+            // convert encryption key to buffer
+            const key = Buffer.from(decryptionKey, "base64");
+
+            // create decryption iv/nonce for this packet
+            const nonceBuffer = createNonce(packet.id, packet.from);
+
+            // determine algorithm based on key length
+            var algorithm = null;
+            if(key.length === 16){
+                algorithm = "aes-128-ctr";
+            } else if(key.length === 32){
+                algorithm = "aes-256-ctr";
+            } else {
+                // skip this key, try the next one...
+                console.error(`Skipping decryption key with invalid length: ${key.length}`);
+                continue;
+            }
+
+            // create decipher
+            const decipher = crypto.createDecipheriv(algorithm, key, nonceBuffer);
+
+            // decrypt encrypted packet
+            const decryptedBuffer = Buffer.concat([decipher.update(packet.encrypted), decipher.final()]);
+
+            // parse as data message
+            return Data.decode(decryptedBuffer);
+
+        } catch(e){}
+    }
+
+    // couldn't decrypt
+    return null;
+}
+
+/**
+ * converts hex id to numeric id, for example: !FFFFFFFF to 4294967295
+ * @param hexId a node id in hex format with a prepended "!"
+ * @returns {bigint} the node id in numeric form
+ */
+function convertHexIdToNumericId(hexId) {
+    return BigInt('0x' + hexId.replaceAll("!", ""));
+}
+
+// subscribe to everything when connected
+client.on("connect", () => {
+    console.log("Connected to MQTT broker");
+    for(const mqttTopic of mqttTopics){
+        client.subscribe(mqttTopic);
+        console.log(`Subscribed to MQTT topic: ${mqttTopic}`);
+    }
+});
+
+// handle message received
+client.on("message", async (topic, message) => {
+    try {
+        // decode service envelope
+        const envelope = ServiceEnvelope.decode(message);
+        if(!envelope.packet){
+            return;
+        }
+
+        // attempt to decrypt encrypted packets
+        const isEncrypted = envelope.packet.encrypted?.length > 0;
+        if(isEncrypted){
+            const decoded = decrypt(envelope.packet);
+            if(decoded){
+                envelope.packet.decoded = decoded;
+            }
+        }
+
+        // get portnum from decoded packet
+        const portnum = envelope.packet?.decoded?.portnum;
+
+        // check if we can see the decrypted packet data
+        if(envelope.packet.decoded == null){
+            return;
+        }
+
+        // handle traceroutes (portnum 70)
+        if(portnum === 70) {
+            try {
+                const routeDiscovery = RouteDiscovery.decode(envelope.packet.decoded.payload);
+                
+                const traceroute = {
+                    type: "traceroute",
+                    data: {
+                        to: envelope.packet.to,
+                        from: envelope.packet.from,
+                        want_response: envelope.packet.decoded.wantResponse,
+                        route: routeDiscovery.route,
+                        snr_towards: routeDiscovery.snrTowards,
+                        route_back: routeDiscovery.routeBack,
+                        snr_back: routeDiscovery.snrBack,
+                        channel_id: envelope.channelId,
+                        gateway_id: envelope.gatewayId ? Number(convertHexIdToNumericId(envelope.gatewayId)) : null,
+                        packet_id: envelope.packet.id,
+                    }
+                };
+                broadcast(traceroute);
+            } catch (e) {
+                console.error("Error processing traceroute:", e);
+            }
+        }
+
+    } catch(e) {
+        console.error("Error processing MQTT message:", e);
+    }
+});
+
+// start WebSocket server
+server.listen(wsPort, () => {
+    console.log(`WebSocket server running on port ${wsPort}`);
+});
+
+// Graceful shutdown handlers
+function gracefulShutdown(signal) {
+    console.log(`Received ${signal}. Starting graceful shutdown...`);
+    
+    // Close all WebSocket connections
+    clients.forEach((client) => {
+        client.close();
+    });
+    clients.clear();
+    
+    // Close WebSocket server
+    wss.close(() => {
+        console.log('WebSocket server closed');
+    });
+    
+    // Close HTTP server
+    server.close(() => {
+        console.log('HTTP server closed');
+    });
+    
+    // Close MQTT client
+    client.end(false, () => {
+        console.log('MQTT client disconnected');
+        console.log('Graceful shutdown completed');
+        process.exit(0);
+    });
+}
+
+// Handle SIGTERM (Docker, systemd, etc.)
+process.on('SIGTERM', () => gracefulShutdown('SIGTERM'));
+
+// Handle SIGINT (Ctrl+C)
+process.on('SIGINT', () => gracefulShutdown('SIGINT'));
+