Added React Flow Editor Code and ReactFlow Library

Data/WebUI/src/components/FlowEditor.jsx

@@ -0,0 +1,46 @@
+import React, { useState, useEffect, useCallback } from "react";
+import ReactFlow, {
+    addEdge,
+    Controls,
+    Background,
+} from "reactflow";
+import "reactflow/dist/style.css";
+
+const fetchNodes = async () => {
+    const response = await fetch("/api/workflow");
+    return response.json();
+};
+
+const saveWorkflow = async (workflow) => {
+    await fetch("/api/workflow", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(workflow),
+    });
+};
+
+export default function FlowEditor() {
+    const [elements, setElements] = useState([]);
+
+    useEffect(() => {
+        fetchNodes().then((data) => setElements([...data.nodes, ...data.edges]));
+    }, []);
+
+    const onConnect = useCallback(
+        (params) => {
+            const newEdge = { id: `e${params.source}-${params.target}`, ...params };
+            setElements((els) => [...els, newEdge]);
+            saveWorkflow({ nodes: elements.filter(e => e.type), edges: [...elements.filter(e => !e.type), newEdge] });
+        },
+        [elements]
+    );
+
+    return (
+        <div style={{ width: "100vw", height: "100vh" }}>
+            <ReactFlow elements={elements} onConnect={onConnect}>
+                <Controls />
+                <Background />
+            </ReactFlow>
+        </div>
+    );
+}