Merge pull request #353 from streamr-dev/FRONT-1872-connection-drawing

[FRONT-1872] Make connection drawing smarter

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 {

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 {

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],
   )
 }