Merge branch 'zustand/io/migration' of github.com:logspace-ai/langflow into zustand/io/migration

src/backend/langflow/api/utils.py

@@ -171,19 +171,23 @@ async def check_langflow_version(component: StoreComponentCreate):
         )
 
 
-def format_elapsed_time(elapsed_time) -> str:
-    # Format elapsed time to human readable format coming from
-    # perf_counter()
-    # If the elapsed time is less than 1 second, return ms
-    # If the elapsed time is less than 1 minute, return seconds rounded to 2 decimals
-    time_str = ""
+def format_elapsed_time(elapsed_time: float) -> str:
+    """Format elapsed time to a human-readable format coming from perf_counter().
+
+    - Less than 1 second: returns milliseconds
+    - Less than 1 minute: returns seconds rounded to 2 decimals
+    - 1 minute or more: returns minutes and seconds
+    """
     if elapsed_time < 1:
-        elapsed_time = int(round(elapsed_time * 1000))
-        time_str = f"{elapsed_time} ms"
+        milliseconds = int(round(elapsed_time * 1000))
+        return f"{milliseconds} ms"
     elif elapsed_time < 60:
-        elapsed_time = round(elapsed_time, 2)
-        time_str = f"{elapsed_time} seconds"
+        seconds = round(elapsed_time, 2)
+        unit = "second" if seconds == 1 else "seconds"
+        return f"{seconds} {unit}"
     else:
-        elapsed_time = round(elapsed_time / 60, 2)
-        time_str = f"{elapsed_time} minutes"
-    return time_str
+        minutes = int(elapsed_time // 60)
+        seconds = round(elapsed_time % 60, 2)
+        minutes_unit = "minute" if minutes == 1 else "minutes"
+        seconds_unit = "second" if seconds == 1 else "seconds"
+        return f"{minutes} {minutes_unit}, {seconds} {seconds_unit}"

src/backend/langflow/api/v1/chat.py

@@ -287,6 +287,8 @@ async def build_vertex(
         cache = chat_service.get_cache(flow_id)
         graph = cache.get("result")
         result_dict = {}
+        duration = ""
+        start_time = time.perf_counter()
         if tweaks:
             graph = process_tweaks_on_graph(graph, tweaks)
         if not isinstance(graph, Graph):
@@ -303,7 +305,8 @@ async def build_vertex(
             # to the frontend
             vertex.set_artifacts()
             artifacts = vertex.artifacts
-            result_dict = ResultDict(results=result_dict, artifacts=artifacts)
+            duration = format_elapsed_time(time.perf_counter() - start_time)
+            result_dict = ResultDict(results=result_dict, artifacts=artifacts, duration=duration)
         except Exception as exc:
             params = str(exc)
             valid = False

src/backend/langflow/api/v1/schemas.py

@@ -221,9 +221,11 @@ class VerticesOrderResponse(BaseModel):
 
 
 class ResultDict(BaseModel):
+    """Outputs of the vertex build process."""
+
     results: Optional[Any] = Field(default_factory=dict)
     artifacts: Optional[Any] = Field(default_factory=dict)
-    """Outputs of the vertex build process."""
+    duration: Optional[float] = None
 
 
 class VertexBuildResponse(BaseModel):

src/frontend/src/controllers/API/index.ts

@@ -877,7 +877,7 @@ export async function getFlowPool({
 }: {
   flowId: string;
   nodeId?: string;
-}): Promise<AxiosResponse<FlowPoolType>> {
+}): Promise<AxiosResponse<{ vertex_builds: FlowPoolType }>> {
   const config = {};
   config["params"] = { flow_id: flowId };
   if (nodeId) {

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -56,7 +56,6 @@ const EditNodeModal = forwardRef(
   ) => {
     const [myData, setMyData] = useState(data);
 
-    const setPending = useFlowStore((state) => state.setPending);
     const edges = useFlowStore((state) => state.edges);
     const setNode = useFlowStore((state) => state.setNode);
 
@@ -546,7 +545,6 @@ const EditNodeModal = forwardRef(
                   node: myData.node,
                 },
               }));
-              setPending(true);
               setOpen(false);
             }}
             type="submit"

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

@@ -69,7 +69,6 @@ export default function Page({
   const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
   const paste = useFlowStore((state) => state.paste);
   const resetFlow = useFlowStore((state) => state.resetFlow);
-  const setFlowPool = useFlowStore((state) => state.setFlowPool);
   const lastCopiedSelection = useFlowStore(
     (state) => state.lastCopiedSelection
   );
@@ -80,7 +79,6 @@ export default function Page({
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const [selectionMenuVisible, setSelectionMenuVisible] = useState(false);
-  const [loading, setLoading] = useState(true);
   const edgeUpdateSuccessful = useRef(true);
 
   const position = useRef({ x: 0, y: 0 });
@@ -164,12 +162,8 @@ export default function Page({
         edges: flow?.data?.edges ?? [],
         viewport: flow?.data?.viewport ?? { zoom: 1, x: 0, y: 0 },
       });
-      //   getFlowPool({flowId: currentFlowId}).then((flowPool) => {
-      //     setFlowPool(flowPool.data)
-      //     setLoading(false)
-      //   })
     }
-  }, [currentFlowId, reactFlowInstance, setLoading, setFlowPool]);
+  }, [currentFlowId, reactFlowInstance]);
 
   useEffect(() => {
     return () => {

src/frontend/src/stores/flowStore.ts

@@ -11,7 +11,7 @@ import {
 } from "reactflow";
 import { create } from "zustand";
 import { INPUT_TYPES, OUTPUT_TYPES } from "../constants/constants";
-import { updateFlowInDatabase } from "../controllers/API";
+import { getFlowPool, updateFlowInDatabase } from "../controllers/API";
 import {
   NodeDataType,
   NodeType,
@@ -38,7 +38,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   nodes: [],
   edges: [],
   isBuilding: false,
-  isPending: false,
+  isPending: true,
   hasIO: false,
   reactFlowInstance: null,
   lastCopiedSelection: null,
@@ -49,19 +49,12 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     set({ flowPool });
   },
   addDataToFlowPool: (data: any, nodeId: string) => {
-    const currentFlow = useFlowsManagerStore.getState().currentFlow;
     let newFlowPool = cloneDeep({ ...get().flowPool });
     if (!newFlowPool[nodeId]) newFlowPool[nodeId] = [data];
     else {
       newFlowPool[nodeId].push(data);
     }
     get().setFlowPool(newFlowPool);
-    if (currentFlow) {
-      window.sessionStorage.setItem(
-        `${currentFlow!.id}`,
-        JSON.stringify(newFlowPool)
-      );
-    }
   },
   CleanFlowPool: () => {
     get().setFlowPool({});
@@ -71,12 +64,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   },
   resetFlow: ({ nodes, edges, viewport }) => {
     const currentFlow = useFlowsManagerStore.getState().currentFlow;
-    let flowPool = {};
-    if (currentFlow) {
-      flowPool = JSON.parse(
-        window.sessionStorage.getItem(`${currentFlow!.id}`) ?? "{}"
-      );
-    }
     let newEdges = cleanEdges(nodes, edges);
     const { inputs, outputs } = getInputsAndOutputs(nodes);
     set({
@@ -86,9 +73,13 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       inputs,
       outputs,
       hasIO: inputs.length > 0 || outputs.length > 0,
-      flowPool,
     });
     get().reactFlowInstance!.setViewport(viewport);
+    if (currentFlow) {
+      getFlowPool({ flowId: currentFlow.id }).then((flowPool) => {
+        set({ flowPool: flowPool.data.vertex_builds });
+      });
+    }
   },
   setIsBuilding: (isBuilding) => {
     set({ isBuilding });