Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: improve layout options and make sure nodes and flow have position data #3231

Merged
merged 6 commits into from
Aug 7, 2024
Merged

feat: improve layout options and make sure nodes and flow have position data #3231

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c5ff7ab
feat: Export needsLayout function for layout handling in reactflowUti…
ogabrielluiz Aug 7, 2024
d2cc8db
feat(layoutUtils): Enhance ELK layout options for improved graph rend…
ogabrielluiz Aug 7, 2024
5c3f061
feat: Update PageComponent to fit view when viewport is at (0,0)
ogabrielluiz Aug 7, 2024
3059364
feat(uploadFlow): Integrate processDataFromFlow to handle flows durin…
ogabrielluiz Aug 7, 2024
ecd08d0
feat(constants): Update NODE_WIDTH from 384 to 400 for improved compo…
ogabrielluiz Aug 7, 2024
ad0aa31
refactor(layoutUtils): Remove debug console logs from getLayoutedNodes
ogabrielluiz Aug 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/frontend/src/constants/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -880,5 +880,5 @@ export const LANGFLOW_ACCESS_TOKEN_EXPIRE_SECONDS_ENV =
Number(process.env.ACCESS_TOKEN_EXPIRE_SECONDS) -
Number(process.env.ACCESS_TOKEN_EXPIRE_SECONDS) * 0.1;
export const TEXT_FIELD_TYPES: string[] = ["str", "SecretStr"];
export const NODE_WIDTH = 384;
export const NODE_WIDTH = 400;
export const NODE_HEIGHT = NODE_WIDTH * 3;
5 changes: 5 additions & 0 deletions src/frontend/src/hooks/flows/use-upload-flow.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { getObjectsFromFilelist } from "@/helpers/get-objects-from-filelist";
import useFlowStore from "@/stores/flowStore";
import useFlowsManagerStore from "@/stores/flowsManagerStore";
import { FlowType } from "@/types/flow";
import { processDataFromFlow } from "@/utils/reactflowUtils";
import useAddFlow from "./use-add-flow";

const useUploadFlow = () => {
Expand Down Expand Up @@ -56,6 +57,10 @@ const useUploadFlow = () => {
}): Promise<void> => {
try {
let flows = await getFlowsToUpload({ files });
for (const flow of flows) {
await processDataFromFlow(flow);
}

if (
isComponent !== undefined &&
flows.every(
Expand Down
6 changes: 5 additions & 1 deletion src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,11 @@ export default function Page({

useEffect(() => {
if (reactFlowInstance && currentFlowId) {
reactFlowInstance!.setViewport(viewport);
if (viewport.x == 0 && viewport.y == 0) {
reactFlowInstance.fitView();
} else {
reactFlowInstance.setViewport(viewport);
}
}
}, [currentFlowId, reactFlowInstance]);

Expand Down
9 changes: 6 additions & 3 deletions src/frontend/src/utils/layoutUtils.ts
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we remove those console.logs?

Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,14 @@ import { Edge } from "reactflow";
const layoutOptions = {
"elk.algorithm": "layered",
"elk.direction": "RIGHT",
"elk.components.direction": "DOWN",
"elk.layered.spacing.edgeNodeBetweenLayers": "40",
"elk.spacing.nodeNode": "40",
"elk.layered.nodePlacement.strategy": "SIMPLE",
"elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
"elk.separateConnectedComponents": true,
"elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
"elk.spacing.componentComponent": `${NODE_WIDTH}`,
"elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES",
};
const elk = new ELK();

Expand Down Expand Up @@ -54,7 +59,6 @@ export const getLayoutedNodes = async (nodes: NodeType[], edges: Edge[]) => {
targets: [e.targetHandle || e.target],
})),
};

const layoutedGraph = await elk.layout(graph);

const layoutedNodes = nodes.map((node) => {
Expand All @@ -71,6 +75,5 @@ export const getLayoutedNodes = async (nodes: NodeType[], edges: Edge[]) => {
type: "genericNode",
};
});

return layoutedNodes;
};
2 changes: 1 addition & 1 deletion src/frontend/src/utils/reactflowUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,7 +306,7 @@ export const processFlows = (DbData: FlowType[], skipUpdate = true) => {
return { data: savedComponents, flows: DbData };
};

const needsLayout = (nodes: NodeType[]) => {
export const needsLayout = (nodes: NodeType[]) => {
return nodes.some((node) => !node.position);
};

Expand Down
Loading