diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index eefddf351..e30a89890 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -44,6 +44,7 @@ export default function GenericNode({ const [nodeDescription, setNodeDescription] = useState( data.node?.description! ); + const buildStatus = useFlowStore((state) =>state.flowBuildStatus[data.id]); const [validationStatus, setValidationStatus] = useState(null); const [handles, setHandles] = useState(0); @@ -274,7 +275,7 @@ export default function GenericNode({ className={getNodeBorderClassName( selected, showNode, - data?.buildStatus, + buildStatus, validationStatus )} > @@ -485,7 +486,7 @@ export default function GenericNode({ variant="outline" className={"h-9 px-1.5"} onClick={() => { - if (data?.buildStatus === BuildStatus.BUILDING || isBuilding) + if (buildStatus === BuildStatus.BUILDING || isBuilding) return; buildFlow(data.id); @@ -494,7 +495,7 @@ export default function GenericNode({
Building... ) : !validationStatus ? ( @@ -520,7 +521,7 @@ export default function GenericNode({ >
{renderIconPlayOrPauseComponents( - data?.buildStatus, + buildStatus, validationStatus )}
diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index f9fa0197b..66f3f8184 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/src/frontend/src/stores/flowStore.ts @@ -35,6 +35,7 @@ import useFlowsManagerStore from "./flowsManagerStore"; // this is our useStore hook that we can use in our components to get parts of the store and call actions const useFlowStore = create((set, get) => ({ flowState: undefined, + flowBuildStatus:{}, nodes: [], edges: [], isBuilding: false, @@ -438,21 +439,19 @@ const useFlowStore = create((set, get) => ({ }); }, updateBuildStatus: (nodeIdList: string[], status: BuildStatus) => { + const newFlowBuildStatus = { ...get().flowBuildStatus }; nodeIdList.forEach((id) => { - const nodeToUpdate = get().nodes.find((node) => node.id === id); - if (nodeToUpdate) { - nodeToUpdate.data.buildStatus = status; - set({ nodes: get().nodes }); - } + newFlowBuildStatus[id] = status; }); + set({ flowBuildStatus: newFlowBuildStatus }); }, revertBuiltStatusFromBuilding: () => { - get().nodes.forEach((node) => { - if (node.data.buildStatus === BuildStatus.BUILDING) { - node.data.buildStatus = BuildStatus.TO_BUILD; + const newFlowBuildStatus = { ...get().flowBuildStatus }; + Object.keys(newFlowBuildStatus).forEach((id) => { + if (newFlowBuildStatus[id] === BuildStatus.BUILDING) { + newFlowBuildStatus[id] = BuildStatus.BUILT; } }); - set({ nodes: get().nodes }); }, })); diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts index 2b4e8f251..cf6e786e0 100644 --- a/src/frontend/src/types/zustand/flow/index.ts +++ b/src/frontend/src/types/zustand/flow/index.ts @@ -91,4 +91,5 @@ export type FlowStoreType = { verticesBuild: string[]; updateBuildStatus: (nodeId: string[], status: BuildStatus) => void; revertBuiltStatusFromBuilding: () => void; + flowBuildStatus: { [key: string]: BuildStatus }; };