diff --git a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx index 7023fb49e..40b395a02 100644 --- a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx +++ b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx @@ -10,6 +10,7 @@ const useColumnDefs = ( myData: any, handleOnNewValue: (newValue: any, name: string) => void, changeAdvanced: (n: string) => void, + open: boolean, ) => { const columnDefs: ColDef[] = useMemo( () => [ @@ -81,7 +82,7 @@ const useColumnDefs = ( cellClass: "no-border", }, ], - [], + [open], ); return columnDefs; diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx index 15b929f3f..a3149b115 100644 --- a/src/frontend/src/modals/editNodeModal/index.tsx +++ b/src/frontend/src/modals/editNodeModal/index.tsx @@ -1,6 +1,6 @@ -import { ColDef } from "ag-grid-community"; +import { ColDef, GridApi } from "ag-grid-community"; import { cloneDeep } from "lodash"; -import { forwardRef, useEffect, useRef } from "react"; +import { forwardRef, useEffect, useRef, useState } from "react"; import IconComponent from "../../components/genericIconComponent"; import TableComponent from "../../components/tableComponent"; import { Badge } from "../../components/ui/badge"; @@ -25,11 +25,7 @@ const EditNodeModal = forwardRef( }, ref, ) => { - const nodes = useFlowStore((state) => state.nodes); - - const dataFromStore = nodes.find((node) => node.id === node.id)?.data; - - const myData = useRef(dataFromStore ?? data); + const myData = useRef(data); const setNode = useFlowStore((state) => state.setNode); @@ -42,30 +38,30 @@ const EditNodeModal = forwardRef( myData.current.node!.template[name].value = newValue; }; - useEffect(() => { - if (open) { - const cloneData = cloneDeep(dataFromStore ?? data); - myData.current = cloneData; - } - }, [open]); - const rowData = useRowData(myData, open); const columnDefs: ColDef[] = useColumnDefs( myData, handleOnNewValue, changeAdvanced, + open, ); + const [gridApi, setGridApi] = useState(null); + + useEffect(() => { + if (gridApi && open) { + myData.current = data; + gridApi.refreshCells(); + } + }, [gridApi, open]); + return ( { - myData.current = data; - }} onSubmit={() => { setNode(data.id, (old) => ({ ...old, @@ -80,9 +76,9 @@ const EditNodeModal = forwardRef( <> - - {myData.current.type} - ID: {myData.current.id} + + {data.type} + ID: {data.id}
@@ -97,6 +93,9 @@ const EditNodeModal = forwardRef(
{nodeLength > 0 && ( { + setGridApi(params.api); + }} tooltipShowDelay={0.5} columnDefs={columnDefs} rowData={rowData}