Removed internal state of nodes, to fix undo/redo of fields

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

@@ -1,4 +1,3 @@
-import { cloneDeep } from "lodash";
 import React, {
   ReactNode,
   useContext,
@@ -46,7 +45,6 @@ export default function ParameterComponent({
   left,
   id,
   data,
-  setData,
   tooltipTitle,
   title,
   color,
@@ -95,9 +93,7 @@ export default function ParameterComponent({
     newValue: string | string[] | boolean | Object[]
   ): void => {
     takeSnapshot();
-    let newData = cloneDeep(data);
+    data.node!.template[name].value = newValue;
-    newData.node!.template[name].value = newValue;
-    setData(newData);
     // Set state to pending
     //@ts-ignore
     setTabsState((prev: TabsState) => {
@@ -444,9 +440,6 @@ export default function ParameterComponent({
               field_name={name}
               setNodeClass={(nodeClass) => {
                 data.node = nodeClass;
-                const clone = cloneDeep(data);
-                clone.node = nodeClass;
-                setData(clone);
               }}
               nodeClass={data.node}
               disabled={disabled}

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

@@ -23,7 +23,7 @@ import { classNames, toTitleCase } from "../../utils/utils";
 import ParameterComponent from "./components/parameterComponent";
 
 export default function GenericNode({
-  data: olddata,
+  data,
   xPos,
   yPos,
   selected,
@@ -33,7 +33,6 @@ export default function GenericNode({
   xPos: number;
   yPos: number;
 }): JSX.Element {
-  const [data, setData] = useState(olddata);
   const { updateFlow, flows, tabId } = useContext(TabsContext);
   const updateNodeInternals = useUpdateNodeInternals();
   const { types, deleteNode, reactFlowInstance, setFilterEdge, getFilterEdge } =
@@ -89,7 +88,6 @@ export default function GenericNode({
   // State for outline color
   const { sseData, isBuilding } = useSSE();
   useEffect(() => {
-    olddata.node = data.node;
     let myFlow = flows.find((flow) => flow.id === tabId);
     if (reactFlowInstance && myFlow) {
       let flow = cloneDeep(myFlow);
@@ -132,7 +130,6 @@ export default function GenericNode({
         <NodeToolbarComponent
           position={{ x: xPos, y: yPos }}
           data={data}
-          setData={setData}
           deleteNode={deleteNode}
           setShowNode={setShowNode}
           numberOfHandles={handles}
@@ -232,7 +229,6 @@ export default function GenericNode({
                               proxy: data.node!.template[templateField].proxy,
                             })}
                             data={data}
-                            setData={setData}
                             color={
                               nodeColors[
                                 types[data.node?.template[templateField].type!]
@@ -286,7 +282,6 @@ export default function GenericNode({
                       dataType: data.type,
                     })}
                     data={data}
-                    setData={setData}
                     color={nodeColors[types[data.type]] ?? nodeColors.unknown}
                     title={
                       data.node?.output_types &&
@@ -439,7 +434,6 @@ export default function GenericNode({
                           proxy: data.node!.template[templateField].proxy,
                         })}
                         data={data}
-                        setData={setData}
                         color={
                           nodeColors[
                             types[data.node?.template[templateField].type!]
@@ -501,7 +495,6 @@ export default function GenericNode({
                   dataType: data.type,
                 })}
                 data={data}
-                setData={setData}
                 color={nodeColors[types[data.type]] ?? nodeColors.unknown}
                 title={
                   data.node?.output_types && data.node.output_types.length > 0

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -48,14 +48,12 @@ const EditNodeModal = forwardRef(
   (
     {
       data,
-      setData,
       nodeLength,
       children,
       open,
       onClose,
     }: {
       data: NodeDataType;
-      setData: (data: NodeDataType) => void;
       nodeLength: number;
       children: ReactNode;
       open?: boolean;

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

@@ -19,7 +19,6 @@ import { classNames, getRandomKeyByssmm } from "../../../../utils/utils";
 
 export default function NodeToolbarComponent({
   data,
-  setData,
   deleteNode,
   position,
   setShowNode,
@@ -235,7 +234,6 @@ export default function NodeToolbarComponent({
           {showModalAdvanced && (
             <EditNodeModal
               data={data}
-              setData={setData}
               nodeLength={nodeLength}
               open={showModalAdvanced}
               onClose={(modal) => {

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

@@ -38,7 +38,6 @@ export type DropDownComponentType = {
 };
 export type ParameterComponentType = {
   data: NodeDataType;
-  setData: (value: NodeDataType) => void;
   title: string;
   id: sourceHandleType | targetHandleType;
   color: string;
@@ -433,7 +432,6 @@ export type fileCardPropsType = {
 export type nodeToolbarPropsType = {
   data: NodeDataType;
   deleteNode: (idx: string) => void;
-  setData: (newState: NodeDataType) => void;
   position: XYPosition;
   setShowNode: (boolean: any) => void;
   numberOfHandles: boolean[] | [];