jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

update ungroup working, does not keep selected output

Browse source
This commit is contained in:
anovazzi1 2024-06-07 16:25:10 -03:00
commit 83bdd81ec3
4 changed files with 76 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/src/CustomNodes/genericNode/components/OutputComponent/index.tsx
View file

@ -67,7 +67,7 @@ export default function OutputComponent({
</DropdownMenuContent>
</DropdownMenu>
{proxy ? (
<ShadTooltip content={<span>{proxy.id}</span>}>
<ShadTooltip content={<span>{proxy.nodeDisplayName}</span>}>
<span>{name}</span>
</ShadTooltip>
) : (

2
src/frontend/src/CustomNodes/genericNode/components/parameterComponent/index.tsx
View file

@ -143,7 +143,7 @@ export default function ParameterComponent({
}
nodeId={data.id}
frozen={data.node?.frozen}
name={outputName ?? type ?? title}
name={title ?? type}
/>
) : (
<span>{title}</span>

25
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -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<FlowType>(
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({
<button
data-testid="duplicate-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"
"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",
)}
onClick={(event) => {
event.preventDefault();
@ -440,7 +441,7 @@ export default function NodeToolbarComponent({
<ShadTooltip content="Freeze" side="top">
<button
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"
"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",
)}
onClick={(event) => {
event.preventDefault();
@ -461,7 +462,7 @@ export default function NodeToolbarComponent({
className={cn(
"h-4 w-4 transition-all",
// TODO UPDATE THIS COLOR TO BE A VARIABLE
frozen ? "animate-wiggle text-ice" : ""
frozen ? "animate-wiggle text-ice" : "",
)}
/>
</button>
@ -474,7 +475,7 @@ export default function NodeToolbarComponent({
<div
data-testid="more-options-modal"
className={classNames(
"relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
"relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
)}
>
<IconComponent

109
src/frontend/src/utils/reactflowUtils.ts
View file

@ -1056,7 +1056,7 @@ function generateNodeOutputs(flow: FlowType) {
node.data.node!.display_name ?? node.data.node!.name,
},
name: node.id + "_" + output.name,
displayName: output.display_name,
display_name: output.display_name,
}),
);
}
@ -1159,6 +1159,7 @@ export function expandGroupNode(
edges: Edge[],
setNodes: (update: Node[] | ((oldState: Node[]) => 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);