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> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
{proxy ? ( {proxy ? (
<ShadTooltip content={<span>{proxy.id}</span>}> <ShadTooltip content={<span>{proxy.nodeDisplayName}</span>}>
<span>{name}</span> <span>{name}</span>
</ShadTooltip> </ShadTooltip>
) : ( ) : (

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

@ -143,7 +143,7 @@ export default function ParameterComponent({
} }
nodeId={data.id} nodeId={data.id}
frozen={data.node?.frozen} frozen={data.node?.frozen}
name={outputName ?? type ?? title} name={title ?? type}
/> />
) : ( ) : (
<span>{title}</span> <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 === "Any" ||
data.node.template[templateField].type === "int" || data.node.template[templateField].type === "int" ||
data.node.template[templateField].type === "dict" || data.node.template[templateField].type === "dict" ||
data.node.template[templateField].type === "NestedDict") data.node.template[templateField].type === "NestedDict"),
).length; ).length;
const templates = useTypesStore((state) => state.templates); const templates = useTypesStore((state) => state.templates);
const hasStore = useStoreStore((state) => state.hasStore); const hasStore = useStoreStore((state) => state.hasStore);
@ -85,7 +85,7 @@ export default function NodeToolbarComponent({
const [showconfirmShare, setShowconfirmShare] = useState(false); const [showconfirmShare, setShowconfirmShare] = useState(false);
const [showOverrideModal, setShowOverrideModal] = useState(false); const [showOverrideModal, setShowOverrideModal] = useState(false);
const [flowComponent, setFlowComponent] = useState<FlowType>( const [flowComponent, setFlowComponent] = useState<FlowType>(
createFlowComponent(cloneDeep(data), version) createFlowComponent(cloneDeep(data), version),
); );
const openInNewTab = (url) => { const openInNewTab = (url) => {
@ -100,7 +100,7 @@ export default function NodeToolbarComponent({
const updateNodeInternals = useUpdateNodeInternals(); const updateNodeInternals = useUpdateNodeInternals();
const setLastCopiedSelection = useFlowStore( const setLastCopiedSelection = useFlowStore(
(state) => state.setLastCopiedSelection (state) => state.setLastCopiedSelection,
); );
const setSuccessData = useAlertStore((state) => state.setSuccessData); const setSuccessData = useAlertStore((state) => state.setSuccessData);
@ -153,7 +153,8 @@ export default function NodeToolbarComponent({
nodes, nodes,
edges, edges,
setNodes, setNodes,
setEdges setEdges,
data.node?.outputs,
); );
break; break;
case "override": case "override":
@ -177,7 +178,7 @@ export default function NodeToolbarComponent({
y: 10, y: 10,
paneX: nodes.find((node) => node.id === data.id)?.position.x, paneX: nodes.find((node) => node.id === data.id)?.position.x,
paneY: nodes.find((node) => node.id === data.id)?.position.y, paneY: nodes.find((node) => node.id === data.id)?.position.y,
} },
); );
break; break;
case "update": case "update":
@ -215,13 +216,13 @@ export default function NodeToolbarComponent({
}; };
const isSaved = flows.some((flow) => 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 setNode = useFlowStore((state) => state.setNode);
const handleOnNewValue = ( const handleOnNewValue = (
newValue: string | string[] | boolean | Object[] newValue: string | string[] | boolean | Object[],
): void => { ): void => {
if (data.node!.template[name].value !== newValue) { if (data.node!.template[name].value !== newValue) {
takeSnapshot(); takeSnapshot();
@ -408,7 +409,7 @@ export default function NodeToolbarComponent({
data-testid="save-button-modal" data-testid="save-button-modal"
className={classNames( 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",
hasCode ? " " : " rounded-l-md " hasCode ? " " : " rounded-l-md ",
)} )}
onClick={(event) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
@ -426,7 +427,7 @@ export default function NodeToolbarComponent({
<button <button
data-testid="duplicate-button-modal" data-testid="duplicate-button-modal"
className={classNames( 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) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
@ -440,7 +441,7 @@ export default function NodeToolbarComponent({
<ShadTooltip content="Freeze" side="top"> <ShadTooltip content="Freeze" side="top">
<button <button
className={classNames( 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) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
@ -461,7 +462,7 @@ export default function NodeToolbarComponent({
className={cn( className={cn(
"h-4 w-4 transition-all", "h-4 w-4 transition-all",
// TODO UPDATE THIS COLOR TO BE A VARIABLE // TODO UPDATE THIS COLOR TO BE A VARIABLE
frozen ? "animate-wiggle text-ice" : "" frozen ? "animate-wiggle text-ice" : "",
)} )}
/> />
</button> </button>
@ -474,7 +475,7 @@ export default function NodeToolbarComponent({
<div <div
data-testid="more-options-modal" data-testid="more-options-modal"
className={classNames( 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 <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, node.data.node!.display_name ?? node.data.node!.name,
}, },
name: node.id + "_" + output.name, name: node.id + "_" + output.name,
displayName: output.display_name, display_name: output.display_name,
}), }),
); );
} }
@ -1159,6 +1159,7 @@ export function expandGroupNode(
edges: Edge[], edges: Edge[],
setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void, setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void,
setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void, setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void,
outputs?: OutputFieldType[],
) { ) {
const idsMap = updateIds(flow!.data!); const idsMap = updateIds(flow!.data!);
updateProxyIdsOnTemplate(template, idsMap); updateProxyIdsOnTemplate(template, idsMap);
@ -1166,51 +1167,51 @@ export function expandGroupNode(
updateEdgesIds(flowEdges, idsMap); updateEdgesIds(flowEdges, idsMap);
const gNodes: NodeType[] = cloneDeep(flow?.data?.nodes!); const gNodes: NodeType[] = cloneDeep(flow?.data?.nodes!);
const gEdges = cloneDeep(flow!.data!.edges); const gEdges = cloneDeep(flow!.data!.edges);
//redirect edges to correct proxy node // //redirect edges to correct proxy node
let updatedEdges: Edge[] = []; // let updatedEdges: Edge[] = [];
flowEdges.forEach((edge) => { // flowEdges.forEach((edge) => {
let newEdge = cloneDeep(edge); // let newEdge = cloneDeep(edge);
if (newEdge.target === id) { // if (newEdge.target === id) {
const targetHandle: targetHandleType = newEdge.data.targetHandle; // const targetHandle: targetHandleType = newEdge.data.targetHandle;
if (targetHandle.proxy) { // if (targetHandle.proxy) {
let type = targetHandle.type; // let type = targetHandle.type;
let field = targetHandle.proxy.field; // let field = targetHandle.proxy.field;
let proxyId = targetHandle.proxy.id; // let proxyId = targetHandle.proxy.id;
let inputTypes = targetHandle.inputTypes; // let inputTypes = targetHandle.inputTypes;
let node: NodeType = gNodes.find((n) => n.id === proxyId)!; // let node: NodeType = gNodes.find((n) => n.id === proxyId)!;
if (node) { // if (node) {
newEdge.target = proxyId; // newEdge.target = proxyId;
let newTargetHandle: targetHandleType = { // let newTargetHandle: targetHandleType = {
fieldName: field, // fieldName: field,
type, // type,
id: proxyId, // id: proxyId,
inputTypes: inputTypes, // inputTypes: inputTypes,
}; // };
if (node.data.node?.flow) { // if (node.data.node?.flow) {
newTargetHandle.proxy = { // newTargetHandle.proxy = {
field: node.data.node.template[field].proxy?.field!, // field: node.data.node.template[field].proxy?.field!,
id: node.data.node.template[field].proxy?.id!, // id: node.data.node.template[field].proxy?.id!,
}; // };
} // }
newEdge.data.targetHandle = newTargetHandle; // newEdge.data.targetHandle = newTargetHandle;
newEdge.targetHandle = scapedJSONStringfy(newTargetHandle); // newEdge.targetHandle = scapedJSONStringfy(newTargetHandle);
} // }
} // }
} // }
if (newEdge.source === id) { // if (newEdge.source === id) {
const lastNode = cloneDeep(findLastNode(flow!.data!)); // const lastNode = cloneDeep(findLastNode(flow!.data!));
newEdge.source = lastNode!.id; // newEdge.source = lastNode!.id;
let newSourceHandle: sourceHandleType = scapeJSONParse( // let newSourceHandle: sourceHandleType = scapeJSONParse(
newEdge.sourceHandle!, // newEdge.sourceHandle!,
); // );
newSourceHandle.id = lastNode!.id; // newSourceHandle.id = lastNode!.id;
newEdge.data.sourceHandle = newSourceHandle; // newEdge.data.sourceHandle = newSourceHandle;
newEdge.sourceHandle = scapedJSONStringfy(newSourceHandle); // newEdge.sourceHandle = scapedJSONStringfy(newSourceHandle);
} // }
if (edge.target === id || edge.source === id) { // if (edge.target === id || edge.source === id) {
updatedEdges.push(newEdge); // updatedEdges.push(newEdge);
} // }
}); // });
//update template values //update template values
Object.keys(template).forEach((key) => { Object.keys(template).forEach((key) => {
if (template[key].proxy) { 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 filteredNodes = [...nodes.filter((n) => n.id !== id), ...gNodes];
const filteredEdges = [ const filteredEdges = [
...edges.filter((e) => e.target !== id && e.source !== id), ...edges.filter((e) => e.target !== id && e.source !== id),
...gEdges, ...gEdges,
...updatedEdges,
]; ];
setNodes(filteredNodes); setNodes(filteredNodes);
setEdges(filteredEdges); setEdges(filteredEdges);