Refactor buildVertices process one layer at a time

src/frontend/src/stores/flowStore.ts

@@ -223,9 +223,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       selection.nodes.some((node) => node.data.type === "ChatInput") &&
       checkChatInput(get().nodes)
     ) {
-      useAlertStore
+      useAlertStore.getState().setErrorData({
-        .getState()
-        .setErrorData({
         title: "Error pasting components",
         list: ["You can only have one ChatInput component in the flow"],
       });
@@ -451,10 +449,23 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       if (vertexBuildData && vertexBuildData.inactive_vertices) {
         get().removeFromVerticesBuild(vertexBuildData.inactive_vertices);
       }
+      get().verticesBuild &&
+        get().updateVerticesBuild({
+          verticesIds: [
+            ...get().verticesBuild!.verticesIds,
+            vertexBuildData.id,
+          ],
+          verticesLayers: [
+            ...get().verticesBuild!.verticesLayers,
+            vertexBuildData.next_vertices_ids,
+          ],
+          runId: vertexBuildData.run_id,
+        });
       get().addDataToFlowPool(
         { ...vertexBuildData, buildId },
         vertexBuildData.id
       );
+
       useFlowStore.getState().updateBuildStatus([vertexBuildData.id], status);
     }
     await buildVertices({

src/frontend/src/types/api/index.ts

@@ -140,7 +140,9 @@ export type VerticesOrderTypeAPI = {
 
 export type VertexBuildTypeAPI = {
   id: string;
+  next_vertices_ids: Array<string>;
   inactive_vertices: Array<string> | null;
+  run_id: string;
   valid: boolean;
   params: string;
   data: VertexDataTypeAPI;

src/frontend/src/utils/buildUtils.ts

@@ -125,23 +125,29 @@ export async function buildVertices({
 
   useFlowStore.getState().updateBuildStatus(verticesIds, BuildStatus.TO_BUILD);
   useFlowStore.getState().setIsBuilding(true);
-
+  let currentLayerIndex = 0; // Start with the first layer
   // Set each vertex state to building
   const buildResults: Array<boolean> = [];
   console.log(verticesLayers);
-  for (const layer of verticesLayers) {
+  while (currentLayerIndex < verticesLayers.length) {
-    if (onBuildStart) onBuildStart(layer);
+    const currentLayer = verticesLayers[currentLayerIndex];
-    for (const id of layer) {
+    if (onBuildStart) onBuildStart(currentLayer);
+    await Promise.all(
+      currentLayer.map(async (vertexId) => {
         // Check if id is in the list of inactive nodes
-      if (!verticesIds.includes(id) && onBuildUpdate) {
+        if (!verticesIds.includes(vertexId) && onBuildUpdate) {
           // If it is, skip building and set the state to inactive
-        onBuildUpdate(getInactiveVertexData(id), BuildStatus.INACTIVE, runId);
+          onBuildUpdate(
+            getInactiveVertexData(vertexId),
+            BuildStatus.INACTIVE,
+            runId
+          );
           buildResults.push(false);
-        continue;
+          return;
         }
         await buildVertex({
           flowId,
-        id,
+          id: vertexId,
           input_value,
           onBuildUpdate: (data: VertexBuildTypeAPI, status: BuildStatus) => {
             if (onBuildUpdate) onBuildUpdate(data, status, runId);
@@ -154,21 +160,22 @@ export async function buildVertices({
           },
         });
         if (stop) {
-        break;
+          return;
-      }
         }
+      })
+    );
+
     if (stop) {
       break;
     }
-  }
 
     if (onBuildComplete) {
       const allNodesValid = buildResults.every((result) => result);
       onBuildComplete(allNodesValid);
       useFlowStore.getState().setIsBuilding(false);
     }
+  }
 }
-
 async function buildVertex({
   flowId,
   id,