Fixed bug where edges are not maintained after refreshing custom component; Fixed bug where handles are not refreshed on custom component;

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

@@ -67,6 +67,7 @@ export default function ParameterComponent({
   const { data: myData } = useContext(typesContext);
 
   const handleOnNewValue = (newValue: any) => {
+    console.log("9euihfw9uebfw9eubgwpirbg");
     let newData = cloneDeep(data);
     newData.node.template[name].value = newValue;
     setData(newData);

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(() => {
@@ -159,28 +180,17 @@ export default function GenericNode({
               .filter((t) => t.charAt(0) !== "_")
               .map((t: string, idx) => (
                 <div key={idx}>
-                  {/* {idx === 0 ? (
-                                <div
-                                    className={classNames(
-                                        "px-5 py-2 mt-2 text-center",
-                                        Object.keys(data.node.template).filter(
-                                            (key) =>
-                                                !key.startsWith("_") &&
-                                                data.node.template[key].show &&
-                                                !data.node.template[key].advanced
-                                        ).length === 0
-                                            ? "hidden"
-                                            : ""
-                                    )}
-                                >
-                                    Inputs
-                                </div>
-                            ) : (
-                                <></>
-                            )} */}
                   {data.node.template[t].show &&
                   !data.node.template[t].advanced ? (
                     <ParameterComponent
+                      key={
+                        (data.node.template[t].input_types?.join(";") ??
+                          data.node.template[t].type) +
+                        "|" +
+                        t +
+                        "|" +
+                        data.id
+                      }
                       data={data}
                       setData={setData}
                       color={
@@ -227,10 +237,8 @@ export default function GenericNode({
             >
               {" "}
             </div>
-            {/* <div className="px-5 py-2 mt-2 text-center">
-                  Output
-              </div> */}
             <ParameterComponent
+              key={[data.type, data.id, ...data.node.base_classes].join("|")}
               data={data}
               setData={setData}
               color={nodeColors[types[data.type]] ?? nodeColors.unknown}

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;
         }
       }
     }
-  });
+    if (changed) {
       updateEdge(newEdges);
     }
+  });
+}