From df5956aa64ebf396d0dbadcb563f848a4a1a8c70 Mon Sep 17 00:00:00 2001
From: Tuomas Koponen <432588+tumppi@users.noreply.github.com>
Date: Fri, 8 Nov 2024 10:47:21 +0200
Subject: [PATCH] Make connection drawing smarter

---
 src/components/MapConnectionLayer.tsx   |  7 ++++---
 src/components/MapNavigationControl.tsx | 13 ++++++++++---
 src/utils/index.tsx                     | 15 ++++++++++++---
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/components/MapConnectionLayer.tsx b/src/components/MapConnectionLayer.tsx
index de5cd62..cd0d5ba 100644
--- a/src/components/MapConnectionLayer.tsx
+++ b/src/components/MapConnectionLayer.tsx
@@ -3,13 +3,14 @@ import { Layer, Source } from 'react-map-gl'
 import { useNodeConnections } from '../utils'
 import { useStore } from '../Store'
 import { ConnectionsMode } from '../types'
+import { useStreamIdParam } from '../hooks'
 
 export function MapConnectionLayer() {
   const connections = useNodeConnections()
+  const { connectionsMode, selectedNode } = useStore()
+  const streamId = useStreamIdParam()
 
-  const { connectionsMode } = useStore()
-
-  const visible = connectionsMode === ConnectionsMode.Always
+  const visible = connectionsMode === ConnectionsMode.Always || !!streamId || !!selectedNode
 
   const lineData = useMemo(
     function getFeatureConnection(): GeoJSON.FeatureCollection {
diff --git a/src/components/MapNavigationControl.tsx b/src/components/MapNavigationControl.tsx
index 78aef19..8cd4985 100644
--- a/src/components/MapNavigationControl.tsx
+++ b/src/components/MapNavigationControl.tsx
@@ -10,7 +10,7 @@ import { Tooltip } from './Tooltip'
 export function MapNavigationControl() {
   const map = useMap()
 
-  const { setConnectionsMode } = useStore()
+  const { setConnectionsMode, connectionsMode } = useStore()
 
   const { showConnectionsToggle, showResetViewportButton, showZoomButtons } = useHud()
 
@@ -25,6 +25,7 @@ export function MapNavigationControl() {
           <Tooltip value="Show node connections">
             <ConnectionButton
               type="button"
+              $isActive={connectionsMode === ConnectionsMode.Always}
               onClick={() => {
                 setConnectionsMode((current) => {
                   return current === ConnectionsMode.Always
@@ -109,10 +110,16 @@ const Button = styled.button`
   }
 `
 
-const ConnectionButton = styled(Button)`
+const ConnectionButton = styled(Button)<{ $isActive?: boolean }>`
+  color: ${({ $isActive }) => ($isActive ? '#0324ff' : 'inherit')};
+
+  &:hover {
+    color: ${({ $isActive }) => ($isActive ? '#7b8fff' : '#a3a3a3')};
+  }
+
   &:active,
   &:focus {
-    color: #0324ff;
+    color: ${({ $isActive }) => ($isActive ? '#0324ff' : '#323232')};
   }
 
   svg {
diff --git a/src/utils/index.tsx b/src/utils/index.tsx
index 0d042c3..53d53ca 100644
--- a/src/utils/index.tsx
+++ b/src/utils/index.tsx
@@ -3,7 +3,7 @@ import { useParams, useSearchParams } from 'react-router-dom'
 import { useStore } from '../Store'
 import { DefaultViewState } from '../consts'
 import { useMap, useStreamIdParam } from '../hooks'
-import { OperatorNode } from '../types'
+import { ConnectionsMode, OperatorNode } from '../types'
 import { getNodeLocationId } from './map'
 import { useOperatorNodeNeighborsQuery } from './neighbors'
 import { useOperatorNodesForStreamQuery } from './nodes'
@@ -13,16 +13,25 @@ export function useNodeConnections() {
 
   const { data: nodes } = useOperatorNodesForStreamQuery(streamId)
 
-  const { selectedNode } = useStore()
+  const { selectedNode, connectionsMode } = useStore()
 
   const { data: neighbors } = useOperatorNodeNeighborsQuery(selectedNode?.id, { streamId })
 
   return useMemo(
     function getConnectionsFromNodesAndNeighbors() {
+      // Return early if we don't have the required data
       if (!nodes || !neighbors) {
         return []
       }
 
+      // Only show connections if:
+      // 1. We have a streamId (showing all connections for a stream), OR
+      // 2. We have a selected node (showing connections for that node), OR
+      // 3. ConnectionsMode is set to Always
+      if (!streamId && !selectedNode?.id && connectionsMode !== ConnectionsMode.Always) {
+        return []
+      }
+
       const nodesById: Record<string, OperatorNode | undefined> = {}
 
       for (const node of nodes) {
@@ -65,7 +74,7 @@ export function useNodeConnections() {
 
       return connections
     },
-    [nodes, neighbors],
+    [nodes, neighbors, selectedNode, streamId, connectionsMode],
   )
 }