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

src/frontend/src/components/newChatView/index.tsx

@@ -1,8 +1,10 @@
 import { cloneDeep } from "lodash";
 import { useEffect, useRef, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
+import { deleteFlowPool } from "../../controllers/API";
 import useAlertStore from "../../stores/alertStore";
 import useFlowStore from "../../stores/flowStore";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { sendAllProps } from "../../types/api";
 import {
   ChatMessageType,
@@ -29,6 +31,7 @@ export default function newChatView(): JSX.Element {
     CleanFlowPool,
   } = useFlowStore();
   const { setErrorData } = useAlertStore();
+  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
   const [lockChat, setLockChat] = useState(false);
   const messagesRef = useRef<HTMLDivElement | null>(null);
 
@@ -112,7 +115,9 @@ export default function newChatView(): JSX.Element {
   }
   function clearChat(): void {
     setChatHistory([]);
-    CleanFlowPool();
+    deleteFlowPool(currentFlowId).then((_) => {
+      CleanFlowPool();
+    });
     //TODO tell backend to clear chat session
     if (lockChat) setLockChat(false);
   }

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

@@ -16,6 +16,7 @@ import {
 import { UserInputType } from "../../types/components";
 import { FlowStyleType, FlowType } from "../../types/flow";
 import { StoreComponentResponse } from "../../types/store";
+import { FlowPoolType } from "../../types/zustand/flow";
 import {
   APIClassType,
   BuildStatusTypeAPI,
@@ -869,3 +870,26 @@ export async function postBuildVertex(
 export async function downloadImage({ flowId, fileName }): Promise<any> {
   return await api.get(`${BASE_URL_API}files/images/${flowId}/${fileName}`);
 }
+
+export async function getFlowPool({
+  flowId,
+  nodeId,
+}: {
+  flowId: string;
+  nodeId?: string;
+}): Promise<AxiosResponse<FlowPoolType>> {
+  const config = {};
+  config["params"] = { flow_id: flowId };
+  if (nodeId) {
+    config["params"] = { nodeId };
+  }
+  return await api.get(`${BASE_URL_API}monitor/builds`, config);
+}
+
+export async function deleteFlowPool(
+  flowId: string
+): Promise<AxiosResponse<any>> {
+  const config = {};
+  config["params"] = { flow_id: flowId };
+  return await api.delete(`${BASE_URL_API}monitor/builds`, config);
+}

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -156,7 +156,7 @@ export default function CodeAreaModal({
               readOnly={readonly}
               value={code}
               mode="python"
-              setOptions={{ fontFamily: "monospace"}}
+              setOptions={{ fontFamily: "monospace" }}
               height={height ?? "100%"}
               highlightActiveLine={true}
               showPrintMargin={false}

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

@@ -55,7 +55,6 @@ export default function Page({
   const setReactFlowInstance = useFlowStore(
     (state) => state.setReactFlowInstance
   );
-
   const nodes = useFlowStore((state) => state.nodes);
   const edges = useFlowStore((state) => state.edges);
   const onNodesChange = useFlowStore((state) => state.onNodesChange);
@@ -70,6 +69,7 @@ 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
   );
@@ -77,6 +77,11 @@ export default function Page({
     (state) => state.setLastCopiedSelection
   );
   const onConnect = useFlowStore((state) => state.onConnect);
+  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 });
   const [lastSelection, setLastSelection] =
@@ -152,23 +157,19 @@ export default function Page({
     };
   }, [lastCopiedSelection, lastSelection, takeSnapshot]);
 
-  const [selectionMenuVisible, setSelectionMenuVisible] = useState(false);
-
-  const setErrorData = useAlertStore((state) => state.setErrorData);
-
-  const edgeUpdateSuccessful = useRef(true);
-
-  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
-
   useEffect(() => {
-    if (reactFlowInstance) {
+    if (reactFlowInstance && currentFlowId) {
       resetFlow({
         nodes: flow?.data?.nodes ?? [],
         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]);
+  }, [currentFlowId, reactFlowInstance, setLoading, setFlowPool]);
 
   useEffect(() => {
     return () => {

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

@@ -110,7 +110,15 @@ export default function NodeToolbarComponent({
         break;
       case "ungroup":
         takeSnapshot();
-        expandGroupNode(data.id, updateFlowPosition(position, data.node?.flow!), data.node!.template, nodes, edges, setNodes, setEdges);
+        expandGroupNode(
+          data.id,
+          updateFlowPosition(position, data.node?.flow!),
+          data.node!.template,
+          nodes,
+          edges,
+          setNodes,
+          setEdges
+        );
         break;
       case "override":
         setShowOverrideModal(true);

src/frontend/src/stores/flowsManagerStore.ts

@@ -1,4 +1,5 @@
 import { AxiosError } from "axios";
+import { cloneDeep } from "lodash";
 import { Edge, Node, Viewport, XYPosition } from "reactflow";
 import { create } from "zustand";
 import {
@@ -24,7 +25,6 @@ import useAlertStore from "./alertStore";
 import { useDarkStore } from "./darkStore";
 import useFlowStore from "./flowStore";
 import { useTypesStore } from "./typesStore";
-import { cloneDeep } from "lodash";
 
 let saveTimeoutId: NodeJS.Timeout | null = null;
 
@@ -330,7 +330,10 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     const currentFlowId = get().currentFlowId;
     // push the current graph to the past state
     const flowStore = useFlowStore.getState();
-    const newState = {nodes: cloneDeep(flowStore.nodes), edges: cloneDeep(flowStore.edges)};
+    const newState = {
+      nodes: cloneDeep(flowStore.nodes),
+      edges: cloneDeep(flowStore.edges),
+    };
     const pastLength = past[currentFlowId]?.length ?? 0;
     if (
       pastLength > 0 &&

src/frontend/src/utils/reactflowUtils.ts

@@ -653,13 +653,19 @@ export function updateFlowPosition(NewPosition: XYPosition, flow: FlowType) {
     x: NewPosition.x - middlePoint.x,
     y: NewPosition.y - middlePoint.y,
   };
-  return {...flow, data: {...flow.data!, nodes: flow.data!.nodes.map((node) => ({
-    ...node,
-    position: {
-      x: node.position.x + deltaPosition.x,
-      y: node.position.y + deltaPosition.y,
+  return {
+    ...flow,
+    data: {
+      ...flow.data!,
+      nodes: flow.data!.nodes.map((node) => ({
+        ...node,
+        position: {
+          x: node.position.x + deltaPosition.x,
+          y: node.position.y + deltaPosition.y,
+        },
+      })),
     },
-  }))}};
+  };
 }
 
 export function concatFlows(
@@ -952,7 +958,7 @@ export function expandGroupNode(
   nodes: Node[],
   edges: Edge[],
   setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void,
-  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void,
+  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void
 ) {
   const idsMap = updateIds(flow!.data!);
   updateProxyIdsOnTemplate(template, idsMap);
@@ -1037,14 +1043,9 @@ export function expandGroupNode(
     }
   });
 
-  const filteredNodes = [
-    ...nodes.filter((n) => n.id !== id),
-    ...gNodes,
-  ];
+  const filteredNodes = [...nodes.filter((n) => n.id !== id), ...gNodes];
   const filteredEdges = [
-    ...edges.filter(
-      (e) => e.target !== id && e.source !== id
-    ),
+    ...edges.filter((e) => e.target !== id && e.source !== id),
     ...gEdges,
     ...updatedEdges,
   ];
@@ -1080,7 +1081,7 @@ export function createFlowComponent(
       edges: [],
       nodes: [
         {
-          data: {...nodeData, node: {...nodeData.node, official: false}},
+          data: { ...nodeData, node: { ...nodeData.node, official: false } },
           id: nodeData.id,
           position: { x: 0, y: 0 },
           type: "genericNode",