migrate node build status to it's own object instead of the node data

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<validationStatusType | null>(null);
   const [handles, setHandles] = useState<number>(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({
                 <div>
                   <Tooltip
                     title={
-                      data?.buildStatus === BuildStatus.BUILDING ? (
+                      buildStatus === BuildStatus.BUILDING ? (
                         <span>Building...</span>
                       ) : !validationStatus ? (
                         <span className="flex">
@@ -520,7 +521,7 @@ export default function GenericNode({
                   >
                     <div className="generic-node-status-position flex items-center justify-center">
                       {renderIconPlayOrPauseComponents(
-                        data?.buildStatus,
+                        buildStatus,
                         validationStatus
                       )}
                     </div>

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<FlowStoreType>((set, get) => ({
   flowState: undefined,
+  flowBuildStatus:{},
   nodes: [],
   edges: [],
   isBuilding: false,
@@ -438,21 +439,19 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     });
   },
   updateBuildStatus: (nodeIdList: string[], status: BuildStatus) => {
+    const newFlowBuildStatus = { ...get().flowBuildStatus };
     nodeIdList.forEach((id) => {
-      const nodeToUpdate = get().nodes.find((node) => node.id === id);
+      newFlowBuildStatus[id] = status;
-      if (nodeToUpdate) {
-        nodeToUpdate.data.buildStatus = status;
-        set({ nodes: get().nodes });
-      }
     });
+    set({ flowBuildStatus: newFlowBuildStatus });
   },
   revertBuiltStatusFromBuilding: () => {
-    get().nodes.forEach((node) => {
+    const newFlowBuildStatus = { ...get().flowBuildStatus };
-      if (node.data.buildStatus === BuildStatus.BUILDING) {
+    Object.keys(newFlowBuildStatus).forEach((id) => {
-        node.data.buildStatus = BuildStatus.TO_BUILD;
+      if (newFlowBuildStatus[id] === BuildStatus.BUILDING) {
+        newFlowBuildStatus[id] = BuildStatus.BUILT;
       }
     });
-    set({ nodes: get().nodes });
   },
 }));
 

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 };
 };