new function to clean invalid edges of a flow

src/frontend/src/types/utils/reactflowUtils.ts

@@ -0,0 +1,10 @@
+import { Edge } from "reactflow";
+import { NodeType } from "../flow";
+
+export type cleanEdgesType = {
+  flow: {
+    edges: Edge[];
+    nodes: NodeType[];
+  };
+  updateEdge: (edge: Edge[]) => void;
+};

src/frontend/src/util/reactflowUtils.ts

@@ -0,0 +1,47 @@
+import _ from "lodash";
+import { cleanEdgesType } from "./../types/utils/reactflowUtils";
+
+export function cleanEdges({
+  flow: { edges, nodes },
+  updateEdge,
+}: cleanEdgesType) {
+  let newEdges = _.cloneDeep(edges);
+  console.log("cleanEdges", newEdges);
+  edges.forEach((edge) => {
+    // check if the source and target node still exists
+    const sourceNode = nodes.find((node) => node.id === edge.source);
+    const targetNode = nodes.find((node) => node.id === edge.target);
+    if (!sourceNode || !targetNode) {
+      newEdges = newEdges.filter((e) => e.id !== edge.id);
+    }
+    // check if the source and target handle still exists
+    if (sourceNode && targetNode) {
+      const sourceHandle = edge.sourceHandle; //right
+      const targetHandle = edge.targetHandle; //left
+      if (targetHandle) {
+        const field = targetHandle.split("|")[1];
+        const id =
+          (targetNode.data.node.template[field].input_types?.join(";") ??
+            targetNode.data.node.template[field].type) +
+          "|" +
+          field +
+          "|" +
+          targetNode.data.id;
+        if (id !== targetHandle) {
+          newEdges = newEdges.filter((e) => e.id !== edge.id);
+        }
+      }
+      if (sourceHandle) {
+        const id = [
+          sourceNode.data.type,
+          sourceNode.data.id,
+          ...sourceNode.data.node.base_classes,
+        ].join("|");
+        if (id !== sourceHandle) {
+          newEdges = newEdges.filter((e) => e.id !== edge.id);
+        }
+      }
+    }
+  });
+  updateEdge(newEdges);
+}