From f79ff5b7e455d03c8db47499e73d9b53f12e184e Mon Sep 17 00:00:00 2001
From: Anton Roslund <enari@minit.nu>
Date: Thu, 8 Jan 2026 18:33:16 +0100
Subject: [PATCH] Refactor connections feature: update UI for connections time
 period and add configuration for colored connection lines. Replace
 traceroute-related functionality with connections logic, including fetching
 and displaying connections on the map. Enhance tooltips for connections with
 detailed SNR information and distance metrics.

---
 src/public/index.html | 834 ++++++++++--------------------------------
 1 file changed, 195 insertions(+), 639 deletions(-)

diff --git a/src/public/index.html b/src/public/index.html
index dd0cab6..e9443d4 100644
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -1372,33 +1372,41 @@
                                 </select>
                             </div>
 
-                            <!-- configTraceroutesMaxAgeInSeconds -->
+                            <!-- configConnectionsTimePeriodInSeconds -->
                             <div class="p-2">
-                                <label class="block text-sm font-medium text-gray-900">Traceroutes Max Age</label>
-                                <div class="text-xs text-gray-600 mb-2">Traceroute edges older than this time are hidden. Reload to update map.</div>
-                                <select v-model="configTraceroutesMaxAgeInSeconds" 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>
+                                <label class="block text-sm font-medium text-gray-900">Connections Time Period</label>
+                                <div class="text-xs text-gray-600 mb-2">Edges within this time period are shown in the Connections layer. Reload to update map.</div>
+                                <select v-model="configConnectionsTimePeriodInSeconds" 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="300">5 minutes</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>
+                                    <option value="1209600">14 days</option>
+                                    <option value="2592000">30 days</option>
                                 </select>
                             </div>
 
-                            <!-- configNeighboursMaxDistanceInMeters -->
+                            <!-- configConnectionsColoredLines -->
                             <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="configNeighboursMaxDistanceInMeters" 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 class="flex items-start">
+                                    <div class="flex items-center h-5">
+                                        <input type="checkbox" v-model="configConnectionsColoredLines" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300" required>
+                                    </div>
+                                    <label class="ml-2 text-sm font-medium text-gray-900">Colored Connection Lines</label>
+                                </div>
+                                <div class="text-xs text-gray-600">Colors the connection lines by the average SNR in the worst direction. Reload to update map.</div>
+                            </div>
+
+                            <!-- configConnectionsMaxDistanceInMeters -->
+                            <div class="p-2">
+                                <label class="block text-sm font-medium text-gray-900">Connections Max Distance (meters)</label>
+                                <div class="text-xs text-gray-600 mb-2">Connections further than this are hidden. Reload to update map.</div>
+                                <input type="number" v-model="configConnectionsMaxDistanceInMeters" 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 -->
@@ -1439,37 +1447,6 @@
                                 </div>
                                 <div class="text-xs text-gray-600">Map will animate flying to nodes.</div>
                             </div>
-
-                            <!-- configConnectionsTimePeriodInSeconds -->
-                            <div class="p-2">
-                                <label class="block text-sm font-medium text-gray-900">Connections Time Period</label>
-                                <div class="text-xs text-gray-600 mb-2">Edges within this time period are shown in the Connections layer. Reload to update map.</div>
-                                <select v-model="configConnectionsTimePeriodInSeconds" 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="300">5 minutes</option>
-                                    <option value="900">15 minutes</option>
-                                    <option value="3600">1 hour</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="604800">7 days</option>
-                                    <option value="1209600">14 days</option>
-                                    <option value="2592000">30 days</option>
-                                </select>
-                            </div>
-
-                            <!-- configConnectionsColoredLines -->
-                            <div class="p-2">
-                                <div class="flex items-start">
-                                    <div class="flex items-center h-5">
-                                        <input type="checkbox" v-model="configConnectionsColoredLines" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300" required>
-                                    </div>
-                                    <label class="ml-2 text-sm font-medium text-gray-900">Colored Connection Lines</label>
-                                </div>
-                                <div class="text-xs text-gray-600">Colors the connection lines by the average SNR in the worst direction. Reload to update map.</div>
-                            </div>
-
                         </div>
 
                     </div>
@@ -1479,7 +1456,7 @@
 
     </div>
 
-    <!-- node neighbours modal -->
+    <!-- node connections modal -->
     <div class="relative z-sidebar" role="dialog" aria-modal="true">
 
         <!-- sidebar -->
@@ -1490,18 +1467,16 @@
                 leave-active-class="transition duration-300 ease-in-out transform"
                 leave-from-class="translate-y-0"
                 leave-to-class="translate-y-full">
-            <div v-show="selectedNodeToShowNeighbours != null" class="fixed left-0 right-0 bottom-0">
-                <div v-if="selectedNodeToShowNeighbours != null" class="mx-auto w-screen max-w-md p-4">
+            <div v-show="selectedNodeToShowConnections != null" class="fixed left-0 right-0 bottom-0">
+                <div v-if="selectedNodeToShowConnections != null" 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">{{ selectedNodeToShowNeighbours.short_name }} Neighbours</h2>
-                                    <h3 v-if="selectedNodeToShowNeighboursType === 'we_heard'" class="text-sm">Nodes heard by {{ selectedNodeToShowNeighbours.short_name }}</h3>
-                                    <h3 v-if="selectedNodeToShowNeighboursType === 'heard_us'" class="text-sm">Nodes that heard {{ selectedNodeToShowNeighbours.short_name }}</h3>
+                                    <h2 class="font-bold">{{ selectedNodeToShowConnections.short_name }} Connections</h2>
                                 </div>
                                 <div class="my-auto ml-3 flex h-7 items-center">
-                                    <a href="javascript:void(0)" class="rounded-full" @click="dismissShowingNodeNeighbours">
+                                    <a href="javascript:void(0)" class="rounded-full" @click="dismissShowingNodeConnections">
                                         <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>
@@ -1722,27 +1697,14 @@
         }
     }
 
-    function getConfigTraceroutesMaxAgeInSeconds() {
-        const value = localStorage.getItem("config_traceroutes_max_age_in_seconds");
-        // default to 3 days if unset, to limit payloads
-        return value != null ? parseInt(value) : 259200;
+    function getConfigConnectionsMaxDistanceInMeters() {
+        const value = localStorage.getItem("config_connections_max_distance_in_meters");
+        // default to 70km (70,000 meters)
+        return value != null ? parseInt(value) : 70000;
     }
 
-    function setConfigTraceroutesMaxAgeInSeconds(value) {
-        if(value != null){
-            return localStorage.setItem("config_traceroutes_max_age_in_seconds", value);
-        } else {
-            return localStorage.removeItem("config_traceroutes_max_age_in_seconds");
-        }
-    }
-
-    function getConfigNeighboursMaxDistanceInMeters() {
-        const value = localStorage.getItem("config_neighbours_max_distance_in_meters");
-        return value != null ? parseInt(value) : null;
-    }
-
-    function setConfigNeighboursMaxDistanceInMeters(value) {
-        return localStorage.setItem("config_neighbours_max_distance_in_meters", value);
+    function setConfigConnectionsMaxDistanceInMeters(value) {
+        return localStorage.setItem("config_connections_max_distance_in_meters", value);
     }
 
     function getConfigZoomLevelGoToNode() {
@@ -1795,8 +1757,7 @@
                 configNodesDisconnectedAgeInSeconds: window.getConfigNodesDisconnectedAgeInSeconds(),
                 configNodesOfflineAgeInSeconds: window.getConfigNodesOfflineAgeInSeconds(),
                 configWaypointsMaxAgeInSeconds: window.getConfigWaypointsMaxAgeInSeconds(),
-                configTraceroutesMaxAgeInSeconds: window.getConfigTraceroutesMaxAgeInSeconds(),
-                configNeighboursMaxDistanceInMeters: window.getConfigNeighboursMaxDistanceInMeters(),
+                configConnectionsMaxDistanceInMeters: window.getConfigConnectionsMaxDistanceInMeters(),
                 configZoomLevelGoToNode: window.getConfigZoomLevelGoToNode(),
                 configAutoUpdatePositionInUrl: window.getConfigAutoUpdatePositionInUrl(),
                 configEnableMapAnimations: window.getConfigEnableMapAnimations(),
@@ -1836,8 +1797,7 @@
                 selectedTraceRoute: null,
                 tracerouteEdges: [],
 
-                selectedNodeToShowNeighbours: null,
-                selectedNodeToShowNeighboursType: null,
+                selectedNodeToShowConnections: null,
 
                 moment: window.moment,
 
@@ -1866,15 +1826,8 @@
             };
 
             // handle node callback from outside of vue
-            window._onShowNodeNeighboursWeHeardClick = (node) => {
-                this.selectedNodeToShowNeighbours = node;
-                this.selectedNodeToShowNeighboursType = 'we_heard';
-            };
-
-            // handle node callback from outside of vue
-            window._onShowNodeNeighboursHeardUsClick = (node) => {
-                this.selectedNodeToShowNeighbours = node;
-                this.selectedNodeToShowNeighboursType = 'heard_us';
+            window._onShowNodeConnectionsClick = (node) => {
+                this.selectedNodeToShowConnections = node;
             };
 
             // handle nodes updated callback from outside of vue
@@ -2600,9 +2553,9 @@
                 alert("Link copied to clipboard!");
 
             },
-            dismissShowingNodeNeighbours: function() {
-                window._onHideNodeNeighboursClick();
-                this.selectedNodeToShowNeighbours = null;
+            dismissShowingNodeConnections: function() {
+                window._onHideNodeConnectionsClick();
+                this.selectedNodeToShowConnections = null;
             },
             dismissShowingNodePositionHistory: function() {
                 this.selectedNodePositionHistory = [];
@@ -2710,11 +2663,8 @@
             configWaypointsMaxAgeInSeconds() {
                 window.setConfigWaypointsMaxAgeInSeconds(this.configWaypointsMaxAgeInSeconds);
             },
-            configTraceroutesMaxAgeInSeconds() {
-                window.setConfigTraceroutesMaxAgeInSeconds(this.configTraceroutesMaxAgeInSeconds);
-            },
-            configNeighboursMaxDistanceInMeters() {
-                window.setConfigNeighboursMaxDistanceInMeters(this.configNeighboursMaxDistanceInMeters);
+            configConnectionsMaxDistanceInMeters() {
+                window.setConfigConnectionsMaxDistanceInMeters(this.configConnectionsMaxDistanceInMeters);
             },
             configZoomLevelGoToNode() {
                 window.setConfigZoomLevelGoToNode(this.configZoomLevelGoToNode);
@@ -2754,7 +2704,6 @@
     var nodeMarkers = {};
     var selectedNodeOutlineCircle = null;
     var waypoints = [];
-    var tracerouteEdgesCache = [];
 
     // set map bounds to be a little more than full size to prevent panning off screen
     var bounds = [
@@ -2815,9 +2764,8 @@
 
     // create layer groups
     var nodesLayerGroup = new L.LayerGroup();
-    var neighboursLayerGroup = new L.LayerGroup();
-    var backboneNeighboursLayerGroup = new L.LayerGroup();
-    var nodeNeighboursLayerGroup = new L.LayerGroup();
+    var backboneConnectionsLayerGroup = new L.LayerGroup();
+    var nodeConnectionsLayerGroup = new L.LayerGroup();
     var nodesClusteredLayerGroup = L.markerClusterGroup({
         showCoverageOnHover: false,
         disableClusteringAtZoom: 10, // zoom level where node clustering is disabled
@@ -2919,8 +2867,7 @@
         },
         "Overlays": {
             "Legend": legendLayerGroup,
-            "Neighbours": neighboursLayerGroup,
-            "Backbone Connection": backboneNeighboursLayerGroup,
+            "Backbone Connection": backboneConnectionsLayerGroup,
             "Connections": connectionsLayerGroup,
             "Waypoints": waypointsLayerGroup,
             "Position History": nodePositionHistoryLayerGroup,
@@ -2939,11 +2886,8 @@
     if(enabledOverlayLayers.includes("Legend")){
         legendLayerGroup.addTo(map);
     }
-    if(enabledOverlayLayers.includes("Neighbours")){
-        neighboursLayerGroup.addTo(map);
-    }
     if(enabledOverlayLayers.includes("Backbone Connection")){
-        backboneNeighboursLayerGroup.addTo(map);
+        backboneConnectionsLayerGroup.addTo(map);
     }
     if(enabledOverlayLayers.includes("Connections")){
         connectionsLayerGroup.addTo(map);
@@ -3106,9 +3050,8 @@
         nodesLongFastLayerGroup.clearLayers();
     }
 
-    function clearAllNeighbours() {
-        neighboursLayerGroup.clearLayers();
-        backboneNeighboursLayerGroup.clearLayers();
+    function clearAllBackboneConnections() {
+        backboneConnectionsLayerGroup.clearLayers();
     }
 
     function clearAllWaypoints() {
@@ -3121,6 +3064,7 @@
 
     function clearAllConnections() {
         connectionsLayerGroup.clearLayers();
+        backboneConnectionsLayerGroup.clearLayers();
     }
 
     function closeAllPopups() {
@@ -3226,16 +3170,16 @@
         return indicator;
     }
 
-    function cleanUpNodeNeighbours() {
+    function cleanUpNodeConnections() {
 
         // close tooltips and popups
         closeAllPopups();
         closeAllTooltips();
 
-        // setup node neighbours layer
-        nodeNeighboursLayerGroup.clearLayers();
-        nodeNeighboursLayerGroup.removeFrom(map);
-        nodeNeighboursLayerGroup.addTo(map);
+        // setup node connections layer
+        nodeConnectionsLayerGroup.clearLayers();
+        nodeConnectionsLayerGroup.removeFrom(map);
+        nodeConnectionsLayerGroup.addTo(map);
 
     }
 
@@ -3270,9 +3214,9 @@
 
     }
 
-    function showNodeNeighboursThatWeHeard(id) {
+    async function showNodeConnections(id) {
 
-        cleanUpNodeNeighbours();
+        cleanUpNodeConnections();
 
         // find node
         const node = findNodeById(id);
@@ -3286,302 +3230,76 @@
             return;
         }
 
-        // show overlay for node neighbours
-        window._onShowNodeNeighboursWeHeardClick(node);
+        // show overlay for node connections
+        window._onShowNodeConnectionsClick(node);
 
-        // Overlay ALL traceroute edges that terminate at this node (edge.to == node.node_id)
-        for (const edge of tracerouteEdgesCache) {
-            if (String(edge.to) !== String(node.node_id)) continue;
+        // Fetch connections for this node
+        const connectionsTimePeriodSec = getConfigConnectionsTimePeriodInSeconds();
+        const connectionsTimeFrom = connectionsTimePeriodSec ? (Date.now() - connectionsTimePeriodSec * 1000) : undefined;
+        const connectionsParams = new URLSearchParams();
+        connectionsParams.set('node_id', id);
+        if (connectionsTimeFrom) connectionsParams.set('time_from', connectionsTimeFrom);
+        
+        try {
+            const response = await window.axios.get(`/api/v1/connections?${connectionsParams.toString()}`);
+            const connections = response.data.connections ?? [];
 
-            const fromMarker = findNodeMarkerById(edge.from);
-            if (!fromMarker) continue;
+            for (const connection of connections) {
+                // Convert to numbers for comparison since API returns strings
+                const nodeA = parseInt(connection.node_a, 10);
+                const nodeB = parseInt(connection.node_b, 10);
 
-            const snrDb = (typeof edge.snr === 'number') ? (edge.snr === -128 ? null : (Number(edge.snr) / 4)) : null;
-            const trColour = snrDb != null ? getColourForSnr(snrDb) : '#6b7280';
+                const otherNodeId = nodeA === id ? nodeB : nodeA;
+                const otherNode = findNodeById(otherNodeId);
+                const otherNodeMarker = findNodeMarkerById(otherNodeId);
+
+                if (!otherNode || !otherNodeMarker) continue;
+
+                // Calculate distance
+                const distanceInMeters = nodeMarker.getLatLng().distanceTo(otherNodeMarker.getLatLng()).toFixed(2);
+                const configConnectionsMaxDistanceInMeters = getConfigConnectionsMaxDistanceInMeters();
+                if(configConnectionsMaxDistanceInMeters != null && parseFloat(distanceInMeters) > configConnectionsMaxDistanceInMeters){
+                    continue;
+                }
 
-            const trTooltip = (() => {
-                const fromNode = findNodeById(edge.from);
-                const toNode = findNodeById(node.node_id);
-                const distanceInMeters = fromMarker.getLatLng().distanceTo(nodeMarker.getLatLng()).toFixed(2);
                 let distance = `${distanceInMeters} meters`;
                 if (distanceInMeters >= 1000) {
-                    const km = (distanceInMeters / 1000).toFixed(2);
-                    distance = `${km} kilometers`;
+                    const distanceInKilometers = (distanceInMeters / 1000).toFixed(2);
+                    distance = `${distanceInKilometers} kilometers`;
                 }
-                const terrainImageUrl = getTerrainProfileImage(fromNode, toNode);
-                const targetNode = edge.traceroute_from ? findNodeById(edge.traceroute_from) : null;
-                const initiatorNode = edge.traceroute_to ? findNodeById(edge.traceroute_to) : null;
-                return `<b>Traceroute hop</b>`
-                    + `<br/>from <b>[${escapeString(fromNode.short_name)}] ${escapeString(fromNode.long_name)}</b>`
-                    + ` to <b>[${escapeString(toNode.short_name)}] ${escapeString(toNode.long_name)}</b>`
-                    + `<br/>SNR: ${snrDb != null ? snrDb + 'dB' : '?'}`
-                    + `<br/>Distance: ${distance}`
-                    + (initiatorNode ? `<br/>Traceroute from: <b>[${escapeString(initiatorNode.short_name)}] ${escapeString(initiatorNode.long_name)}</b>` : '')
-                    + (targetNode ? `<br/>Traceroute to: <b>[${escapeString(targetNode.short_name)}] ${escapeString(targetNode.long_name)}</b>` : '')
-                    + (edge.updated_at ? `<br/>Updated: ${moment(new Date(edge.updated_at)).fromNow()}` : '')
-                    + (edge.channel_id ? `<br/>Channel: ${edge.channel_id}` : '')
-                    + `<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>`;
-            })();
 
-            L.polyline([
-                fromMarker.getLatLng(),
-                nodeMarker.getLatLng(),
-            ], {
-                color: trColour,
-                opacity: 0.9,
-            }).arrowheads({ size: '10px', fill: true, offsets: { start: '25px', end: '25px' } })
-            .addTo(nodeNeighboursLayerGroup)
-            .bindTooltip(trTooltip, { sticky: true, opacity: 1, interactive: true })
-            .bindPopup(trTooltip);
-        }
+                // Determine line color
+                const configConnectionsColoredLines = getConfigConnectionsColoredLines();
+                const worstSnrDb = connection.worst_avg_snr_db;
+                const lineColor = configConnectionsColoredLines && worstSnrDb != null ? getColourForSnr(worstSnrDb) : '#2563eb';
 
-        // ensure we have neighbours to show
-        const neighbours = node.neighbours ?? [];
-        if(neighbours.length === 0){
-            return;
-        }
+                // Create bidirectional line
+                const line = L.polyline([
+                    nodeMarker.getLatLng(),
+                    otherNodeMarker.getLatLng(),
+                ], {
+                    color: lineColor,
+                    opacity: 0.75,
+                    weight: 3,
+                }).addTo(nodeConnectionsLayerGroup);
 
-        // add node neighbours
-        for(const neighbour of neighbours){
+                // Generate tooltip using standardized function
+                const tooltipNodeA = findNodeById(connection.node_a);
+                const tooltipNodeB = findNodeById(connection.node_b);
+                const tooltip = generateConnectionTooltip(connection, tooltipNodeA, tooltipNodeB, distance);
 
-            // fixme: skipping zero snr? saw some crazy long neighbours with zero snr...
-            if(neighbour.snr === 0){
-                continue;
-            }
-
-            // find neighbour node
-            const neighbourNode = findNodeById(neighbour.node_id);
-            if(!neighbourNode){
-                continue;
-            }
-
-            // find neighbour node marker
-            const neighbourNodeMarker = findNodeMarkerById(neighbour.node_id);
-            if(!neighbourNodeMarker){
-                continue;
-            }
-
-            // calculate distance in meters between nodes (rounded to 2 decimal places)
-            const distanceInMeters = nodeMarker.getLatLng().distanceTo(neighbourNodeMarker.getLatLng()).toFixed(2);
-
-            // don't show this neighbour connection if further than config allows
-            const configNeighboursMaxDistanceInMeters = getConfigNeighboursMaxDistanceInMeters();
-            if(configNeighboursMaxDistanceInMeters != null && parseFloat(distanceInMeters) > configNeighboursMaxDistanceInMeters){
-                continue;
-            }
-
-            // add neighbour line to map
-            const line = L.polyline([
-                neighbourNodeMarker.getLatLng(), // from neighbour
-                nodeMarker.getLatLng(), // to us
-            ], {
-                color: getColourForSnr(neighbour.snr),
-                opacity: 1,
-            }).arrowheads({
-                size: '10px',
-                fill: true,
-                offsets: {
-                    start: '25px',
-                    end: '25px',
-                },
-            }).addTo(nodeNeighboursLayerGroup);
-
-            // default to showing distance in meters
-            var distance = `${distanceInMeters} meters`;
-
-            // scale to distance in kms
-            if(distanceInMeters >= 1000){
-                const distanceInKilometers = (distanceInMeters / 1000).toFixed(2);
-                distance = `${distanceInKilometers} kilometers`;
-            }
-
-            const terrainImageUrl = getTerrainProfileImage(node, neighbourNode);
-
-            const tooltip = `<b>[${escapeString(node.short_name)}] ${escapeString(node.long_name)}</b> heard <b>[${escapeString(neighbourNode.short_name)}] ${escapeString(neighbourNode.long_name)}</b>`
-                + `<br/>SNR: ${neighbour.snr}dB`
-                + `<br/>Distance: ${distance}`
-                + (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>`;
-
-            line.bindTooltip(tooltip, {
-                sticky: true,
-                opacity: 1,
-                interactive: true,
-            })
+                line.bindTooltip(tooltip, {
+                    sticky: true,
+                    opacity: 1,
+                    interactive: true,
+                })
                 .bindPopup(tooltip)
                 .on('click', function(event) {
-                    // close tooltip on click to prevent tooltip and popup showing at same time
                     event.target.closeTooltip();
                 });
-
-        }
-
-    }
-
-    function showNodeNeighboursThatHeardUs(id) {
-
-        cleanUpNodeNeighbours();
-
-        // find node
-        const node = findNodeById(id);
-        if(!node){
-            return;
-        }
-
-        // find node marker
-        const nodeMarker = findNodeMarkerById(node.node_id);
-        if(!nodeMarker){
-            return;
-        }
-
-        // show overlay for node neighbours
-        window._onShowNodeNeighboursHeardUsClick(node);
-
-        // find all nodes that have us as a neighbour
-        const neighbourNodeInfos = [];
-        for(const nodeThatMayHaveHeardUs of nodes){
-
-            // find our node in this nodes neighbours
-            const nodeNeighbours = nodeThatMayHaveHeardUs.neighbours ?? [];
-            const neighbour = nodeNeighbours.find(function(neighbour) {
-                return neighbour.node_id.toString() === node.node_id.toString();
-            });
-
-            // we exist as a neighbour
-            if(neighbour){
-                neighbourNodeInfos.push({
-                    node: nodeThatMayHaveHeardUs,
-                    neighbour: neighbour,
-                });
             }
-
-        }
-
-        // Overlay ALL traceroute edges that originate from this node (edge.from == node.node_id)
-        for (const edge of tracerouteEdgesCache) {
-            if (String(edge.from) !== String(node.node_id)) continue;
-
-            const toMarker = findNodeMarkerById(edge.to);
-            if (!toMarker) continue;
-
-            const snrDb = (typeof edge.snr === 'number') ? (edge.snr === -128 ? null : (Number(edge.snr) / 4)) : null;
-            const trColour = snrDb != null ? getColourForSnr(snrDb) : '#6b7280';
-
-            const trTooltip2 = (() => {
-                const fromNode = findNodeById(node.node_id);
-                const toNode = findNodeById(edge.to);
-                const distanceInMeters = nodeMarker.getLatLng().distanceTo(toMarker.getLatLng()).toFixed(2);
-                let distance = `${distanceInMeters} meters`;
-                if (distanceInMeters >= 1000) {
-                    const km = (distanceInMeters / 1000).toFixed(2);
-                    distance = `${km} kilometers`;
-                }
-                const terrainImageUrl = getTerrainProfileImage(fromNode, toNode);
-                const targetNode = edge.traceroute_from ? findNodeById(edge.traceroute_from) : null;
-                const initiatorNode = edge.traceroute_to ? findNodeById(edge.traceroute_to) : null;
-                return `<b>Traceroute hop</b>`
-                    + `<br/>from <b>[${escapeString(fromNode.short_name)}] ${escapeString(fromNode.long_name)}</b>`
-                    + ` to <b>[${escapeString(toNode.short_name)}] ${escapeString(toNode.long_name)}</b>`
-                    + `<br/>SNR: ${snrDb != null ? snrDb + 'dB' : '?'}`
-                    + `<br/>Distance: ${distance}`
-                    + (initiatorNode ? `<br/>Traceroute from: <b>[${escapeString(initiatorNode.short_name)}] ${escapeString(initiatorNode.long_name)}</b>` : '')
-                    + (targetNode ? `<br/>Traceroute to: <b>[${escapeString(targetNode.short_name)}] ${escapeString(targetNode.long_name)}</b>` : '')
-                    + (edge.updated_at ? `<br/>Updated: ${moment(new Date(edge.updated_at)).fromNow()}` : '')
-                    + (edge.channel_id ? `<br/>Channel: ${edge.channel_id}` : '')
-                    + `<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>`;
-            })();
-
-            L.polyline([
-                nodeMarker.getLatLng(),
-                toMarker.getLatLng(),
-            ], {
-                color: trColour,
-                opacity: 0.9,
-            }).arrowheads({ size: '10px', fill: true, offsets: { start: '25px', end: '25px' } })
-            .addTo(nodeNeighboursLayerGroup)
-            .bindTooltip(trTooltip2, { sticky: true, opacity: 1, interactive: true })
-            .bindPopup(trTooltip2);
-        }
-
-        // ensure we have neighbours to show
-        if(neighbourNodeInfos.length === 0){
-            return;
-        }
-
-        // add node neighbours
-        for(const neighbourNodeInfo of neighbourNodeInfos){
-
-            const neighbourNode = neighbourNodeInfo.node;
-            const neighbour = neighbourNodeInfo.neighbour;
-
-            // fixme: skipping zero snr? saw some crazy long neighbours with zero snr...
-            if(neighbour.snr === 0){
-                continue;
-            }
-
-            // find neighbour node marker
-            const neighbourNodeMarker = findNodeMarkerById(neighbourNode.node_id);
-            if(!neighbourNodeMarker){
-                continue;
-            }
-
-            // calculate distance in meters between nodes (rounded to 2 decimal places)
-            const distanceInMeters = neighbourNodeMarker.getLatLng().distanceTo(nodeMarker.getLatLng()).toFixed(2);
-
-            // don't show this neighbour connection if further than config allows
-            const configNeighboursMaxDistanceInMeters = getConfigNeighboursMaxDistanceInMeters();
-            if(configNeighboursMaxDistanceInMeters != null && parseFloat(distanceInMeters) > configNeighboursMaxDistanceInMeters){
-                continue;
-            }
-
-            // add neighbour line to map
-            const line = L.polyline([
-                nodeMarker.getLatLng(), // from us
-                neighbourNodeMarker.getLatLng(), // to neighbour
-            ], {
-                color: getColourForSnr(neighbour.snr),
-                opacity: 1,
-            }).arrowheads({
-                size: '10px',
-                fill: true,
-                offsets: {
-                    start: '25px',
-                    end: '25px',
-                },
-            }).addTo(nodeNeighboursLayerGroup);
-
-            // default to showing distance in meters
-            var distance = `${distanceInMeters} meters`;
-
-            // scale to distance in kms
-            if(distanceInMeters >= 1000){
-                const distanceInKilometers = (distanceInMeters / 1000).toFixed(2);
-                distance = `${distanceInKilometers} kilometers`;
-            }
-
-            const terrainImageUrl = getTerrainProfileImage(neighbourNode, node);
-
-            const tooltip = `<b>[${escapeString(neighbourNode.short_name)}] ${escapeString(neighbourNode.long_name)}</b> heard <b>[${escapeString(node.short_name)}] ${escapeString(node.long_name)}</b>`
-                + `<br/>SNR: ${neighbour.snr}dB`
-                + `<br/>Distance: ${distance}`
-                + (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>`;
-
-            line.bindTooltip(tooltip, {
-                sticky: true,
-                opacity: 1,
-                interactive: true,
-            })
-                .bindPopup(tooltip)
-                .on('click', function(event) {
-                    // close tooltip on click to prevent tooltip and popup showing at same time
-                    event.target.closeTooltip();
-                });
-
+        } catch (err) {
+            console.error('Error fetching connections:', err);
         }
 
     }
@@ -3590,12 +3308,12 @@
         closeAllPopups();
         closeAllTooltips();
         clearAllNodes();
-        clearAllNeighbours();
+        clearAllBackboneConnections();
         clearAllWaypoints();
         clearAllTraceroutes();
         clearAllConnections();
         clearNodeOutline();
-        cleanUpNodeNeighbours();
+        cleanUpNodeConnections();
     }
 
     // returns true if the element or one of its parents has the class classname
@@ -3639,7 +3357,7 @@
         const now = moment();
         const configNodesMaxAgeInSeconds = getConfigNodesMaxAgeInSeconds();
         const configNodesOfflineAgeInSeconds = getConfigNodesOfflineAgeInSeconds();
-        const configNeighboursMaxDistanceInMeters = getConfigNeighboursMaxDistanceInMeters();
+        const configConnectionsMaxDistanceInMeters = getConfigConnectionsMaxDistanceInMeters();
 
         // add nodes
         for(const node of updatedNodes){
@@ -3794,121 +3512,6 @@
 
         }
 
-        for(const node of updatedNodes){
-
-            // find current node
-            const currentNode = findNodeMarkerById(node.node_id);
-            if(!currentNode){
-                continue;
-            }
-
-            // add node neighbours
-            const neighbours = node.neighbours ?? [];
-            for(const neighbour of neighbours){
-
-                // fixme: skipping zero snr? saw some crazy long neighbours with zero snr...
-                if(neighbour.snr === 0){
-                    continue;
-                }
-
-                const neighbourNode = findNodeById(neighbour.node_id);
-                if(!neighbourNode){
-                    continue;
-                }
-
-                const neighbourNodeMarker = findNodeMarkerById(neighbour.node_id);
-                if(neighbourNodeMarker){
-
-                    // calculate distance in meters between nodes (rounded to 2 decimal places)
-                    const distanceInMeters = currentNode.getLatLng().distanceTo(neighbourNodeMarker.getLatLng()).toFixed(2);
-
-                    // don't show this neighbour connection if further than config allows
-                    if(configNeighboursMaxDistanceInMeters != null && parseFloat(distanceInMeters) > configNeighboursMaxDistanceInMeters){
-                        continue;
-                    }
-
-                    // Check our neighour also has us as a neighbour. 
-                    const matchingNode = updatedNodes.find(n => n.node_id == neighbour.node_id);
-                    const symmetrical = matchingNode?.neighbours?.some(n => String(n.node_id) === String(node.node_id)) ?? false;
-
-                    // add neighbour line to map
-                    const line = L.polyline([
-                        currentNode.getLatLng(),
-                        neighbourNodeMarker.getLatLng(),
-                    ], {
-                        color: '#2563eb',
-                        opacity: 0.75,
-                        // if we have a symmetrical connection, offset the the line so they don't overlapp
-                        offset: symmetrical ? 3 : 0,
-                    }).addTo(neighboursLayerGroup);
-
-                    // additional line for backbone neighbours
-                    const backboneNeighbourLine = L.polyline([
-                        neighbourNodeMarker.getLatLng(),
-                        currentNode.getLatLng(),
-                    ], {
-                        color: getColourForSnr(neighbour.snr),
-                        opacity: 0.75,
-                        offset: 3, // assuming symmetrical connection
-                    }).arrowheads({
-                        size: '10px',
-                        fill: true,
-                        offsets: {
-                            start: '25px',
-                            end: '25px',
-                        },
-                    })
-
-                    // If both nodes are backbone nodes add to layer group
-                    if(node.is_backbone && updatedNodes.find(n => n.node_id == neighbour.node_id)?.is_backbone) {
-                        backboneNeighbourLine.addTo(backboneNeighboursLayerGroup);
-                    }
-
-                    // default to showing distance in meters
-                    var distance = `${distanceInMeters} meters`;
-
-                    // scale to distance in kms
-                    if(distanceInMeters >= 1000){
-                        const distanceInKilometers = (distanceInMeters / 1000).toFixed(2);
-                        distance = `${distanceInKilometers} kilometers`;
-                    }
-
-                    const terrainImageUrl = getTerrainProfileImage(node, neighbourNode);
-
-                    const tooltip = `<b>[${escapeString(node.short_name)}] ${escapeString(node.long_name)}</b> heard <b>[${escapeString(neighbourNode.short_name)}] ${escapeString(neighbourNode.long_name)}</b>`
-                        + `<br/>SNR: ${neighbour.snr}dB`
-                        + `<br/>Distance: ${distance}`
-                        + (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>`;
-
-                    line.bindTooltip(tooltip, {
-                        sticky: true,
-                        opacity: 1,
-                        interactive: true,
-                    })
-                    .bindPopup(tooltip)
-                    .on('click', function(event) {
-                        // close tooltip on click to prevent tooltip and popup showing at same time
-                        event.target.closeTooltip();
-                    });
-
-                    backboneNeighbourLine.bindTooltip(tooltip, {
-                        sticky: true,
-                        opacity: 1,
-                        interactive: true,
-                    })
-                    .bindPopup(tooltip)
-                    .on('click', function(event) {
-                        // close tooltip on click to prevent tooltip and popup showing at same time
-                        event.target.closeTooltip();
-                    });
-
-                }
-            }
-
-        }
-
         window._onNodesUpdated(nodes);
 
     }
@@ -3993,81 +3596,51 @@
 
     }
 
-    function onTracerouteEdgesUpdated(edges) {
 
-        tracerouteEdgesCache = edges;
+    function generateConnectionTooltip(connection, nodeA, nodeB, distance) {
+        let tooltip = `<b>Connection</b>`;
+        tooltip += `<br/>[${escapeString(nodeA.short_name)}] ${escapeString(nodeA.long_name)} <-> [${escapeString(nodeB.short_name)}] ${escapeString(nodeB.long_name)}`;
+        tooltip += `<br/>Distance: ${distance}`;
+        tooltip += `<br/>`;
 
-        for (const edge of edges) {
-            // Convert SNR for traceroutes: snr/4 dB; -128 means unknown
-            const snrDb = (typeof edge.snr === 'number')
-                ? (edge.snr === -128 ? null : (Number(edge.snr) / 4))
-                : null;
-            const fromNode = findNodeById(edge.from);
-            const toNode = findNodeById(edge.to);
-            if (!fromNode || !toNode) continue;
-
-            const fromMarker = findNodeMarkerById(edge.from);
-            const toMarker = findNodeMarkerById(edge.to);
-            if (!fromMarker || !toMarker) continue;
-
-            const distanceInMeters = fromMarker.getLatLng().distanceTo(toMarker.getLatLng()).toFixed(2);
-
-            let distance = `${distanceInMeters} meters`;
-            if (distanceInMeters >= 1000) {
-                const km = (distanceInMeters / 1000).toFixed(2);
-                distance = `${km} kilometers`;
-            }
-
-            const colour = '#f97316';
-
-            const terrainImageUrl = getTerrainProfileImage(fromNode, toNode);
-
-            // This is backwards. It's because the traceroute packet is sent from the target node.
-            const targetNode = edge.traceroute_from ? findNodeById(edge.traceroute_from) : null;
-            const initiatorNode = edge.traceroute_to ? findNodeById(edge.traceroute_to) : null;
-            
-            const tooltip = `<b>Traceroute hop</b>`
-                + `<br/>from <b>[${escapeString(fromNode.short_name)}] ${escapeString(fromNode.long_name)}</b>`
-                + ` to <b>[${escapeString(toNode.short_name)}] ${escapeString(toNode.long_name)}</b>`
-                + `<br/>SNR: ${snrDb != null ? snrDb + 'dB' : '?'}`
-                + `<br/>Distance: ${distance}`
-                + (initiatorNode ? `<br/>Traceroute from: <b>[${escapeString(initiatorNode.short_name)}] ${escapeString(initiatorNode.long_name)}</b>` : '')
-                + (targetNode ? `<br/>Traceroute to: <b>[${escapeString(targetNode.short_name)}] ${escapeString(targetNode.long_name)}</b>` : '')
-                + (edge.updated_at ? `<br/>Updated: ${moment(new Date(edge.updated_at)).fromNow()}` : '')
-                + (edge.channel_id ? `<br/>Channel: ${edge.channel_id}` : '')
-                + `<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>`;
-
-            // additional line for backbone neighbours
-            const backboneNeighbourLine = L.polyline([
-                fromMarker.getLatLng(),
-                toMarker.getLatLng(),
-            ], {
-                color: getColourForSnr(snrDb),
-                opacity: 0.75,
-                offset: 3, // assuming symmetrical connection
-            }).arrowheads({
-                size: '10px',
-                fill: true,
-                offsets: {
-                    start: '25px',
-                    end: '25px',
-                },
-            });
-
-            backboneNeighbourLine.bindTooltip(tooltip, {
-                sticky: true,
-                opacity: 1,
-                interactive: true,
-            }).bindPopup(tooltip)
-            .on('click', function(event) {
-                event.target.closeTooltip();
-            });
-
-            if(fromNode.is_backbone && toNode.is_backbone) {
-                backboneNeighbourLine.addTo(backboneNeighboursLayerGroup);
+        // Direction A -> B
+        if (connection.direction_ab.avg_snr_db != null) {
+            tooltip += `<br/><b>${escapeString(nodeA.short_name)} -> ${escapeString(nodeB.short_name)}:</b>`;
+            tooltip += `<br/>SNR: ${connection.direction_ab.avg_snr_db.toFixed(1)}dB ${getSignalBarsIndicator(connection.direction_ab.avg_snr_db)} (Average of ${connection.direction_ab.total_count} edges)`;
+            if (connection.direction_ab.last_5_edges.length > 0) {
+                tooltip += `<br/>Last 5 edges:`;
+                for (const edge of connection.direction_ab.last_5_edges) {
+                    const timeAgo = moment(new Date(edge.created_at)).fromNow();
+                    const sourceIcon = edge.source === "TRACEROUTE_APP" ? "⇵" : (edge.source === "NEIGHBORINFO_APP" ? "✳" : "?");
+                    tooltip += `<br/> &nbsp;&nbsp; ${edge.snr_db.toFixed(1)}dB ${getSignalBarsIndicator(edge.snr_db)} (${timeAgo} by:${sourceIcon})`;
+                }
+            } else {
+                tooltip += `<br/>No recent edges`;
             }
         }
+
+        // Direction B -> A
+        if (connection.direction_ba.avg_snr_db != null) {
+            tooltip += `<br/><br/><b>${escapeString(nodeB.short_name)} -> ${escapeString(nodeA.short_name)}:</b>`;
+            tooltip += `<br/>SNR: ${connection.direction_ba.avg_snr_db.toFixed(1)}dB ${getSignalBarsIndicator(connection.direction_ba.avg_snr_db)} (Average of ${connection.direction_ba.total_count} edges)`;
+            if (connection.direction_ba.last_5_edges.length > 0) {
+                tooltip += `<br/>Last 5 edges:`;
+                for (const edge of connection.direction_ba.last_5_edges) {
+                    const timeAgo = moment(new Date(edge.created_at)).fromNow();
+                    const sourceIcon = edge.source === "TRACEROUTE_APP" ? "⇵" : (edge.source === "NEIGHBORINFO_APP" ? "✳" : "?");
+                    tooltip += `<br/> &nbsp;&nbsp; ${edge.snr_db.toFixed(1)}dB ${getSignalBarsIndicator(edge.snr_db)} (${timeAgo} by:${sourceIcon})`;
+                }
+            } else {
+                tooltip += `<br/>No recent edges`;
+            }
+        }
+
+        // Add terrain profile image
+        const terrainImageUrl = getTerrainProfileImage(nodeA, nodeB);
+        tooltip += `<br/><br/>Terrain images from <a href="http://www.heywhatsthat.com" target="_blank">HeyWhatsThat.com</a>`;
+        tooltip += `<br/><a href="${terrainImageUrl}" target="_blank"><img src="${terrainImageUrl}" width="100%"></a>`;
+
+        return tooltip;
     }
 
     function onConnectionsUpdated(connections) {
@@ -4094,6 +3667,13 @@
 
             // Calculate distance between nodes
             const distanceInMeters = nodeAMarker.getLatLng().distanceTo(nodeBMarker.getLatLng()).toFixed(2);
+            
+            // Apply distance filter
+            const configConnectionsMaxDistanceInMeters = getConfigConnectionsMaxDistanceInMeters();
+            if(configConnectionsMaxDistanceInMeters != null && parseFloat(distanceInMeters) > configConnectionsMaxDistanceInMeters){
+                continue;
+            }
+
             let distance = `${distanceInMeters} meters`;
             if (distanceInMeters >= 1000) {
                 const distanceInKilometers = (distanceInMeters / 1000).toFixed(2);
@@ -4116,48 +3696,7 @@
             }).addTo(connectionsLayerGroup);
 
             // Generate tooltip
-            let tooltip = `<b>Connection</b>`;
-            tooltip += `<br/>[${escapeString(nodeA.short_name)}] ${escapeString(nodeA.long_name)} <-> [${escapeString(nodeB.short_name)}] ${escapeString(nodeB.long_name)}`;
-            tooltip += `<br/>Distance: ${distance}`;
-            tooltip += `<br/>`;
-
-            // Direction A -> B
-            if (connection.direction_ab.avg_snr_db != null) {
-                tooltip += `<br/><b>${escapeString(nodeA.short_name)} -> ${escapeString(nodeB.short_name)}:</b>`;
-                tooltip += `<br/>SNR: ${connection.direction_ab.avg_snr_db.toFixed(1)}dB ${getSignalBarsIndicator(connection.direction_ab.avg_snr_db)} (Average of ${connection.direction_ab.total_count} edges)`;
-                if (connection.direction_ab.last_5_edges.length > 0) {
-                    tooltip += `<br/>Last 5 edges:`;
-                    for (const edge of connection.direction_ab.last_5_edges) {
-                        const timeAgo = moment(new Date(edge.created_at)).fromNow();
-                        console.log(edge.source);
-                        const sourceIcon = edge.source === "TRACEROUTE_APP" ? "⇵" : (edge.source === "NEIGHBORINFO_APP" ? "✳" : "?");
-                        tooltip += `<br/> &nbsp;&nbsp; ${edge.snr_db.toFixed(1)}dB ${getSignalBarsIndicator(edge.snr_db)} (${timeAgo} by:${sourceIcon})`;
-                    }
-                } else {
-                    tooltip += `<br/>No recent edges`;
-                }
-            }
-
-            // Direction B -> A
-            if (connection.direction_ba.avg_snr_db != null) {
-                tooltip += `<br/><br/><b>${escapeString(nodeB.short_name)} -> ${escapeString(nodeA.short_name)}:</b>`;
-                tooltip += `<br/>SNR: ${connection.direction_ba.avg_snr_db.toFixed(1)}dB ${getSignalBarsIndicator(connection.direction_ba.avg_snr_db)} (Average of ${connection.direction_ba.total_count} edges)`;
-                if (connection.direction_ba.last_5_edges.length > 0) {
-                    tooltip += `<br/>Last 5 edges:`;
-                    for (const edge of connection.direction_ba.last_5_edges) {
-                        const timeAgo = moment(new Date(edge.created_at)).fromNow();
-                        const sourceIcon = edge.source === "TRACEROUTE_APP" ? "⇵" : (edge.source === "NEIGHBORINFO_APP" ? "✳" : "?");
-                        tooltip += `<br/> &nbsp;&nbsp; ${edge.snr_db.toFixed(1)}dB ${getSignalBarsIndicator(edge.snr_db)} (${timeAgo} by:${sourceIcon})`;
-                    }
-                } else {
-                    tooltip += `<br/>No recent edges`;
-                }
-            }
-
-            // Add terrain profile image
-            const terrainImageUrl = getTerrainProfileImage(nodeA, nodeB);
-            tooltip += `<br/><br/>Terrain images from <a href="http://www.heywhatsthat.com" target="_blank">HeyWhatsThat.com</a>`;
-            tooltip += `<br/><a href="${terrainImageUrl}" target="_blank"><img src="${terrainImageUrl}" width="100%"></a>`;
+            const tooltip = generateConnectionTooltip(connection, nodeA, nodeB, distance);
 
             // Bind tooltip and popup
             line.bindTooltip(tooltip, {
@@ -4170,6 +3709,35 @@
                 // close tooltip on click to prevent tooltip and popup showing at same time
                 event.target.closeTooltip();
             });
+
+            // If both nodes are backbone nodes, also add to backbone layer group with arrows
+            if (nodeA.is_backbone && nodeB.is_backbone) {
+                const backboneLine = L.polyline([
+                    nodeAMarker.getLatLng(),
+                    nodeBMarker.getLatLng(),
+                ], {
+                    color: lineColor,
+                    opacity: 0.75,
+                    weight: 3,
+                }).arrowheads({
+                    size: '10px',
+                    fill: true,
+                    offsets: {
+                        start: '25px',
+                        end: '25px',
+                    },
+                }).addTo(backboneConnectionsLayerGroup);
+
+                backboneLine.bindTooltip(tooltip, {
+                    sticky: true,
+                    opacity: 1,
+                    interactive: true,
+                })
+                .bindPopup(tooltip)
+                .on('click', function(event) {
+                event.target.closeTooltip();
+            });
+            }
         }
     }
 
@@ -4252,7 +3820,7 @@
         closeAllPopups();
         closeAllTooltips();
 
-        // setup node neighbours layer
+        // setup node position history layer
         nodePositionHistoryLayerGroup.clearLayers();
         nodePositionHistoryLayerGroup.removeFrom(map);
         nodePositionHistoryLayerGroup.addTo(map);
@@ -4305,17 +3873,6 @@
             onWaypointsUpdated(response.data.waypoints);
         });
 
-        // fetch traceroute edges
-        const traceroutesMaxAgeSec = getConfigTraceroutesMaxAgeInSeconds();
-        const timeFrom = traceroutesMaxAgeSec ? (Date.now() - traceroutesMaxAgeSec * 1000) : undefined;
-        const params = new URLSearchParams();
-        if (timeFrom) params.set('time_from', timeFrom);
-        await window.axios.get(`/api/v1/traceroutes?${params.toString()}`).then(async (response) => {
-            onTracerouteEdgesUpdated(response.data.traceroute_edges ?? []);
-        }).catch(() => {
-            onTracerouteEdgesUpdated([]);
-        });
-
         // fetch connections (edges)
         const connectionsTimePeriodSec = getConfigConnectionsTimePeriodInSeconds();
         const connectionsTimeFrom = connectionsTimePeriodSec ? (Date.now() - connectionsTimePeriodSec * 1000) : undefined;
@@ -4469,8 +4026,7 @@
 
         // 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="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="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 += `<br/><button onclick="showNodeConnections(${node.node_id});" class="border border-gray-300 bg-gray-100 p-1 w-full rounded hover:bg-gray-200">Show Connections</button>`;
         tooltip += `</div>`;
 
         return tooltip;
@@ -4504,8 +4060,8 @@
 
     }
 
-    window._onHideNodeNeighboursClick = function() {
-        cleanUpNodeNeighbours();
+    window._onHideNodeConnectionsClick = function() {
+        cleanUpNodeConnections();
     };
 
     // parse url params