Implemented:

- node rename  working in modal
- add child node on click
- removing  node and  reasigning the edges
- creating subgraphs
-  breadcrumbs for navigtion

src/App.tsx

@@ -1,18 +1,38 @@
-import { useEffect, useRef, useState } from "react";
-import { GraphRenderer } from "./Graph";
+import React, { useState } from 'react';
+import { Layout, theme, Breadcrumb } from 'antd';
+import Graph, { NodeModel } from './components/Graph';
+import type { BreadcrumbItemType } from 'antd/es/breadcrumb/Breadcrumb';
 
-export default function App() {
-  const containerRef = useRef(null);  
-  const firstLevelGraph = new GraphRenderer(containerRef);
+const { Content } = Layout;
+
+const App: React.FC = () => {
+  const {
+    token: { colorBgContainer, borderRadiusLG },
+  } = theme.useToken();
+  const [graphLevel, setGraphLevel] = useState<BreadcrumbItemType[]>([])
+
+  function setGraphLevelPath(path: BreadcrumbItemType[]) {
+    setGraphLevel(path)
+  }
   
-  useEffect(() => {
-      firstLevelGraph.render();      
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    });
-    
   return (
-    <div className="flex-1 p-4">
-        <div ref={containerRef} className="w-full h-full bg-white rounded shadow" style={{minHeight: '600px', overflow: 'auto'}}></div>
-    </div>    
+    <Layout>
+      <Layout>
+        <Breadcrumb style={{ margin: '8px 0 0 16px' }} items={graphLevel}  />
+        <Content
+          style={{
+            margin: '8px 16px',
+            padding: 24,
+            minHeight: 280,
+            background: colorBgContainer,
+            borderRadius: borderRadiusLG,
+          }}
+        >
+          <Graph setGraphPath={setGraphLevelPath} />
+        </Content>
+      </Layout>
+    </Layout>
   );
-}
+};
+
+export default App;