From 83bdd81ec3c8630cc69a0ad1e5c6afae44166640 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Fri, 7 Jun 2024 16:25:10 -0300 Subject: [PATCH] update ungroup working, does not keep selected output --- .../components/OutputComponent/index.tsx | 2 +- .../components/parameterComponent/index.tsx | 2 +- .../components/nodeToolbarComponent/index.tsx | 25 ++-- src/frontend/src/utils/reactflowUtils.ts | 109 ++++++++++-------- 4 files changed, 76 insertions(+), 62 deletions(-) diff --git a/src/frontend/src/CustomNodes/genericNode/components/OutputComponent/index.tsx b/src/frontend/src/CustomNodes/genericNode/components/OutputComponent/index.tsx index 0a0b05738..c8cf9b9a5 100644 --- a/src/frontend/src/CustomNodes/genericNode/components/OutputComponent/index.tsx +++ b/src/frontend/src/CustomNodes/genericNode/components/OutputComponent/index.tsx @@ -67,7 +67,7 @@ export default function OutputComponent({ {proxy ? ( - {proxy.id}}> + {proxy.nodeDisplayName}}> {name} ) : ( diff --git a/src/frontend/src/CustomNodes/genericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/genericNode/components/parameterComponent/index.tsx index 3c35515f0..5ac82a823 100644 --- a/src/frontend/src/CustomNodes/genericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/genericNode/components/parameterComponent/index.tsx @@ -143,7 +143,7 @@ export default function ParameterComponent({ } nodeId={data.id} frozen={data.node?.frozen} - name={outputName ?? type ?? title} + name={title ?? type} /> ) : ( {title} diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index bbd5573cb..ae7dc2aa8 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -58,7 +58,7 @@ export default function NodeToolbarComponent({ data.node.template[templateField].type === "Any" || data.node.template[templateField].type === "int" || data.node.template[templateField].type === "dict" || - data.node.template[templateField].type === "NestedDict") + data.node.template[templateField].type === "NestedDict"), ).length; const templates = useTypesStore((state) => state.templates); const hasStore = useStoreStore((state) => state.hasStore); @@ -85,7 +85,7 @@ export default function NodeToolbarComponent({ const [showconfirmShare, setShowconfirmShare] = useState(false); const [showOverrideModal, setShowOverrideModal] = useState(false); const [flowComponent, setFlowComponent] = useState( - createFlowComponent(cloneDeep(data), version) + createFlowComponent(cloneDeep(data), version), ); const openInNewTab = (url) => { @@ -100,7 +100,7 @@ export default function NodeToolbarComponent({ const updateNodeInternals = useUpdateNodeInternals(); const setLastCopiedSelection = useFlowStore( - (state) => state.setLastCopiedSelection + (state) => state.setLastCopiedSelection, ); const setSuccessData = useAlertStore((state) => state.setSuccessData); @@ -153,7 +153,8 @@ export default function NodeToolbarComponent({ nodes, edges, setNodes, - setEdges + setEdges, + data.node?.outputs, ); break; case "override": @@ -177,7 +178,7 @@ export default function NodeToolbarComponent({ y: 10, paneX: nodes.find((node) => node.id === data.id)?.position.x, paneY: nodes.find((node) => node.id === data.id)?.position.y, - } + }, ); break; case "update": @@ -215,13 +216,13 @@ export default function NodeToolbarComponent({ }; const isSaved = flows.some((flow) => - Object.values(flow).includes(data.node?.display_name!) + Object.values(flow).includes(data.node?.display_name!), ); const setNode = useFlowStore((state) => state.setNode); const handleOnNewValue = ( - newValue: string | string[] | boolean | Object[] + newValue: string | string[] | boolean | Object[], ): void => { if (data.node!.template[name].value !== newValue) { takeSnapshot(); @@ -408,7 +409,7 @@ export default function NodeToolbarComponent({ data-testid="save-button-modal" className={classNames( "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10", - hasCode ? " " : " rounded-l-md " + hasCode ? " " : " rounded-l-md ", )} onClick={(event) => { event.preventDefault(); @@ -426,7 +427,7 @@ export default function NodeToolbarComponent({ @@ -474,7 +475,7 @@ export default function NodeToolbarComponent({
Node[])) => void, setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void, + outputs?: OutputFieldType[], ) { const idsMap = updateIds(flow!.data!); updateProxyIdsOnTemplate(template, idsMap); @@ -1166,51 +1167,51 @@ export function expandGroupNode( updateEdgesIds(flowEdges, idsMap); const gNodes: NodeType[] = cloneDeep(flow?.data?.nodes!); const gEdges = cloneDeep(flow!.data!.edges); - //redirect edges to correct proxy node - let updatedEdges: Edge[] = []; - flowEdges.forEach((edge) => { - let newEdge = cloneDeep(edge); - if (newEdge.target === id) { - const targetHandle: targetHandleType = newEdge.data.targetHandle; - if (targetHandle.proxy) { - let type = targetHandle.type; - let field = targetHandle.proxy.field; - let proxyId = targetHandle.proxy.id; - let inputTypes = targetHandle.inputTypes; - let node: NodeType = gNodes.find((n) => n.id === proxyId)!; - if (node) { - newEdge.target = proxyId; - let newTargetHandle: targetHandleType = { - fieldName: field, - type, - id: proxyId, - inputTypes: inputTypes, - }; - if (node.data.node?.flow) { - newTargetHandle.proxy = { - field: node.data.node.template[field].proxy?.field!, - id: node.data.node.template[field].proxy?.id!, - }; - } - newEdge.data.targetHandle = newTargetHandle; - newEdge.targetHandle = scapedJSONStringfy(newTargetHandle); - } - } - } - if (newEdge.source === id) { - const lastNode = cloneDeep(findLastNode(flow!.data!)); - newEdge.source = lastNode!.id; - let newSourceHandle: sourceHandleType = scapeJSONParse( - newEdge.sourceHandle!, - ); - newSourceHandle.id = lastNode!.id; - newEdge.data.sourceHandle = newSourceHandle; - newEdge.sourceHandle = scapedJSONStringfy(newSourceHandle); - } - if (edge.target === id || edge.source === id) { - updatedEdges.push(newEdge); - } - }); + // //redirect edges to correct proxy node + // let updatedEdges: Edge[] = []; + // flowEdges.forEach((edge) => { + // let newEdge = cloneDeep(edge); + // if (newEdge.target === id) { + // const targetHandle: targetHandleType = newEdge.data.targetHandle; + // if (targetHandle.proxy) { + // let type = targetHandle.type; + // let field = targetHandle.proxy.field; + // let proxyId = targetHandle.proxy.id; + // let inputTypes = targetHandle.inputTypes; + // let node: NodeType = gNodes.find((n) => n.id === proxyId)!; + // if (node) { + // newEdge.target = proxyId; + // let newTargetHandle: targetHandleType = { + // fieldName: field, + // type, + // id: proxyId, + // inputTypes: inputTypes, + // }; + // if (node.data.node?.flow) { + // newTargetHandle.proxy = { + // field: node.data.node.template[field].proxy?.field!, + // id: node.data.node.template[field].proxy?.id!, + // }; + // } + // newEdge.data.targetHandle = newTargetHandle; + // newEdge.targetHandle = scapedJSONStringfy(newTargetHandle); + // } + // } + // } + // if (newEdge.source === id) { + // const lastNode = cloneDeep(findLastNode(flow!.data!)); + // newEdge.source = lastNode!.id; + // let newSourceHandle: sourceHandleType = scapeJSONParse( + // newEdge.sourceHandle!, + // ); + // newSourceHandle.id = lastNode!.id; + // newEdge.data.sourceHandle = newSourceHandle; + // newEdge.sourceHandle = scapedJSONStringfy(newSourceHandle); + // } + // if (edge.target === id || edge.source === id) { + // updatedEdges.push(newEdge); + // } + // }); //update template values Object.keys(template).forEach((key) => { if (template[key].proxy) { @@ -1245,12 +1246,24 @@ export function expandGroupNode( } } }); - + outputs?.forEach((output) => { + let nodeIndex = gNodes.findIndex((n) => n.id === output.proxy!.id); + if (nodeIndex !== -1) { + if (gNodes[nodeIndex].data.node?.outputs) { + const nodeOutputIndex = gNodes[nodeIndex].data.node!.outputs!.findIndex( + (o) => o.name === output.proxy?.name, + ); + if (nodeOutputIndex !== -1 && output.selected) { + gNodes[nodeIndex].data.node!.outputs![nodeOutputIndex].selected = + output.selected; + } + } + } + }); const filteredNodes = [...nodes.filter((n) => n.id !== id), ...gNodes]; const filteredEdges = [ ...edges.filter((e) => e.target !== id && e.source !== id), ...gEdges, - ...updatedEdges, ]; setNodes(filteredNodes); setEdges(filteredEdges);