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() { { 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 = {} for (const node of nodes) { @@ -65,7 +74,7 @@ export function useNodeConnections() { return connections }, - [nodes, neighbors], + [nodes, neighbors, selectedNode, streamId, connectionsMode], ) }