add build status on node

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -7,6 +7,7 @@ import InputComponent from "../../components/inputComponent";
 import { Button } from "../../components/ui/button";
 import { Textarea } from "../../components/ui/textarea";
 import { priorityFields } from "../../constants/constants";
+import { BuildStatus } from "../../constants/enums";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
 import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
@@ -71,7 +72,6 @@ export default function GenericNode({
 
     setHandles(count);
   }
-
   useEffect(() => {
     countHandles();
   }, [data, data.node]);
@@ -164,8 +164,6 @@ export default function GenericNode({
           numberOfHandles={handles}
           showNode={showNode}
           openAdvancedModal={false}
-          onCloseAdvancedModal={() => {
-          }}
         ></NodeToolbarComponent>
       </NodeToolbar>
 
@@ -410,33 +408,44 @@ export default function GenericNode({
                     }
                   >
                     <div className="generic-node-status-position flex items-center justify-center">
-                      <IconComponent
+                      {data?.build_status === BuildStatus.TO_BUILD ? (
-                        name="Play"
+                        <>
-                        className={classNames(
+                          <IconComponent
-                          validationStatus && validationStatus.valid
+                            name="Square"
-                            ? "green-status"
+                            className="red-status absolute h-5 stroke-1"
-                            : "status-build-animation",
+                          />
-                          "absolute h-5 stroke-1"
+                        </>
-                        )}
+                      ) : (
-                      />
+                        <>
-                      <IconComponent
+                          <IconComponent
-                        name="Play"
+                            name="Play"
-                        className={classNames(
+                            className={classNames(
-                          validationStatus && !validationStatus.valid
+                              validationStatus && validationStatus.valid
-                            ? "red-status"
+                                ? "green-status"
-                            : "status-build-animation",
+                                : "status-build-animation",
-                          "absolute h-5 stroke-1"
+                              "absolute h-5 stroke-1"
-                        )}
+                            )}
-                      />
+                          />
-                      <IconComponent
+                          <IconComponent
-                        name="Play"
+                            name="Play"
-                        className={classNames(
+                            className={classNames(
-                          !validationStatus || isBuilding
+                              validationStatus && !validationStatus.valid
-                            ? "yellow-status"
+                                ? "red-status"
-                            : "status-build-animation",
+                                : "status-build-animation",
-                          "absolute h-5 stroke-1"
+                              "absolute h-5 stroke-1"
-                        )}
+                            )}
-                      />
+                          />
+                          <IconComponent
+                            name="Play"
+                            className={classNames(
+                              !validationStatus || isBuilding
+                                ? "yellow-status"
+                                : "status-build-animation",
+                              "absolute h-5 stroke-1"
+                            )}
+                          />
+                        </>
+                      )}
                     </div>
                   </Tooltip>
                 </div>

src/frontend/src/constants/enums.ts

@@ -6,3 +6,9 @@ export enum TypeModal {
   TEXT = 1,
   PROMPT = 2,
 }
+
+export enum BuildStatus {
+  BUILDING = "BUILDING",
+  TO_BUILD = "TO_BUILD",
+  BUILDED = "BUILDED",
+}

src/frontend/src/modals/formModal/index.tsx

@@ -205,7 +205,6 @@ export default function FormModal({
     if (Array.isArray(data) && data.length > 0) {
       //set chat history
       setChatHistory((_) => {
-        console.log(data);
         let newChatHistory: ChatMessageType[] = [];
         for (let i = 0; i < data.length; i++) {
           if (data[i].type === "prompt" && data[i].prompt) {

src/frontend/src/stores/flowStore.ts

@@ -11,6 +11,7 @@ import {
 } from "reactflow";
 import { create } from "zustand";
 import { INPUT_TYPES, OUTPUT_TYPES } from "../constants/constants";
+import { BuildStatus } from "../constants/enums";
 import { getFlowPool, updateFlowInDatabase } from "../controllers/API";
 import {
   NodeDataType,
@@ -357,6 +358,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     const setErrorData = useAlertStore.getState().setErrorData;
     function handleBuildUpdate(data: any) {
       get().addDataToFlowPool(data.data[data.id], data.id);
+      useFlowStore.getState().updateBuildStatus([data.id], BuildStatus.BUILDED);
     }
     await updateFlowInDatabase({
       data: {
@@ -382,6 +384,9 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       onBuildError: (title, list) => {
         setErrorData({ list, title });
       },
+      onBuildStart: (idList) => {
+        useFlowStore.getState().updateBuildStatus(idList, BuildStatus.BUILDING);
+      },
     });
   },
   getFlow: () => {
@@ -391,6 +396,15 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       viewport: get().reactFlowInstance?.getViewport()!,
     };
   },
+  updateBuildStatus: (nodeIdList: string[], status: BuildStatus) => {
+    nodeIdList.forEach((id) => {
+      const nodeToUpdate = get().nodes.find((node) => node.id === id);
+      if (nodeToUpdate) {
+        nodeToUpdate.data.build_status = status;
+        get().setNodes(get().nodes);
+      }
+    });
+  },
 }));
 
 export default useFlowStore;

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

@@ -1,4 +1,5 @@
 import { Edge, Node, Viewport } from "reactflow";
+import { BuildStatus } from "../../constants/enums";
 import { FlowType } from "../flow";
 //kind and class are just representative names to represent the actual structure of the object received by the API
 export type APIDataType = { [key: string]: APIKindType };
@@ -36,6 +37,7 @@ export type APIClassType = {
     | CustomFieldsType
     | boolean
     | undefined;
+  build_status?: BuildStatus;
 };
 
 export type TemplateVariableType = {

src/frontend/src/types/components/index.ts

@@ -625,7 +625,7 @@ export type crashComponentPropsType = {
 
 export type validationStatusType = {
   id: string;
-  data: object;
+  data: object | any;
   params: string;
   progress: number;
   valid: boolean;

src/frontend/src/types/flow/index.ts

@@ -1,4 +1,5 @@
 import { ReactFlowJsonObject, XYPosition } from "reactflow";
+import { BuildStatus } from "../../constants/enums";
 import { APIClassType } from "../api/index";
 
 export type FlowType = {
@@ -26,6 +27,7 @@ export type NodeDataType = {
   node?: APIClassType;
   id: string;
   output_types?: string[];
+  build_status?: BuildStatus;
 };
 // FlowStyleType is the type of the style object that is used to style the
 // Flow card with an emoji and a color.

src/frontend/src/types/zustand/flow/index.ts

@@ -7,6 +7,7 @@ import {
   ReactFlowInstance,
   Viewport,
 } from "reactflow";
+import { BuildStatus } from "../../../constants/enums";
 import { FlowState } from "../../tabs";
 
 export type chatInputType = {
@@ -84,4 +85,5 @@ export type FlowStoreType = {
   unselectAll: () => void;
   buildFlow: (nodeId?: string) => Promise<void>;
   getFlow: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport };
+  updateBuildStatus: (nodeId: string[], status: BuildStatus) => void;
 };

src/frontend/src/utils/buildUtils.ts

@@ -1,5 +1,7 @@
 import { AxiosError } from "axios";
+import { BuildStatus } from "../constants/enums";
 import { getVerticesOrder, postBuildVertex } from "../controllers/API";
+import useFlowStore from "../stores/flowStore";
 import { VertexBuildTypeAPI } from "../types/api";
 
 type BuildVerticesParams = {
@@ -9,6 +11,7 @@ type BuildVerticesParams = {
   onBuildUpdate?: (data: any) => void; // Replace any with the actual type of data
   onBuildComplete?: (allNodesValid: boolean) => void;
   onBuildError?: (title, list) => void;
+  onBuildStart?: (idList: string[]) => void;
 };
 
 export async function buildVertices({
@@ -18,10 +21,12 @@ export async function buildVertices({
   onBuildUpdate,
   onBuildComplete,
   onBuildError,
+  onBuildStart,
 }: BuildVerticesParams) {
   let orderResponse = await getVerticesOrder(flowId);
   let verticesOrder: Array<Array<string>> = orderResponse.data.ids;
   let vertices: Array<Array<string>> = [];
+
   if (nodeId) {
     for (let i = 0; i < verticesOrder.length; i += 1) {
       const innerArray = verticesOrder[i];
@@ -40,10 +45,13 @@ export async function buildVertices({
     vertices = verticesOrder;
   }
 
-  // Set each vertex state to building
+  const verticesIds = vertices.flatMap((v) => v);
+  useFlowStore.getState().updateBuildStatus(verticesIds, BuildStatus.TO_BUILD);
 
+  // Set each vertex state to building
   const buildResults: Array<boolean> = [];
   for (let i = 0; i < vertices.length; i += 1) {
+    if (onBuildStart) onBuildStart(vertices[i]);
     await Promise.all(
       vertices[i].map(async (id) => {
         try {