Fixed bug that has been fixed at CustomComponents

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -1,13 +1,16 @@
+import { cloneDeep } from "lodash";
 import { Zap } from "lucide-react";
 import { useContext, useEffect, useRef, useState } from "react";
-import { NodeToolbar } from "reactflow";
+import { NodeToolbar, useUpdateNodeInternals } from "reactflow";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import Tooltip from "../../components/TooltipComponent";
 import { useSSE } from "../../contexts/SSEContext";
 import { alertContext } from "../../contexts/alertContext";
+import { TabsContext } from "../../contexts/tabsContext";
 import { typesContext } from "../../contexts/typesContext";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
 import { NodeDataType } from "../../types/flow";
+import { cleanEdges } from "../../util/reactflowUtils";
 import {
   classNames,
   nodeColors,
@@ -25,6 +28,8 @@ export default function GenericNode({
 }) {
   const [data, setData] = useState(olddata);
   const { setErrorData } = useContext(alertContext);
+  const { updateFlow, flows, tabId } = useContext(TabsContext);
+  const updateNodeInternals = useUpdateNodeInternals();
   const showError = useRef(true);
   const { types, deleteNode, reactFlowInstance } = useContext(typesContext);
   // any to avoid type conflict
@@ -33,10 +38,26 @@ export default function GenericNode({
   const [validationStatus, setValidationStatus] = useState(null);
   // State for outline color
   const { sseData, isBuilding } = useSSE();
-  const refHtml = useRef(null);
   useEffect(() => {
     olddata.node = data.node;
-  }, [data, reactFlowInstance]);
+    let myFlow = flows.find((flow) => flow.id === tabId);
+    if (reactFlowInstance && myFlow) {
+      let flow = cloneDeep(myFlow);
+      flow.data = reactFlowInstance.toObject();
+      cleanEdges({
+        flow: {
+          edges: flow.data.edges,
+          nodes: flow.data.nodes,
+        },
+        updateEdge: (edge) => {
+          flow.data.edges = edge;
+          reactFlowInstance.setEdges(edge);
+          updateNodeInternals(data.id);
+        },
+      });
+      updateFlow(flow);
+    }
+  }, [data]);
 
   // New useEffect to watch for changes in sseData and update validation status
   useEffect(() => {

src/frontend/src/components/textAreaComponent/index.tsx

@@ -17,7 +17,7 @@ export default function TextAreaComponent({
     if (disabled) {
       onChange("");
     }
-  }, [disabled, onChange]);
+  }, [disabled]);
 
   return (
     <div className={disabled ? "pointer-events-none w-full " : " w-full"}>

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -125,7 +125,7 @@ export default function Page({ flow }: { flow: FlowType }) {
       updateFlow(flow);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [nodes, edges]);
+  }, [edges]);
   //update flow when tabs change
   useEffect(() => {
     setNodes(flow?.data?.nodes ?? []);

src/frontend/src/util/reactflowUtils.ts

@@ -6,12 +6,14 @@ export function cleanEdges({
   updateEdge,
 }: cleanEdgesType) {
   let newEdges = _.cloneDeep(edges);
+  let changed = false;
   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);
+      changed = true;
     }
     // check if the source and target handle still exists
     if (sourceNode && targetNode) {
@@ -28,6 +30,7 @@ export function cleanEdges({
           targetNode.data.id;
         if (id !== targetHandle) {
           newEdges = newEdges.filter((e) => e.id !== edge.id);
+          changed = true;
         }
       }
       if (sourceHandle) {
@@ -38,9 +41,12 @@ export function cleanEdges({
         ].join("|");
         if (id !== sourceHandle) {
           newEdges = newEdges.filter((e) => e.id !== edge.id);
+          changed = true;
         }
       }
     }
   });
-  updateEdge(newEdges);
+  if (changed) {
+    updateEdge(newEdges);
+  }
 }