feature: navigation highlighting in tree

src/App.tsx

@@ -39,6 +39,7 @@ const App: React.FC = () => {
   const nodesFlatById = useGraphLayersTreeStore(store => store.nodesFlatById);
   const parentIdByChildId = useGraphLayersTreeStore(store => store.parentIdByChildId);
   const graphRef = useRef<GraphHandle>(null);
+  const [activeGraphId, setActiveGraphId] = useState('main');
 
   function buildPathToNode(nodeId: string) {
     const path: Array<{ id: string; name: string | undefined }> = [];
@@ -61,6 +62,7 @@ const App: React.FC = () => {
           checkable
           treeData={treeData}
           defaultExpandAll={true}
+          selectedKeys={[activeGraphId]}
           style={{
             borderRadius: 0
           }}
@@ -125,7 +127,7 @@ const App: React.FC = () => {
             borderRadius: '6px'
           }}
         >
-          <Graph ref={graphRef} setGraphPath={setGraphLevel} />
+          <Graph ref={graphRef} setGraphPath={setGraphLevel} onNavigate={setActiveGraphId} />
         </Content>
       </Layout>
     </Layout>

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);
     }

src/components/NodeContextMenu.tsx

@@ -41,6 +41,7 @@ export default function NodeContextMenu({
   const graphContextValue = useContext(graphContext)!;
   const graphsById = useGraphsStore((s) => (s as { graphsById: Map<string, GraphModel> }).graphsById);
   const addTreeNode = useGraphLayersTreeStore(store => store.add);
+  const removeTreeNode = useGraphLayersTreeStore(store => store.remove);
 
   function contextMenuOpenChange(open: boolean) {
     if (!open) {
@@ -56,6 +57,7 @@ export default function NodeContextMenu({
       }
       case 'remove': {
         removeNode(nodeContext.nodeId);
+        removeTreeNode(nodeContext.nodeId);
         break;
       }
       case 'subgraph': {