Add onGetOrderSuccess and fix error in get vertices order

src/frontend/src/stores/flowStore.ts

@@ -9,6 +9,7 @@ import {
   applyNodeChanges,
 } from "reactflow";
 import { create } from "zustand";
+import { FLOW_BUILD_SUCCESS_ALERT } from "../alerts_constants";
 import { BuildStatus } from "../constants/enums";
 import { getFlowPool, updateFlowInDatabase } from "../controllers/API";
 import { VertexBuildTypeAPI } from "../types/api";
@@ -32,7 +33,6 @@ import { getInputsAndOutputs } from "../utils/storeUtils";
 import useAlertStore from "./alertStore";
 import { useDarkStore } from "./darkStore";
 import useFlowsManagerStore from "./flowsManagerStore";
-import { FLOW_BUILD_SUCCESS_ALERT } from "../alerts_constants";
 
 // 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) => ({
@@ -379,7 +379,10 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     const setErrorData = useAlertStore.getState().setErrorData;
     const setNoticeData = useAlertStore.getState().setNoticeData;
     function validateSubgraph(nodes: string[]) {
-      const errors = validateNodes(get().nodes.filter(node=>nodes.includes(node.id)), get().edges);
+      const errors = validateNodes(
+        get().nodes.filter((node) => nodes.includes(node.id)),
+        get().edges
+      );
       if (errors.length > 0) {
         setErrorData({
           title: "Oops! Looks like you missed something",
@@ -409,10 +412,12 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       name: currentFlow!.name,
       description: currentFlow!.description,
     });
-    setNoticeData({ title: "Running components" });
     await buildVertices({
       flowId: currentFlow!.id,
       nodeId,
+      onGetOrderSuccess: () => {
+        setNoticeData({ title: "Running components" });
+      },
       onBuildComplete: () => {
         if (nodeId) {
           setSuccessData({

src/frontend/src/utils/buildUtils.ts

@@ -1,13 +1,14 @@
 import { AxiosError } from "axios";
 import { BuildStatus } from "../constants/enums";
 import { getVerticesOrder, postBuildVertex } from "../controllers/API";
+import useAlertStore from "../stores/alertStore";
 import useFlowStore from "../stores/flowStore";
 import { VertexBuildTypeAPI } from "../types/api";
 
 type BuildVerticesParams = {
   flowId: string; // Assuming FlowType is the type for your flow
   nodeId?: string | null; // Assuming nodeId is of type string, and it's optional
-  onProgressUpdate?: (progress: number) => void; // Replace number with the actual type if it's not a number
+  onGetOrderSuccess?: () => void;
   onBuildUpdate?: (data: VertexBuildTypeAPI, status: BuildStatus) => void; // Replace any with the actual type if it's not any
   onBuildComplete?: (allNodesValid: boolean) => void;
   onBuildError?: (title, list, idList: string[]) => void;
@@ -36,20 +37,33 @@ function getInactiveVertexData(vertexId: string): VertexBuildTypeAPI {
 export async function buildVertices({
   flowId,
   nodeId = null,
-  onProgressUpdate,
+  onGetOrderSuccess,
   onBuildUpdate,
   onBuildComplete,
   onBuildError,
   onBuildStart,
-  validateNodes
+  validateNodes,
 }: BuildVerticesParams) {
-  let orderResponse = await getVerticesOrder(flowId, nodeId);
+  const setErrorData = useAlertStore.getState().setErrorData;
+  let orderResponse;
+  try {
+    orderResponse = await getVerticesOrder(flowId, nodeId);
+  } catch (error) {
+    console.log(error);
+    setErrorData({
+      title: "Oops! Looks like you missed something",
+      list: [error.response?.data?.detail ?? "Unknown Error"],
+    });
+    useFlowStore.getState().setIsBuilding(false);
+    throw new Error("Invalid nodes");
+  }
+  if (onGetOrderSuccess) onGetOrderSuccess();
   let verticesOrder: Array<Array<string>> = orderResponse.data.ids;
   let vertices_layers: Array<Array<string>> = [];
   let stop = false;
   if (validateNodes) {
     try {
-      validateNodes(verticesOrder.flatMap(id=>id))
+      validateNodes(verticesOrder.flatMap((id) => id));
     } catch (e) {
       return;
     }