feature: tree navigation

src/components/Graph.tsx

@@ -1,4 +1,4 @@
-import { createContext, useEffect, useRef, useState } from "react";
+import { createContext, forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import Viz from 'viz.js';
 import { Module, render } from 'viz.js/full.render.js';
 import * as d3 from 'd3';
@@ -63,7 +63,11 @@ export interface OpenNodeContext {
 const viz = new Viz({ Module, render });
 export const graphContext = createContext<GraphContext | null>(null);
 
-export default function Graph({ setGraphPath }: { setGraphPath: React.Dispatch<React.SetStateAction<BreadcrumbItemType[]>> }) {
+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 containerRef = useRef(null);
   const [graph, setGraph] = useState(defaultGraph());
   const [contextMenuOpened, openContextMenu] = useState(false);
@@ -242,6 +246,14 @@ export default function Graph({ setGraphPath }: { setGraphPath: React.Dispatch<R
     } as BreadcrumbItemType;
   }
 
+  useImperativeHandle(ref, () => ({
+    navigateTo(nodeId, path) {
+      const newPath = path.map(p => createPathSegment(p.id, p.name));
+      setGraphsPath(newPath);
+      selectGraphId(nodeId);
+    }
+  }));
+
   return (
     <div className="flex-1 p-4">
       <div ref={containerRef} className="w-full h-full bg-white rounded shadow" style={{ minHeight: '600px', overflow: 'auto' }}>
@@ -262,7 +274,9 @@ export default function Graph({ setGraphPath }: { setGraphPath: React.Dispatch<R
       </graphContext.Provider>
     </div>
   )
-}
+});
+
+export default Graph;
 
 export function defaultGraph(): GraphModel {
   const start = crypto.randomUUID();