diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index c62abf6b9..0e4812c90 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -36,6 +36,7 @@ export default function GenericNode({ const flowPool = useFlowStore((state) => state.flowPool); const buildFlow = useFlowStore((state) => state.buildFlow); const setNode = useFlowStore((state) => state.setNode); + const getBuildStatus = useFlowStore((state) => state.getBuildStatus); const name = nodeIconsLucide[data.type] ? data.type : types[data.type]; const [inputName, setInputName] = useState(false); const [nodeName, setNodeName] = useState(data.node!.display_name); @@ -262,7 +263,7 @@ export default function GenericNode({ className={getNodeBorderClassName( selected, showNode, - data?.build_status, + getBuildStatus(data.id), validationStatus )} > @@ -473,7 +474,10 @@ export default function GenericNode({ variant="outline" className={"h-9 px-1.5"} onClick={() => { - if (data?.build_status === BuildStatus.BUILDING || isBuilding) + if ( + getBuildStatus(data.id) === BuildStatus.BUILDING || + isBuilding + ) return; buildFlow(data.id); }} @@ -481,7 +485,7 @@ export default function GenericNode({
Building... ) : !validationStatus ? ( @@ -507,7 +511,7 @@ export default function GenericNode({ >
{renderIconPlayOrPauseComponents( - data?.build_status, + getBuildStatus(data.id), validationStatus )}
diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index 549b0a90c..dac285ddf 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/src/frontend/src/stores/flowStore.ts @@ -425,25 +425,20 @@ 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); - } - }); - }, updateVerticesBuild: (vertices: string[]) => { set({ verticesBuild: vertices }); }, verticesBuild: [], revertAllVerticesToBuild: () => { // set all vertices to TO_BUILD - const verticesIds = get() - .nodes.filter((node) => node.data.build_status === BuildStatus.BUILDING) - .map((node) => node.id); + let verticesIds: string[] = []; + Object.keys(get().buildStatus).forEach((id) => { + if (get().buildStatus[id] !== BuildStatus.TO_BUILD) { + verticesIds.push(id); + } + }); get().updateBuildStatus(verticesIds, BuildStatus.TO_BUILD); + // additional code logic here }, removeFromVerticesBuild: (vertices: string[]) => { set({ @@ -452,6 +447,25 @@ const useFlowStore = create((set, get) => ({ ), }); }, + updateBuildStatus: (nodeIdList: string[], status: BuildStatus) => { + let newBuildStatus = cloneDeep(get().buildStatus); + // check if nodeIdList is an array + if (!Array.isArray(nodeIdList)) { + nodeIdList = [nodeIdList]; + } + nodeIdList.forEach((id) => { + newBuildStatus[id] = status; + }); + set({ buildStatus: newBuildStatus }); + }, + buildStatus: {}, + getBuildStatus: (nodeId: string) => { + // if the node is not in the buildStatus object, set it to TO_BUILD + if (!get().buildStatus[nodeId]) { + get().buildStatus[nodeId] = BuildStatus.TO_BUILD; + } + return get().buildStatus[nodeId]; + }, })); export default useFlowStore; diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts index ae34aa651..59b8a5ca5 100644 --- a/src/frontend/src/types/api/index.ts +++ b/src/frontend/src/types/api/index.ts @@ -1,5 +1,4 @@ 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 }; @@ -37,7 +36,6 @@ export type APIClassType = { | CustomFieldsType | boolean | undefined; - build_status?: BuildStatus; }; export type TemplateVariableType = { diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts index 127e1a704..8575b331e 100644 --- a/src/frontend/src/types/flow/index.ts +++ b/src/frontend/src/types/flow/index.ts @@ -1,5 +1,4 @@ import { ReactFlowJsonObject, XYPosition } from "reactflow"; -import { BuildStatus } from "../../constants/enums"; import { APIClassType } from "../api/index"; export type FlowType = { @@ -29,7 +28,6 @@ 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 7f214b69d..2fc987de6 100644 --- a/src/frontend/src/types/zustand/flow/index.ts +++ b/src/frontend/src/types/zustand/flow/index.ts @@ -86,9 +86,11 @@ export type FlowStoreType = { unselectAll: () => void; buildFlow: (nodeId?: string) => Promise; getFlow: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport }; - updateBuildStatus: (nodeId: string[], status: BuildStatus) => void; updateVerticesBuild: (vertices: string[]) => void; removeFromVerticesBuild: (vertices: string[]) => void; revertAllVerticesToBuild: () => void; verticesBuild: string[]; + updateBuildStatus: (nodeId: string[], status: BuildStatus) => void; + buildStatus: { [key: string]: BuildStatus }; + getBuildStatus: (nodeId: string) => BuildStatus; };