added SNR lines for neighborInfo and direct routes in map

Author: jamon

src/core/stores/deviceStore.ts

@@ -52,6 +52,7 @@ export interface Device {
   activePage: Page;
   activeNode: number;
   waypoints: Protobuf.Mesh.Waypoint[];
+  neighborInfo: Map<number, Protobuf.Mesh.NeighborInfo>;
   // currentMetrics: Protobuf.DeviceMetrics;
   pendingSettingsChanges: boolean;
   messageDraft: string;
@@ -76,6 +77,10 @@ export interface Device {
   setActivePage: (page: Page) => void;
   setActiveNode: (node: number) => void;
   setPendingSettingsChanges: (state: boolean) => void;
+  setNeighborInfo: (
+    nodeId: number,
+    neighborInfo: Protobuf.Mesh.NeighborInfo,
+  ) => void;
   addChannel: (channel: Protobuf.Channel.Channel) => void;
   addWaypoint: (waypoint: Protobuf.Mesh.Waypoint) => void;
   addNodeInfo: (nodeInfo: Protobuf.Mesh.NodeInfo) => void;
@@ -151,6 +156,20 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
           },
           pendingSettingsChanges: false,
           messageDraft: "",
+          neighborInfo: new Map<number, Protobuf.Mesh.NeighborInfo>(),
+          setNeighborInfo: (
+            nodeId: number,
+            neighborInfo: Protobuf.Mesh.NeighborInfo,
+          ) => {
+            set(
+              produce<DeviceState>((draft) => {
+                const device = draft.devices.get(id);
+                if (device) {
+                  device.neighborInfo.set(nodeId, neighborInfo);
+                }
+              }),
+            );
+          },
 
           setStatus: (status: Types.DeviceStatusEnum) => {
             set(

src/core/subscriptions.ts

@@ -5,6 +5,7 @@ export const subscribeAll = (
   device: Device,
   connection: Types.ConnectionType,
 ) => {
+  // Set device as a global variable for debugging
   let myNodeNum = 0;
 
   // onLogEvent
@@ -87,6 +88,7 @@ export const subscribeAll = (
   });
 
   connection.events.onTraceRoutePacket.subscribe((traceRoutePacket) => {
+    console.log("Trace Route Packet", traceRoutePacket);
     device.addTraceRoute({
       ...traceRoutePacket,
     });
@@ -103,4 +105,8 @@ export const subscribeAll = (
       time: meshPacket.rxTime,
     });
   });
+
+  connection.events.onNeighborInfoPacket.subscribe((neighborInfo) => {
+    device.setNeighborInfo(neighborInfo.from, neighborInfo.data);
+  });
 };

src/pages/Map/index.tsx

@@ -12,14 +12,35 @@ import { type JSX, useCallback, useEffect, useMemo, useState } from "react";
 import {
   AttributionControl,
   GeolocateControl,
+  Layer,
   Marker,
   NavigationControl,
   Popup,
   ScaleControl,
+  Source,
   useMap,
 } from "react-map-gl";
 import MapGl from "react-map-gl/maplibre";
 
+// taken from android client these probably should be moved into a shared file
+const SNR_GOOD_THRESHOLD = -7;
+const SNR_FAIR_THRESHOLD = -15;
+const RSSI_GOOD_THRESHOLD = -115;
+const RSSI_FAIR_THRESHOLD = -126;
+const LINE_GOOD_COLOR = "#00ff00";
+const LINE_FAIR_COLOR = "#ffe600";
+const LINE_BAD_COLOR = "#f7931a";
+
+const getSignalColor = (snr: number, rssi?: number) => {
+  if (snr > SNR_GOOD_THRESHOLD && (rssi == null || rssi > RSSI_GOOD_THRESHOLD))
+    return LINE_GOOD_COLOR;
+  if (snr > SNR_FAIR_THRESHOLD && (rssi == null || rssi > RSSI_FAIR_THRESHOLD))
+    return LINE_FAIR_COLOR;
+  return LINE_BAD_COLOR;
+};
+
+const DIRECT_NODE_TIMEOUT = 60 * 20; // 60 seconds * ? minutes
+
 type NodePosition = {
   latitude: number;
   longitude: number;
@@ -33,8 +54,72 @@ const convertToLatLng = (position: {
   longitude: (position.longitudeI ?? 0) / 1e7,
 });
 
+const generateNeighborLines = (
+  nodes: {
+    node: Protobuf.Mesh.NodeInfo;
+    neighborInfo: Protobuf.Mesh.NeighborInfo;
+  }[],
+) => {
+  const features = [];
+  for (const { node, neighborInfo } of nodes) {
+    const start = convertToLatLng(node.position);
+    if (!neighborInfo) continue;
+    for (const neighbor of neighborInfo.neighbors) {
+      const toNode = nodes.find((n) => n.node.num === neighbor.nodeId)?.node;
+      if (!toNode) continue;
+      const end = convertToLatLng(toNode.position);
+      features.push({
+        type: "Feature",
+        geometry: {
+          type: "LineString",
+          coordinates: [
+            [start.longitude, start.latitude],
+            [end.longitude, end.latitude],
+          ],
+        },
+        properties: {
+          color: getSignalColor(neighbor.snr),
+        },
+      });
+    }
+  }
+
+  return {
+    type: "FeatureCollection",
+    features,
+  };
+};
+const generateDirectLines = (nodes: Protobuf.Mesh.NodeInfo[]) => {
+  const features = [];
+  for (const node of nodes) {
+    if (!node.position) continue;
+    if (node.hopsAway > 0) continue;
+    if (Date.now() / 1000 - node.lastHeard > DIRECT_NODE_TIMEOUT) continue;
+    const start = convertToLatLng(node.position);
+    const selfNode = nodes.find((n) => n.isFavorite);
+    const end = convertToLatLng(selfNode.position);
+    features.push({
+      type: "Feature",
+      geometry: {
+        type: "LineString",
+        coordinates: [
+          [start.longitude, start.latitude],
+          [end.longitude, end.latitude],
+        ],
+      },
+      properties: {
+        color: getSignalColor(node.snr),
+      },
+    });
+  }
+
+  return {
+    type: "FeatureCollection",
+    features,
+  };
+};
 const MapPage = (): JSX.Element => {
-  const { nodes, waypoints } = useDevice();
+  const { nodes, waypoints, neighborInfo } = useDevice();
   const currentTheme = useTheme();
   const { default: map } = useMap();
 
@@ -131,6 +216,19 @@ const MapPage = (): JSX.Element => {
     [validNodes, handleMarkerClick],
   );
 
+  const neighborLines = useMemo(() => {
+    return generateNeighborLines(
+      validNodes.map((vn) => ({
+        node: vn,
+        neighborInfo: neighborInfo.get(vn.num),
+      })),
+    );
+  }, [validNodes, neighborInfo]);
+
+  const directLines = useMemo(
+    () => generateDirectLines(validNodes),
+    [validNodes],
+  );
   useEffect(() => {
     map?.on("load", () => {
       getMapBounds();
@@ -185,6 +283,26 @@ const MapPage = (): JSX.Element => {
             </Marker>
           ))}
           {markers}
+          <Source id="neighbor-lines" type="geojson" data={neighborLines}>
+            <Layer
+              id="neighborLineLayer"
+              type="line"
+              paint={{
+                "line-color": ["get", "color"],
+                "line-width": 2,
+              }}
+            />
+          </Source>
+          <Source id="direct-lines" type="geojson" data={directLines}>
+            <Layer
+              id="directLineLayer"
+              type="line"
+              paint={{
+                "line-color": ["get", "color"],
+                "line-width": 4,
+              }}
+            />
+          </Source>
           {selectedNode ? (
             <Popup
               anchor="top"