From 19aca4a0312e5f3347bb48e758917d9462d696d6 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 20 Jul 2023 10:03:11 -0300 Subject: [PATCH] Fixed bug where edges are not maintained after refreshing custom component; Fixed bug where handles are not refreshed on custom component; --- .../components/parameterComponent/index.tsx | 1 + .../src/CustomNodes/GenericNode/index.tsx | 58 +++++++++++-------- .../components/textAreaComponent/index.tsx | 2 +- .../components/PageComponent/index.tsx | 2 +- src/frontend/src/util/reactflowUtils.ts | 8 ++- 5 files changed, 43 insertions(+), 28 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 3516a2242..cd8490aa5 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/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); diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 364f91d01..3ae3d1503 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/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) => (
- {/* {idx === 0 ? ( -
- !key.startsWith("_") && - data.node.template[key].show && - !data.node.template[key].advanced - ).length === 0 - ? "hidden" - : "" - )} - > - Inputs -
- ) : ( - <> - )} */} {data.node.template[t].show && !data.node.template[t].advanced ? ( {" "}
- {/*
- Output -
*/} diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index a6ac0f4df..02af0beac 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/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 ?? []); diff --git a/src/frontend/src/util/reactflowUtils.ts b/src/frontend/src/util/reactflowUtils.ts index da04cc75c..d09ac3455 100644 --- a/src/frontend/src/util/reactflowUtils.ts +++ b/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); + } }); - updateEdge(newEdges); }