feature: tree navigation

src/App.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useEffectEvent, useState } from 'react';
+import React, { useEffectEvent, useRef, useState } from 'react';
 import { Layout, theme, Breadcrumb, Button, Space, Tree } from 'antd';
-import Graph from './components/Graph';
+import Graph, { type GraphHandle } from './components/Graph';
 import type { BreadcrumbItemType } from 'antd/es/breadcrumb/Breadcrumb';
 import { useKeysdownStore } from './stores/ArrayStore';
 import {
@@ -36,10 +36,20 @@ const App: React.FC = () => {
     onKeyUp(ev.key);
   });
   const treeData = useGraphLayersTreeStore(store => store.tree);
+  const nodesFlatById = useGraphLayersTreeStore(store => store.nodesFlatById);
+  const parentIdByChildId = useGraphLayersTreeStore(store => store.parentIdByChildId);
+  const graphRef = useRef<GraphHandle>(null);
 
-  useEffect(() => {
-    console.info(treeData);
-  }, [treeData])
+  function buildPathToNode(nodeId: string) {
+    const path: Array<{ id: string; name: string | undefined }> = [];
+    let current: string | undefined = nodeId;
+    while (current && nodesFlatById.has(current)) {
+      const node = nodesFlatById.get(current)!;
+      path.unshift({ id: current, name: node.title as string | undefined });
+      current = parentIdByChildId.get(current);
+    }
+    return [{ id: 'main', name: 'Main' }, ...path];
+  }
 
   return (
     <Layout>
@@ -54,6 +64,11 @@ const App: React.FC = () => {
           style={{
             borderRadius: 0
           }}
+          onSelect={(keys) => {
+            const nodeId = keys[0] as string;
+            if (!nodeId) return;
+            graphRef.current?.navigateTo(nodeId, buildPathToNode(nodeId));
+          }}
         />
       </Sider>
       <Layout>
@@ -110,7 +125,7 @@ const App: React.FC = () => {
             borderRadius: '6px'
           }}
         >
-          <Graph setGraphPath={setGraphLevel} />
+          <Graph ref={graphRef} setGraphPath={setGraphLevel} />
         </Content>
       </Layout>
     </Layout>