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

* feat: Export needsLayout function for layout handling in reactflowUtils, enhancing node position verification

* feat(layoutUtils): Enhance ELK layout options for improved graph rendering and add debug logs for layout verification

* feat: Update PageComponent to fit view when viewport is at (0,0)

The PageComponent in the FlowPage now fits the view when the viewport is at (0,0). This improves the initial display of the page and enhances the user experience.

* feat(uploadFlow): Integrate processDataFromFlow to handle flows during upload, improving data processing efficiency

* feat(constants): Update NODE_WIDTH from 384 to 400 for improved component layout and consistency in the user interface

* refactor(layoutUtils): Remove debug console logs from getLayoutedNodes

Author: ogabrielluiz

src/frontend/src/constants/constants.ts

@@ -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;

src/frontend/src/hooks/flows/use-upload-flow.ts

@@ -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 = () => {
@@ -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(

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -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]);
 

src/frontend/src/utils/layoutUtils.ts

@@ -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();
 
@@ -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) => {
@@ -71,6 +75,5 @@ export const getLayoutedNodes = async (nodes: NodeType[], edges: Edge[]) => {
       type: "genericNode",
     };
   });
-
   return layoutedNodes;
 };

src/frontend/src/utils/reactflowUtils.ts

@@ -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);
 };