fix: update node alert to detect outdated components (#3051)

* check nodes to update on build flow

* feat: update componentsToUpdate logic in flowStore.ts

The `updateComponentsToUpdate` function in `flowStore.ts` has been updated to properly check for outdated nodes. This ensures that components are only updated when necessary, improving performance and preventing unnecessary re-renders.

* [autofix.ci] apply automated fixes

* Update src/frontend/src/stores/flowStore.ts

Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>

src/frontend/src/CustomNodes/hooks/use-check-code-validity.tsx

@@ -1,3 +1,4 @@
+import { componentsToIgnoreUpdate } from "@/constants/constants";
 import { useEffect } from "react";
 import { NodeDataType } from "../../types/flow";
 import { nodeNames } from "../../utils/styleUtils";
@@ -16,13 +17,11 @@ const useCheckCodeValidity = (
     if (!data?.node || !templates) return;
     const currentCode = templates[data.type]?.template?.code?.value;
     const thisNodesCode = data.node!.template?.code?.value;
-    const componentsToIgnore = ["CustomComponent"];
     setIsOutdated(
       currentCode &&
         thisNodesCode &&
         currentCode !== thisNodesCode &&
-        !componentsToIgnore.includes(data.type) &&
-        Object.keys(nodeNames).includes(types[data.type]),
+        !componentsToIgnoreUpdate.includes(data.type),
     );
     setIsUserEdited(data.node?.edited ?? false);
     // template.code can be undefined

src/frontend/src/constants/constants.ts

@@ -849,6 +849,8 @@ export const MODAL_CLASSES =
 
 export const ALLOWED_IMAGE_INPUT_EXTENSIONS = ["png", "jpg", "jpeg"];
 
+export const componentsToIgnoreUpdate = ["CustomComponent"];
+
 export const FS_ERROR_TEXT =
   "Please ensure your file has one of the following extensions:";
 export const SN_ERROR_TEXT = ALLOWED_IMAGE_INPUT_EXTENSIONS.join(", ");

src/frontend/src/stores/flowStore.ts

@@ -1,4 +1,7 @@
-import { BROKEN_EDGES_WARNING } from "@/constants/constants";
+import {
+  BROKEN_EDGES_WARNING,
+  componentsToIgnoreUpdate,
+} from "@/constants/constants";
 import { brokenEdgeMessage } from "@/utils/utils";
 import { cloneDeep, zip } from "lodash";
 import {
@@ -44,9 +47,27 @@ import useAlertStore from "./alertStore";
 import { useDarkStore } from "./darkStore";
 import useFlowsManagerStore from "./flowsManagerStore";
 import { useGlobalVariablesStore } from "./globalVariablesStore/globalVariables";
+import { useTypesStore } from "./typesStore";
 
 // 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) => ({
+  componentsToUpdate: false,
+  updateComponentsToUpdate: (nodes) => {
+    let outdatedNodes = false;
+    const templates = useTypesStore.getState().templates;
+    for (let i = 0; i < nodes.length; i++) {
+      const currentCode = templates[nodes[i].data?.type]?.template?.code?.value;
+      const thisNodesCode = nodes[i].data?.node!.template?.code?.value;
+      outdatedNodes =
+        currentCode &&
+        thisNodesCode &&
+        currentCode !== thisNodesCode &&
+        !nodes[i].data?.node?.edited &&
+        !componentsToIgnoreUpdate.includes(nodes[i].data?.type);
+      if (outdatedNodes) break;
+    }
+    set({ componentsToUpdate: outdatedNodes });
+  },
   onFlowPage: false,
   lockChat: false,
   setLockChat: (lockChat) => {
@@ -143,6 +164,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     }
     let newEdges = cleanEdges(nodes, edges);
     const { inputs, outputs } = getInputsAndOutputs(nodes);
+    get().updateComponentsToUpdate(nodes);
     set({
       nodes,
       edges: newEdges,
@@ -188,7 +210,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     let newChange = typeof change === "function" ? change(get().nodes) : change;
     let newEdges = cleanEdges(newChange, get().edges);
     const { inputs, outputs } = getInputsAndOutputs(newChange);
-
+    get().updateComponentsToUpdate(newChange);
     set({
       edges: newEdges,
       nodes: newChange,
@@ -633,6 +655,11 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
           .map((element) => element.id)
           .filter(Boolean) as string[];
         useFlowStore.getState().updateBuildStatus(idList, BuildStatus.BUILT);
+        if (get().componentsToUpdate)
+          setErrorData({
+            title:
+              "There are outdated components in the flow. The error could be related to them.",
+          });
         setErrorData({ list, title });
         get().setIsBuilding(false);
         get().setLockChat(false);

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

@@ -53,6 +53,8 @@ export type FlowPoolType = {
 };
 
 export type FlowStoreType = {
+  componentsToUpdate: boolean;
+  updateComponentsToUpdate: (nodes: Node[]) => void;
   onFlowPage: boolean;
   setOnFlowPage: (onFlowPage: boolean) => void;
   flowPool: FlowPoolType;