Removed Watermark

Data/WebUI/src/components/FlowEditor.jsx

@@ -1,52 +1,68 @@
 import React, { useState, useEffect, useCallback } from "react";
 import ReactFlow, {
-    addEdge,
+  addEdge,
-    Controls,
+  Controls,
-    Background,
+  Background,
 } from "reactflow";
 import "reactflow/dist/style.css";
 import "./FlowEditor.css";
 
 const fetchNodes = async () => {
-    const response = await fetch("/api/workflow");
+  const response = await fetch("/api/workflow");
-    return response.json();
+  return response.json();
 };
 
 const saveWorkflow = async (workflow) => {
-    await fetch("/api/workflow", {
+  await fetch("/api/workflow", {
-        method: "POST",
+    method: "POST",
-        headers: { "Content-Type": "application/json" },
+    headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(workflow),
+    body: JSON.stringify(workflow),
-    });
+  });
 };
 
 export default function FlowEditor() {
-    const [elements, setElements] = useState([]);
+  const [elements, setElements] = useState([]);
 
-    useEffect(() => {
+  useEffect(() => {
-        fetchNodes().then((data) => setElements([...data.nodes, ...data.edges]));
+    fetchNodes().then((data) => {
-    }, []);
+      // Data should contain nodes and edges arrays
+      const newElements = [...data.nodes, ...data.edges];
+      setElements(newElements);
+    });
+  }, []);
 
-    const onConnect = useCallback(
+  const onConnect = useCallback(
-        (params) => {
+    (params) => {
-            const newEdge = { id: `e${params.source}-${params.target}`, ...params };
+      const newEdge = { id: `e${params.source}-${params.target}`, ...params };
-            setElements((els) => [...els, newEdge]);
+      setElements((els) => [...els, newEdge]);
-            saveWorkflow({ nodes: elements.filter(e => e.type), edges: [...elements.filter(e => !e.type), newEdge] });
-        },
-        [elements]
-    );
 
-    return (
+      // Separate nodes/edges for saving:
-        <div className="flow-editor-container">
+      const nodes = elements.filter((el) => el.type);
-            <ReactFlow elements={elements} onConnect={onConnect}>
+      const edges = elements.filter((el) => !el.type);
-                <Controls />
+
-                <Background
+      saveWorkflow({
-                    variant="lines"
+        nodes,
-                    gap={100}
+        edges: [...edges, newEdge],
-                    size={1}
+      });
-                    color="rgba(255, 255, 255, 0.2)" // White grid with 20% opacity
+    },
-                />
+    [elements]
-            </ReactFlow>
+  );
-        </div>
+
-    );
+  return (
+    <div className="flow-editor-container">
+      <ReactFlow
+        proOptions={{ hideAttribution: true }}  // Remove the React Flow watermark
+        elements={elements}
+        onConnect={onConnect}
+      >
+        <Controls />
+        <Background
+          variant="lines"
+          gap={100}
+          size={1}
+          color="rgba(255, 255, 255, 0.2)" // White grid lines at 20% opacity
+        />
+      </ReactFlow>
+    </div>
+  );
 }