Fix and updateNodeOnScreen

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -47,11 +47,7 @@ export default function GenericNode({
   const flowPool = useFlowStore((state) => state.flowPool);
   const buildFlow = useFlowStore((state) => state.buildFlow);
   const setNode = useFlowStore((state) => state.setNode);
-  const addToOutdatedNodes = useFlowStore((state) => state.addToOutdatedNodes);
   const updateNodeInternals = useUpdateNodeInternals();
-  const removeFromOutdatedNodes = useFlowStore(
-    (state) => state.removeFromOutdatedNodes
-  );
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
   const [inputName, setInputName] = useState(false);
@@ -79,20 +75,16 @@ export default function GenericNode({
     // This one should run only once
     // first check if data.type in NATIVE_CATEGORIES
     // if not return
-    if (!NATIVE_CATEGORIES.includes(types[data.type])) return;
+    if (!NATIVE_CATEGORIES.includes(types[data.type]) || !data.node?.template?.code?.value) return;
     const thisNodeTemplate = templates[data.type].template;
     // if the template does not have a code key
     // return
     if (!thisNodeTemplate.code) return;
-
     const currentCode = thisNodeTemplate.code?.value;
     const thisNodesCode = data.node!.template?.code?.value;
     if (currentCode !== thisNodesCode) {
-      addToOutdatedNodes(data.id);
       setIsOutdated(true);
     } else {
-      // remove the node from the outdatedNodes
-      removeFromOutdatedNodes(data.id);
       setIsOutdated(false);
     }
     // template.code can be undefined
@@ -111,13 +103,14 @@ export default function GenericNode({
         };
 
         newNode.data.node.template[name].value = code;
+        setIsOutdated(false);
 
         return newNode;
       });
 
       updateNodeInternals(data.id);
     },
-    [data.id, data.node, setNode]
+    [data.id, data.node, setNode,setIsOutdated]
   );
 
   if (!data.node!.template) {
@@ -361,6 +354,7 @@ export default function GenericNode({
           openAdvancedModal={false}
           onCloseAdvancedModal={() => {}}
           updateNodeCode={updateNodeCode}
+          isOutdated={isOutdated}
           selected={selected}
         ></NodeToolbarComponent>
       </NodeToolbar>

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -43,6 +43,7 @@ export default function NodeToolbarComponent({
   updateNodeCode,
   setShowState,
   onCloseAdvancedModal,
+  isOutdated,
 }: nodeToolbarPropsType): JSX.Element {
   const nodeLength = Object.keys(data.node!.template).filter(
     (templateField) =>
@@ -83,9 +84,6 @@ export default function NodeToolbarComponent({
   const [showModalAdvanced, setShowModalAdvanced] = useState(false);
   const [showconfirmShare, setShowconfirmShare] = useState(false);
   const [showOverrideModal, setShowOverrideModal] = useState(false);
-  const isOutdated = useFlowStore((state) => state.outDatedNodes).includes(
-    data.id
-  );
   const [flowComponent, setFlowComponent] = useState<FlowType>();
 
   const openInNewTab = (url) => {

src/frontend/src/stores/flowStore.ts

@@ -581,21 +581,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       }
     });
   },
-  outDatedNodes: [],
-  addToOutdatedNodes: (nodeId) => {
-    // add the nodes to the list of outdated nodes
-    // without removing the previous ones
-    let oldOutDatedNodes = get().outDatedNodes;
-    // filter out the nodes that are already in the list
-    if (!oldOutDatedNodes.includes(nodeId)) {
-      set({ outDatedNodes: [...oldOutDatedNodes, nodeId] });
-    }
-  },
-  removeFromOutdatedNodes: (nodeId) => {
-    // remove the nodes from the list of outdated nodes
-    let oldOutDatedNodes = get().outDatedNodes;
-    set({ outDatedNodes: oldOutDatedNodes.filter((id) => id !== nodeId) });
-  },
 }));
 
 export default useFlowStore;

src/frontend/src/types/components/index.ts

@@ -493,10 +493,11 @@ export type nodeToolbarPropsType = {
   selected: boolean;
   updateNodeCode?: (
     newNodeClass: APIClassType,
-    code?: string,
+    code: string,
-    name?: string
+    name: string
   ) => void;
   setShowState: (show: boolean | SetStateAction<boolean>) => void;
+  isOutdated?: boolean;
 };
 
 export type parsedDataType = {

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

@@ -124,7 +124,4 @@ export type FlowStoreType = {
     data: FlowPoolObjectType | ChatOutputType | chatInputType,
     buildId?: string
   ) => void;
-  outDatedNodes: string[];
-  addToOutdatedNodes: (nodeId: string) => void;
-  removeFromOutdatedNodes: (nodeId: string) => void;
 };