Update src/App.js

src/App.js

@@ -1,24 +1,62 @@
-import React, { useEffect, useState } from 'react';
-import ReactFlow from 'reactflow';
+import React, { useCallback } from 'react';
+import ReactFlow, {
+  addEdge,
+  MiniMap,
+  Controls,
+  Background,
+  useNodesState,
+  useEdgesState,
+} from 'reactflow';
+
+import { nodes as initialNodes, edges as initialEdges } from './initial-elements';
+import CustomNode from './CustomNode';
+
 import 'reactflow/dist/style.css';
+import './overview.css';
+
+const nodeTypes = {
+  custom: CustomNode,
+};
+
+const minimapStyle = {
+  height: 120,
+};
+
+const onInit = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
+
+const OverviewFlow = () => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), []);
 
-function App() {
-  const [elements, setElements] = useState([]);
+  // we are using a bit of a shortcut here to adjust the edge type
+  // this could also be done with a custom edge for example
+  const edgesWithUpdatedTypes = edges.map((edge) => {
+    if (edge.sourceHandle) {
+      const edgeType = nodes.find((node) => node.type === 'custom').data.selects[edge.sourceHandle];
+      edge.type = edgeType;
+    }
 
-  useEffect(() => {
-    fetch('/api/data')
-      .then(response => response.json())
-      .then(data => {
-        const { nodes, edges } = data;
-        setElements([...nodes, ...edges]);
-      });
-  }, []);
+    return edge;
+  });
 
   return (
-    <div style={{ width: '100vw', height: '100vh' }}>
-      <ReactFlow elements={elements} />
-    </div>
+    <ReactFlow
+      nodes={nodes}
+      edges={edgesWithUpdatedTypes}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      onInit={onInit}
+      fitView
+      attributionPosition="top-right"
+      nodeTypes={nodeTypes}
+    >
+      <MiniMap style={minimapStyle} zoomable pannable />
+      <Controls />
+      <Background color="#aaa" gap={16} />
+    </ReactFlow>
   );
-}
+};
 
-export default App;
+export default OverviewFlow;