From 0ac7845a9a3d998a4b6b8d4b4107f77586e9301e Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
Date: Wed, 7 Aug 2024 17:27:56 -0300
Subject: [PATCH] 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
---
 src/frontend/src/constants/constants.ts                  | 2 +-
 src/frontend/src/hooks/flows/use-upload-flow.ts          | 5 +++++
 .../pages/FlowPage/components/PageComponent/index.tsx    | 6 +++++-
 src/frontend/src/utils/layoutUtils.ts                    | 9 ++++++---
 src/frontend/src/utils/reactflowUtils.ts                 | 2 +-
 5 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index 1b0901c60..659e308ca 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/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;
diff --git a/src/frontend/src/hooks/flows/use-upload-flow.ts b/src/frontend/src/hooks/flows/use-upload-flow.ts
index 4466500bd..7d225e20c 100644
--- a/src/frontend/src/hooks/flows/use-upload-flow.ts
+++ b/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(
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index cddddeb05..b05c3b838 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/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]);
 
diff --git a/src/frontend/src/utils/layoutUtils.ts b/src/frontend/src/utils/layoutUtils.ts
index b998d98a9..990da635b 100644
--- a/src/frontend/src/utils/layoutUtils.ts
+++ b/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;
 };
diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index 9eb93843e..5e04f906c 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/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);
 };