almost perfect not sending edges and node because of http web method

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}>
                   <></>
                 </IOModal>}
               </Button>

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<AxiosResponse<VerticesOrderTypeAPI>> {
   // nodeId is optional and is a query parameter
   // if nodeId is not provided, the API will return all vertices
-  const config = {};
+  const config:AxiosRequestConfig<any> = {};
   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);
 }
 

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();
+        }
+      
+      }}
     >
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
       {/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */}

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 (
     <>

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<FlowStoreType>((set, get) => ({
+  onFlowPage: false,
+  setOnFlowPage:(FlowPage=>set({onFlowPage:FlowPage})),
   flowState: undefined,
   flowBuildStatus: {},
   nodes: [],
@@ -164,7 +167,7 @@ const useFlowStore = create<FlowStoreType>((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<FlowStoreType>((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<FlowStoreType>((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();

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 = {

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

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 {