fix nodeinfo and telemetry

.gitea/workflows/build.yml

@@ -1,8 +1,5 @@
 name: Build Docker containers
-on:
+on: [push]
-  push:
-    branches:
-      - master
 
 jobs:
   Build:

mqtt/index.js

@@ -107,6 +107,11 @@ const optionsList = [
         type: Boolean,
         description: "This option will drop all packets that have 'OK to MQTT' set to false.",
     },
+    {
+         name: "debug-incoming-packets",
+         type: Boolean,
+         description: "This option will print out all known packets as they arrive.",
+    },
     {
         name: "drop-portnums-without-bitfield",
         type: Number,
@@ -225,7 +230,7 @@ const collectorEnabled = {
 const decryptionKeys = options["decryption-keys"] ?? [
     "1PG7OiApB1nwvP+rz05pAQ==", // add default "AQ==" decryption key
 ];
-const logKnownPacketTypes = false;
+const logKnownPacketTypes = options["debug-incoming-packets"] ?? false;
 const dropPacketsNotOkToMqtt = options["drop-packets-not-ok-to-mqtt"] ?? false;
 const dropPortnumsWithoutBitfield = options["drop-portnums-without-bitfield"] ?? null;
 const oldFirmwarePositionPrecision = options["old-firmware-position-precision"] ?? null;
@@ -787,7 +792,7 @@ client.on('message', async (topic, message) => {
                 break;
             case Portnums.PortNum.NODEINFO_APP:
                 callback = onNodeInfo;
-                schema = Mesh.NodeInfoSchema;
+                schema = Mesh.UserSchema;
                 break;
             case Portnums.PortNum.WAYPOINT_APP:
                 callback = onWaypoint;
@@ -1218,25 +1223,28 @@ async function onRouteDiscovery(envelope, payload) {
 }
 
 async function onTelemetry(envelope, payload) {
-
+    // we need to do some work on the packet to log it properly
+    const telemetryType = payload.variant.case
     if(logKnownPacketTypes) {
         console.log('TELEMETRY_APP', {
             from: envelope.packet.from.toString(16),
-            telemetry: payload,
+            type: telemetryType,
+            telemetry: payload.variant.value,
         });
     }
+    payload = payload.variant.value
 
     // data to update
     const data = {};
 
     // handle device metrics
-    if(payload.deviceMetrics){
+    if (telemetryType === 'deviceMetrics'){
 
-        data.battery_level = payload.deviceMetrics.batteryLevel !== 0 ? payload.deviceMetrics.batteryLevel : null;
+        data.battery_level = payload.batteryLevel !== 0 ? payload.batteryLevel : null;
-        data.voltage = payload.deviceMetrics.voltage !== 0 ? payload.deviceMetrics.voltage : null;
+        data.voltage = payload.voltage !== 0 ? payload.voltage : null;
-        data.channel_utilization = payload.deviceMetrics.channelUtilization !== 0 ? payload.deviceMetrics.channelUtilization : null;
+        data.channel_utilization = payload.channelUtilization !== 0 ? payload.channelUtilization : null;
-        data.air_util_tx = payload.deviceMetrics.airUtilTx !== 0 ? payload.deviceMetrics.airUtilTx : null;
+        data.air_util_tx = payload.airUtilTx !== 0 ? payload.airUtilTx : null;
-        data.uptime_seconds = payload.deviceMetrics.uptimeSeconds !== 0 ? payload.deviceMetrics.uptimeSeconds : null;
+        data.uptime_seconds = payload.uptimeSeconds !== 0 ? payload.uptimeSeconds : null;
 
         // create device metric
         try {
@@ -1275,20 +1283,20 @@ async function onTelemetry(envelope, payload) {
     }
 
     // handle environment metrics
-    if(payload.environmentMetrics){
+    if(telemetryType === 'environmentMetrics'){
 
         // get metric values
-        const temperature = payload.environmentMetrics.temperature !== 0 ? payload.environmentMetrics.temperature : null;
+        const temperature = payload.temperature !== 0 ? payload.temperature : null;
-        const relativeHumidity = payload.environmentMetrics.relativeHumidity !== 0 ? payload.environmentMetrics.relativeHumidity : null;
+        const relativeHumidity = payload.relativeHumidity !== 0 ? payload.relativeHumidity : null;
-        const barometricPressure = payload.environmentMetrics.barometricPressure !== 0 ? payload.environmentMetrics.barometricPressure : null;
+        const barometricPressure = payload.barometricPressure !== 0 ? payload.barometricPressure : null;
-        const gasResistance = payload.environmentMetrics.gasResistance !== 0 ? payload.environmentMetrics.gasResistance : null;
+        const gasResistance = payload.gasResistance !== 0 ? payload.gasResistance : null;
-        const voltage = payload.environmentMetrics.voltage !== 0 ? payload.environmentMetrics.voltage : null;
+        const voltage = payload.voltage !== 0 ? payload.voltage : null;
-        const current = payload.environmentMetrics.current !== 0 ? payload.environmentMetrics.current : null;
+        const current = payload.current !== 0 ? payload.current : null;
-        const iaq = payload.environmentMetrics.iaq !== 0 ? payload.environmentMetrics.iaq : null;
+        const iaq = payload.iaq !== 0 ? payload.iaq : null;
-        const windDirection = payload.environmentMetrics.windDirection;
+        const windDirection = payload.windDirection;
-        const windSpeed = payload.environmentMetrics.windSpeed;
+        const windSpeed = payload.windSpeed;
-        const windGust = payload.environmentMetrics.windGust;
+        const windGust = payload.windGust;
-        const windLull = payload.environmentMetrics.windLull;
+        const windLull = payload.windLull;
 
         // set metrics to update on node table
         data.temperature = temperature;
@@ -1337,15 +1345,15 @@ async function onTelemetry(envelope, payload) {
     }
 
     // handle power metrics
-    if(payload.powerMetrics){
+    if(telemetryType === 'powerMetrics'){
 
         // get metric values
-        const ch1Voltage = payload.powerMetrics.ch1Voltage !== 0 ? payload.powerMetrics.ch1Voltage : null;
+        const ch1Voltage = payload.ch1Voltage !== 0 ? payload.ch1Voltage : null;
-        const ch1Current = payload.powerMetrics.ch1Current !== 0 ? payload.powerMetrics.ch1Current : null;
+        const ch1Current = payload.ch1Current !== 0 ? payload.ch1Current : null;
-        const ch2Voltage = payload.powerMetrics.ch2Voltage !== 0 ? payload.powerMetrics.ch2Voltage : null;
+        const ch2Voltage = payload.ch2Voltage !== 0 ? payload.ch2Voltage : null;
-        const ch2Current = payload.powerMetrics.ch2Current !== 0 ? payload.powerMetrics.ch2Current : null;
+        const ch2Current = payload.ch2Current !== 0 ? payload.ch2Current : null;
-        const ch3Voltage = payload.powerMetrics.ch3Voltage !== 0 ? payload.powerMetrics.ch3Voltage : null;
+        const ch3Voltage = payload.ch3Voltage !== 0 ? payload.ch3Voltage : null;
-        const ch3Current = payload.powerMetrics.ch3Current !== 0 ? payload.powerMetrics.ch3Current : null;
+        const ch3Current = payload.ch3Current !== 0 ? payload.ch3Current : null;
 
         // create power metric
         try {

webapp/frontend/package.json

@@ -14,17 +14,20 @@
     "axios": "^1.8.4",
     "chart.js": "^4.4.8",
     "chartjs-adapter-moment": "^1.0.1",
-    "lodash": "^4.17.21",
+    "install": "^0.13.0",
-    "maplibre-gl": "^5.3.1",
+    "leaflet": "^1.9.4",
+    "leaflet-arrowheads": "^1.4.0",
+    "leaflet-geometryutil": "^0.10.3",
+    "leaflet-groupedlayercontrol": "^0.6.1",
+    "leaflet.markercluster": "^1.5.3",
     "moment": "^2.30.1",
-    "pinia": "^3.0.2",
-    "pinia-plugin-persistedstate": "^4.2.0",
     "tailwindcss": "^4.1.4",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
     "vite": "^6.2.4",
     "vite-plugin-vue-devtools": "^7.7.2"
   }

webapp/frontend/src/LayerControl.js

@@ -1,304 +0,0 @@
-export default class LayersControl {
-    constructor(options) {
-      // This div will hold all the checkboxes and their labels
-      this._container = document.createElement('div');
-      this._container.style.padding = '12px';
-      this._container.classList.add(
-        // Built-in classes for consistency
-        'maplibregl-ctrl',
-        'maplibregl-ctrl-group',
-        // Custom class, see later
-        'layers-control',
-      );
-      // Options
-      this._options = options;
-      // Map inputs
-      this._mapInputs = {};
-      this.activeMap = null;
-      // Control inputs
-      this._controlInputs = {};
-      this._activeControl = {};
-      this._previousLayers = [];
-    }
-
-    _createGroupHeader(name) {
-        const label = document.createElement('label');
-        const text = document.createElement('span');
-        text.innerText = name;
-        text.classList.add('layer-group-name');
-        label.appendChild(text);
-        return label;
-    }
-
-    _createGroupContainer() {
-        const div = document.createElement('div');
-        div.classList.add('layer-group');
-        return div;
-    }
-
-    _createGroup(name, data) {
-        const container = this._createGroupContainer();
-        const header = this._createGroupHeader(name);
-        container.appendChild(header);
-        for (const key of Object.keys(data.layers)) {
-            let input = null;
-            if (data.type === 'radio') {
-                input = this._createLabeledRadio(`${name}_${key}`, key, '_control_selection');
-            } else if (data.type === 'checkbox') {
-                input = this._createLabeledCheckbox(`${name}_${key}`, key, '_control_selection');
-            }
-            container.appendChild(input);
-        }
-        return container;
-    }
-
-    applyDefaults() {
-        for (const name of Object.keys(this._options.controls)) {
-            const config = this._options.controls[name];
-            if (typeof config.default === 'string') {
-                this._controlInputs[name][config.default].checked = true;
-                this._doControlAction(this._options.controls[name].layers[config.default]);
-            } else if (Array.isArray(config.default)) {
-                for (const id of config.default) {
-                    this._controlInputs[name][id].checked = true;
-                    this._doControlAction(this._options.controls[name].layers[id], true);
-                }
-            }
-        }
-    }
-
-    _createSeparator() {
-        const div = document.createElement('div');
-        div.classList.add('layers-control-separator');
-        return div;
-    }
-
-    _getLayers() {
-        return this._map.getLayersOrder().filter(name => !this._mapInputs.hasOwnProperty(name));
-    }
-
-    _getVisibleLayers() {
-        return this._getLayers().filter(layer => {
-            const visibility = this._map.getLayer(layer).getLayoutProperty('visibility') ?? 'visible';
-            return visibility === 'visible';
-        });
-    }
-
-    _doControlAction(config, value) {
-        switch(config.type) {
-            case 'source_filter':
-                const source = this._map.getSource(config.source);
-                const data = config.getter().filter(config.filter);
-                source.setData({
-                    type: 'FeatureCollection',
-                    features: data,
-                });
-                break;
-            case 'toggle_element':
-                if (config.element ?? false) {
-                    document.querySelector(config.element).style.display = value ? 'block' : 'none'; 
-                }
-                break;
-            case 'layer_toggle':
-                if (value) {
-                    this._showLayer(config.layer);
-                } else {
-                    this._hideLayer(config.layer);
-                }
-                break;
-            case 'layer_control':
-                this._previousLayers = this._getVisibleLayers();
-                if (config.hideAllExcept ?? false) {
-                    const layersToRemove = this._getVisibleLayers().filter(name => !config.hideAllExcept.includes(name));
-                    for (const id of layersToRemove) {
-                        this._hideLayer(id);
-                    }
-                    for (const id of config.hideAllExcept) {
-                        this._showLayer(id);
-                    }
-                }
-                if (config.disableCluster ?? false) {
-                    const style = this._map.getStyle()
-                    style.sources[config.disableCluster].cluster = false;
-                    this._map.setStyle(style);
-                }
-                break;
-        }
-    }
-
-    _disableLayerTransitions(name) {
-        const layerType = this._map.getLayer(name)?.type;
-        if (layerType === 'fill' || layerType === 'line' || layerType === 'circle') {
-            this._map.setPaintProperty(name, `${layerType}-opacity-transition`, { duration: 0 });
-        } else if (layerType === 'symbol') {
-              this._map.setPaintProperty(name, 'text-opacity-transition', { duration: 0 });
-              this._map.setPaintProperty(name, 'icon-opacity-transition', { duration: 0 });
-              this._map.setPaintProperty(name, 'text-opacity', 1);
-              this._map.setPaintProperty(name, 'icon-opacity', 1);
-              const layout = this._map.getLayoutProperty(name, 'text-field');
-              if (layout) {
-                  this._map.setLayoutProperty(name, 'text-optional', false);
-              }
-        }
-    }
-
-    _hideLayer(name) {
-        console.debug('hideLayer: ', name);
-        this._disableLayerTransitions(name);
-        this._map.setLayoutProperty(name, 'visibility', 'none');
-    }
-
-    _showLayer(name) {
-        console.debug('showLayer: ', name);
-        this._disableLayerTransitions(name);
-        this._map.setLayoutProperty(name, 'visibility', 'visible');
-    }
-
-    _revertControlAction(config) {
-        switch(config.type) {
-            case 'source_filter':
-                const source = this._map.getSource(config.source);
-                source.setData({
-                    type: 'FeatureCollection',
-                    features: config.getter(),
-                });
-                break;
-            case 'toggle_element':
-                if (config.element ?? false) {
-                    const el = document.querySelector(config.element).style.display;
-                    document.querySelector(config.element).style.display = (el === 'block' ? 'none' : 'block');
-                }
-                break;
-            case 'layer_toggle':
-                const visibility = this._map.getLayer(config.layer).getLayoutProperty('visibility') ?? 'visible';
-                if (visibility === 'visible') {
-                    this._hideLayer(config.layer);
-                } else {
-                    this._showLayer(config.layer);
-                }
-                break;
-            case 'layer_control':
-                // i want to hide all layers in current layers that weren't in previous layers, so all layers in current layers that are not in previous layers
-                const toHide = this._getVisibleLayers().filter(layer => !this._previousLayers.includes(layer));
-                const toShow = this._getLayers().filter(layer => this._previousLayers.includes(layer));
-                for (const id of toShow) {
-                    this._showLayer(id);
-                }
-                for (const id of toHide) {
-                    this._hideLayer(id);
-                }
-                this._previousLayers = [];
-                if (config.disableCluster ?? false) {
-                    const style = this._map.getStyle()
-                    style.sources[config.disableCluster].cluster = true;
-                    this._map.setStyle(style);
-                }
-                break;
-        }
-    }
-
-    _createLabeledRadio(id, display, type) {
-        const label = document.createElement('label');
-        const text = document.createElement('span');
-        text.innerText = ` ${display}`;
-        const input = document.createElement('input');
-        input.type = 'radio';
-        input.name = type;
-        input.value = id;
-        input.addEventListener('change', (e) => {
-            if (type === '_map_control_selection') {
-                if (this.activeMap != e.target.value) {
-                    this._map.setLayoutProperty(this.activeMap, 'visibility', 'none');
-                    this._map.setLayoutProperty(e.target.value, 'visibility', 'visible');
-                    this.activeMap = e.target.value;
-                }
-            } else if (type === '_control_selection') {
-                const [ parent, child ] = id.split('_');
-                const layerConfig = this._options.controls[parent].layers[child];
-                this._revertControlAction(this._activeControl[parent] ?? {type: ''});
-                this._doControlAction(layerConfig);
-                this._activeControl[parent] = layerConfig;
-            }
-        });
-        if (type === '_map_control_selection') {
-            this._mapInputs[id] = input;
-        } else if (type === '_control_selection') {
-            const [ parent, child ] = id.split('_');
-            this._controlInputs[parent][child] = input;
-        }
-        label.appendChild(input);
-        label.appendChild(text);
-        return label;
-    }
-
-    _createLabeledCheckbox(id, display, type) {
-        const label = document.createElement('label');
-        const text = document.createElement('span');
-        text.innerText = ` ${display}`;
-        const input = document.createElement('input');
-        input.type = 'checkbox';
-        input.name = id;
-        input.addEventListener('change', (e) => {
-            if (type === '_control_selection') {
-                const [ parent, child ] = id.split('_');
-                const layerConfig = this._options.controls[parent].layers[child];
-                this._revertControlAction(this._activeControl[parent] ?? {type: ''});
-                this._doControlAction(layerConfig, e.target.checked);
-                this._activeControl[parent] = layerConfig;
-            }
-        });
-        if (type === '_control_selection') {
-            const [ parent, child ] = id.split('_');
-            this._controlInputs[parent][child] = input;
-        }
-        label.appendChild(input);
-        label.appendChild(text);
-        return label;
-    }
-  
-    onAdd(map) {
-      this._map = map;
-      map.on('load', () => {
-        // create map changer
-        for (const map of this._options.maps) {
-            const radioSelection = this._createLabeledRadio(map.id, map.display, '_map_control_selection');
-            this._container.appendChild(radioSelection);
-        }
-        this._container.appendChild(this._createSeparator());
-        // Create the checkboxes and add them to the container
-        for (const key of Object.keys(this._options.controls)) {          
-            this._controlInputs[key] = {};  
-            this._activeControl[parent] = {};
-            const group = this._createGroup(key, this._options.controls[key]);
-            this._container.appendChild(group);
-        }
-        this._options.maps.forEach(({ id, tiles, sourceExtraParams = {}, layerExtraParams = {} }) => {
-            map.addSource(id, {
-                ...sourceExtraParams,
-                type: 'raster',
-                tiles,
-            });
-            map.addLayer({ ...layerExtraParams, id, source: id, type: 'raster' });
-            if (this._options.initialMap === id) {
-                map.setLayoutProperty(id, 'visibility', 'visible');
-                this._mapInputs[id].checked = true;
-                this.activeMap = id;
-            } else {
-                map.setLayoutProperty(id, 'visibility', 'none');
-            }
-        });
-      });
-      return this._container;
-    }
-  
-    onRemove(map) {
-      // Not sure why we have to do this ourselves since we are not the ones
-      // adding us to the map.
-      // Copied from their example so keeping it in.
-      this._container.parentNode.removeChild(this._container);
-      // This might be to help garbage collection? Also from their example.
-      // Or perhaps to ensure calls to this object do not change the map still
-      // after removal.
-      this._map = undefined;
-    }
-  }

webapp/frontend/src/LegendControl.js

@@ -1,19 +0,0 @@
-export default class LegendControl {
-    onAdd(map) {
-        this._map = map;
-        this._container = document.createElement('div');
-        this._container.style.backgroundColor = 'white';
-        this._container.style.padding = '12px';
-        this._container.innerHTML = `<div style="margin-bottom:6px;"><strong>Legend</strong></div>`
-            + `<div style="display:flex"><div class="icon-mqtt-connected" style="width:12px;height:12px;margin-right:4px;margin-top:auto;margin-bottom:auto;"></div> MQTT Connected</div>`
-            + `<div style="display:flex"><div class="icon-mqtt-disconnected" style="width:12px;height:12px;margin-right:4px;margin-top:auto;margin-bottom:auto;"></div> MQTT Disconnected</div>`
-            + `<div style="display:flex"><div class="icon-offline" style="width:12px;height:12px;margin-right:4px;margin-top:auto;margin-bottom:auto;"></div> Offline Too Long</div>`;
-        this._container.className = 'maplibregl-ctrl maplibregl-ctrl-group legend-control';
-        return this._container;
-    }
-
-    onRemove() {
-        this._container.parentNode.removeChild(this._container);
-        this._map = undefined;
-    }
-}

webapp/frontend/src/assets/main.css

@@ -1,46 +1,13 @@
 @import "tailwindcss";
-@import "maplibre-gl/dist/maplibre-gl.css";
+@import "leaflet/dist/leaflet.css";
-
+@import "leaflet.markercluster/dist/MarkerCluster.css";
-.layers-control {
+@import "leaflet.markercluster/dist/MarkerCluster.Default.css";
-    line-height: 1.5;
+@import "leaflet-groupedlayercontrol/dist/leaflet.groupedlayercontrol.min.css";
-}
-
-.layer-group-name {
-    margin-bottom: .2em;
-    margin-left: 3px;
-    font-weight: 700;
-}
-
-.layer-group {
-    margin-bottom: .5em;
-}
-
-  .layers-control label {
-    font-size: 1.08333em;
-    display: block;
-  }
-
-  .layers-control radio {
-    margin-top: 2px;
-    position: relative;
-    top: 1px;
-  }
-
-  .layers-control-separator {
-    border-top: 1px solid #ddd;
-    height: 0;
-    margin: 5px -10px 5px -6px;
-  }
-
         /* used to prevent ui flicker before vuejs loads */
       [v-cloak] {
           display: none;
       }
 
-      .maplibregl-ctrl-basemaps:not(.closed) > .hidden {
-        display: unset !important;
-      }
-
       .icon-mqtt-connected {
           background-color: #16a34a;
           border-radius: 25px;

webapp/frontend/src/components/Announcement.vue

@@ -1,23 +1,22 @@
 <script setup>
-import { lastSeenAnnouncementId, CURRENT_ANNOUNCEMENT_ID } from '@/config';
+import { state } from '../store.js';
-import { useUIStore } from '@/stores/uiStore';
+import { lastSeenAnnouncementId, CURRENT_ANNOUNCEMENT_ID } from '../config.js';
-const ui = useUIStore();
 
 function dismissAnnouncement() {
     if (lastSeenAnnouncementId.value != CURRENT_ANNOUNCEMENT_ID) {
         lastSeenAnnouncementId.value = CURRENT_ANNOUNCEMENT_ID;
     }
-    ui.hideAnnouncement();
+    state.announcementVisible = false;
 }
 </script>
 <template>
     <!-- announcement -->
-    <div v-if="ui.announcementVisible" class="flex bg-yellow-300 p-2 border-gray-300 border-b">
+    <div v-if="state.announcementVisible" class="flex bg-yellow-300 p-2 border-gray-300 border-b">
         <!-- info -->
         <div class="my-auto leading-tight">
             <div class="font-bold">Service Announcement</div>
             <div class="text-sm">
-                <span>Changes were made to mqtt.meshtastic.org. Uplink your nodes to <button @click="ui.showInfoModal()" type="button" class="link">our MQTT server</button> to continue showing on this map.</span>
+                <span>Changes were made to mqtt.meshtastic.org. Uplink your nodes to <button @click="state.infoModalVisible = true" type="button" class="link">our MQTT server</button> to continue showing on this map.</span>
             </div>
         </div>
         <!-- action buttons -->

webapp/frontend/src/components/Chart/Legend.vue

@@ -1,17 +0,0 @@
-<script setup>
-const props = defineProps({
-    legendData: { // Object with legend labels as keys and Tailwind color classes as values
-        type: Object,
-        required: true,
-    },
-});
-</script>
-<template>
-    <!-- Chart Legend -->
-    <div class="flex justify-center space-x-4 py-2">
-      <div v-for="(colorClass, label) in legendData" :key="label" class="flex items-center space-x-1">
-        <div :class="['w-2 h-2', colorClass]" class="rounded-full"></div>
-        <div class="text-sm text-gray-500">{{ label }}</div>
-      </div>
-    </div>
-</template>

webapp/frontend/src/components/Chart/Metrics.vue

@@ -1,137 +0,0 @@
-<script setup>
-import { ref, onMounted, watch, defineProps, onUnmounted, nextTick } from 'vue';
-import { Chart, TimeScale, LinearScale, LineController, Tooltip, Legend, PointElement, LineElement } from 'chart.js';
-import 'chartjs-adapter-moment';
-import ChartLegend from '@/components/Chart/Legend.vue';
-import { useConfigStore } from '@/stores/configStore';
-import { getTimeSpans } from '@/utils';
-// Props for chart data, type, and customization
-const props = defineProps({
-  title: String,
-  data: Object,
-  chartType: String,
-  timeRangeKey: String,
-  legendData: Object,
-  scales: Array,
-  chartConfig: Object,
-});
-
-const configStore = useConfigStore();
-const chartEl = ref(null);
-
-async function initChart() {
-  await nextTick();
-
-  // Check if chart element is present
-  if (!chartEl.value) {
-    console.error('initChart(): Canvas element is not available.');
-    return;
-  }
-
-  const labels = props.data?.labels || [];
-
-  // Destroy existing chart to avoid conflicts with new data
-  const existingChart = chartEl.value ? Chart.getChart(chartEl.value) : null;
-  if (existingChart) {
-    existingChart.destroy();
-  }
-
-  // determine if we actually have data
-  const hasEmptyDataset = labels.length === 0;
-
-  // Use an empty dataset for no data
-  const datasets = !hasEmptyDataset
-    ? props.data.datasets
-    : [{
-        label: 'No Data',
-        data: [],
-        borderColor: '#e5e7eb',
-        backgroundColor: '#e5e7eb',
-        borderDash: [5, 5], // Dashed border for the placeholder line
-        pointRadius: 0,
-        fill: false,
-      }];
-
-  const chartData = {
-    labels: !hasEmptyDataset ? labels : [new Date()], // Show empty chart with a placeholder date if no data
-    datasets,
-  };
-
-
-  new Chart(chartEl.value, {
-    type: props.chartType,
-    data: chartData,
-    options: {
-      responsive: true,
-      scales: props.chartConfig.scales,
-      plugins: {
-        legend: {
-          display: props.chartConfig.legendDisplay ?? false,
-          labels: {
-            generateLabels: () => Object.keys(props.legendData).map((key) => ({
-              text: key,
-              fillStyle: props.legendData[key],
-            })),
-          },
-        },
-        tooltip: props.chartConfig.tooltipOptions,
-      },
-    },
-  });
-}
-
-// Call initChart again if the props.data changes (e.g., when time range changes)
-// Watch for changes in the props.data and trigger chart initialization only when the data changes
-watch(
-  () => props.data,
-  async (newData, oldData) => {
-    if (typeof oldData === 'undefined') return; // first load
-    if (JSON.stringify(newData) !== JSON.stringify(oldData)) {
-      // Now check if chartEl is available
-      if (chartEl.value) {
-        await initChart(); // Initialize the chart after the DOM update
-      } else {
-        console.error('watch(): Canvas element is not available.');
-      }
-    }
-  },
-  { immediate: true }
-);
-onMounted(async () => {
-  Chart.register(TimeScale, LinearScale, LineController, Tooltip, Legend, PointElement, LineElement);
-  // Now check if chartEl is available
-  if (chartEl.value) {
-    await initChart(); // Initialize the chart after the DOM update
-  } else {
-    console.error('onMounted(): Canvas element is not available.');
-  }
-})
-onUnmounted(() => {
-  const existingChart = chartEl.value ? Chart.getChart(chartEl.value) : null;
-  if (existingChart) existingChart.destroy();
-});
-</script>
-
-<template>
-  <div>
-    <div class="flex bg-gray-200 p-2 font-semibold">
-      <div class="my-auto">{{ props.title }}</div>
-      <div class="ml-auto">
-        <select v-model="configStore[props.timeRangeKey]" class="block w-full rounded-md border-0 py-0.5 pl-2 pr-8 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-blue-500 sm:text-sm sm:leading-6">
-          <option v-for="(range, index) in getTimeSpans()" :key="index" :value="index">{{ range.name }}</option>
-        </select>
-      </div>
-    </div>
-    <ul role="list" class="flex-1 divide-y divide-gray-200">
-      <li>
-        <div class="px-4 py-2">
-          <div class="w-full min-h-[150px]">
-            <canvas ref="chartEl" class="h-[150px]"></canvas>
-            <ChartLegend :legendData="legendData" />
-          </div>
-        </div>
-      </li>
-      <slot />
-    </ul>
-  </div>
-</template>

webapp/frontend/src/components/Chart/PowerMetrics/ChannelData.vue

@@ -1,25 +0,0 @@
-  
-<script setup>
-  import { selectedNodeLatestPowerMetric } from '@/store.js';
-  const props = defineProps({
-    channel: Number, // Channel number (1, 2, or 3)
-  });
-</script>
-
-<template>
-    <li class="flex p-3">
-      <div class="text-sm font-medium text-gray-900">Channel {{ channel }}</div>
-      <div class="ml-auto text-sm text-gray-700">
-        <span v-if="selectedNodeLatestPowerMetric">
-          <span v-if="selectedNodeLatestPowerMetric[`ch${channel}_voltage`]" >
-            {{ Number(selectedNodeLatestPowerMetric[`ch${channel}_voltage`]).toFixed(2) }}V
-          </span>
-          <span v-else>???</span>
-          <span v-if="selectedNodeLatestPowerMetric[`ch${channel}_current`]">
-            / {{ Number(selectedNodeLatestPowerMetric[`ch${channel}_current`]).toFixed(2) }}mA
-          </span>
-        </span>
-        <span v-else>???</span>
-      </div>
-    </li>
-</template>

webapp/frontend/src/components/CloseActionButton.vue

@@ -1,27 +0,0 @@
-<script setup>
-// Emits a click event for parent to handle
-defineEmits(['click']);
-</script>
-
-<template>
-    <button
-      @click="$emit('click')"
-      class="p-2 rounded-full bg-gray-100 hover:bg-gray-200"
-      aria-label="Close"
-    >
-      <svg
-        class="w-6 h-6"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path stroke="none" d="M0 0h24v24H0z" />
-        <path d="M18 6L6 18" />
-        <path d="M6 6l12 12" />
-      </svg>
-    </button>
-</template>

webapp/frontend/src/components/HardwareModelList.vue

@@ -1,19 +1,16 @@
 <script setup>
 import axios from 'axios';
-import { buildPath } from '@/utils';
+import { state } from '../store.js';
+import { buildPath } from '../utils.js';
 import { ref, onMounted } from 'vue';
-import { useUIStore } from '@/stores/uiStore';
-const ui = useUIStore();
 const hardwareModelStats = ref([]);
-async function loadHardwareStats() {
+onMounted(() => {
-  try {
+    axios.get(buildPath('/api/v1/stats/hardware-models')).then((response) => {
-    const { data } = await axios.get(buildPath('/api/v1/stats/hardware-models'));
+        hardwareModelStats.value = response.data.hardware_model_stats;
-    hardwareModelStats.value = data.hardware_model_stats;
+    }).catch((error) => {
-  } catch (error) {
+        // do nothing
-    console.warn('Failed to fetch hardware model stats:', error);
+    });
-  }
+});
-}
-onMounted(loadHardwareStats);
 </script>
 
 <template>
@@ -27,7 +24,7 @@ onMounted(loadHardwareStats);
                 leave-active-class="transition-opacity duration-300 ease-linear"
                 leave-from-class="opacity-100"
                 leave-to-class="opacity-0">
-            <div v-show="ui.hardwareStatsVisible" @click="ui.toggleHardwareStats" class="fixed inset-0 bg-gray-900/75"></div>
+            <div v-show="state.hardwareStatsVisible" @click="state.hardwareStatsVisible = !state.hardwareStatsVisible" class="fixed inset-0 bg-gray-900/75"></div>
         </transition>
 
         <!-- sidebar -->
@@ -38,7 +35,7 @@ onMounted(loadHardwareStats);
                 leave-active-class="transition duration-300 ease-in-out transform"
                 leave-from-class="translate-x-0"
                 leave-to-class="-translate-x-full">
-            <div v-show="ui.hardwareStatsVisible" class="fixed top-0 left-0 bottom-0">
+            <div v-show="state.hardwareStatsVisible" class="fixed top-0 left-0 bottom-0">
                 <div class="w-screen h-full max-w-md overflow-hidden">
                     <div class="flex h-full flex-col bg-white shadow-xl">
 
@@ -50,7 +47,7 @@ onMounted(loadHardwareStats);
                                     <h3 class="text-sm">Ordered by most popular</h3>
                                 </div>
                                 <div class="my-auto ml-3 flex h-7 items-center">
-                                    <a href="javascript:void(0)" class="rounded-full" @click="ui.hideHardwareStats">
+                                    <a href="javascript:void(0)" class="rounded-full" @click="state.hardwareStatsVisible = false">
                                         <div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
                                             <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
@@ -65,13 +62,13 @@ onMounted(loadHardwareStats);
 
                         <!-- list of hardware models -->
                         <ul role="list" class="flex-1 divide-y divide-gray-200 overflow-y-auto">
-                            <li v-for="hardwareModel in hardwareModelStats" :key="hardwareModel.hardware_model_name">
+                            <li v-for="hardwareModel of hardwareModelStats">
                                 <div class="group relative flex items-center">
                                     <a href="#" class="block flex-1 px-4 py-2">
                                         <div class="absolute inset-0 group-hover:bg-gray-100" aria-hidden="true"></div>
                                         <div class="relative flex min-w-0 flex-1 items-center">
                                             <span class="relative inline-block flex-shrink-0 mr-4">
-                                                <img class="h-20 w-20 rounded-sm object-contain" :src="`/images/devices/${hardwareModel.hardware_model_name}.png`" alt="" @error="(e) => e.target.src = '/images/no_image.png'">
+                                                <img class="h-20 w-20 rounded-sm object-contain" :src="`/images/devices/${hardwareModel.hardware_model_name}.png`" alt="" onerror="if(this.src != '/images/no_image.png') this.src = '/images/no_image.png';">
                                             </span>
                                             <div class="truncate">
                                                 <p class="truncate text-sm font-medium text-gray-900">{{ hardwareModel.hardware_model_name }}</p>

webapp/frontend/src/components/Header.vue

@@ -1,109 +1,141 @@
 <script setup>
-import { computed } from 'vue';
-import { useUIStore } from '@/stores/uiStore';
-import { useMapStore } from '@/stores/mapStore';
-import { useSearchedNodes } from '@/composables/useSearchedNodes';
-import ActionButton from '@/components/Header/ActionButton.vue';
-import MobileCloseIcon from '@/icons/MobileCloseIcon.Vue';
-
 const emit = defineEmits(['reload', 'randomNode', 'searchClick']);
-
+import { ref } from 'vue';
-const ui = useUIStore();
+import { state, searchedNodes } from '../store.js';
-const mapData = useMapStore();
+import { getNodeColor, getNodeTextColor } from '../utils.js';
-const { searchedNodes } = useSearchedNodes();
-
-const search = computed({
-  get: () => ui.searchText,
-  set: val => ui.search(val),
-});
 </script>
 
 <template>
-  <div class="flex h-16 items-center bg-white p-2 border-b border-gray-300">
+    <div class="flex bg-white p-2 border-gray-300 border-b h-16">
 
-    <!-- Close button (mobile only) -->
+        <!-- close mobile search button -->
-    <button v-if="ui.mobileSearchVisible" @click="ui.hideMobileSearch" class="p-2 bg-gray-100 hover:bg-gray-200 rounded-full">
+        <div v-if="state.mobileSearchVisible" class="my-auto">
-      <MobileCloseIcon />
+            <a @click="state.mobileSearchVisible = false" href="javascript:void(0)" class="rounded-full">
-    </button>
+                <div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
+                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
+                    </svg>
+                </div>
+            </a>
+        </div>
 
-    <!-- Logo and title (desktop only) -->
+        <!-- icon -->
-    <div v-if="!ui.mobileSearchVisible" class="hidden sm:flex items-center mr-3 space-x-2">
+        <div v-if="!state.mobileSearchVisible" class="hidden sm:block my-auto mr-3">
             <img class="w-10 h-10 rounded" src="/images/icon.png"/>
-      <div>
+        </div>
+
+        <!-- app info -->
+        <div v-if="!state.mobileSearchVisible" class="my-auto leading-tight">
             <div class="font-bold">CT Mesh Map</div>
             <div class="text-sm">
-          Created by <a class="link" href="https://liamcottle.com" target="_blank">Liam Cottle</a>
+                Created by <a class="link" target="_blank" href="https://liamcottle.com">Liam Cottle</a>
-        </div>
             </div>
         </div>
 
-    <!-- Search Bar -->
+        <!-- search bar -->
-    <div class="flex-1 mx-3 relative" :class="{ 'hidden lg:block': !ui.mobileSearchVisible }">
+        <div class="mx-3 flex-1 relative" :class="{ 'hidden lg:block': !state.mobileSearchVisible }">
-      <input
+            <input v-model="state.searchText" type="text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" :placeholder="`Search ${state.nodes.length} nodes...`">
-        v-model="search"
+            <div v-if="state.searchText !== ''" class="absolute z-search bg-white w-full border border-gray-200 rounded-lg shadow-md mt-1 overflow-y-scroll max-h-80 divide-y divide-gray-200">
-        type="text"
-        class="w-full p-2.5 text-sm rounded-lg border border-gray-300 bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
-        :placeholder="`Search ${mapData.nodes.length} nodes...`"
-      />
 
-      <!-- Search results -->
-      <div
-        v-if="ui.searchText !== ''"
-        class="absolute z-search w-full mt-1 max-h-80 overflow-y-scroll bg-white border border-gray-200 rounded-lg shadow divide-y divide-gray-200"
-      >
                 <template v-if="searchedNodes.length > 0">
-          <div
+                    <div @click="$emit('searchClick', node)" class="flex space-x-2 p-2 hover:bg-gray-100 cursor-pointer" v-for="node of searchedNodes">
-            v-for="node in searchedNodes"
+                        <div>
-            :key="node.node_id"
+                            <div class="flex rounded-full h-12 w-12 text-white shadow" :style="{backgroundColor: getNodeColor(node.node_id)}" :class="[ `text-[${getNodeTextColor(node.node_id)}]` ]">
-            @click="$emit('searchClick', node)"
+                                <div class="mx-auto my-auto drop-shadow-sm">{{ node.short_name }}</div>
-            class="flex p-2 space-x-2 hover:bg-gray-100 cursor-pointer"
+                            </div>
-          >
-            <div class="flex items-center justify-center w-12 h-12 rounded-full text-white shadow" :style="{ backgroundColor: node.backgroundColor, color: node.textColor }">
-              <span class="drop-shadow-sm">{{ node.short_name }}</span>
                         </div>
                         <div>
-              <div :class="['text-gray-900', { 'text-red-500': !node.latitude || !node.longitude }]">
+                            <div class="text-gray-900" :class="{ 'text-red-500': node.latitude == null || node.longitude == null }">{{ node.long_name !== '' ? node.long_name : "-" }}</div>
-                {{ node.long_name || '-' }}
+                            <div class="flex space-x-1 text-sm text-gray-700">
-              </div>
+                                <div>{{ node.node_id_hex }} / {{ node.node_id }}</div>
-              <div class="text-sm text-gray-700">
-                {{ node.node_id_hex }} / {{ node.node_id }}
                             </div>
                         </div>
                     </div>
-          <div v-if="searchedNodes.length === 500" class="px-2 py-1 text-sm text-gray-500">
+                    <div v-if="searchedNodes.length === 500" class="text-gray-500 text-sm px-2 py-1">
                         Only the first 500 results are shown.
                     </div>
                 </template>
+
                 <template v-else>
-          <div class="p-2">No results found...</div>
+                    <div class="p-2">
+                        No results found...
+                    </div>
                 </template>
+
             </div>
         </div>
 
-    <!-- Action Buttons -->
+        <!-- header action buttons -->
-    <div v-if="!ui.mobileSearchVisible" class="flex items-center ml-auto space-x-1 sm:space-x-2">
+        <div v-if="!state.mobileSearchVisible" class="flex my-auto ml-auto mr-0 sm:mr-2 space-x-1 sm:space-x-2">
-      <!-- Info -->
+            <a @click="state.infoModalVisible = !state.infoModalVisible" href="javascript:void(0)" class="tooltip rounded-full">
-      <ActionButton @click="ui.toggleInfoModal" icon="info" tooltip="About" />
+                <div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
-
+                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-      <!-- Search (mobile only) -->
+                        <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
-      <ActionButton class="block lg:hidden" @click="ui.showMobileSearch" icon="search" tooltip="Search" />
+                    </svg>
-
+                </div>
-      <!-- Hardware Stats -->
+                <div class="hidden sm:block">
-      <ActionButton class="hidden sm:block" @click="ui.toggleHardwareStats" icon="device" tooltip="Devices" />
+                    <span class="tooltip-text">About</span>
-
+                </div>
-      <!-- Random Node -->
+            </a>
-      <ActionButton class="hidden lg:block" @click="$emit('randomNode')" icon="random" tooltip="Random" />
+            <a @click="state.mobileSearchVisible = true" href="javascript:void(0)" class="tooltip rounded-full block lg:hidden">
-
+                <div id="search-button" class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
-      <!-- Settings -->
+                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-      <ActionButton @click="ui.toggleSettings" icon="settings" tooltip="Settings" />
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-
+                        <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
-      <!-- Reload -->
+                        <path d="M21 21l-6 -6"></path>
-      <ActionButton
+                    </svg>
-        @click="$emit('reload')"
+                </div>
-        icon="reload"
+                <div class="hidden sm:block">
-        :loading="ui.loading"
+                    <span class="tooltip-text">Search</span>
-        tooltip="Reload"
+                </div>
-      />
+            </a>
+            <a @click="state.hardwareStatsVisible = !state.hardwareStatsVisible" href="javascript:void(0)" class="tooltip rounded-full hidden sm:block">
+                <div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
+                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
+                    </svg>
+                </div>
+                <div class="hidden sm:block">
+                    <span class="tooltip-text">Devices</span>
+                </div>
+            </a>
+            <a href="#" class="tooltip rounded-full hidden lg:block" @click="$emit('randomNode')">
+                <div id="random-button" class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
+                    <svg class="w-6 h-6"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                        <path d="M18 4l3 3l-3 3"></path>
+                        <path d="M18 20l3 -3l-3 -3"></path>
+                        <path d="M3 7h3a5 5 0 0 1 5 5a5 5 0 0 0 5 5h5"></path>
+                        <path d="M21 7h-5a4.978 4.978 0 0 0 -3 1m-4 8a4.984 4.984 0 0 1 -3 1h-3"></path>
+                    </svg>
+                </div>
+                <div class="hidden sm:block">
+                    <span class="tooltip-text">Random</span>
+                </div>
+            </a>
+            <a @click="state.settingsVisible = !state.settingsVisible" href="javascript:void(0)" class="tooltip rounded-full">
+                <div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
+                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                    </svg>
+                </div>
+                <div class="hidden sm:block">
+                    <span class="tooltip-text">Settings</span>
+                </div>
+            </a>
+            <a href="#" class="tooltip rounded-full" @click="$emit('reload')">
+                <div id="reload-button" class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full" :class="{'animate-spin': state.loading}">
+                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                        <path d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1 7.935 1.007 9.425 4.747"></path>
+                        <path d="M20 4v5h-5"></path>
+                    </svg>
+                </div>
+                <div class="hidden sm:block">
+                    <span class="tooltip-text">Reload</span>
+                </div>
+            </a>
         </div>
     </div>
 </template>

webapp/frontend/src/components/Header/ActionButton.vue

@@ -1,36 +0,0 @@
-<script setup>
-import { defineAsyncComponent } from 'vue';
-const emit = defineEmits(['click']);
-defineProps({
-  icon: String,
-  tooltip: String,
-  loading: Boolean,
-})
-
-const getIcon = (iconName) => {
-  const icons = {
-    info: defineAsyncComponent(() => import('@/icons/InfoIcon.vue')),
-    search: defineAsyncComponent(() => import('@/icons/SearchIcon.vue')),
-    device: defineAsyncComponent(() => import('@/icons/DeviceIcon.vue')),
-    random: defineAsyncComponent(() => import('@/icons/RandomIcon.vue')),
-    settings: defineAsyncComponent(() => import('@/icons/SettingsIcon.vue')),
-    reload: defineAsyncComponent(() => import('@/icons/ReloadIcon.vue')),
-  };
-  
-  return icons[iconName] || icons.info;
-}
-</script>
-
-<template>
-  <button class="tooltip rounded-full relative" @click="$emit('click')">
-    <div
-      :class="[
-        'p-2 rounded-full bg-gray-100 hover:bg-gray-200',
-        { 'animate-spin': loading }
-      ]"
-    >
-      <component :is="getIcon(icon)" class="w-6 h-6" />
-    </div>
-    <span v-if="tooltip" class="hidden sm:block tooltip-text">{{ tooltip }}</span>
-  </button>
-</template>

webapp/frontend/src/components/InfoModal.vue

@@ -1,14 +1,12 @@
 <script setup>
-import { hasSeenInfoModal } from '@/config';
+import { state } from '../store.js';
-import { useUIStore } from '@/stores/uiStore';
+import { hasSeenInfoModal } from '../config.js';
-
-const ui = useUIStore();
 
 function dismissInfoModal() {
     if (hasSeenInfoModal.value === false) {
         hasSeenInfoModal.value = true;
     }
-    ui.hideInfoModal();
+    state.infoModalVisible = false;
 }
 </script>
 <template>
@@ -23,7 +21,7 @@ function dismissInfoModal() {
                 leave-active-class="transition-opacity duration-300 ease-linear"
                 leave-from-class="opacity-100"
                 leave-to-class="opacity-0">
-            <div v-show="ui.infoModalVisible" @click="dismissInfoModal" class="fixed inset-0 bg-gray-900/75"></div>
+            <div v-show="state.infoModalVisible" @click="dismissInfoModal" class="fixed inset-0 bg-gray-900/75"></div>
         </transition>
 
         <!-- modal -->
@@ -34,7 +32,7 @@ function dismissInfoModal() {
                 leave-active-class="transition duration-300 ease-in-out transform"
                 leave-from-class="translate-y-0"
                 leave-to-class="translate-y-full">
-            <div @click="dismissInfoModal" v-show="ui.infoModalVisible" class="fixed left-0 right-0 top-0 bottom-0 lg:pointer-events-none">
+            <div @click="dismissInfoModal" v-show="state.infoModalVisible" class="fixed left-0 right-0 top-0 bottom-0 lg:pointer-events-none">
                 <div class="flex w-full h-full overflow-y-auto p-4">
                     <div @click.stop class="mx-auto my-auto w-full max-w-2xl flex-col bg-white shadow-xl rounded-xl p-2 lg:pointer-events-auto">
                         <div class="relative flex">

webapp/frontend/src/components/NodeInfo.vue

@@ -4,24 +4,20 @@ import moment from 'moment';
 import { Chart } from 'chart.js';
 import 'chartjs-adapter-moment';
 import { onMounted, useTemplateRef, ref, watch } from 'vue';
-import { state } from '@/store';
+import { state } from '../store.js';
-import DeviceMetricsChart from '@/components/NodeInfo/DeviceMetricsChart.vue';
+import { environmentMetricsTimeRange, powerMetricsTimeRange, deviceMetricsTimeRange } from '../config.js';
-import PowerMetricsChart from '@/components/NodeInfo/PowerMetricsChart.vue';
+import DeviceMetricsChart from './NodeInfo/DeviceMetricsChart.vue';
-import EnvironmentMetricsChart from '@/components/NodeInfo/EnvironmentMetricsChart.vue';
+import PowerMetricsChart from './NodeInfo/PowerMetricsChart.vue';
-import LoraConfig from '@/components/NodeInfo/LoraConfig.vue';
+import EnvironmentMetricsChart from './NodeInfo/EnvironmentMetricsChart.vue';
-import NodeDetails from '@/components/NodeInfo/NodeDetails.vue';
+import LoraConfig from './NodeInfo/LoraConfig.vue';
-import MqttHistory from '@/components/NodeInfo/MqttHistory.vue';
+import NodeDetails from './NodeInfo/NodeDetails.vue';
-import OtherInfo from '@/components/NodeInfo/OtherInfo.vue';
+import MqttHistory from './NodeInfo/MqttHistory.vue';
-import Share from '@/components/NodeInfo/Share.vue';
+import OtherInfo from './NodeInfo/OtherInfo.vue';
-import Traceroutes from '@/components/NodeInfo/Traceroutes.vue';
+import Share from './NodeInfo/Share.vue';
-import Position from '@/components/NodeInfo/Position.vue';
+import Traceroutes from './NodeInfo/Traceroutes.vue';
-import { useMapStore } from '@/stores/mapStore';
+import Position from './NodeInfo/Position.vue';
-import { copyShareLinkForNode, getTimeSpan, buildPath } from '@/utils';
+import { getNodeColor, getNodeTextColor, copyShareLinkForNode, getTimeSpan, buildPath } from '../utils.js';
-import { useConfigStore } from '@/stores/configStore';
-
-const configStore = useConfigStore();
 const emit = defineEmits(['showPositionHistory']);
-const mapData = useMapStore();
 
 function showPositionHistory(id) {
     emit('showPositionHistory', id);
@@ -32,6 +28,11 @@ function showTraceRoute(traceroute) {
     state.selectedTraceRoute = traceroute;
 }
 
+// find node marker by id
+function findNodeMarkerById(id) {
+    return state.nodeMarkers[id] ?? null;
+}
+
 function loadNode(nodeId) {
     loadNodeMqttMetrics(nodeId);
     loadNodeTraceroutes(nodeId);
@@ -63,7 +64,7 @@ function loadNodeTraceroutes(nodeId) {
 }
 
 function loadNodeDeviceMetrics(nodeId) {
-    const time = getTimeSpan(configStore.deviceMetricsTimeRange).amount
+    const time = getTimeSpan(deviceMetricsTimeRange.value).amount
     const timeFrom = new Date().getTime() - (time * 1000);
     axios.get(buildPath(`/api/v1/nodes/${nodeId}/device-metrics`), {
         params: {
@@ -78,7 +79,7 @@ function loadNodeDeviceMetrics(nodeId) {
 }
 
 function loadNodeEnvironmentMetrics(nodeId) {
-    const time = getTimeSpan(configStore.environmentMetricsTimeRange).amount
+    const time = getTimeSpan(environmentMetricsTimeRange.value).amount
     const timeFrom = new Date().getTime() - (time * 1000);
     axios.get(buildPath(`/api/v1/nodes/${nodeId}/environment-metrics`), {
         params: {
@@ -93,7 +94,7 @@ function loadNodeEnvironmentMetrics(nodeId) {
 }
 
 function loadNodePowerMetrics(nodeId) {
-    const time = getTimeSpan(configStore.powerMetricsTimeRange).amount
+    const time = getTimeSpan(powerMetricsTimeRange.value).amount
     const timeFrom = new Date().getTime() - (time * 1000);
     axios.get(buildPath(`/api/v1/nodes/${nodeId}/power-metrics`), {
         params: {
@@ -117,28 +118,25 @@ watch(
 )
 
 watch(
-    () => configStore.deviceMetricsTimeRange,
+    () => deviceMetricsTimeRange.value,
     (newValue) => {
         loadNodeDeviceMetrics(state.selectedNode.node_id)
     }
 )
 
 watch(
-    () => configStore.powerMetricsTimeRange,
+    () => powerMetricsTimeRange.value,
     (newValue) => {
         loadNodePowerMetrics(state.selectedNode.node_id)
     }
 )
 
 watch(
-  () => configStore.environmentMetricsTimeRange,
+    () => environmentMetricsTimeRange.value,
     (newValue) => {
-    if (state.selectedNode?.node_id) {
+        loadNodeEnvironmentMetrics(state.selectedNode.node_id)
-      loadNodeEnvironmentMetrics(state.selectedNode.node_id);
     }
-  }
+)
-);
-
 </script>
 <template>
     <div class="relative z-sidebar" role="dialog" aria-modal="true">
@@ -170,7 +168,7 @@ watch(
                         <div class="p-2 border-b border-gray-200 shadow-sm">
                             <div class="flex">
                                 <div class="my-auto mr-2">
-                                    <div class="flex rounded-full h-12 w-12 text-white shadow-sm" :style="{backgroundColor: state.selectedNode.backgroundColor, color: state.selectedNode.textColor}">
+                                    <div class="flex rounded-full h-12 w-12 text-white shadow-sm" :style="{backgroundColor: getNodeColor(state.selectedNode.node_id)}" :class="[ `text-[${getNodeTextColor(state.selectedNode.node_id)}]` ]">
                                         <div class="mx-auto my-auto drop-shadow-sm">{{ state.selectedNode.short_name }}</div>
                                     </div>
                                 </div>
@@ -202,7 +200,7 @@ watch(
                         <div class="overflow-y-auto">
 
                             <!-- no position banner -->
-                            <div v-if="mapData.findNodeMarkerById(state.selectedNode.node_id) == null" class="flex bg-orange-500 text-white p-2">
+                            <div v-if="findNodeMarkerById(state.selectedNode.node_id) == null" class="flex bg-orange-500 text-white p-2">
                                 <div class="my-auto mr-2">
                                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
                                         <path fill-rule="evenodd" d="m11.54 22.351.07.04.028.016a.76.76 0 0 0 .723 0l.028-.015.071-.041a16.975 16.975 0 0 0 1.144-.742 19.58 19.58 0 0 0 2.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 0 0-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 0 0 2.682 2.282 16.975 16.975 0 0 0 1.145.742ZM12 13.5a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd" />

webapp/frontend/src/components/NodeInfo/DeviceMetricsChart.vue

@@ -1,57 +1,71 @@
 <script setup>
 const props = defineProps(['node']);
+import axios from 'axios';
+import moment from 'moment';
+import { Chart, TimeScale, LinearScale, LineController, Tooltip, Legend, PointElement, LineElement } from 'chart.js';
+import 'chartjs-adapter-moment';
+import { onMounted, useTemplateRef, watch } from 'vue';
+import { state } from '../../store.js';
+import { deviceMetricsTimeRange } from '../../config.js';
+import { formatUptimeSeconds, getTimeSpans } from '../../utils.js';
+import { useStorage } from '@vueuse/core';
+const deviceMetricsChartEl = useTemplateRef('device-metrics-chart');
 
-import { computed } from 'vue';
+function initChart() {
-import { state } from '@/store.js';
+    // destroy existing chart
-import MetricsChart from '@/components/Chart/Metrics.vue';
+    const existingChart = Chart.getChart(deviceMetricsChartEl.value);
-
+    if (existingChart != null) {
-const chartData = computed(() => {
+        existingChart.destroy();
-  const metrics = state.selectedNodeDeviceMetrics;
+    }
-
+    // create chart data
-  return {
+    const labels = [];
-    labels: metrics.map(m => m.created_at),
+    const batteryMetrics = [];
+    const channelUtilizationMetrics = [];
+    const airUtilTxMetrics = [];
+    for(const deviceMetric of state.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 Chart(deviceMetricsChartEl.value, {
+        type: 'line',
+        data: {
+            labels: labels,
             datasets: [
                 {
                     label: 'Battery Level',
-        data: metrics.map(m => m.battery_level),
                     borderColor: '#3b82f6',
                     backgroundColor: '#3b82f6',
-        pointStyle: false,
+                    pointStyle: false, // no points
                     fill: false,
+                    data: batteryMetrics,
                 },
                 {
                     label: 'Channel Util',
-        data: metrics.map(m => m.channel_utilization),
                     borderColor: '#22c55e',
                     backgroundColor: '#22c55e',
-        showLine: false,
+                    showLine: false, // no lines between points
                     fill: false,
+                    data: channelUtilizationMetrics,
                 },
                 {
                     label: 'Air Util TX',
-        data: metrics.map(m => m.air_util_tx),
                     borderColor: '#f97316',
                     backgroundColor: '#f97316',
-        showLine: false,
+                    showLine: false, // no lines between points
                     fill: false,
+                    data: airUtilTxMetrics,
                 },
             ],
-  };
+        },
-});
+        options: {
-
+            responsive: true,
-const legendData = {
+            borderWidth: 2,
-  'Battery Level': 'bg-blue-500',
+            elements: {
-  'Channel Util': 'bg-green-500',
+                point: {
-  'Air Util TX': 'bg-orange-500',
+                    radius: 2,
-};
-
-const chartConfig = {
-  legendDisplay: false, // or true if you want Chart.js legend too
-  tooltipOptions: {
-    mode: 'index',
-    intersect: false,
-    callbacks: {
-      label: (item) => `${item.dataset.label}: ${item.formattedValue}%`,
                 },
             },
             scales: {
@@ -61,32 +75,87 @@ const chartConfig = {
                     time: {
                         unit: 'day',
                         displayFormats: {
-          day: 'MMM DD',
+                            day: 'MMM DD', // Jan 01
                         },
                     },
                 },
                 y: {
                     min: 0,
-      max: 101,
+                    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}%`;
+                        },
+                    },
+                },
+            },
+        },
+    });
+}
+watch(
+  () => state.selectedNodeDeviceMetrics,
+  (newValue) => {
+    if (newValue !== []) {
+        initChart()
+    }
+  }, {deep: true}
+)
+onMounted(() => {
+    Chart.register(TimeScale, LinearScale, LineController, Tooltip, Legend, PointElement, LineElement)
+})
 </script>
 
 <template>
-    <MetricsChart
+    <!-- device metrics -->
-        title="Device Metrics"
+    <div>
-        :data="chartData"
+        <div class="flex bg-gray-200 p-2 font-semibold">
-        chartType="line"
+            <div class="my-auto">Device Metrics</div>
-        timeRangeKey="deviceMetricsTimeRange"
+            <div class="my-auto ml-auto">
-        :legendData="legendData"
+                <select v-model="deviceMetricsTimeRange" class="block w-full rounded-md border-0 py-0.5 pl-2 pr-8 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-blue-500 sm:text-sm sm:leading-6">
-        :chartConfig="chartConfig"
+                    <option v-for="(range, index) in getTimeSpans()" :value="index">{{ range.name }}</option>
-    >
+                </select>
-        <!-- Battery Level -->
+            </div>
+        </div>
+        <ul role="list" class="flex-1 divide-y divide-gray-200">
+
+            <!-- device metrics chart -->
+            <li>
+                <div class="px-4 py-2">
+                    <div class="w-full">
+                        <canvas id="deviceMetricsChart" style="height:150px;" ref="device-metrics-chart"></canvas>
+                        <div class="flex">
+                            <div class="mx-auto flex space-x-2">
+                                <div class="flex mx-auto">
+                                    <div class="my-auto w-2 h-2 bg-blue-500 rounded-full"></div>
+                                    <div class="my-auto ml-1 text-sm text-gray-500">Battery Level</div>
+                                </div>
+                                <div class="flex mx-auto">
+                                    <div class="my-auto w-2 h-2 bg-green-500 rounded-full"></div>
+                                    <div class="my-auto ml-1 text-sm text-gray-500">Channel Utilization</div>
+                                </div>
+                                <div class="flex mx-auto">
+                                    <div class="my-auto w-2 h-2 bg-orange-500 rounded-full"></div>
+                                    <div class="my-auto ml-1 text-sm text-gray-500">Air Util TX</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </li>
+
+            <!-- battery level -->
             <li class="flex p-3">
                 <div class="text-sm font-medium text-gray-900">Battery Level</div>
                 <div class="ml-auto text-sm text-gray-700">
@@ -98,7 +167,7 @@ const chartConfig = {
                 </div>
             </li>
 
-        <!-- Voltage -->
+            <!-- voltage -->
             <li class="flex p-3">
                 <div class="text-sm font-medium text-gray-900">Voltage</div>
                 <div class="ml-auto text-sm text-gray-700">
@@ -107,7 +176,7 @@ const chartConfig = {
                 </div>
             </li>
 
-        <!-- Channel Utilization -->
+            <!-- channel utilization -->
             <li class="flex p-3">
                 <div class="text-sm font-medium text-gray-900">Channel Utilization</div>
                 <div class="ml-auto text-sm text-gray-700">
@@ -116,7 +185,7 @@ const chartConfig = {
                 </div>
             </li>
 
-        <!-- Air Util TX -->
+            <!-- air util tx -->
             <li class="flex p-3">
                 <div class="text-sm font-medium text-gray-900">Air Util Tx</div>
                 <div class="ml-auto text-sm text-gray-700">
@@ -125,7 +194,7 @@ const chartConfig = {
                 </div>
             </li>
 
-        <!-- Uptime -->
+            <!-- air util tx -->
             <li class="flex p-3">
                 <div class="text-sm font-medium text-gray-900">Uptime</div>
                 <div class="ml-auto text-sm text-gray-700">
@@ -133,5 +202,6 @@ const chartConfig = {
                     <span v-else>???</span>
                 </div>
             </li>
-    </MetricsChart>
+        </ul>
+    </div>
 </template>

webapp/frontend/src/components/NodeInfo/EnvironmentMetricsChart.vue

@@ -1,31 +1,46 @@
 <script setup>
 const props = defineProps(['node']);
+import axios from 'axios';
+import moment from 'moment';
+import { Chart, TimeScale, LinearScale, LineController, Tooltip, Legend, PointElement, LineElement } from 'chart.js';
+import 'chartjs-adapter-moment';
+import { onMounted, useTemplateRef, watch } from 'vue';
+import { state } from '../../store.js';
+import { environmentMetricsTimeRange } from '../../config.js';
+import { formatTemperature, getTimeSpans } from '../../utils.js';
+const environmentMetricsChartEl = useTemplateRef('environment-metrics-chart');
 
-import { ref, computed, onMounted, watch } from 'vue';
+function initChart() {
-import { useConfigStore } from '@/stores/configStore';
+    // destroy existing chart
-import { state } from '@/store.js';
+    const existingChart = Chart.getChart(environmentMetricsChartEl.value);
-import { formatTemperature } from '@/utils.js';
+    if (existingChart != null) {
-import MetricsChart from '@/components/Chart/Metrics.vue';
+        existingChart.destroy();
-
+    }
-const configStore = useConfigStore();
+    // create chart data
-
+    const labels = [];
-// Chart data prep
+    const temperatureMetrics = [];
-const labels = computed(() => state.selectedNodeEnvironmentMetrics.map(m => m.created_at));
+    const relativeHumidityMetrics = [];
-const temperatureMetrics = computed(() => state.selectedNodeEnvironmentMetrics.map(m => m.temperature));
+    const barometricPressureMetrics = [];
-const relativeHumidityMetrics = computed(() => state.selectedNodeEnvironmentMetrics.map(m => m.relative_humidity));
+    for(const deviceMetric of state.selectedNodeEnvironmentMetrics){
-const barometricPressureMetrics = computed(() => state.selectedNodeEnvironmentMetrics.map(m => m.barometric_pressure));
+        labels.push(moment(deviceMetric.created_at));
-
+        temperatureMetrics.push(deviceMetric.temperature);
-const chartData = computed(() => ({
+        relativeHumidityMetrics.push(deviceMetric.relative_humidity);
-  labels: labels.value,
+        barometricPressureMetrics.push(deviceMetric.barometric_pressure);
+    }
+    // create chart
+    new Chart(environmentMetricsChartEl.value, {
+        type: 'line',
+        data: {
+            labels: labels,
             datasets: [
                 {
                     label: 'Temperature',
                     suffix: 'ºC',
                     borderColor: '#3b82f6',
                     backgroundColor: '#3b82f6',
-      pointStyle: false,
+                    pointStyle: false, // no points
                     fill: false,
-      data: temperatureMetrics.value,
+                    data: temperatureMetrics,
                     yAxisID: 'y',
                 },
                 {
@@ -33,9 +48,9 @@ const chartData = computed(() => ({
                     suffix: '%',
                     borderColor: '#22c55e',
                     backgroundColor: '#22c55e',
-      pointStyle: false,
+                    pointStyle: false, // no points
                     fill: false,
-      data: relativeHumidityMetrics.value,
+                    data: relativeHumidityMetrics,
                     yAxisID: 'y',
                 },
                 {
@@ -43,16 +58,22 @@ const chartData = computed(() => ({
                     suffix: 'hPa',
                     borderColor: '#f97316',
                     backgroundColor: '#f97316',
-      pointStyle: false,
+                    pointStyle: false, // no points
                     fill: false,
-      data: barometricPressureMetrics.value,
+                    data: barometricPressureMetrics,
                     yAxisID: 'y1',
                 },
             ],
-}));
+        },
-
+        options: {
-const chartConfig = {
+            responsive: true,
-  legendDisplay: false,
+            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',
@@ -60,7 +81,7 @@ const chartConfig = {
                     time: {
                         unit: 'day',
                         displayFormats: {
-          day: 'MMM DD',
+                            day: 'MMM DD', // Jan 01
                         },
                     },
                 },
@@ -77,12 +98,16 @@ const chartConfig = {
                     },
                     position: 'right',
                     grid: {
-        drawOnChartArea: false,
+                        drawOnChartArea: false, // only want the grid lines for one axis to show up
                     },
                 },
             },
-  tooltipOptions: {
+            plugins: {
-    mode: 'index',
+                legend: {
+                    display: false,
+                },
+                tooltip: {
+                    mode: "index",
                     intersect: false,
                     callbacks: {
                         label: (item) => {
@@ -90,51 +115,88 @@ const chartConfig = {
                         },
                     },
                 },
-};
+            },
+        }
+    });
+}
 
-const legendData = {
+watch(
-  Temperature: 'bg-blue-500',
+  () => state.selectedNodeEnvironmentMetrics,
-  Humidity: 'bg-green-500',
+  (newValue) => {
-  Pressure: 'bg-orange-500',
+    if (newValue !== []) {
-};
+        initChart()
+    }
+  }, {deep: true}
+)
+
+onMounted(() => {
+    Chart.register(TimeScale, LinearScale, LineController, Tooltip, Legend, PointElement, LineElement)
+})
 </script>
 
 <template>
-    <MetricsChart
+    <div>
-      title="Environment Metrics"
+        <div class="flex bg-gray-200 p-2 font-semibold">
-      :data="chartData"
+            <div class="my-auto">Environment Metrics</div>
-      chartType="line"
+            <div class="my-auto ml-auto">
-      timeRangeKey="environmentMetricsTimeRange"
+                <select v-model="environmentMetricsTimeRange" class="block w-full rounded-md border-0 py-0.5 pl-2 pr-8 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-blue-500 sm:text-sm sm:leading-6">
-      :legendData="legendData"
+                    <option v-for="(range, index) in getTimeSpans()" :value="index">{{ range.name }}</option>
-      :chartConfig="chartConfig"
+                </select>
-    >
+            </div>
-      <!-- Chart Details (below the chart) -->
+        </div>
+        <ul role="list" class="flex-1 divide-y divide-gray-200">
+
+            <!-- environment metrics chart -->
+            <li>
+                <div class="px-4 py-2">
+                    <div class="w-full">
+                        <canvas id="environmentMetricsChart" style="height:150px;" ref="environment-metrics-chart"></canvas>
+                        <div class="flex">
+                            <div class="mx-auto flex space-x-2">
+                                <div class="flex mx-auto">
+                                    <div class="my-auto w-2 h-2 bg-blue-500 rounded-full"></div>
+                                    <div class="my-auto ml-1 text-sm text-gray-500">Temperature</div>
+                                </div>
+                                <div class="flex mx-auto">
+                                    <div class="my-auto w-2 h-2 bg-green-500 rounded-full"></div>
+                                    <div class="my-auto ml-1 text-sm text-gray-500">Humidity</div>
+                                </div>
+                                <div class="flex mx-auto">
+                                    <div class="my-auto w-2 h-2 bg-orange-500 rounded-full"></div>
+                                    <div class="my-auto ml-1 text-sm text-gray-500">Pressure</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </li>
+
+            <!-- temperature -->
             <li class="flex p-3">
                 <div class="text-sm font-medium text-gray-900">Temperature</div>
                 <div class="ml-auto text-sm text-gray-700">
-          <span v-if="state.selectedNode?.temperature">{{ formatTemperature(state.selectedNode.temperature) }}</span>
+                    <span v-if="props.node.temperature">{{ formatTemperature(props.node.temperature) }}</span>
                     <span v-else>???</span>
                 </div>
             </li>
 
+            <!-- relative humidity -->
             <li class="flex p-3">
                 <div class="text-sm font-medium text-gray-900">Relative Humidity</div>
                 <div class="ml-auto text-sm text-gray-700">
-          <span v-if="state.selectedNode?.relative_humidity">
+                    <span v-if="props.node.relative_humidity">{{ Number(props.node.relative_humidity).toFixed(0) }}%</span>
-            {{ Number(state.selectedNode.relative_humidity).toFixed(0) }}%
-          </span>
                     <span v-else>???</span>
                 </div>
             </li>
 
+            <!-- barometric pressure -->
             <li class="flex p-3">
                 <div class="text-sm font-medium text-gray-900">Barometric Pressure</div>
                 <div class="ml-auto text-sm text-gray-700">
-          <span v-if="state.selectedNode?.barometric_pressure">
+                    <span v-if="props.node.barometric_pressure">{{ Number(props.node.barometric_pressure).toFixed(1) }}hPa</span>
-            {{ Number(state.selectedNode.barometric_pressure).toFixed(1) }} hPa
-          </span>
                     <span v-else>???</span>
                 </div>
             </li>
-    </MetricsChart>
+        </ul>
+    </div>
 </template>

webapp/frontend/src/components/NodeInfo/LoraConfig.vue

@@ -1,38 +1,38 @@
 <script setup>
-import { getRegionFrequencyRange } from '@/utils.js';
+import { getRegionFrequencyRange } from '../../utils.js';
-const props = defineProps({
+const props = defineProps(['node']);
-  node: Object,
-});
-
-// Define a structure for the LoRa config fields
-const loraConfigFields = [
-  {
-    label: 'Region',
-    key: 'region_name',
-    value: (node) => node.region_name ? `${node.region_name} (${getRegionFrequencyRange(node.region_name)})` : '???',
-  },
-  {
-    label: 'Modem Preset',
-    key: 'modem_preset_name',
-    value: (node) => node.modem_preset_name || '???',
-  },
-  {
-    label: 'Has Default Channel',
-    key: 'has_default_channel',
-    value: (node) => node.has_default_channel != null ? (node.has_default_channel ? 'Yes' : 'No') : '???',
-  },
-];
 </script>
 
 <template>
+    <!-- lora config -->
     <div>
         <div class="bg-gray-200 p-2 font-semibold">LoRa Config</div>
         <ul role="list" class="flex-1 divide-y divide-gray-200">
-      <!-- Iterate through loraConfigFields to display each item -->
+
-      <li v-for="(field, index) in loraConfigFields" :key="index" class="flex p-3">
+            <!-- region -->
-        <div class="text-sm font-medium text-gray-900">{{ field.label }}</div>
+            <li class="flex p-3">
+                <div class="text-sm font-medium text-gray-900">Region</div>
                 <div class="ml-auto text-sm text-gray-700">
-          {{ field.value(props.node) }}
+                    <span v-if="props.node.region_name">{{ props.node.region_name }} ({{ getRegionFrequencyRange(props.node.region_name) }})</span>
+                    <span v-else>???</span>
+                </div>
+            </li>
+
+            <!-- modem preset -->
+            <li class="flex p-3">
+                <div class="text-sm font-medium text-gray-900">Modem Preset</div>
+                <div class="ml-auto text-sm text-gray-700">
+                    <span v-if="props.node.modem_preset_name">{{ props.node.modem_preset_name }}</span>
+                    <span v-else>???</span>
+                </div>
+            </li>
+
+            <!-- has default channel -->
+            <li class="flex p-3">
+                <div class="text-sm font-medium text-gray-900">Has Default Channel</div>
+                <div class="ml-auto text-sm text-gray-700">
+                    <span v-if="props.node.has_default_channel != null">{{ props.node.has_default_channel ? "Yes" : "No" }}</span>
+                    <span v-else>???</span>
                 </div>
             </li>
         </ul>

webapp/frontend/src/components/NodeInfo/MqttHistory.vue

@@ -1,9 +1,6 @@
 <script setup>
-import { state } from '@/store.js';
+import { state } from '../../store.js';
 import moment from 'moment';
-import { computed } from 'vue';
-
-const mqttMetrics = computed(() => state.selectedNodeMqttMetrics);
 </script>
 <template>
     <div>
@@ -11,27 +8,34 @@ const mqttMetrics = computed(() => state.selectedNodeMqttMetrics);
             <div class="font-semibold">MQTT</div>
             <div class="text-sm text-gray-600">Topics this node sent packets to</div>
         </div>
-
-        <!-- List of MQTT Topics or No Data -->
         <ul role="list" class="flex-1 divide-y divide-gray-200">
-            <li v-if="mqttMetrics.length === 0">
+            <template v-if="state.selectedNodeMqttMetrics.length > 0">
-                <div class="block flex-1 px-4 py-2">
+                <li v-for="mqttMetric of state.selectedNodeMqttMetrics">
-                    <div class="text-sm text-gray-700">No packets seen on MQTT</div>
-                </div>
-            </li>
-
-            <li v-else v-for="(mqttMetric, index) in mqttMetrics" :key="`${mqttMetric.mqtt_topic}-${index}`">
                     <div class="relative flex items-center">
                         <div class="block flex-1 px-4 py-2">
+                            <div class="relative flex min-w-0 flex-1 items-center">
                                 <div class="truncate">
                                     <p class="truncate text-sm font-medium text-gray-900">{{ mqttMetric.mqtt_topic }}</p>
-                            <div class="text-sm text-gray-700">
+                                    <div class="text-sm text-gray-700">Last packet {{ moment(new Date(mqttMetric.last_packet_at)).fromNow() }}</div>
-                                Last packet {{ moment(new Date(mqttMetric.last_packet_at)).fromNow() }}
                                 </div>
                             </div>
                         </div>
                     </div>
                 </li>
+            </template>
+            <template v-else>
+                <li>
+                    <div class="relative flex items-center">
+                        <div class="block flex-1 px-4 py-2">
+                            <div class="relative flex min-w-0 flex-1 items-center">
+                                <div class="truncate">
+                                    <div class="text-sm text-gray-700">No packets seen on MQTT</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </li>
+            </template>
         </ul>
     </div>
 </template>

webapp/frontend/src/components/NodeInfo/NodeDetails.vue

@@ -1,32 +1,45 @@
-<script setup>
-const props = defineProps({
-  node: Object,
-});
-const details = [
-  { label: 'ID', value: 'node_id' },
-  { label: 'Hex ID', value: 'node_id_hex' },
-  { label: 'Role', value: 'role_name' },
-  { label: 'Hardware', value: 'hardware_model_name' },
-  { label: 'Firmware', value: 'firmware_version' },
-];
-</script>
 
+<script setup>
+const props = defineProps(['node']);
+</script>
 <template>
     <div>
         <div class="bg-gray-200 p-2 font-semibold">Details</div>
         <ul role="list" class="flex-1 divide-y divide-gray-200">
-      <!-- Iterate through the details array to display each item -->
+
-      <li v-for="(detail, index) in details" :key="index" class="flex p-3">
+            <!-- id -->
-        <div class="text-sm font-medium text-gray-900">{{ detail.label }}</div>
+            <li class="flex p-3">
+                <div class="text-sm font-medium text-gray-900">ID</div>
+                <div class="ml-auto text-sm text-gray-700">{{ props.node.node_id }}</div>
+            </li>
+
+            <!-- hex id -->
+            <li class="flex p-3">
+                <div class="text-sm font-medium text-gray-900">Hex ID</div>
+                <div class="ml-auto text-sm text-gray-700">{{ props.node.node_id_hex }}</div>
+            </li>
+
+            <!-- role -->
+            <li class="flex p-3">
+                <div class="text-sm font-medium text-gray-900">Role</div>
+                <div class="ml-auto text-sm text-gray-700">{{ props.node.role_name }}</div>
+            </li>
+
+            <!-- hardware -->
+            <li class="flex p-3">
+                <div class="text-sm font-medium text-gray-900">Hardware</div>
+                <div class="ml-auto text-sm text-gray-700">{{ props.node.hardware_model_name }}</div>
+            </li>
+
+            <!-- firmware version -->
+            <li class="flex p-3">
+                <div class="text-sm font-medium text-gray-900">Firmware</div>
                 <div class="ml-auto text-sm text-gray-700">
-          <!-- Check for firmware version as special case -->
+                    <span v-if="props.node.firmware_version">{{ props.node.firmware_version }}</span>
-          <span v-if="detail.value === 'firmware_version'">
+                    <span v-else>???</span>
-            {{ props.node[detail.value] || '???' }}
-          </span>
-          <!-- For other fields, use the node property directly -->
-          <span v-else>{{ props.node[detail.value] }}</span>
                 </div>
             </li>
+
         </ul>
     </div>
 </template>

webapp/frontend/src/components/NodeInfo/OtherInfo.vue

@@ -1,43 +1,38 @@
 <script setup>
+const props = defineProps(['node']);
 import moment from 'moment';
-const props = defineProps({
-  node: Object,
-});
-
-// Define structure for 'Other' fields
-const otherFields = [
-  {
-    label: 'First Seen',
-    key: 'created_at',
-    value: (node) => moment(new Date(node.created_at)).fromNow(),
-  },
-  {
-    label: 'Last Seen',
-    key: 'updated_at',
-    value: (node) => moment(new Date(node.updated_at)).fromNow(),
-  },
-  {
-    label: 'Neighbours Updated',
-    key: 'neighbours_updated_at',
-    value: (node) => node.neighbours_updated_at ? moment(new Date(node.neighbours_updated_at)).fromNow() : '???',
-  },
-  {
-    label: 'Position Updated',
-    key: 'position_updated_at',
-    value: (node) => node.position_updated_at ? moment(new Date(node.position_updated_at)).fromNow() : '???',
-  },
-];
 </script>
-
 <template>
     <div>
         <div class="bg-gray-200 p-2 font-semibold">Other</div>
         <ul role="list" class="flex-1 divide-y divide-gray-200">
-      <!-- Iterate through otherFields to display each item -->
+            <!-- first seen -->
-      <li v-for="(field, index) in otherFields" :key="index" class="flex p-3">
+            <li class="flex p-3">
-        <div class="text-sm font-medium text-gray-900">{{ field.label }}</div>
+                <div class="text-sm font-medium text-gray-900">First Seen</div>
+                <div class="ml-auto text-sm text-gray-700">{{ moment(new Date(props.node.created_at)).fromNow() }}</div>
+            </li>
+
+            <!-- last seen -->
+            <li class="flex p-3">
+                <div class="text-sm font-medium text-gray-900">Last Seen</div>
+                <div class="ml-auto text-sm text-gray-700">{{ moment(new Date(props.node.updated_at)).fromNow() }}</div>
+            </li>
+
+            <!-- neighbours updated -->
+            <li class="flex p-3">
+                <div class="text-sm font-medium text-gray-900">Neighbours Updated</div>
                 <div class="ml-auto text-sm text-gray-700">
-          {{ field.value(props.node) }}
+                    <span v-if="props.node.neighbours_updated_at">{{ moment(new Date(props.node.neighbours_updated_at)).fromNow() }}</span>
+                    <span v-else>???</span>
+                </div>
+            </li>
+
+            <!-- position updated -->
+            <li class="flex p-3">
+                <div class="text-sm font-medium text-gray-900">Position Updated</div>
+                <div class="ml-auto text-sm text-gray-700">
+                    <span v-if="props.node.position_updated_at">{{ moment(new Date(props.node.position_updated_at)).fromNow() }}</span>
+                    <span v-else>???</span>
                 </div>
             </li>
         </ul>

webapp/frontend/src/components/NodeInfo/Position.vue

@@ -1,42 +1,33 @@
 <script setup>
-const props = defineProps({
+const props = defineProps(['node']);
-  node: Object,
-});
 const emit = defineEmits(['showPositionHistory']);
-
-const positionFields = [
-  {
-    label: 'Lat/Long',
-    key: ['latitude', 'longitude'],
-    value: (node) => node.latitude && node.longitude ? `${node.latitude}, ${node.longitude}` : '???',
-  },
-  {
-    label: 'Altitude',
-    key: 'altitude',
-    value: (node) => node.altitude ? `${node.altitude}m` : '???',
-  },
-];
 </script>
-
 <template>
     <div>
         <div @click.stop class="flex bg-gray-200 p-2 font-semibold">
             <div class="my-auto">Position</div>
             <div class="ml-auto">
-        <button
+                <button @click="$emit('showPositionHistory', props.node.node_id)" type="button" class="rounded-sm bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
-          @click="$emit('showPositionHistory', props.node.node_id)"
-          type="button"
-          class="rounded-sm bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
-        >
                     Show History
                 </button>
             </div>
         </div>
-
         <ul role="list" class="flex-1 divide-y divide-gray-200">
-      <li v-for="(field, index) in positionFields" :key="index" class="flex p-3">
+            <!-- position -->
-        <div class="text-sm font-medium text-gray-900">{{ field.label }}</div>
+            <li class="flex p-3">
-        <div class="ml-auto text-sm text-gray-700">{{ field.value(props.node) }}</div>
+                <div class="text-sm font-medium text-gray-900">Lat/Long</div>
+                <div class="ml-auto text-sm text-gray-700">
+                    <span v-if="props.node.latitude && props.node.longitude">{{ props.node.latitude }}, {{ props.node.longitude }}</span>
+                    <span v-else>???</span>
+                </div>
+            </li>
+            <!-- altitude -->
+            <li class="flex p-3">
+                <div class="text-sm font-medium text-gray-900">Altitude</div>
+                <div class="ml-auto text-sm text-gray-700">
+                    <span v-if="props.node.altitude">{{ props.node.altitude }}m</span>
+                    <span v-else>???</span>
+                </div>
             </li>
         </ul>
     </div>

webapp/frontend/src/components/NodeInfo/PowerMetricsChart.vue

@@ -1,70 +1,112 @@
 <script setup>
-import { computed } from 'vue';
+import axios from 'axios';
-import { state, selectedNodeLatestPowerMetric } from '@/store.js';
+import moment from 'moment';
-import MetricsChart from '@/components/Chart/Metrics.vue';
+import { Chart, TimeScale, LinearScale, LineController, Tooltip, Legend, PointElement, LineElement } from 'chart.js';
-import ChannelData from '@/components/Chart/PowerMetrics/ChannelData.vue';
+import 'chartjs-adapter-moment';
+import { onMounted, useTemplateRef, watch } from 'vue';
+import { state, selectedNodeLatestPowerMetric } from '../../store.js';
+import { powerMetricsTimeRange } from '../../config.js';
+import { getTimeSpans } from '../../utils.js';
+const powerMetricsChartEl = useTemplateRef('power-metrics-chart');
 
-const legendData = {
+function initChart() {
-    'Channel 1': 'bg-blue-500',
+    // destroy existing chart
-    'Channel 2': 'bg-green-500',
+    const existingChart = Chart.getChart(powerMetricsChartEl.value);
-    'Channel 3': 'bg-orange-500',
+    if (existingChart != null) {
-};
+        existingChart.destroy();
-
-// Computed dataset for the chart container
-const chartData = computed(() => {
-  const metrics = state.selectedNodePowerMetrics;
-  const labels = metrics.map(m => m.created_at);
-
-  const colors = ['#3b82f6', '#22c55e', '#f97316'];
-  const currentColors = ['#93c5fd', '#86efac', '#fdba74'];
-
-  const voltage = [[], [], []];
-  const current = [[], [], []];
-
-  for (const m of metrics) {
-    voltage[0].push(m.ch1_voltage);
-    voltage[1].push(m.ch2_voltage);
-    voltage[2].push(m.ch3_voltage);
-    current[0].push(m.ch1_current);
-    current[1].push(m.ch2_current);
-    current[2].push(m.ch3_current);
     }
-
+    // create chart data
-  return {
+    const labels = [];
-    labels,
+    const channel1VoltageReadings = [];
+    const channel2VoltageReadings = [];
+    const channel3VoltageReadings = [];
+    const channel1CurrentReadings = [];
+    const channel2CurrentReadings = [];
+    const channel3CurrentReadings = [];
+    for(const powerMetric of state.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 Chart(powerMetricsChartEl.value, {
+        type: 'line',
+        data: {
+            labels: labels,
             datasets: [
-      ...voltage.map((data, i) => ({
+                {
-        label: `Ch${i + 1} Voltage`,
+                    label: 'Ch1 Voltage',
-        suffix: 'V',
+                    suffix: "V",
-        data,
+                    borderColor: '#3b82f6',
-        borderColor: colors[i],
+                    backgroundColor: '#3b82f6',
-        backgroundColor: colors[i],
+                    pointStyle: false, // no points
-        pointStyle: false,
                     fill: false,
+                    data: channel1VoltageReadings,
                     yAxisID: 'y',
-      })),
+                },
-      ...current.map((data, i) => ({
+                {
-        label: `Ch${i + 1} Current`,
+                    label: 'Ch2 Voltage',
-        suffix: 'mA',
+                    suffix: "V",
-        data,
+                    borderColor: '#22c55e',
-        borderColor: currentColors[i],
+                    backgroundColor: '#22c55e',
-        backgroundColor: currentColors[i],
+                    pointStyle: false, // no points
-        pointStyle: false,
                     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',
-// Chart config for axes, tooltips, etc.
+                    backgroundColor: '#86efac',
-const chartConfig = {
+                    pointStyle: false, // no points
-  legendDisplay: false,
+                    fill: false,
-  tooltipOptions: {
+                    data: channel2CurrentReadings,
-    mode: 'index',
+                    yAxisID: 'y1',
-    intersect: false,
+                },
-    callbacks: {
+                {
-      label: (item) => `${item.dataset.label}: ${item.formattedValue}${item.dataset.suffix || ''}`,
+                    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: {
@@ -74,7 +116,7 @@ const chartConfig = {
                     time: {
                         unit: 'day',
                         displayFormats: {
-          day: 'MMM DD',
+                            day: 'MMM DD', // Jan 01
                         },
                     },
                 },
@@ -88,27 +130,122 @@ const chartConfig = {
                 y1: {
                     min: -500,
                     max: 500,
-      position: 'right',
-      grid: {
-        drawOnChartArea: false,
-      },
                     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}`;
+                        },
+                    },
+                },
+            },
+        }
+    });
+}
+watch(
+  () => state.selectedNodePowerMetrics,
+  (newValue) => {
+    if (newValue !== []) {
+        initChart()
+    }
+  }, {deep: true}
+)
+onMounted(() => {
+    Chart.register(TimeScale, LinearScale, LineController, Tooltip, Legend, PointElement, LineElement)
+})
 </script>
 <template>
-    <MetricsChart
+    <!-- power metrics -->
-        title="Power Metrics"
+    <div>
-        :data="chartData"
+        <div class="flex bg-gray-200 p-2 font-semibold">
-        chartType="line"
+            <div class="my-auto">Power Metrics</div>
-        timeRangeKey="powerMetricsTimeRange"
+            <div class="my-auto ml-auto">
-        :legendData="legendData"
+                <select v-model="powerMetricsTimeRange" class="block w-full rounded-md border-0 py-0.5 pl-2 pr-8 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-blue-500 sm:text-sm sm:leading-6">
-        :chartConfig="chartConfig"
+                    <option v-for="(range, index) in getTimeSpans()" :value="index">{{ range.name }}</option>
-    >
+                </select>
-        <ChannelData v-for="i in [1, 2, 3]" :key="i" :channel="i" />
+            </div>
-    </MetricsChart>
+        </div>
+        <ul role="list" class="flex-1 divide-y divide-gray-200">
+
+            <!-- power metrics chart -->
+            <li>
+                <div class="px-4 py-2">
+                    <div class="w-full">
+                        <canvas id="powerMetricsChart" style="height:150px;" ref="power-metrics-chart"></canvas>
+                        <div class="flex">
+                            <div class="mx-auto flex space-x-2">
+                                <div class="flex mx-auto">
+                                    <div class="my-auto w-2 h-2 bg-blue-500 rounded-full"></div>
+                                    <div class="my-auto ml-1 text-sm text-gray-500">Channel 1</div>
+                                </div>
+                                <div class="flex mx-auto">
+                                    <div class="my-auto w-2 h-2 bg-green-500 rounded-full"></div>
+                                    <div class="my-auto ml-1 text-sm text-gray-500">Channel 2</div>
+                                </div>
+                                <div class="flex mx-auto">
+                                    <div class="my-auto w-2 h-2 bg-orange-500 rounded-full"></div>
+                                    <div class="my-auto ml-1 text-sm text-gray-500">Channel 3</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </li>
+
+            <!-- channel 1 -->
+            <li class="flex p-3">
+                <div class="text-sm font-medium text-gray-900">Channel 1</div>
+                <div class="ml-auto text-sm text-gray-700">
+                    <span v-if="selectedNodeLatestPowerMetric">
+                        <span v-if="selectedNodeLatestPowerMetric?.ch1_voltage">{{ Number(selectedNodeLatestPowerMetric.ch1_voltage).toFixed(2) }}V</span>
+                        <span v-else>???</span>
+                        <span v-if="selectedNodeLatestPowerMetric?.ch1_current"> / {{ Number(selectedNodeLatestPowerMetric.ch1_current).toFixed(2) }}mA</span>
+                    </span>
+                    <span v-else>???</span>
+                </div>
+            </li>
+
+            <!-- channel 2 -->
+            <li class="flex p-3">
+                <div class="text-sm font-medium text-gray-900">Channel 2</div>
+                <div class="ml-auto text-sm text-gray-700">
+                    <span v-if="selectedNodeLatestPowerMetric">
+                        <span v-if="selectedNodeLatestPowerMetric?.ch2_voltage">{{ Number(selectedNodeLatestPowerMetric.ch2_voltage).toFixed(2) }}V</span>
+                        <span v-else>???</span>
+                        <span v-if="selectedNodeLatestPowerMetric?.ch2_current"> / {{ Number(selectedNodeLatestPowerMetric.ch2_current).toFixed(2) }}mA</span>
+                    </span>
+                    <span v-else>???</span>
+                </div>
+            </li>
+
+            <!-- channel 3 -->
+            <li class="flex p-3">
+                <div class="text-sm font-medium text-gray-900">Channel 3</div>
+                <div class="ml-auto text-sm text-gray-700">
+                    <span v-if="selectedNodeLatestPowerMetric">
+                        <span v-if="selectedNodeLatestPowerMetric?.ch3_voltage">{{ Number(selectedNodeLatestPowerMetric.ch3_voltage).toFixed(2) }}V</span>
+                        <span v-else>???</span>
+                        <span v-if="selectedNodeLatestPowerMetric?.ch3_current"> / {{ Number(selectedNodeLatestPowerMetric.ch3_current).toFixed(2) }}mA</span>
+                    </span>
+                    <span v-else>???</span>
+                </div>
+            </li>
+
+        </ul>
+    </div>
 </template>

webapp/frontend/src/components/NodeInfo/Share.vue

@@ -1,33 +1,25 @@
 <script setup>
-const props = defineProps({
+const props = defineProps(['node']);
-  node: Object,
+import { getShareLinkForNode, copyShareLinkForNode } from '../../utils.js';
-});
-import { getShareLinkForNode, copyShareLinkForNode } from '@/utils.js';
 </script>
-
 <template>
     <div>
         <div class="flex bg-gray-200 p-2 font-semibold">
             <div class="my-auto">Share Link</div>
             <div class="ml-auto">
-        <button
+                <button @click="copyShareLinkForNode(props.node.node_id)" type="button" class="rounded-sm bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
-          @click="copyShareLinkForNode(props.node.node_id)"
-          type="button"
-          class="rounded-sm bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
-        >
                     Copy
                 </button>
             </div>
         </div>
         <ul role="list" class="flex-1 divide-y divide-gray-200">
-      <li class="p-3">
+            <li>
+                <div class="relative flex items-center">
+                    <div class="block flex-1 p-2">
                         <div class="flex space-x-2">
-          <input
+                            <input type="text" readonly class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" :value="getShareLinkForNode(props.node.node_id)">
-            type="text"
+                        </div>
-            readonly
+                    </div>
-            :value="getShareLinkForNode(props.node.node_id)"
-            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-          />
                 </div>
             </li>
         </ul>

webapp/frontend/src/components/NodeInfo/Traceroutes.vue

@@ -1,9 +1,8 @@
 <script setup>
 const emit = defineEmits(['showTraceRoute']);
 import moment from 'moment';
-import { state } from '@/store.js';
+import { state } from '../../store.js';
-import { useMapStore } from '@/stores/mapStore';
+import { findNodeById } from '../../utils.js';
-const mapData = useMapStore();
 </script>
 <template>
     <div>
@@ -18,7 +17,7 @@ const mapData = useMapStore();
                         <div class="block flex-1 px-4 py-2">
                             <div class="relative flex min-w-0 flex-1 items-center">
                                 <div>
-                                    <p class="text-sm text-gray-900"><span class="font-medium">{{ mapData.findNodeById(traceroute.to)?.long_name || '???' }}</span> to <span class="font-medium">{{ mapData.findNodeById(traceroute.from)?.long_name || '???' }}</span></p>
+                                    <p class="text-sm text-gray-900"><span class="font-medium">{{ findNodeById(traceroute.to)?.long_name || '???' }}</span> to <span class="font-medium">{{ findNodeById(traceroute.from)?.long_name || '???' }}</span></p>
                                     <div class="text-sm text-gray-700">{{ moment(new Date(traceroute.updated_at)).fromNow() }} - {{ traceroute.route.length }} hops {{ traceroute.channel_id ? `on ${traceroute.channel_id}` : '' }}</div>
                                 </div>
                             </div>

webapp/frontend/src/components/NodeNeighborsModal.vue

@@ -1,52 +1,42 @@
 <script setup>
-// TODO: close node details tooltip when this opens
-import { state } from '@/store';
-import CloseActionButton from '@/components/CloseActionButton.vue';
-
 const emit = defineEmits(['dismiss']);
-
+import { state } from '../store.js';
 function dismissShowingNodeNeighbours() {
     state.selectedNodeToShowNeighbours = null;
     emit('dismiss');
 }
 </script>
-
 <template>
     <div class="relative z-sidebar" role="dialog" aria-modal="true">
+        <!-- sidebar -->
         <transition
                 enter-active-class="transition duration-300 ease-in-out transform"
                 enter-from-class="translate-y-full"
                 enter-to-class="translate-y-0"
                 leave-active-class="transition duration-300 ease-in-out transform"
                 leave-from-class="translate-y-0"
-      leave-to-class="translate-y-full"
+                leave-to-class="translate-y-full">
-    >
+            <div v-show="state.selectedNodeToShowNeighbours != null" class="fixed left-0 right-0 bottom-0">
-      <div v-show="state.selectedNodeToShowNeighbours" class="fixed left-0 right-0 bottom-0">
+                <div v-if="state.selectedNodeToShowNeighbours != null" class="mx-auto w-screen max-w-md p-4">
-        <div v-if="state.selectedNodeToShowNeighbours" class="mx-auto w-screen max-w-md p-4">
                     <div class="flex h-full flex-col bg-white shadow-xl rounded-xl border">
                         <div class="p-2">
                             <div class="flex items-start justify-between">
                                 <div>
-                  <h2 class="font-bold">
+                                    <h2 class="font-bold">{{ state.selectedNodeToShowNeighbours.short_name }} Neighbours</h2>
-                    {{ state.selectedNodeToShowNeighbours.short_name }} Neighbors
+                                    <h3 v-if="state.selectedNodeToShowNeighboursType === 'weHeard'" class="text-sm">Nodes heard by {{ state.selectedNodeToShowNeighbours.short_name }}</h3>
-                  </h2>
+                                    <h3 v-if="state.selectedNodeToShowNeighboursType === 'theyHeard'" class="text-sm">Nodes that heard {{ state.selectedNodeToShowNeighbours.short_name }}</h3>
-                  <h3
+                                </div>
-                    v-if="state.selectedNodeToShowNeighboursType === 'weHeard'"
+                                <div class="my-auto ml-3 flex h-7 items-center">
-                    class="text-sm"
+                                    <a href="javascript:void(0)" class="rounded-full" @click="dismissShowingNodeNeighbours">
-                  >
+                                        <div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
-                    Nodes heard by {{ state.selectedNodeToShowNeighbours.short_name }}
+                                            <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                  </h3>
+                                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                  <h3
+                                                <path d="M18 6l-12 12"></path>
-                    v-if="state.selectedNodeToShowNeighboursType === 'theyHeard'"
+                                                <path d="M6 6l12 12"></path>
-                    class="text-sm"
+                                            </svg>
-                  >
+                                        </div>
-                    Nodes that heard {{ state.selectedNodeToShowNeighbours.short_name }}
+                                    </a>
-                  </h3>
                                 </div>
-                <CloseActionButton
-                  @click="dismissShowingNodeNeighbours"
-                  class="my-auto ml-3"
-                />
                             </div>
                         </div>
                     </div>

webapp/frontend/src/components/NodePositionHistoryModal.vue

@@ -1,14 +1,11 @@
 <script setup>
 const emit = defineEmits(['dismiss']);
-import { state } from '@/store';
+import { state } from '../store.js';
 import moment from 'moment';
-import { useUIStore } from '@/stores/uiStore';
-
-const ui = useUIStore();
 function dismissShowingNodePositionHistory() {
     state.selectedNodePositionHistory = [];
     state.selectedNodeToShowPositionHistory = null;
-    ui.collapsePositionHistoryModal();
+    state.positionHistoryModalExpanded = false;
     emit('dismiss');
 }
 function onPositionHistoryQuickRangeClick(range) {
@@ -50,9 +47,9 @@ function onPositionHistoryQuickRangeClick(range) {
                         <div>
                             <div class="flex p-2">
                                 <div class="flex my-auto mr-3 space-x-2">
-                                    <a href="javascript:void(0)" @click="ui.togglePositionHistoryModalExpansion" class="rounded-full">
+                                    <a href="javascript:void(0)" @click="state.positionHistoryModalExpanded = !state.positionHistoryModalExpanded" class="rounded-full">
                                         <div class="bg-gray-100 hover:bg-gray-200 p-1 rounded-full">
-                                            <svg v-if="ui.positionHistoryModalExpanded" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                                            <svg v-if="state.positionHistoryModalExpanded" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                                                 <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                                             </svg>
                                             <svg v-else xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
@@ -74,7 +71,7 @@ function onPositionHistoryQuickRangeClick(range) {
                                     </a>
                                 </div>
                             </div>
-                            <div v-if="ui.positionHistoryModalExpanded" class="divide-y border-t">
+                            <div v-if="state.positionHistoryModalExpanded" class="divide-y border-t">
 
                                 <!-- quick range -->
                                 <div class="flex p-2 space-x-2">

webapp/frontend/src/components/NodeTooltip.vue

@@ -1,138 +0,0 @@
-<script setup>
-import { ref, computed, onMounted } from 'vue';
-import moment from 'moment';
-import { hasNodeUplinkedToMqttRecently, getRegionFrequencyRange, formatPositionPrecision } from '@/utils';
-import { state } from '@/store';
-const emit = defineEmits(['showNeighbors']);
-
-const props = defineProps({
-  node: Object,
-});
-const popupContent = ref(null);
-const hideImage = ref(false);
-const hardwareImage = `/images/devices/${props.node.hardware_model_name}.png`;
-
-const mqttStatus = hasNodeUplinkedToMqttRecently(props.node);
-const mqttClass = mqttStatus ? 'text-green-700' : 'text-blue-700';
-const mqttLabel = mqttStatus ? 'Connected' : 'Disconnected';
-const mqttUpdatedAt = props.node.mqtt_connection_state_updated_at
-  ? moment(props.node.mqtt_connection_state_updated_at).fromNow()
-  : null;
-
-const loraFrequencyRange = getRegionFrequencyRange(props.node.region_name);
-
-const formattedVoltage = computed(() => {
-  return typeof props.node.value?.voltage === 'number'
-    ? `${props.node.value.voltage.toFixed(2)}V`
-    : null;
-});
-
-const formattedChannelUtilization = computed(() => {
-  return typeof props.node.value?.channel_utilization === 'number'
-    ? `${props.node.value.channel_utilization.toFixed(2)}%`
-    : null;
-});
-
-const formattedAirUtil = computed(() => {
-  return typeof props.node.value?.air_util_tx === 'number'
-    ? `${props.node.value.air_util_tx.toFixed(2)}%`
-    : null;
-});
-
-function formatDate(date) {
-  return moment(date).fromNow();
-}
-</script>
-
-<template>
-    <div ref="popupContent">
-      <img
-        v-if="hardwareImage"
-        class="mb-4 w-40 mx-auto"
-        :src="hardwareImage"
-        @error="hideImage = true"
-        v-show="!hideImage"
-      />
-      <div class="font-bold text-center">{{ node.long_name }}</div>
-      Short Name: {{ node.short_name }}
-      <br />MQTT:
-      <span>
-        <span :class="mqttClass">{{ mqttLabel }}</span>
-        <span v-if="mqttUpdatedAt"> ({{ mqttUpdatedAt }})</span>
-      </span>
-  
-      <br v-if="node.num_online_local_nodes !== null" />
-      <span v-if="node.num_online_local_nodes !== null">
-        Local Nodes Online: {{ node.num_online_local_nodes }}
-      </span>
-  
-      <br v-if="node.position_precision !== 32 && node.position_precision !== null" />
-      <span v-if="node.position_precision !== 32 && node.position_precision !== null">
-        Position Precision: {{ formatPositionPrecision(node.position_precision) }}
-      </span>
-  
-      <br /><br />Role: {{ node.role_name }}
-      <br />Hardware: {{ node.hardware_model_name }}
-  
-      <br v-if="node.firmware_version" />
-      <span v-if="node.firmware_version">Firmware: {{ node.firmware_version }}</span>
-  
-      <br v-if="node.region_name" />
-      <span v-if="node.region_name">
-        LoRa Region: {{ node.region_name }} ({{ loraFrequencyRange }})
-      </span>
-  
-      <br v-if="node.modem_preset_name" />
-      <span v-if="node.modem_preset_name">Modem Preset: {{ node.modem_preset_name }}</span>
-  
-      <br v-if="node.has_default_channel !== null" />
-      <span v-if="node.has_default_channel !== null">
-        Has Default Channel: {{ node.has_default_channel ? 'Yes' : 'No' }}
-      </span>
-  
-      <br v-if="node.battery_level" />
-      <span v-if="node.battery_level">
-        Battery:
-        {{
-          node.battery_level > 100
-            ? 'Plugged In'
-            : `${node.battery_level}%`
-        }}
-      </span>
-  
-      <br v-if="formattedVoltage" />
-      <span v-if="formattedVoltage">Voltage: {{ formattedVoltage }}</span>
-  
-      <br v-if="formattedChannelUtilization" />
-      <span v-if="formattedChannelUtilization">
-        Ch Util: {{ formattedChannelUtilization }}
-      </span>
-  
-      <br v-if="formattedAirUtil" />
-      <span v-if="formattedAirUtil">Air Util: {{ formattedAirUtil }}</span>
-  
-      <br v-if="node.altitude && node.altitude < 42949000" />
-      <span v-if="node.altitude && node.altitude < 42949000">
-        Altitude: {{ node.altitude }}m
-      </span>
-  
-      <br /><br />ID: {{ node.node_id }}
-      <br />Hex ID: {{ node.node_id_hex }}
-      <br />Updated: {{ formatDate(node.updated_at) }}
-      <br v-if="node.neighbours_updated_at" />
-      <span v-if="node.neighbours_updated_at">
-        Neighbours Updated: {{ formatDate(node.neighbours_updated_at) }}
-      </span>
-      <br v-if="node.position_updated_at" />
-      <span v-if="node.position_updated_at">
-        Position Updated: {{ formatDate(node.position_updated_at) }}
-      </span>
-  
-      <br /><br />
-      <button @click="state.selectedNode = node" class="border border-gray-300 bg-gray-100 p-1 w-full rounded-sm hover:bg-gray-200 mb-1">Show Full Details</button>
-      <br />
-      <button @click="$emit('showNeighbors', 'theyHeard', node.node_id)" class="border border-gray-300 bg-gray-100 p-1 w-full rounded-sm hover:bg-gray-200 mb-1">Show Neighbours (Heard Us)</button>
-      <br />
-      <button @click="$emit('showNeighbors', 'weHeard', node.node_id)" class="border border-gray-300 bg-gray-100 p-1 w-full rounded-sm hover:bg-gray-200">Show Neighbours (We Heard)</button>
-    </div>
-</template>

webapp/frontend/src/components/Settings.vue

@@ -1,141 +1,207 @@
 <script setup>
-import { useUIStore } from '@/stores/uiStore';
+import { state } from '../store.js';
-import { useConfigStore } from '@/stores/configStore';
+import { 
-import SettingField from '@/components/Settings/Field.vue';
+    nodesMaxAge,
-
+    nodesDisconnectedAge,
-const ui = useUIStore();
+    nodesOfflineAge,
-const configStore = useConfigStore();
+    waypointsMaxAge,
-
+    neighboursMaxDistance,
-const timeOptions = [
+    goToNodeZoomLevel,
-  { value: null, label: 'Show All' },
+    temperatureFormat,
-  { value: 900, label: '15 minutes' },
+    autoUpdatePositionInUrl,
-  { value: 1800, label: '30 minutes' },
+    enableMapAnimations,
-  { value: 3600, label: '1 hour' },
+} from '../config.js';
-  { value: 10800, label: '3 hours' },
-  { value: 21600, label: '6 hours' },
-  { value: 43200, label: '12 hours' },
-  { value: 86400, label: '24 hours' },
-  { value: 172800, label: '2 days' },
-  { value: 259200, label: '3 days' },
-  { value: 345600, label: '4 days' },
-  { value: 432000, label: '5 days' },
-  { value: 518400, label: '6 days' },
-  { value: 604800, label: '7 days' },
-];
 </script>
 
 <template>
+    <!-- settings sidebar -->
     <div class="relative z-sidebar" role="dialog" aria-modal="true">
-      <!-- Overlay -->
+
+        <!-- overlay -->
         <transition
                 enter-active-class="transition-opacity duration-300 ease-linear"
                 enter-from-class="opacity-0"
                 enter-to-class="opacity-100"
                 leave-active-class="transition-opacity duration-300 ease-linear"
                 leave-from-class="opacity-100"
-        leave-to-class="opacity-0"
+                leave-to-class="opacity-0">
-      >
+            <div v-show="state.settingsVisible" @click="state.settingsVisible = !state.settingsVisible" class="fixed inset-0 bg-gray-900/75"></div>
-        <div v-show="ui.settingsVisible" @click="ui.toggleSettings" class="fixed inset-0 bg-gray-900/75"></div>
         </transition>
 
-      <!-- Sidebar -->
+        <!-- sidebar -->
         <transition
                 enter-active-class="transition duration-300 ease-in-out transform"
                 enter-from-class="-translate-x-full"
                 enter-to-class="translate-x-0"
                 leave-active-class="transition duration-300 ease-in-out transform"
                 leave-from-class="translate-x-0"
-        leave-to-class="-translate-x-full"
+                leave-to-class="-translate-x-full">
-      >
+            <div v-show="state.settingsVisible" class="fixed top-0 left-0 bottom-0">
-        <div v-show="ui.settingsVisible" class="fixed top-0 left-0 bottom-0">
+                <div v-if="state.settingsVisible" class="w-screen h-full max-w-md overflow-hidden">
-          <div v-if="ui.settingsVisible" class="w-screen h-full max-w-md overflow-hidden">
                     <div class="flex h-full flex-col bg-white shadow-xl">
-              <!-- Header -->
+
+                        <!-- slideover header -->
                         <div class="p-2 border-b border-gray-200 shadow-sm">
                             <div class="flex items-start justify-between">
                                 <div>
                                     <h2 class="font-bold">Settings</h2>
                                     <h3 class="text-sm">Changes are only saved in this browser.</h3>
                                 </div>
-                  <button class="ml-3 p-2 bg-gray-100 hover:bg-gray-200 rounded-full" @click="ui.hideSettings">
+                                <div class="my-auto ml-3 flex h-7 items-center">
-                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <a href="javascript:void(0)" class="rounded-full" @click="state.settingsVisible = false">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12" />
+                                        <div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
+                                            <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                                <path d="M18 6l-12 12"></path>
+                                                <path d="M6 6l12 12"></path>
                                             </svg>
-                  </button>
+                                        </div>
+                                    </a>
+                                </div>
                             </div>
                         </div>
 
-              <!-- Content -->
                         <div class="overflow-y-auto divide-y divide-gray-200">
-                <SettingField
-                  label="Nodes Max Age"
-                  helpText="Nodes not updated within this time are hidden. Reload to update map."
-                  v-model="configStore.nodesMaxAge"
-                  :options="timeOptions"
-                />
 
-                <SettingField
+                            <!-- configNodesMaxAgeInSeconds -->
-                  label="Nodes Disconnected Age"
+                            <div class="p-2">
-                  helpText="Nodes without recent MQTT uplinks appear blue. Reload to update map."
+                                <label class="block text-sm font-medium text-gray-900">Nodes Max Age</label>
-                  v-model="configStore.nodesDisconnectedAge"
+                                <div class="text-xs text-gray-600 mb-2">Nodes not updated within this time are hidden. Reload to update map.</div>
-                  :options="timeOptions.filter(o => o.value !== null)"
+                                <select v-model="nodesMaxAge" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-                />
+                                    <option :value="null">Show All</option>
-  
+                                    <option value="900">15 minutes</option>
-                <SettingField
+                                    <option value="1800">30 minutes</option>
-                  label="Nodes Offline Age"
+                                    <option value="3600">1 hour</option>
-                  helpText="Nodes not updated within this time appear red. Reload to update map."
+                                    <option value="10800">3 hours</option>
-                  v-model="configStore.nodesOfflineAge"
+                                    <option value="21600">6 hours</option>
-                  :options="[
+                                    <option value="43200">12 hours</option>
-                    { value: null, label: `Don't show as offline` },
+                                    <option value="86400">24 hours</option>
-                    ...timeOptions.filter(o => o.value !== null)
+                                    <option value="172800">2 days</option>
-                  ]"
+                                    <option value="259200">3 days</option>
-                />
+                                    <option value="345600">4 days</option>
-  
+                                    <option value="432000">5 days</option>
-                <SettingField
+                                    <option value="518400">6 days</option>
-                  label="Waypoints Max Age"
+                                    <option value="604800">7 days</option>
-                  helpText="Old waypoints are hidden. Reload to update map."
+                                </select>
-                  v-model="configStore.waypointsMaxAge"
-                  :options="timeOptions"
-                />
-  
-                <SettingField
-                  label="Neighbours Max Distance (meters)"
-                  helpText="Hides neighbours further than this distance."
-                  v-model="configStore.neighboursMaxDistance"
-                  type="number"
-                />
-  
-                <SettingField
-                  label="Zoom Level (go to node)"
-                  helpText="How far to zoom map when navigating to a node."
-                  v-model="configStore.goToNodeZoomLevel"
-                  type="number"
-                />
-  
-                <SettingField
-                  label="Temperature Format"
-                  helpText="Display temperatures in this format."
-                  v-model="configStore.temperatureFormat"
-                  :options="[
-                    { value: 'celsius', label: 'Celsius (ºC)' },
-                    { value: 'fahrenheit', label: 'Fahrenheit (ºF)' }
-                  ]"
-                />
-  
-                <SettingField
-                  label="Auto Update Position in URL"
-                  helpText="Sets lat/lng/zoom as query parameters."
-                  v-model="configStore.autoUpdatePositionInUrl"
-                  type="checkbox"
-                />
-  
-                <SettingField
-                  label="Enable Map Animations"
-                  helpText="Map will animate flying to nodes."
-                  v-model="configStore.enableMapAnimations"
-                  type="checkbox"
-                />
                             </div>
+
+                            <!-- configNodesDisconnectedAgeInSeconds -->
+                            <div class="p-2">
+                                <label class="block text-sm font-medium text-gray-900">Nodes Disconnected Age</label>
+                                <div class="text-xs text-gray-600 mb-2">Nodes that have not uplinked to MQTT in this time will show as blue icons. Reload to update map.</div>
+                                <select v-model="nodesDisconnectedAge" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                                    <option value="900">15 minutes</option>
+                                    <option value="1800">30 minutes</option>
+                                    <option value="2700">45 minutes</option>
+                                    <option value="3600">1 hour</option>
+                                    <option value="7200">2 hours</option>
+                                    <option value="10800">3 hours</option>
+                                    <option value="21600">6 hours</option>
+                                    <option value="43200">12 hours</option>
+                                    <option value="86400">24 hours</option>
+                                    <option value="172800">2 days</option>
+                                    <option value="259200">3 days</option>
+                                    <option value="345600">4 days</option>
+                                    <option value="432000">5 days</option>
+                                    <option value="518400">6 days</option>
+                                    <option value="604800">7 days</option>
+                                </select>
+                            </div>
+
+                            <!-- configNodesOfflineAgeInSeconds -->
+                            <div class="p-2">
+                                <label class="block text-sm font-medium text-gray-900">Nodes Offline Age</label>
+                                <div class="text-xs text-gray-600 mb-2">Nodes not updated within this time will show as red icons. Reload to update map.</div>
+                                <select v-model="nodesOfflineAge" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                                    <option :value="null">Don't show as offline</option>
+                                    <option value="900">15 minutes</option>
+                                    <option value="1800">30 minutes</option>
+                                    <option value="2700">45 minutes</option>
+                                    <option value="3600">1 hour</option>
+                                    <option value="7200">2 hours</option>
+                                    <option value="10800">3 hours</option>
+                                    <option value="21600">6 hours</option>
+                                    <option value="43200">12 hours</option>
+                                    <option value="86400">24 hours</option>
+                                    <option value="172800">2 days</option>
+                                    <option value="259200">3 days</option>
+                                    <option value="345600">4 days</option>
+                                    <option value="432000">5 days</option>
+                                    <option value="518400">6 days</option>
+                                    <option value="604800">7 days</option>
+                                </select>
+                            </div>
+
+                            <!-- configWaypointsMaxAgeInSeconds -->
+                            <div class="p-2">
+                                <label class="block text-sm font-medium text-gray-900">Waypoints Max Age</label>
+                                <div class="text-xs text-gray-600 mb-2">Waypoints not updated within this time are hidden. Reload to update map.</div>
+                                <select v-model="waypointsMaxAge" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                                    <option :value="null">Show All</option>
+                                    <option value="900">15 minutes</option>
+                                    <option value="1800">30 minutes</option>
+                                    <option value="3600">1 hour</option>
+                                    <option value="10800">3 hours</option>
+                                    <option value="21600">6 hours</option>
+                                    <option value="43200">12 hours</option>
+                                    <option value="86400">24 hours</option>
+                                    <option value="172800">2 days</option>
+                                    <option value="259200">3 days</option>
+                                    <option value="345600">4 days</option>
+                                    <option value="432000">5 days</option>
+                                    <option value="518400">6 days</option>
+                                    <option value="604800">7 days</option>
+                                </select>
+                            </div>
+
+                            <!-- configNeighboursMaxDistanceInMeters -->
+                            <div class="p-2">
+                                <label class="block text-sm font-medium text-gray-900">Neighbours Max Distance (meters)</label>
+                                <div class="text-xs text-gray-600 mb-2">Neighbours further than this are hidden. Reload to update map.</div>
+                                <input type="number" v-model="neighboursMaxDistance" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                            </div>
+
+                            <!-- configZoomLevelGoToNode -->
+                            <div class="p-2">
+                                <label class="block text-sm font-medium text-gray-900">Zoom Level (go to node)</label>
+                                <div class="text-xs text-gray-600 mb-2">How far to zoom map when navigating to a node.</div>
+                                <input type="number" v-model="goToNodeZoomLevel" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                            </div>
+
+                            <!-- configTemperatureFormat -->
+                            <div class="p-2">
+                                <label class="block text-sm font-medium text-gray-900">Temperature Format</label>
+                                <div class="text-xs text-gray-600 mb-2">Metrics will be shown in the selected format.</div>
+                                <select v-model="temperatureFormat" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                                    <option value="celsius">Celsius (ºC)</option>
+                                    <option value="fahrenheit">Fahrenheit (ºF)</option>
+                                </select>
+                            </div>
+
+                            <!-- configAutoUpdatePositionInUrl -->
+                            <div class="p-2">
+                                <div class="flex items-start">
+                                    <div class="flex items-center h-5">
+                                        <input type="checkbox" v-model="autoUpdatePositionInUrl" class="w-4 h-4 border border-gray-300 rounded-sm bg-gray-50 focus:ring-3 focus:ring-blue-300" required>
+                                    </div>
+                                    <label class="ml-2 text-sm font-medium text-gray-900">Auto Update Position in URL</label>
+                                </div>
+                                <div class="text-xs text-gray-600">Sets lat/lng/zoom as query parameters.</div>
+                            </div>
+
+                            <!-- configEnableMapAnimations -->
+                            <div class="p-2">
+                                <div class="flex items-start">
+                                    <div class="flex items-center h-5">
+                                        <input type="checkbox" v-model="enableMapAnimations" class="w-4 h-4 border border-gray-300 rounded-sm bg-gray-50 focus:ring-3 focus:ring-blue-300" required>
+                                    </div>
+                                    <label class="ml-2 text-sm font-medium text-gray-900">Enable Map Animations</label>
+                                </div>
+                                <div class="text-xs text-gray-600">Map will animate flying to nodes.</div>
+                            </div>
+
+                        </div>
+
                     </div>
                 </div>
             </div>

webapp/frontend/src/components/Settings/Field.vue

@@ -1,55 +0,0 @@
-<script setup>
-defineProps({
-  label: String,
-  helpText: String,
-  modelValue: [String, Number, Boolean, null],
-  options: Array,
-  type: {
-    type: String,
-    default: 'select', // "select", "number", or "checkbox"
-  },
-});
-defineEmits(['update:modelValue']);
-</script>
-
-<template>
-  <div class="p-2">
-    <label class="block text-sm font-medium text-gray-900">{{ label }}</label>
-    <div class="text-xs text-gray-600 mb-2">{{ helpText }}</div>
-
-    <template v-if="type === 'select'">
-      <select
-        :value="modelValue === null ? 'null' : modelValue"
-        @change="$emit('update:modelValue', $event.target.value === 'null' ? null : Number($event.target.value))"
-        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-      >
-        <option v-for="opt in options" :key="opt.value" :value="opt.value === null ? 'null' : opt.value">
-          {{ opt.label }}
-        </option>
-      </select>
-    </template>
-
-    <template v-else-if="type === 'number'">
-      <input
-        type="number"
-        :value="modelValue"
-        @input="$emit('update:modelValue', $event.target.valueAsNumber)"
-        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-      />
-    </template>
-
-    <template v-else-if="type === 'checkbox'">
-      <div class="flex items-start">
-        <div class="flex items-center h-5">
-          <input
-            type="checkbox"
-            :checked="modelValue"
-            @change="$emit('update:modelValue', $event.target.checked)"
-            class="w-4 h-4 border border-gray-300 rounded-sm bg-gray-50 focus:ring-3 focus:ring-blue-300"
-          />
-        </div>
-        <label class="ml-2 text-sm font-medium text-gray-900">{{ label }}</label>
-      </div>
-    </template>
-  </div>
-</template>

webapp/frontend/src/components/Traceroute/NodeEntry.vue

@@ -1,28 +0,0 @@
-<script setup>
-const props = defineProps({
-  node: Object,
-  description: String,
-});
-const emit = defineEmits(['goTo']);
-</script>
-
-<template>
-    <li @click.prevent="$emit('goTo', node.node_id)" :key="node.node_id" class="relative flex gap-x-4" role="button" tabindex="0">
-      <div class="absolute left-0 top-0 flex w-12 justify-center top-3 -bottom-3">
-        <div class="w-px bg-gray-200"></div>
-      </div>
-      <div class="my-auto relative flex flex-none items-center justify-center">
-        <div>
-          <div class="flex rounded-full h-12 w-12 text-white shadow-sm"
-               :style="{backgroundColor: node.backgroundColor, color: node.textColor}">
-            <div class="mx-auto my-auto drop-shadow-sm">{{ node.short_name ?? '?' }}</div>
-          </div>
-        </div>
-      </div>
-      <div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
-        <div class="font-medium text-gray-900">{{ node.long_name || '???' }}</div>
-        <div>Hex ID: !{{ Number(node.node_id).toString(16) }}</div>
-        <div>{{ description }}</div>
-      </div>
-    </li>
-</template>

webapp/frontend/src/components/TracerouteInfo.vue

@@ -1,22 +1,8 @@
 <script setup>
 const emit = defineEmits(['goTo']);
 import moment from 'moment';
-import { computed } from 'vue';
+import { state } from '../store.js';
-import { state } from '@/store';
+import { getNodeColor, getNodeTextColor, findNodeById, findNodeMarkerById } from '../utils.js';
-import { useMapStore } from '@/stores/mapStore';
-import NodeEntry from '@/components/Traceroute/NodeEntry.vue';
-const mapData = useMapStore();
-// selected node IDs
-const toNode = computed(() => mapData.findNodeById(state.selectedTraceRoute.to));
-const fromNode = computed(() => mapData.findNodeById(state.selectedTraceRoute.from));
-const gatewayNode = computed(() => mapData.findNodeById(state.selectedTraceRoute.gateway_id));
-// pre-resolve the route nodes into an array
-const routeNodes = computed(() =>
-    state.selectedTraceRoute.route?.map(id => ({
-        id,
-        node: mapData.findNodeById(id),
-    })) ?? []
-);
 </script>
 <template>
     <div class="relative z-sidebar" role="dialog" aria-modal="true">
@@ -66,18 +52,89 @@ const routeNodes = computed(() =>
                         </div>
 
                         <div class="overflow-y-auto">
+
                             <!-- details -->
                             <div class="p-2">
                                 <ul role="list" class="space-y-3">
+
                                     <!-- node that initiated traceroute -->
-                                    <NodeEntry :node="toNode" description="Started the traceroute" @go-to="$emit('goTo', toNode.node_id)"/>
+                                    <li @click="$emit('goTo', state.selectedTraceRoute.to)" class="relative flex gap-x-4">
+                                        <div class="absolute left-0 top-0 flex w-12 justify-center top-3 -bottom-3">
+                                            <div class="w-px bg-gray-200"></div>
+                                        </div>
+                                        <div class="my-auto relative flex flex-none items-center justify-center">
+                                            <div>
+                                                <div class="flex rounded-full h-12 w-12 text-white shadow-sm" :style="{backgroundColor: getNodeColor(state.selectedTraceRoute.to)}" :class="[ `text-[${getNodeTextColor(state.selectedTraceRoute.to)}]` ]">
+                                                    <div class="mx-auto my-auto drop-shadow-sm">{{ findNodeById(state.selectedTraceRoute.to)?.short_name ?? "?" }}</div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
+                                            <div class="font-medium text-gray-900">{{ findNodeById(state.selectedTraceRoute.to)?.long_name || '???' }}</div>
+                                            <div>Hex ID: !{{ Number(state.selectedTraceRoute.to).toString(16) }}</div>
+                                            <div>Started the traceroute</div>
+                                        </div>
+                                    </li>
+
                                     <!-- middleman nodes -->
-                                    <NodeEntry v-for="{ id, node } in routeNodes" :key="id" :node="node" description="Forwarded the packet" @go-to="$emit('goTo', id)"/>
+                                    <li @click="$emit('goTo', route)" v-for="route of state.selectedTraceRoute.route" class="relative flex gap-x-4">
+                                        <div class="absolute left-0 top-0 flex w-12 justify-center -bottom-3">
+                                            <div class="w-px bg-gray-200"></div>
+                                        </div>
+                                        <div class="my-auto relative flex flex-none items-center justify-center">
+                                            <div>
+                                                <div class="flex rounded-full h-12 w-12 text-white shadow" :style="{backgroundColor: getNodeColor(route)}" :class="[ `text-[${getNodeTextColor(route)}]` ]">
+                                                    <div class="mx-auto my-auto drop-shadow-sm">{{ findNodeById(route)?.short_name ?? "?" }}</div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
+                                            <div class="font-medium text-gray-900">{{ findNodeById(route)?.long_name || '???' }}</div>
+                                            <div>Hex ID: !{{ Number(route).toString(16) }}</div>
+                                            <div>Forwarded the packet</div>
+                                        </div>
+                                    </li>
+
                                     <!-- node that replied to traceroute -->
-                                    <NodeEntry v-if="fromNode" :node="fromNode" description="Replied to traceroute" @go-to="$emit('goTo', fromNode.node_id)"/> 
+                                    <li @click="$emit('goTo', state.selectedTraceRoute.from)" v-if="state.selectedTraceRoute.from" class="relative flex gap-x-4">
+                                        <div class="absolute left-0 top-0 flex w-12 justify-center -bottom-3">
+                                            <div class="w-px bg-gray-200"></div>
+                                        </div>
+                                        <div class="my-auto relative flex flex-none items-center justify-center">
+                                            <div>
+                                                <div class="flex rounded-full h-12 w-12 text-white shadow" :style="{backgroundColor: getNodeColor(state.selectedTraceRoute.from)}" :class="[ `text-[${getNodeTextColor(state.selectedTraceRoute.from)}]` ]">
+                                                    <div class="mx-auto my-auto drop-shadow-sm">{{ findNodeById(state.selectedTraceRoute.from)?.short_name ?? "?" }}</div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
+                                            <div class="font-medium text-gray-900">{{ findNodeById(state.selectedTraceRoute.from)?.long_name || '???' }}</div>
+                                            <div>Hex ID: !{{ Number(state.selectedTraceRoute.from).toString(16) }}</div>
+                                            <div>Replied to traceroute</div>
+                                        </div>
+                                    </li>
+
                                     <!-- node that gated traceroute to mqtt -->
-                                    <NodeEntry v-if="gatewayNode" :node="gatewayNode" description="Gated the packet to MQTT" @go-to="$emit('goTo', gatewayNode.node_id)" /> 
+                                    <li @click="$emit('goTo', state.selectedTraceRoute.gateway_id)" v-if="state.selectedTraceRoute.gateway_id" class="relative flex gap-x-4">
+                                        <div class="absolute left-0 top-0 flex w-12 justify-center h-6">
+                                            <div class="w-px bg-gray-200"></div>
+                                        </div>
+                                        <div class="my-auto relative flex flex-none items-center justify-center">
+                                            <div>
+                                                <div class="flex rounded-full h-12 w-12 text-white shadow" :style="{backgroundColor: getNodeColor(state.selectedTraceRoute.gateway_id)}" :class="[ `text-[${getNodeTextColor(state.selectedTraceRoute.gateway_id)}]` ]">
+                                                    <div class="mx-auto my-auto drop-shadow-sm">{{ findNodeById(state.selectedTraceRoute.gateway_id)?.short_name ?? "?" }}</div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
+                                            <div class="font-medium text-gray-900">{{ findNodeById(state.selectedTraceRoute.gateway_id)?.long_name || '???' }}</div>
+                                            <div>Hex ID: !{{ Number(state.selectedTraceRoute.gateway_id).toString(16) }}</div>
+                                            <div>Gated the packet to MQTT</div>
+                                        </div>
+                                    </li>
+
                                 </ul>
+
                             </div>
 
                             <div>

webapp/frontend/src/composables/useNodeProcessor.js

@@ -1,117 +0,0 @@
-import { useMapStore } from '@/stores/mapStore';
-import moment from 'moment';
-import { nodesMaxAge, nodesOfflineAge } from '@/config'; // TODO: use config store
-import { icons } from '@/map';
-import { hasNodeUplinkedToMqttRecently, isValidCoordinates } from '@/utils';
-
-export function useNodeProcessor() {
-  const mapStore = useMapStore();  // Access your mapStore from Pinia
-
-  // This function processes new node data
-  const processNewNodes = (newNodes) => {
-    const now = moment();
-    const processedNodes = [];
-    const processedMarkers = {};
-
-    for (const node of newNodes) {
-        // Skip nodes older than configured node max age
-        if (nodesMaxAge.value) {
-            const lastUpdatedAgeInMillis = now.diff(moment(node.updated_at));
-            if (lastUpdatedAgeInMillis > nodesMaxAge.value * 1000) {
-                continue;
-            }
-        }
-
-        // Compute background/text colors beforehand
-        node.backgroundColor = getNodeColor(node.node_id) || '#888';  // Default to '#888' if undefined
-        node.textColor = getNodeTextColor(node.node_id) || '#FFFFFF';  // Default to white if undefined
-
-        // Add node to the processed list regardless of its position
-        processedNodes.push(node);
-
-        // Skip nodes with invalid or missing position
-        if (!node.latitude || !node.longitude || isNaN(node.latitude) || isNaN(node.longitude)) {
-            continue;
-        }
-
-        // Fix latitude and longitude
-        node.latitude = node.latitude / 10000000;
-        node.longitude = node.longitude / 10000000;
-
-        // Icon based on MQTT connection state
-        let icon = icons.mqttDisconnected;
-
-        // Use offline icon for nodes older than configured node offline age
-        if (nodesOfflineAge.value) {
-            const lastUpdatedAgeInMillis = now.diff(moment(node.updated_at));
-            if (lastUpdatedAgeInMillis > nodesOfflineAge.value * 1000) {
-            icon = icons.offline;
-            }
-        }
-
-        // Check if node has uplinked to MQTT recently
-        if (hasNodeUplinkedToMqttRecently(node)) {
-            icon = icons.mqttDisconnected;
-        }
-
-        // Filter invalid coordinates
-        if (!isValidCoordinates(node.latitude, node.longitude)) {
-            continue;
-        }
-
-        // Prepare marker data
-        const marker = {
-            type: 'Feature',
-            properties: { 
-                id: node.node_id,
-                role: node.role_name,
-                layer: 'nodes',
-                color: icon,
-            },
-            geometry: {
-                type: 'Point',
-                coordinates: [node.longitude, node.latitude],
-            },
-        };
-
-        // Add the marker to the processed markers dictionary (using node_id as the key)
-        processedMarkers[node.node_id] = marker;
-    }
-
-    // Return processed data (nodes and markers)
-    return { processedNodes, processedMarkers };
-  };
-
-  // Process new data and store it (bulk processing)
-  const parseNodesResponse = (newNodes) => {
-    const { processedNodes, processedMarkers } = processNewNodes(newNodes);
-
-    // Clear old data and update in bulk
-    mapStore.clearNodes();
-    mapStore.setNodes(processedNodes);
-    mapStore.setNodeMarkers(processedMarkers);
-  };
-
-  return {
-    parseNodesResponse,
-  };
-};
-
-
-// convert node id to a hex colour
-function getNodeColor(nodeId) {
-    return "#" + (nodeId & 0x00FFFFFF).toString(16).padStart(6, '0');
-};
-
-function getNodeTextColor(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";
-};

webapp/frontend/src/composables/useSearchedNodes.js

@@ -1,51 +0,0 @@
-import { computed, ref, watch } from 'vue';
-import { useUIStore } from '@/stores/uiStore';
-import { useMapStore } from '@/stores/mapStore';
-import { debounce } from 'lodash';
-
-export const useSearchedNodes = () => {
-  const uiStore = useUIStore();
-  const mapStore = useMapStore();
-
-  const searchText = ref(uiStore.searchText);
-
-  // Use a debounced version of the search text to minimize re-computation
-  const debouncedSearchText = ref(searchText.value);
-  const updateSearchText = debounce((newSearchText) => {
-    debouncedSearchText.value = newSearchText;
-  }, 300); // Adjust debounce time (300ms is just an example)
-
-  // Watch for changes to the search text and apply debouncing
-  watch(() => uiStore.searchText, (newSearchText) => {
-    updateSearchText(newSearchText);
-  });
-
-  // Computed property for searched nodes
-  const searchedNodes = computed(() => {
-    const nodes = mapStore.nodes;
-    const query = debouncedSearchText.value.toLowerCase();
-
-    // Filter nodes based on search query, only once per update
-    const filteredNodes = nodes.filter((node) => {
-      const matchesId = node.node_id?.toLowerCase()?.includes(query);
-      const matchesHexId = node.node_id_hex?.toLowerCase()?.includes(query);
-      const matchesLongName = node.long_name?.toLowerCase()?.includes(query);
-      const matchesShortName = node.short_name?.toLowerCase()?.includes(query);
-      return matchesId || matchesHexId || matchesLongName || matchesShortName;
-    });
-
-    // Sort alphabetically by long name
-    const sortedNodes = filteredNodes.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 sortedNodes.slice(0, 500);
-  });
-
-  return {
-    searchedNodes,
-  };
-};

webapp/frontend/src/config.js

@@ -2,8 +2,10 @@ import { useStorage } from '@vueuse/core';
 
 // static
 export const CURRENT_ANNOUNCEMENT_ID = 1;
-export const BASE_PATH = 'http://localhost:9090';
+export const BASE_PATH = '';
 
+// string
+export const temperatureFormat = useStorage('temperature-display', 'fahrenheit');
 // boolean
 export const autoUpdatePositionInUrl =  useStorage('auto-update-url', true);
 export const enableMapAnimations = useStorage('map-animations', true);

webapp/frontend/src/directives/v-click-outside.js

@@ -1,16 +0,0 @@
-export default {
-    mounted(el, binding) {
-      console.log('mounted')
-      el._clickOutsideHandler = (event) => {
-        console.log('handler')
-        if (!(el === event.target || el.contains(event.target))) {
-          binding.value(event);
-        }
-      };
-      document.addEventListener('click', el._clickOutsideHandler);
-    },
-    unmounted(el) {
-      document.removeEventListener('click', el._clickOutsideHandler);
-      el._clickOutsideHandler = null;
-    }
-  };

webapp/frontend/src/icons/DeviceIcon.vue

@@ -1,5 +0,0 @@
-<template>
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-      <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
-    </svg>
-  </template>

webapp/frontend/src/icons/InfoIcon.vue

@@ -1,5 +0,0 @@
-<template>
-  <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-    <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
-  </svg>
-</template>

webapp/frontend/src/icons/MobileCloseIcon.vue

@@ -1,5 +0,0 @@
-<template>
-    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
-    </svg>
-</template>

webapp/frontend/src/icons/RandomIcon.vue

@@ -1,9 +0,0 @@
-<template>
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-      <path d="M18 4l3 3l-3 3"></path>
-      <path d="M18 20l3 -3l-3 -3"></path>
-      <path d="M3 7h3a5 5 0 0 1 5 5a5 5 0 0 0 5 5h5"></path>
-      <path d="M21 7h-5a4.978 4.978 0 0 0 -3 1m-4 8a4.984 4.984 0 0 1 -3 1h-3"></path>
-    </svg>
-  </template>

webapp/frontend/src/icons/ReloadIcon.vue

@@ -1,7 +0,0 @@
-<template>
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-      <path d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1 7.935 1.007 9.425 4.747"></path>
-      <path d="M20 4v5h-5"></path>
-    </svg>
-  </template>

webapp/frontend/src/icons/SearchIcon.vue

@@ -1,7 +0,0 @@
-<template>
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-      <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
-      <path d="M21 21l-6 -6"></path>
-    </svg>
-  </template>

webapp/frontend/src/icons/SettingsIcon.vue

@@ -1,6 +0,0 @@
-<template>
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-      <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
-      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
-    </svg>
-  </template>

webapp/frontend/src/main.js

@@ -1,19 +1,11 @@
-import '@/assets/main.css';
+import './assets/main.css'
 
-import { createApp } from 'vue';
+import { createApp } from 'vue'
-import { createPinia } from 'pinia';
+import App from './App.vue'
-import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
+import router from './router'
-import App from '@/App.vue';
-import router from '@/router';
-import vClickOutside from '@/directives/v-click-outside';
 
-const app = createApp(App);
+const app = createApp(App)
 
-const pinia = createPinia();
+app.use(router)
-pinia.use(piniaPluginPersistedstate);
 
-app.directive('click-outside', vClickOutside);
+app.mount('#app')
-app.use(pinia);
-app.use(router);
-
-app.mount('#app');

webapp/frontend/src/map.js

@@ -1,7 +1,18 @@
-import { markRaw } from 'vue';
 import moment from 'moment';
-import { hasNodeUplinkedToMqttRecently, getRegionFrequencyRange, escapeString, formatPositionPrecision } from '@/utils';
+import 'leaflet/dist/leaflet.js';
-import { useMapStore } from '@/stores/mapStore';
+const L = window.L;
+import 'leaflet.markercluster/dist/leaflet.markercluster.js';
+import 'leaflet-groupedlayercontrol/dist/leaflet.groupedlayercontrol.min.js';
+import { 
+    escapeString,
+    findNodeById,
+    getRegionFrequencyRange,
+    hasNodeUplinkedToMqttRecently,
+    formatPositionPrecision,
+    getTerrainProfileImage,
+} from './utils.js';
+import { state } from './store.js';
+import { markRaw } from 'vue';
 
 // state/config
 let instance = null;
@@ -13,66 +24,72 @@ export function getMap() {
 }
 
 export const layerGroups = {
-    nodes: {},
+    nodes: new L.LayerGroup(),
-    neighbors: {},
+    neighbors: new L.LayerGroup(),
-    waypoints: {},
+    waypoints: new L.LayerGroup(),
-    nodePositionHistory: {},
+    nodePositionHistory: new L.LayerGroup(),
-    nodeNeighbors: {},
+    nodeNeighbors: new L.LayerGroup(),
-    nodesRouter: {},
+    nodesRouter: L.markerClusterGroup({
-    nodesClustered: {},
+        showCoverageOnHover: false,
-    legend: {},
+        disableClusteringAtZoom: 10, // zoom level where node clustering is disabled
-    none: {},
+    }),
+    nodesClustered: L.markerClusterGroup({
+        showCoverageOnHover: false,
+        disableClusteringAtZoom: 10, // zoom level where node clustering is disabled
+    }),
+    legend: new L.LayerGroup(),
+    none: new L.LayerGroup(),
 };
 
-export const tileLayers = [
+export const tileLayers = {
-    {
+    "OpenStreetMap": L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        id: 'OpenStreetMap',
+        maxZoom: 22, // increase from 18 to 22
-        display: 'Open Street Map',
-        tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
-        sourceExtraParams: {
-            tileSize: 256,
         attribution: 'Tiles &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> | Data from <a target="_blank" href="https://meshtastic.org/docs/software/integrations/mqtt/">Meshtastic</a>',
-            maxzoom: 22
+    }),
-        }
+    "OpenTopoMap": L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
-    },
+        maxZoom: 17, // open topo map doesn't have tiles closer than this
-    {
+        attribution: 'Tiles &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-        id: 'OpenTopoMap',
+    }),
-        display: 'Open Topo Map',
+    "Esri Satellite": L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
-        tiles: ['https://tile.opentopomap.org/{z}/{x}/{y}.png'],
+        maxZoom: 21, // esri doesn't have tiles closer than this
-        sourceExtraParams: {
+        attribution: 'Tiles &copy; <a href="https://developers.arcgis.com/documentation/mapping-apis-and-services/deployment/basemap-attribution/">Esri</a> | Data from <a target="_blank" href="https://meshtastic.org/docs/software/integrations/mqtt/">Meshtastic</a>'
-            tileSize: 256,
+    }),
-            attribution: 'Tiles &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>"',
+    "Google Satellite": L.tileLayer('https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
-            maxzoom: 17
+        maxZoom: 21,
-        }
+        subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
-    },
+        attribution: 'Tiles &copy; Google | Data from <a target="_blank" href="https://meshtastic.org/docs/software/integrations/mqtt/">Meshtastic</a>'
-    {
+    }),
-        id: 'esriSatellite',
+    "Google Hybrid": L.tileLayer('https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
-        display: 'ESRI Satellite',
+        maxZoom: 21,
-        tiles: ['https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'],
+        subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
-        sourceExtraParams: {
+        attribution: 'Tiles &copy; Google | Data from <a target="_blank" href="https://meshtastic.org/docs/software/integrations/mqtt/">Meshtastic</a>'
-          tileSize: 256,
+    }),
-          attribution: 'Tiles &copy; <a href="https://developers.arcgis.com/documentation/mapping-apis-and-services/deployment/basemap-attribution/">Esri</a> | Data from <a target="_blank" href="https://meshtastic.org/docs/software/integrations/mqtt/">Meshtastic</a>',
+};
-          maxzoom: 21
+
-        }
+export const icons = {
-    },
+    mqttConnected: L.divIcon({
-    {
+        className: 'icon-mqtt-connected',
-        id: 'googleSatellite',
+        iconSize: [16, 16], // increase from 12px to 16px to make hover easier
-        display: 'Google Satellite',
+    }),
-        tiles: ['https://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}'],
+    mqttDisconnected: L.divIcon({
-        sourceExtraParams: {
+        className: 'icon-mqtt-disconnected',
-            tileSize: 256,
+        iconSize: [16, 16], // increase from 12px to 16px to make hover easier
-            attribution: 'Tiles &copy; Google | Data from <a target="_blank" href="https://meshtastic.org/docs/software/integrations/mqtt/">Meshtastic</a>',
+    }),
-            maxzoom: 21
+    offline: L.divIcon({
-        }
+        className: 'icon-offline',
-    }
+        iconSize: [16, 16], // increase from 12px to 16px to make hover easier
-];
+    }),
-export const icons = {mqttConnected: '#16a34a', mqttDisconnected: '#2563eb', offline: '#dc2626', positionHistory: '#a855f7'};
+    positionHistory: L.divIcon({
+        className: 'icon-position-history',
+        iconSize: [16, 16], // increase from 12px to 16px to make hover easier
+    }),
+};
+
 // tooltips
 
 export function getTooltipContentForWaypoint(waypoint) {
     // get from node name
-    const mapData = useMapStore();
+    var fromNode = findNodeById(waypoint.from);
-    var fromNode = mapData.findNodeById(waypoint.from);
 
     var tooltip = `<b>${escapeString(waypoint.name)}</b>` +
         (waypoint.description ? `<br/>${escapeString(waypoint.description)}` : '') +
@@ -95,48 +112,179 @@ export function getTooltipContentForWaypoint(waypoint) {
     return tooltip;
 };
 
+export function getTooltipContentForNode(node) {
+    // determine if node was recently heard uplinking packets to mqtt
+    const nodeHasUplinkedToMqttRecently = hasNodeUplinkedToMqttRecently(node);
+    var mqttStatus = `<span class="text-blue-700">Disconnected</span>`;
+    if(node.mqtt_connection_state_updated_at){
+        var mqttStatusUpdatedAt = moment(new Date(node.mqtt_connection_state_updated_at)).fromNow();
+        if(nodeHasUplinkedToMqttRecently){
+            mqttStatus = `<span><span class="text-green-700">Connected</span> (${mqttStatusUpdatedAt})</span>`;
+        } else {
+            mqttStatus = `<span><span class="text-blue-700">Disconnected</span> (${mqttStatusUpdatedAt})</span>`;
+        }
+    }
+
+    var loraFrequencyRange = getRegionFrequencyRange(node.region_name);
+
+    var tooltip = `<img class="mb-4 w-40 mx-auto" src="/images/devices/${node.hardware_model_name}.png" onerror="this.classList.add('hidden')"/>` +
+        `<b>${escapeString(node.long_name)}</b>` +
+        `<br/>Short Name: ${escapeString(node.short_name)}` +
+        `<br/>MQTT: ${mqttStatus}` +
+        (node.num_online_local_nodes != null ? `<br/>Local Nodes Online: ${node.num_online_local_nodes}` : '') +
+        (node.position_precision != null && node.position_precision !== 32 ? `<br/>Position Precision: ${formatPositionPrecision(node.position_precision)}` : '') +
+        `<br/><br/>Role: ${node.role_name}` +
+        `<br/>Hardware: ${node.hardware_model_name}` +
+        (node.firmware_version != null ? `<br/>Firmware: ${node.firmware_version}` : '') +
+        (node.region_name != null ? `<br/>LoRa Region: ${node.region_name} (${loraFrequencyRange})` : '') +
+        (node.modem_preset_name != null ? `<br/>Modem Preset: ${node.modem_preset_name}` : '') +
+        (node.has_default_channel != null ? `<br/>Has Default Channel: ${node.has_default_channel ? "Yes" : "No"}` : '');
+
+    if(node.battery_level){
+        if(node.battery_level > 100){
+            tooltip += `<br/>Battery: ${node.battery_level > 100 ? 'Plugged In' : node.battery_level}`;
+        } else {
+            tooltip += `<br/>Battery: ${node.battery_level}%`;
+        }
+    }
+
+    if(node.voltage){
+        tooltip += `<br/>Voltage: ${Number(node.voltage).toFixed(2)}V`;
+    }
+
+    if(node.channel_utilization){
+        tooltip += `<br/>Ch Util: ${Number(node.channel_utilization).toFixed(2)}%`;
+    }
+
+    if(node.air_util_tx){
+        tooltip += `<br/>Air Util: ${Number(node.air_util_tx).toFixed(2)}%`;
+    }
+
+    // ignore alt above 42949000 due to https://github.com/meshtastic/firmware/issues/3109
+    if(node.altitude && node.altitude < 42949000){
+        tooltip += `<br/>Altitude: ${node.altitude}m`;
+    }
+
+    // bottom info
+    tooltip += `<br/><br/>ID: ${node.node_id}`;
+    tooltip += `<br/>Hex ID: ${node.node_id_hex}`;
+    tooltip += `<br/>Updated: ${moment(new Date(node.updated_at)).fromNow()}`;
+    tooltip += (node.neighbours_updated_at ? `<br/>Neighbours Updated: ${moment(new Date(node.neighbours_updated_at)).fromNow()}` : '');
+    tooltip += (node.position_updated_at ? `<br/>Position Updated: ${moment(new Date(node.position_updated_at)).fromNow()}` : '');
+
+    // show details button
+    tooltip += `<br/><br/><button onclick="showNodeDetails(${node.node_id});" class="border border-gray-300 bg-gray-100 p-1 w-full rounded hover:bg-gray-200 mb-1">Show Full Details</button>`;
+    tooltip += `<br/><button onclick="window.showNodeNeighboursThatHeardUs(${node.node_id});" class="border border-gray-300 bg-gray-100 p-1 w-full rounded hover:bg-gray-200 mb-1">Show Neighbours (Heard Us)</button>`;
+    tooltip += `<br/><button onclick="window.showNodeNeighboursThatWeHeard(${node.node_id});" class="border border-gray-300 bg-gray-100 p-1 w-full rounded hover:bg-gray-200">Show Neighbours (We Heard)</button>`;
+    tooltip += `</div>`;
+
+    return tooltip;
+}
+
 export function getNeighbourTooltipContent(type, node, neighbourNode, distanceInMeters, snr) {
-    return '';
+    // default to showing distance in meters
+    let distance = `${distanceInMeters} meters`;
+
+    // scale to distance in kms
+    if (distanceInMeters >= 1000) {
+        const distanceInKilometers = (distanceInMeters / 1000).toFixed(2);
+        distance = `${distanceInKilometers} kilometers`;
+    }
+
+    const terrainImageUrl = type === 'weHeard' ? getTerrainProfileImage(node, neighbourNode) : getTerrainProfileImage(neighbourNode, node);
+
+    const templates = {
+        'weHeard': `<b>[${escapeString(node.short_name)}] ${escapeString(node.long_name)}</b> heard <b>[${escapeString(neighbourNode.short_name)}] ${escapeString(neighbourNode.long_name)}</b>`
+            + `<br/>SNR: ${snr}dB`
+            + `<br/>Distance: ${distance}`
+            + `<br/><br/>ID: ${node.node_id} heard ${neighbourNode.node_id}`
+            + `<br/>Hex ID: ${node.node_id_hex} heard ${neighbourNode.node_id_hex}`
+            + (node.neighbours_updated_at ? `<br/>Updated: ${moment(new Date(node.neighbours_updated_at)).fromNow()}` : '')
+            + `<br/><br/>Terrain images from <a href="http://www.heywhatsthat.com" target="_blank">HeyWhatsThat.com</a>`
+            + `<br/><a href="${terrainImageUrl}" target="_blank"><img src="${terrainImageUrl}" width="100%"></a>`,
+        'theyHeard': `<b>[${escapeString(neighbourNode.short_name)}] ${escapeString(neighbourNode.long_name)}</b> heard <b>[${escapeString(node.short_name)}] ${escapeString(node.long_name)}</b>`
+            + `<br/>SNR: ${snr}dB`
+            + `<br/>Distance: ${distance}`
+            + `<br/><br/>ID: ${neighbourNode.node_id} heard ${node.node_id}`
+            + `<br/>Hex ID: ${neighbourNode.node_id_hex} heard ${node.node_id_hex}`
+            + (neighbourNode.neighbours_updated_at ? `<br/>Updated: ${moment(new Date(neighbourNode.neighbours_updated_at)).fromNow()}` : '')
+            + `<br/><br/>Terrain images from <a href="http://www.heywhatsthat.com" target="_blank">HeyWhatsThat.com</a>`
+            + `<br/><a href="${terrainImageUrl}" target="_blank"><img src="${terrainImageUrl}" width="100%"></a>`,
+    }
+
+    return templates[type];
 }
 
 // cleanup
 
 export function clearAllNodes() {
-
+    layerGroups.nodes.clearLayers();
+    layerGroups.nodesClustered.clearLayers();
+    layerGroups.nodesRouter.clearLayers();
 };
 
 export function clearAllNeighbors() {
-
+    layerGroups.neighbors.clearLayers();
 };
 
 export function clearAllWaypoints() {
-
+    layerGroups.waypoints.clearLayers();
 };
 
 export function clearAllPositionHistory() {
-
+    layerGroups.nodePositionHistory.clearLayers();
 };
 
 export function cleanUpPositionHistory() {
+    // close tooltips and popups
+    closeAllPopups();
+    closeAllTooltips();
 
+    // setup node neighbours layer
+    layerGroups.nodePositionHistory.clearLayers();
+    layerGroups.nodePositionHistory.removeFrom(getMap());
+    layerGroups.nodePositionHistory.addTo(getMap());
 };
 
 export function closeAllTooltips() {
-
+    getMap().eachLayer(function(layer) {
+        if (layer.options.pane === 'tooltipPane') {
+            layer.removeFrom(getMap());
+        }
+    });
 };
 
 export function closeAllPopups() {
-
+    getMap().eachLayer(function(layer) {
+        if (layer.options.pane === 'popupPane') {
+            layer.removeFrom(getMap());
+        }
+    });
 };
 
 export function cleanUpNodeNeighbors() {
-
+    // close tooltips and popups
+    closeAllPopups();
+    closeAllTooltips();
+    // setup node neighbours layer
+    layerGroups.nodeNeighbors.clearLayers();
+    layerGroups.nodeNeighbors.removeFrom(getMap());
+    layerGroups.nodeNeighbors.addTo(getMap());
 };
 
 export function clearNodeOutline() {
-    getMap().getSource('node-outlines').setData({});
+    if (state.selectedNodeOutlineCircle) {
+        state.selectedNodeOutlineCircle.removeFrom(getMap());
+        state.selectedNodeOutlineCircle = null;
+    }
 };
 
 export function clearMap() {
-
+    closeAllPopups();
+    closeAllTooltips();
+    clearAllNodes();
+    clearAllNeighbors();
+    clearAllWaypoints();
+    clearNodeOutline();
+    cleanUpNodeNeighbors();
 };

webapp/frontend/src/router/index.js

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '@/views/HomeView.vue'
+import HomeView from '../views/HomeView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),

webapp/frontend/src/store.js

@@ -1,8 +1,13 @@
 import { reactive, computed } from 'vue';
 
 export const state = reactive({
+    // caches
+    nodes: [],
+    waypoints: [],
+    nodeMarkers: {},
+
     // state
-    searchText: '', // moved to ui store, maybe should not be there though?
+    searchText: '',
     selectedNodeOutlineCircle: null,
     selectedNodeMqttMetrics: [],
     selectedNodeTraceroutes: [],
@@ -17,6 +22,36 @@ export const state = reactive({
     selectedNodeToShowPositionHistory: null,
     positionHistoryDateTimeTo: null,
     positionHistoryDateTimeFrom: null,
+
+    // ui
+    loading: false,
+    settingsVisible: false,
+    hardwareStatsVisible: false,
+    infoModalVisible: false,
+    mobileSearchVisible: false,
+    positionHistoryModalExpanded: false,
+    announcementVisible: false,
+});
+
+export const searchedNodes = computed(() => {
+    // search nodes
+    const nodes = state.nodes.filter((node) => {
+        const matchesId = node.node_id?.toLowerCase()?.includes(state.searchText.toLowerCase());
+        const matchesHexId = node.node_id_hex?.toLowerCase()?.includes(state.searchText.toLowerCase());
+        const matchesLongName = node.long_name?.toLowerCase()?.includes(state.searchText.toLowerCase());
+        const matchesShortName = node.short_name?.toLowerCase()?.includes(state.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);
 });
 
 export const selectedNodeLatestPowerMetric = computed(() => {

webapp/frontend/src/stores/configStore.js

@@ -1,39 +0,0 @@
-import { defineStore } from 'pinia';
-
-// Define your store
-export const useConfigStore = defineStore('config', {
-  state: () => ({
-    // String values
-    temperatureFormat: 'fahrenheit',  // Default value
-    // Boolean values
-    autoUpdatePositionInUrl: true,
-    enableMapAnimations: true,
-    hasSeenInfoModal: false,
-
-    // Time in seconds (for max age values)
-    nodesMaxAge: null,
-    nodesDisconnectedAge: 604800,  // Default value
-    nodesOfflineAge: null,
-    waypointsMaxAge: 604800, // Default value
-
-    // Number values (zoom level, IDs)
-    goToNodeZoomLevel: 15,
-    lastSeenAnnouncementId: 1,
-
-    // Distance values (for max distances)
-    neighboursMaxDistance: null,
-
-    // Device info ranges (can be persisted)
-    deviceMetricsTimeRange: '3d',
-    powerMetricsTimeRange: '3d',
-    environmentMetricsTimeRange: '3d',
-
-    // Map config
-    enabledOverlayLayers: ['Legend', 'Position History'],
-    selectedTileLayerName: 'OpenStreetMap'
-  }),
-  // Automatically persist the state in localStorage
-  persist: {
-    storage: localStorage,  // Use localStorage (default is sessionStorage)
-  },
-});

webapp/frontend/src/stores/mapStore.js

@@ -1,55 +0,0 @@
-import { defineStore } from 'pinia';
-
-export const useMapStore = defineStore('map', {
-  state: () => ({
-    nodes: [],
-    waypoints: [],
-    nodeMarkers: {},
-    waypointMarkers: [],
-  }),
-  actions: {
-    setNodes(nodes) {
-      this.nodes = nodes;
-    },
-    setNodeMarkers(markers) {
-        this.nodeMarkers = markers;
-    },
-    addNode(node, marker) {
-        // TODO do validation i.e. does it exist already?
-        this.nodes.push(node);
-        // allow undefined/null marker (nodes don't always have a marker)
-        if (typeof marker === 'object') this.addNodeMarker(marker);
-    },
-    addNodeMarker(marker) {
-        // TODO do validation checking here -- i.e. do we have the node? is marker.proprties.id set? does it exist already?
-        this.nodeMarkers[marker.properties.id] = marker;
-    },
-    clearNodes() {
-        this.nodes = [];
-        this.nodeMarkers = {};
-    },
-    setWaypoints(waypoints) {
-        this.waypoints = waypoints;
-    },
-    addWaypoint(waypoint, marker) {
-        this.waypoints.push(waypoint);
-        this.addWaypointMarker(marker);
-    },
-    addWaypointMarker(marker) {
-        this.waypointMarkers.push(marker);
-    },
-    clearWaypoints() {
-        this.waypoints = [];
-        this.waypointMarkers = [];
-    },
-    findNodeById(id) {
-        return this.nodes.find((node) => node.node_id.toString() === id.toString()) ?? null;
-    },
-    findNodeMarkerById(id) {
-        return this.nodeMarkers[id] ?? null;
-    },
-    findRandomNode() {
-        return this.nodes[Math.floor(Math.random() * this.nodes.length)] ?? null;
-    },
-  },
-});

webapp/frontend/src/stores/uiStore.js

@@ -1,82 +0,0 @@
-import { defineStore } from 'pinia';
-
-export const useUIStore = defineStore('ui', {
-  state: () => ({
-    searchText: '',
-    loading: false,
-    settingsVisible: false,
-    hardwareStatsVisible: false,
-    infoModalVisible: false,
-    mobileSearchVisible: false,
-    positionHistoryModalExpanded: false,
-    announcementVisible: false,
-  }),
-  actions: {
-    search(text) {
-        this.searchText = text;
-    },
-    clearSearch() {
-        this.search('');
-    },
-    showMobileSearch() {
-        this.mobileSearchVisible = true;
-    },
-    hideMobileSearch() {
-        this.mobileSearchVisible = false;
-    },
-    toggleMobileSearch() {
-        this.mobileSearchVisible = !this.mobileSearchVisible;
-    },
-    expandPositionHistoryModal() {
-        this.positionHistoryModalExpanded = true;
-    },
-    collapsePositionHistoryModal() {
-        this.positionHistoryModalExpanded = false;
-    },
-    togglePositionHistoryModalExpansion() {
-        this.positionHistoryModalExpanded = !this.positionHistoryModalExpanded;
-    },
-    showSettings() {
-        this.settingsVisible = true;
-    },
-    hideSettings() {
-        this.settingsVisible = false;
-    },
-    toggleSettings() {
-      this.settingsVisible = !this.settingsVisible;
-    },
-    showAnnouncement() {
-        this.showAnnouncement = true;
-    },
-    hideAnnouncement() {
-        this.showAnnouncement = false;
-    },
-    toggleAnnouncement() {
-        this.announcementVisible = !this.announcementVisible;
-    },
-    showInfoModal() {
-        this.infoModalVisible = true;
-    },
-    hideInfoModal() {
-        this.infoModalVisible = false;
-    },
-    toggleInfoModal() {
-        this.infoModalVisible = !this.infoModalVisible;
-    },
-    showHardwareStats() {
-        this.hardwareStatsVisible = true;
-    },
-    hideHardwareStats() {
-        this.hardwareStatsVisible = false;
-    },
-    toggleHardwareStats() {
-        this.hardwareStatsVisible = !this.hardwareStatsVisible;
-    },
-    startLoading() {
-        this.loading = true;
-    },
-    stopLoading() {
-        this.loading = false;
-    },
-  }
-});

webapp/frontend/src/utils.js

@@ -1,5 +1,5 @@
-import { BASE_PATH } from '@/config';
+import { state } from './store.js';
-import { useConfigStore } from '@/stores/configStore';
+import { temperatureFormat, nodesDisconnectedAge, BASE_PATH } from './config.js';
 import moment from 'moment';
 
 export const timeSpans = {
@@ -19,10 +19,6 @@ export function getTimeSpan(value) {
     return timeSpans[value];
 };
 
-export function isValidCoordinates(lat, lng) {
-    return lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180;
-}
-
 // convert node id to a hex colour
 export function getNodeColor(nodeId) {
     return "#" + (nodeId & 0x00FFFFFF).toString(16).padStart(6, '0');
@@ -206,10 +202,25 @@ export function celsiusToFahrenheit(celsius) {
     return (celsius * 9/5) + 32;
 };
 
+
+/** operates on state */
+
+// find node by id
+export function findNodeById(id) {
+    const node = state.nodes.find((node) => node.node_id.toString() === id.toString());
+    if (node) return node;
+    return null;
+};
+
+// find node marker by id
+export function findNodeMarkerById(id) {
+    return state.nodeMarkers[id] ?? null;
+};
+
 /** operates on config */
 
 export function formatTemperature(celsius) {
-    switch (useConfigStore().temperatureFormat) {
+    switch (temperatureFormat.value) {
         case "celsius": {
             return `${Number(celsius).toFixed(0)}ºC`;
         }
@@ -221,7 +232,7 @@ export function formatTemperature(celsius) {
 }
 
 export function getTemperatureUnit() {
-    switch (useConfigStore().temperatureFormat) {
+    switch (temperatureFormat.value) {
         case "celsius": return "ºC";
         case "fahrenheit": return "ºF";
     }
@@ -235,5 +246,5 @@ export function buildPath(endpoint) {
 export function hasNodeUplinkedToMqttRecently(node) {
     const now = moment();
     const millisecondsSinceNodeLastUplinkedToMqtt = now.diff(moment(node.mqtt_connection_state_updated_at));
-    return millisecondsSinceNodeLastUplinkedToMqtt < useConfigStore().nodesDisconnectedAge.value * 1000;
+    return millisecondsSinceNodeLastUplinkedToMqtt < nodesDisconnectedAge.value * 1000;
 }

webapp/frontend/vite.config.js

@@ -2,6 +2,7 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueDevTools from 'vite-plugin-vue-devtools'
 import tailwindcss from '@tailwindcss/vite'
 
@@ -9,6 +10,7 @@ import tailwindcss from '@tailwindcss/vite'
 export default defineConfig({
   plugins: [
     vue(),
+    vueJsx(),
     vueDevTools(),
     tailwindcss(),
   ],