Show arrows pointing to the receiving node when neighbor lines are di…

…rectional

src/web_interface.rs

@@ -801,10 +801,16 @@ async fn style_json(web_config: State<WebConfig>) -> impl IntoResponse {
             "data": { "type": "FeatureCollection", "features": [] },
             "promoteId": "id",
         },
+        "neighbors-snr": {
+            "type": "geojson",
+            "buffer": 512,
+            "maxzoom": 10, // This is a separate source with a lower maxzoom to fix rendering issues with SNR values.
+            "data": { "type": "FeatureCollection", "features": [] },
+        },
         "neighbors": {
             "type": "geojson",
             "buffer": 512,
-            "maxzoom": 10,
+            "maxzoom": 16,
             "data": { "type": "FeatureCollection", "features": [] },
         },
         "positions": {
@@ -848,9 +854,27 @@ async fn style_json(web_config: State<WebConfig>) -> impl IntoResponse {
 
     let stellar_layers = vec![
         json!({
-            "id": "neighbor-snr",
+            "id": "neighbor-direction-layer",
             "type": "symbol",
             "source": "neighbors",
+            "layout": {
+                "symbol-placement": "line",
+                "symbol-avoid-edges": true,
+                "symbol-z-order": "source",
+                "symbol-spacing": 250,
+                "icon-image": "arrow-symbol",
+                "icon-size": 0.6,
+                "icon-overlap": "never",
+                "icon-optional": true,
+                "icon-rotation-alignment": "map",
+                "icon-keep-upright": false,
+            },
+            "filter": ["==", "directional", true]
+        }),
+        json!({
+            "id": "neighbor-snr",
+            "type": "symbol",
+            "source": "neighbors-snr",
             "layout": {
                 "symbol-placement": "line-center",
                 "symbol-avoid-edges": true,

static/application.js

@@ -188,39 +188,45 @@ function _updateNodeGeoJSON() {
         .filter((node) => node.neighbors && node.neighbors.length > 0 && (selectedIndex == -1 || node.selected))
         .flatMap((node) => {
             return node.neighbors.map((neighbor) => {
-                const nodes = [node.id, neighbor.neighbor].sort()
+                const nodes = [node.id, neighbor.neighbor].sort();
+                const key = nodes[0] + "|" + nodes[1];
 
                 return {
-                    a: nodes[0],
-                    b: nodes[1],
+                    key: key,
+                    source: node.id,
+                    target: neighbor.neighbor,
                     snr: neighbor.snr,
                     timestamp: neighbor.timestamp
                 };
             });
         })
-        .filter((neighbor) => nodeFeaturesById[neighbor.a] && nodeFeaturesById[neighbor.b])
+        .filter((neighbor) => nodeFeaturesById[neighbor.source] && nodeFeaturesById[neighbor.target])
         .sort((neighborA, neighborB) => neighborB.timestamp - neighborA.timestamp);
 
-    const neighborSet = new Set();
-    const neighborFeatures = [];
+    const neighborCounts = {};
     neighbors.forEach((neighbor) => {
-        const key = neighbor.a + "-" + neighbor.b;
+        neighborCounts[neighbor.key] = (neighborCounts[neighbor.key] || 0) + 1;
+    });
 
-        if (neighborSet.has(key)) return;
-        neighborSet.add(key);
+    const neighborFeatures = [];
+    neighbors.forEach((neighbor) => {
+        if (!neighborCounts.hasOwnProperty(neighbor.key)) return;
+        const isBidirectional = neighborCounts[neighbor.key] > 1;
+        delete neighborCounts[neighbor.key];
 
         neighborFeatures.push({
             "type": "Feature",
             "geometry": {
                 "type": "LineString",
                 "coordinates": [
-                    nodeFeaturesById[neighbor.a].geometry.coordinates,
-                    nodeFeaturesById[neighbor.b].geometry.coordinates,
+                    nodeFeaturesById[neighbor.source].geometry.coordinates,
+                    nodeFeaturesById[neighbor.target].geometry.coordinates,
                 ]
             },
             "properties": {
-                "id": key,
-                "snr": neighbor.snr
+                "id": neighbor.key,
+                "snr": neighbor.snr,
+                "directional": !isBidirectional,
             }
         });
     });
@@ -229,6 +235,7 @@ function _updateNodeGeoJSON() {
 
     map?.getSource('nodes')?.setData(nodeGeoJSON);
     map?.getSource('neighbors')?.setData(neighborsGeoJSON);
+    map?.getSource('neighbors-snr')?.setData(neighborsGeoJSON);
 
     if (!loadingIsFinished) {
         loadingFinished();
@@ -336,9 +343,11 @@ function loadMap() {
     });
 
     let image = map.loadImage('/static/node-symbol.png');
+    let arrowImage = map.loadImage('/static/arrow.png');
 
     map.once("load", async () => {
         map.addImage('node-symbol', (await image).data, { sdf: true });
+        map.addImage('arrow-symbol', (await arrowImage).data, { sdf: true });
     });
 
     map.on('click', 'node-symbols', (e) => {