feature: navigation highlighting in tree

src/components/Graph.tsx

@@ -67,7 +67,7 @@ export interface GraphHandle {
   navigateTo: (nodeId: string, path: Array<{ id: string; name: string | undefined }>) => void;
 }
 
-const Graph = forwardRef<GraphHandle, { setGraphPath: React.Dispatch<React.SetStateAction<BreadcrumbItemType[]>> }>(function Graph({ setGraphPath }, ref) {
+const Graph = forwardRef<GraphHandle, { setGraphPath: React.Dispatch<React.SetStateAction<BreadcrumbItemType[]>>, onNavigate?: (graphId: string) => void }>(function Graph({ setGraphPath, onNavigate }, ref) {
   const containerRef = useRef(null);
   const [graph, setGraph] = useState(defaultGraph());
   const [contextMenuOpened, openContextMenu] = useState(false);
@@ -125,6 +125,7 @@ const Graph = forwardRef<GraphHandle, { setGraphPath: React.Dispatch<React.SetSt
     setGraphsPath([createPathSegment('main', 'Main')]);
     openNodeContext(null);
     openContextMenu(false);
+    onNavigate?.('main');
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [loadCount]);
 
@@ -139,6 +140,7 @@ const Graph = forwardRef<GraphHandle, { setGraphPath: React.Dispatch<React.SetSt
     if (graph) {
       setGraph(graph);
     }
+    onNavigate?.(graphId);
   }, [graphId]);
 
   async function renderGraph() {
@@ -249,6 +251,7 @@ const Graph = forwardRef<GraphHandle, { setGraphPath: React.Dispatch<React.SetSt
   useImperativeHandle(ref, () => ({
     navigateTo(nodeId, path) {
       const newPath = path.map(p => createPathSegment(p.id, p.name));
+      openNodeContext(null);
       setGraphsPath(newPath);
       selectGraphId(nodeId);
     }