From 257e18cf5e61e5e9483ded41f80b3645ae23e903 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Thu, 25 Apr 2024 00:10:21 -0300 Subject: [PATCH] almost perfect not sending edges and node because of http web method --- .../src/components/cardComponent/index.tsx | 3 +-- src/frontend/src/controllers/API/index.ts | 13 +++++++++---- src/frontend/src/modals/IOModal/index.tsx | 9 +++++++++ src/frontend/src/pages/FlowPage/index.tsx | 7 +++++++ src/frontend/src/stores/flowStore.ts | 9 +++++++-- src/frontend/src/types/components/index.ts | 1 + src/frontend/src/types/zustand/flow/index.ts | 2 ++ src/frontend/src/utils/buildUtils.ts | 15 ++++++++++++--- 8 files changed, 48 insertions(+), 11 deletions(-) diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx index 20af31351..261cd009e 100644 --- a/src/frontend/src/components/cardComponent/index.tsx +++ b/src/frontend/src/components/cardComponent/index.tsx @@ -58,7 +58,6 @@ export default function CollectionCardComponent({ const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId); - const name = data.is_component ? "Component" : "Flow"; useEffect(() => { @@ -382,7 +381,7 @@ export default function CollectionCardComponent({ className="main-page-nav-button select-none" /> Playground - {openPlayground && < IOModal open={openPlayground} setOpen={setOpenPlayground}> + {openPlayground && < IOModal cleanOnClose={true} open={openPlayground} setOpen={setOpenPlayground}> <> } diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts index 920335a97..9dc0b0384 100644 --- a/src/frontend/src/controllers/API/index.ts +++ b/src/frontend/src/controllers/API/index.ts @@ -1,5 +1,5 @@ -import { AxiosResponse } from "axios"; -import { ReactFlowJsonObject } from "reactflow"; +import { AxiosRequestConfig, AxiosResponse } from "axios"; +import { Edge, ReactFlowJsonObject,Node } from "reactflow"; import { BASE_URL_API } from "../../constants/constants"; import { api } from "../../controllers/API/api"; import { @@ -906,16 +906,21 @@ export async function updateGlobalVariable( export async function getVerticesOrder( flowId: string, startNodeId?: string | null, - stopNodeId?: string | null + stopNodeId?: string | null, + nodes?:Node[], + Edges?:Edge[] ): Promise> { // nodeId is optional and is a query parameter // if nodeId is not provided, the API will return all vertices - const config = {}; + const config:AxiosRequestConfig = {}; if (stopNodeId) { config["params"] = { stop_component_id: stopNodeId }; } else if (startNodeId) { config["params"] = { start_component_id: startNodeId }; } + if(nodes && Edges){ + config.data = {nodes,Edges} + } return await api.get(`${BASE_URL_API}build/${flowId}/vertices`, config); } diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx index 857f1ed25..86c9d6591 100644 --- a/src/frontend/src/modals/IOModal/index.tsx +++ b/src/frontend/src/modals/IOModal/index.tsx @@ -31,8 +31,10 @@ export default function IOModal({ open, setOpen, disable, + cleanOnClose=false, }: IOModalPropsType): JSX.Element { const allNodes = useFlowStore((state) => state.nodes); + const cleanFlowPool = useFlowStore((state) => state.CleanFlowPool); const inputs = useFlowStore((state) => state.inputs).filter( (input) => input.type !== "ChatInput" ); @@ -127,6 +129,13 @@ export default function IOModal({ open={open} setOpen={setOpen} disable={disable} + onChangeOpenModal={(open)=>{ + if(!open && cleanOnClose){ + console.log("cleaning flow pool") + cleanFlowPool(); + } + + }} > {children} {/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */} diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx index 8fb792702..b69015395 100644 --- a/src/frontend/src/pages/FlowPage/index.tsx +++ b/src/frontend/src/pages/FlowPage/index.tsx @@ -6,18 +6,25 @@ import { useDarkStore } from "../../stores/darkStore"; import useFlowsManagerStore from "../../stores/flowsManagerStore"; import Page from "./components/PageComponent"; import ExtraSidebar from "./components/extraSidebarComponent"; +import useFlowStore from "../../stores/flowStore"; export default function FlowPage({ view }: { view?: boolean }): JSX.Element { const setCurrentFlowId = useFlowsManagerStore( (state) => state.setCurrentFlowId ); const version = useDarkStore((state) => state.version); + const setOnFlowPage = useFlowStore((state) => state.setOnFlowPage); const currentFlow = useFlowsManagerStore((state) => state.currentFlow); const { id } = useParams(); // Set flow tab id useEffect(() => { setCurrentFlowId(id!); + setOnFlowPage(true); + + return () => { + setOnFlowPage(false); + }; }, [id]); return ( <> diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index 17e32f090..736c70d5b 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/src/frontend/src/stores/flowStore.ts @@ -44,9 +44,12 @@ import { getInputsAndOutputs } from "../utils/storeUtils"; import useAlertStore from "./alertStore"; import { useDarkStore } from "./darkStore"; import useFlowsManagerStore from "./flowsManagerStore"; +import FlowPage from "../pages/FlowPage"; // this is our useStore hook that we can use in our components to get parts of the store and call actions const useFlowStore = create((set, get) => ({ + onFlowPage: false, + setOnFlowPage:(FlowPage=>set({onFlowPage:FlowPage})), flowState: undefined, flowBuildStatus: {}, nodes: [], @@ -164,7 +167,7 @@ const useFlowStore = create((set, get) => ({ }); const flowsManager = useFlowsManagerStore.getState(); - if (!get().isBuilding && !skipSave) { + if (!get().isBuilding && !skipSave && get().onFlowPage) { flowsManager.autoSaveCurrentFlow( newChange, newEdges, @@ -180,7 +183,7 @@ const useFlowStore = create((set, get) => ({ }); const flowsManager = useFlowsManagerStore.getState(); - if (!get().isBuilding && !skipSave) { + if (!get().isBuilding && !skipSave && get().onFlowPage) { flowsManager.autoSaveCurrentFlow( get().nodes, newChange, @@ -560,6 +563,8 @@ const useFlowStore = create((set, get) => ({ useFlowStore.getState().updateBuildStatus(idList, BuildStatus.BUILDING); }, onValidateNodes: validateSubgraph, + nodes: !get().onFlowPage ? get().nodes : undefined, + edges: !get().onFlowPage ? get().edges : undefined, }); get().setIsBuilding(false); get().revertBuiltStatusFromBuilding(); diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 87495b10b..8cf20a80f 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -594,6 +594,7 @@ export type IOModalPropsType = { setOpen: (open: boolean) => void; disable?: boolean; isPlayground?: boolean; + cleanOnClose?: boolean; }; export type buttonBoxPropsType = { diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts index dac3cec52..c975eec8d 100644 --- a/src/frontend/src/types/zustand/flow/index.ts +++ b/src/frontend/src/types/zustand/flow/index.ts @@ -45,6 +45,8 @@ export type FlowPoolType = { }; export type FlowStoreType = { + onFlowPage: boolean; + setOnFlowPage: (onFlowPage: boolean) => void; flowPool: FlowPoolType; inputs: Array<{ type: string; id: string; displayName: string }>; outputs: Array<{ type: string; id: string; displayName: string }>; diff --git a/src/frontend/src/utils/buildUtils.ts b/src/frontend/src/utils/buildUtils.ts index bc2cc62e7..ac648acb1 100644 --- a/src/frontend/src/utils/buildUtils.ts +++ b/src/frontend/src/utils/buildUtils.ts @@ -5,6 +5,7 @@ import useAlertStore from "../stores/alertStore"; import useFlowStore from "../stores/flowStore"; import { VertexBuildTypeAPI } from "../types/api"; import { VertexLayerElementType } from "../types/zustand/flow"; +import { Edge, Node } from "reactflow"; type BuildVerticesParams = { flowId: string; // Assuming FlowType is the type for your flow @@ -21,6 +22,8 @@ type BuildVerticesParams = { onBuildError?: (title, list, idList: VertexLayerElementType[]) => void; onBuildStart?: (idList: VertexLayerElementType[]) => void; onValidateNodes?: (nodes: string[]) => void; + nodes?: Node[]; + edges?: Edge[]; }; function getInactiveVertexData(vertexId: string): VertexBuildTypeAPI { @@ -48,7 +51,9 @@ function getInactiveVertexData(vertexId: string): VertexBuildTypeAPI { export async function updateVerticesOrder( flowId: string, startNodeId?: string | null, - stopNodeId?: string | null + stopNodeId?: string | null, + nodes?:Node[], + edges?:Edge[] ): Promise<{ verticesLayers: VertexLayerElementType[][]; verticesIds: string[]; @@ -59,7 +64,7 @@ export async function updateVerticesOrder( const setErrorData = useAlertStore.getState().setErrorData; let orderResponse; try { - orderResponse = await getVerticesOrder(flowId, startNodeId, stopNodeId); + orderResponse = await getVerticesOrder(flowId, startNodeId, stopNodeId, nodes, edges); } catch (error: any) { setErrorData({ title: "Oops! Looks like you missed something", @@ -101,6 +106,8 @@ export async function buildVertices({ onBuildError, onBuildStart, onValidateNodes, + nodes, + edges, }: BuildVerticesParams) { let verticesBuild = useFlowStore.getState().verticesBuild; // if startNodeId and stopNodeId are provided @@ -113,7 +120,9 @@ export async function buildVertices({ let verticesOrderResponse = await updateVerticesOrder( flowId, startNodeId, - stopNodeId + stopNodeId, + nodes, + edges ); if (onValidateNodes) { try {