From 64dbdc0e9da75d194225a5720d4c14ebb9cf0834 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 4 Oct 2023 20:10:15 -0300 Subject: [PATCH] fix bug on expand and ungroup that does not update connected edges with proxy --- .../components/parameterComponent/index.tsx | 2 +- .../src/CustomNodes/GenericNode/index.tsx | 6 ++-- src/frontend/src/utils/reactflowUtils.ts | 28 +++++++++++-------- 3 files changed, 19 insertions(+), 17 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index cb5fd731a..790813c4b 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -227,7 +227,7 @@ export default function ParameterComponent({ isValidConnection(connection, reactFlowInstance!) } diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index c9bc74f2a..b97f46697 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -71,9 +71,7 @@ export default function GenericNode({ // New useEffect to watch for changes in sseData and update validation status useEffect(() => { - const relevantData = data.node?.flow - ? getGroupStatus(data.node.flow, sseData) - : sseData[data.id]; + const relevantData = sseData[data.id]; if (relevantData) { // Extract validation information from relevantData and update the validationStatus state setValidationStatus(relevantData); @@ -258,7 +256,7 @@ export default function GenericNode({ type: data.node!.template[templateField].type, id: data.id, fieldName: templateField, - Proxy: data.node!.template[templateField].Proxy, + proxy: data.node!.template[templateField].proxy, })} data={data} setData={setData} diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts index 7b4088f13..c4ae64793 100644 --- a/src/frontend/src/utils/reactflowUtils.ts +++ b/src/frontend/src/utils/reactflowUtils.ts @@ -662,7 +662,6 @@ export function generateNodeTemplate(Flow: FlowType) { export function generateNodeFromFlow(flow: FlowType,getNodeId:(type:string)=>string): NodeType { const { nodes } = flow.data!; const outputNode = _.cloneDeep(findLastNode(flow.data!)); - // console.log(flow) const position = getMiddlePoint(nodes); let data = _.cloneDeep(flow); const id = getNodeId(outputNode?.data.type!) @@ -750,6 +749,7 @@ export function ungroupNode( fieldName: field, type, id: proxyId, + inputTypes: inputTypes }; if (node.data.node?.flow) { newTargetHandle.proxy = { @@ -757,9 +757,6 @@ export function ungroupNode( id: node.data.node.template[field].proxy?.id!, }; } - if (inputTypes) { - newTargetHandle.inputTypes = inputTypes; - } newEdge.data.targetHandle = newTargetHandle; newEdge.targetHandle = scapedJSONStringfy(newTargetHandle); } @@ -775,7 +772,7 @@ export function ungroupNode( newEdge.data.sourceHandle = newSourceHandle; newEdge.sourceHandle = scapedJSONStringfy(newSourceHandle); } - if (newEdge.target === groupNode.id || newEdge.source === groupNode.id) { + if (edge.target === groupNode.id || edge.source === groupNode.id) { updatedEdges.push(newEdge); } }); @@ -819,9 +816,8 @@ export function expandGroupNode( groupNode: NodeDataType, ReactFlowInstance: ReactFlowInstance ) { - const { template } = _.cloneDeep(groupNode.node!); - const { flow } = groupNode.node!; - const gNodes: NodeType[] = _.cloneDeep(flow!.data!.nodes); + const { template,flow } = _.cloneDeep(groupNode.node!); + const gNodes: NodeType[] = flow?.data?.nodes!; const gEdges = flow!.data!.edges; //redirect edges to correct proxy node let updatedEdges: Edge[] = []; @@ -841,6 +837,7 @@ export function expandGroupNode( fieldName: field, type, id: proxyId, + inputTypes: inputTypes }; if (node.data.node?.flow) { newTargetHandle.proxy = { @@ -848,9 +845,6 @@ export function expandGroupNode( id: node.data.node.template[field].proxy?.id!, }; } - if (inputTypes) { - newTargetHandle.inputTypes = inputTypes; - } newEdge.data.targetHandle = newTargetHandle; newEdge.targetHandle = scapedJSONStringfy(newTargetHandle); } @@ -866,7 +860,7 @@ export function expandGroupNode( newEdge.data.sourceHandle = newSourceHandle; newEdge.sourceHandle = scapedJSONStringfy(newSourceHandle); } - if (newEdge.target === groupNode.id || newEdge.source === groupNode.id) { + if (edge.target === groupNode.id || edge.source === groupNode.id) { updatedEdges.push(newEdge); } }); @@ -875,6 +869,7 @@ export function expandGroupNode( let { field, id } = template[key].proxy!; let nodeIndex = gNodes.findIndex((n) => n.id === id); if (nodeIndex !== -1) { + let proxy: { id: string; field: string } | undefined; let display_name: string; let show = gNodes[nodeIndex].data.node!.template[field].show; let advanced = gNodes[nodeIndex].data.node!.template[field].advanced; @@ -884,11 +879,20 @@ export function expandGroupNode( } else { display_name = gNodes[nodeIndex].data.node!.template[field].name; } + if(gNodes[nodeIndex].data.node!.template[field].proxy){ + proxy = gNodes[nodeIndex].data.node!.template[field].proxy; + } gNodes[nodeIndex].data.node!.template[field] = template[key]; gNodes[nodeIndex].data.node!.template[field].show = show; gNodes[nodeIndex].data.node!.template[field].advanced = advanced; gNodes[nodeIndex].data.node!.template[field].display_name = display_name; gNodes[nodeIndex].selected = false; + if(proxy){ + gNodes[nodeIndex].data.node!.template[field].proxy = proxy; + } + else{ + delete gNodes[nodeIndex].data.node!.template[field].proxy + } } });