diff --git a/packages/dashboard/src/components/CustomNode.tsx b/packages/dashboard/src/components/CustomNode.tsx index 19e2062..58273bd 100644 --- a/packages/dashboard/src/components/CustomNode.tsx +++ b/packages/dashboard/src/components/CustomNode.tsx @@ -44,6 +44,7 @@ export interface CustomNodeData extends Record { isHighlighted: boolean; searchScore?: number; isSelected: boolean; + isTourHighlighted: boolean; } export type CustomFlowNode = Node; @@ -58,6 +59,8 @@ export default function CustomNode({ let ringClass = ""; if (data.isSelected) { ringClass = "ring-2 ring-white"; + } else if (data.isTourHighlighted) { + ringClass = "ring-2 ring-blue-400 animate-pulse"; } else if (data.isHighlighted) { const score = data.searchScore ?? 1; if (score <= 0.1) { diff --git a/packages/dashboard/src/components/GraphView.tsx b/packages/dashboard/src/components/GraphView.tsx index bf27d30..8b58440 100644 --- a/packages/dashboard/src/components/GraphView.tsx +++ b/packages/dashboard/src/components/GraphView.tsx @@ -26,6 +26,7 @@ export default function GraphView() { const searchResults = useDashboardStore((s) => s.searchResults); const selectNode = useDashboardStore((s) => s.selectNode); const showLayers = useDashboardStore((s) => s.showLayers); + const tourHighlightedNodeIds = useDashboardStore((s) => s.tourHighlightedNodeIds); const { initialNodes, initialEdges } = useMemo(() => { if (!graph) @@ -48,6 +49,7 @@ export default function GraphView() { isHighlighted: !!matchResult, searchScore: matchResult?.score, isSelected: selectedNodeId === node.id, + isTourHighlighted: tourHighlightedNodeIds.includes(node.id), }, }; }); @@ -162,7 +164,7 @@ export default function GraphView() { ]; return { initialNodes: allNodes, initialEdges: laid.edges }; - }, [graph, searchResults, selectedNodeId, showLayers]); + }, [graph, searchResults, selectedNodeId, showLayers, tourHighlightedNodeIds]); const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);