diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 95ae9b1cf..e1206ecb7 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/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={() => {
- }}
>
@@ -410,33 +408,44 @@ export default function GenericNode({
}
>
-
-
-
+ {data?.build_status === BuildStatus.TO_BUILD ? (
+ <>
+
+
+ ) : (
+ <>
+
+
+
+
+ )}
diff --git a/src/frontend/src/constants/enums.ts b/src/frontend/src/constants/enums.ts
index a7bed8fde..57476239c 100644
--- a/src/frontend/src/constants/enums.ts
+++ b/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",
+}
diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index c85e77a0d..80ab8c06b 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/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) {
diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts
index 473c615b1..cdb9955a3 100644
--- a/src/frontend/src/stores/flowStore.ts
+++ b/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((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((set, get) => ({
onBuildError: (title, list) => {
setErrorData({ list, title });
},
+ onBuildStart: (idList) => {
+ useFlowStore.getState().updateBuildStatus(idList, BuildStatus.BUILDING);
+ },
});
},
getFlow: () => {
@@ -391,6 +396,15 @@ const useFlowStore = create((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;
diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts
index 48db814cf..1286a90bc 100644
--- a/src/frontend/src/types/api/index.ts
+++ b/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 = {
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index c3128b3f5..3a8563cf1 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/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;
diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts
index 544e78a45..5f2ed1dc4 100644
--- a/src/frontend/src/types/flow/index.ts
+++ b/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.
diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts
index 937197efd..3e56d49e2 100644
--- a/src/frontend/src/types/zustand/flow/index.ts
+++ b/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;
getFlow: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport };
+ updateBuildStatus: (nodeId: string[], status: BuildStatus) => void;
};
diff --git a/src/frontend/src/utils/buildUtils.ts b/src/frontend/src/utils/buildUtils.ts
index d7cdf5538..1246caa8a 100644
--- a/src/frontend/src/utils/buildUtils.ts
+++ b/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> = orderResponse.data.ids;
let vertices: Array> = [];
+
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 = [];
for (let i = 0; i < vertices.length; i += 1) {
+ if (onBuildStart) onBuildStart(vertices[i]);
await Promise.all(
vertices[i].map(async (id) => {
try {