From a17910a5352bc4a5ebb255337655c46f9c17dac7 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Wed, 5 Jun 2024 17:12:04 -0300 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20(frontend):=20replace=20Ta?= =?UTF-8?q?bleToggleCellRender=20with=20TableNodeCellRender=20for=20better?= =?UTF-8?q?=20modularity=20and=20maintainability?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✨ (frontend): add table toggle cell render component for node editing modal ✨ (frontend): add table tooltip render component for node editing modal ✨ (frontend): add use-column-defs hook for dynamic column definitions ✨ (frontend): add use-row-data hook for dynamic row data generation ♻️ (editNodeModal): refactor to use custom hooks for columnDefs and rowData --- .../tableToggleCellRender/index.tsx | 49 -------- .../components/tableNodeCellRender/index.tsx | 47 ++++---- .../tableToggleCellRender/index.tsx | 22 ++++ .../components/tableTooltipRender/index.tsx | 0 .../editNodeModal/hooks/use-column-defs.tsx | 86 ++++++++++++++ .../editNodeModal/hooks/use-row-data.tsx | 37 ++++++ .../src/modals/editNodeModal/index.tsx | 112 ++---------------- 7 files changed, 176 insertions(+), 177 deletions(-) delete mode 100644 src/frontend/src/components/tableToggleCellRender/index.tsx rename src/frontend/src/{ => modals/editNodeModal}/components/tableNodeCellRender/index.tsx (85%) create mode 100644 src/frontend/src/modals/editNodeModal/components/tableToggleCellRender/index.tsx rename src/frontend/src/{ => modals/editNodeModal}/components/tableTooltipRender/index.tsx (100%) create mode 100644 src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx create mode 100644 src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx diff --git a/src/frontend/src/components/tableToggleCellRender/index.tsx b/src/frontend/src/components/tableToggleCellRender/index.tsx deleted file mode 100644 index fe27efcf2..000000000 --- a/src/frontend/src/components/tableToggleCellRender/index.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { CustomCellEditorProps, CustomCellRendererProps } from "ag-grid-react"; -import { classNames, cn, isTimeStampString } from "../../utils/utils"; -import ArrayReader from "../arrayReaderComponent"; -import DateReader from "../dateReaderComponent"; -import NumberReader from "../numberReader"; -import ObjectRender from "../objectRender"; -import StringReader from "../stringReaderComponent"; -import { Badge } from "../ui/badge"; -import { cloneDeep } from "lodash"; -import { type } from "os"; -import { - convertObjToArray, - convertValuesToNumbers, - hasDuplicateKeys, - scapedJSONStringfy, -} from "../../utils/reactflowUtils"; -import CodeAreaComponent from "../codeAreaComponent"; -import DictComponent from "../dictComponent"; -import Dropdown from "../dropdownComponent"; -import FloatComponent from "../floatComponent"; -import InputFileComponent from "../inputFileComponent"; -import InputGlobalComponent from "../inputGlobalComponent"; -import InputListComponent from "../inputListComponent"; -import IntComponent from "../intComponent"; -import KeypairListComponent from "../keypairListComponent"; -import PromptAreaComponent from "../promptComponent"; -import TextAreaComponent from "../textAreaComponent"; -import ToggleShadComponent from "../toggleShadComponent"; -import { useState } from "react"; -import useFlowStore from "../../stores/flowStore"; - -export default function TableToggleCellRender({ - value: { name, enabled, setEnabled }, -}: CustomCellRendererProps) { - const [value, setValue] = useState(enabled); - - return ( - { - setValue(e); - setEnabled(e); - }} - size="small" - editNode={true} - /> - ); -} diff --git a/src/frontend/src/components/tableNodeCellRender/index.tsx b/src/frontend/src/modals/editNodeModal/components/tableNodeCellRender/index.tsx similarity index 85% rename from src/frontend/src/components/tableNodeCellRender/index.tsx rename to src/frontend/src/modals/editNodeModal/components/tableNodeCellRender/index.tsx index 5291b1cce..a6656f07c 100644 --- a/src/frontend/src/components/tableNodeCellRender/index.tsx +++ b/src/frontend/src/modals/editNodeModal/components/tableNodeCellRender/index.tsx @@ -1,33 +1,26 @@ -import { CustomCellEditorProps, CustomCellRendererProps } from "ag-grid-react"; -import { classNames, cn, isTimeStampString } from "../../utils/utils"; -import ArrayReader from "../arrayReaderComponent"; -import DateReader from "../dateReaderComponent"; -import NumberReader from "../numberReader"; -import ObjectRender from "../objectRender"; -import StringReader from "../stringReaderComponent"; -import { Badge } from "../ui/badge"; +import { CustomCellRendererProps } from "ag-grid-react"; import { cloneDeep } from "lodash"; -import { type } from "os"; +import { useState } from "react"; +import CodeAreaComponent from "../../../../components/codeAreaComponent"; +import DictComponent from "../../../../components/dictComponent"; +import Dropdown from "../../../../components/dropdownComponent"; +import FloatComponent from "../../../../components/floatComponent"; +import InputFileComponent from "../../../../components/inputFileComponent"; +import InputGlobalComponent from "../../../../components/inputGlobalComponent"; +import InputListComponent from "../../../../components/inputListComponent"; +import IntComponent from "../../../../components/intComponent"; +import KeypairListComponent from "../../../../components/keypairListComponent"; +import PromptAreaComponent from "../../../../components/promptComponent"; +import TextAreaComponent from "../../../../components/textAreaComponent"; +import ToggleShadComponent from "../../../../components/toggleShadComponent"; +import useFlowStore from "../../../../stores/flowStore"; import { convertObjToArray, convertValuesToNumbers, hasDuplicateKeys, scapedJSONStringfy, -} from "../../utils/reactflowUtils"; -import CodeAreaComponent from "../codeAreaComponent"; -import DictComponent from "../dictComponent"; -import Dropdown from "../dropdownComponent"; -import FloatComponent from "../floatComponent"; -import InputFileComponent from "../inputFileComponent"; -import InputGlobalComponent from "../inputGlobalComponent"; -import InputListComponent from "../inputListComponent"; -import IntComponent from "../intComponent"; -import KeypairListComponent from "../keypairListComponent"; -import PromptAreaComponent from "../promptComponent"; -import TextAreaComponent from "../textAreaComponent"; -import ToggleShadComponent from "../toggleShadComponent"; -import { useState } from "react"; -import useFlowStore from "../../stores/flowStore"; +} from "../../../../utils/reactflowUtils"; +import { classNames } from "../../../../utils/utils"; export default function TableNodeCellRender({ node: { data }, @@ -70,8 +63,8 @@ export default function TableNodeCellRender({ ...id, proxy: templateData.proxy, } - : id, - ), + : id + ) ) ?? false; function getCellType() { switch (templateData.type) { @@ -142,7 +135,7 @@ export default function TableNodeCellRender({
1 ? "my-3" : "", + templateValue?.length > 1 ? "my-3" : "" )} > { + setValue(e); + setEnabled(e); + }} + size="small" + editNode={true} + /> + ); +} diff --git a/src/frontend/src/components/tableTooltipRender/index.tsx b/src/frontend/src/modals/editNodeModal/components/tableTooltipRender/index.tsx similarity index 100% rename from src/frontend/src/components/tableTooltipRender/index.tsx rename to src/frontend/src/modals/editNodeModal/components/tableTooltipRender/index.tsx diff --git a/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx new file mode 100644 index 000000000..577c10b67 --- /dev/null +++ b/src/frontend/src/modals/editNodeModal/hooks/use-column-defs.tsx @@ -0,0 +1,86 @@ +import { ColDef, ValueGetterParams } from "ag-grid-community"; +import { useMemo } from "react"; +import TableAutoCellRender from "../../../components/tableAutoCellRender"; +import TableNodeCellRender from "../components/tableNodeCellRender"; +import TableToggleCellRender from "../components/tableToggleCellRender"; +import TableTooltipRender from "../components/tableTooltipRender"; + +const useColumnDefs = ( + myData: any, + handleOnNewValue: (newValue: any, name: string) => void, + changeAdvanced: (n: string) => void +) => { + const columnDefs: ColDef[] = useMemo( + () => [ + { + headerName: "Name", + field: "display_name", + valueGetter: (params) => { + const templateParam = params.data; + return ( + (templateParam.display_name + ? templateParam.display_name + : templateParam.name) ?? params.data.key + ); + }, + cellRenderer: TableAutoCellRender, + flex: 1, + resizable: false, + cellClass: "no-border", + }, + { + headerName: "Description", + field: "info", + tooltipField: "info", + tooltipComponent: TableTooltipRender, + cellRenderer: TableAutoCellRender, + autoHeight: true, + flex: 2, + resizable: false, + cellClass: "no-border", + }, + { + headerName: "Value", + field: "value", + cellRenderer: TableNodeCellRender, + valueGetter: (params: ValueGetterParams) => { + return { + value: params.data.value, + nodeClass: myData.current.node, + handleOnNewValue: handleOnNewValue, + handleOnChangeDb: (value, key) => { + myData.current.node!.template[key].load_from_db = value; + }, + }; + }, + minWidth: 330, + flex: 1, + resizable: false, + cellClass: "no-border", + }, + { + headerName: "Show", + field: "advanced", + cellRenderer: TableToggleCellRender, + valueGetter: (params: ValueGetterParams) => { + return { + name: params.data.name, + enabled: !params.data.advanced, + setEnabled: () => { + changeAdvanced(params.data.key); + }, + }; + }, + editable: false, + maxWidth: 80, + resizable: false, + cellClass: "no-border", + }, + ], + [] + ); + + return columnDefs; +}; + +export default useColumnDefs; diff --git a/src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx b/src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx new file mode 100644 index 000000000..0cc515dc3 --- /dev/null +++ b/src/frontend/src/modals/editNodeModal/hooks/use-row-data.tsx @@ -0,0 +1,37 @@ +import { useMemo } from "react"; +import { LANGFLOW_SUPPORTED_TYPES } from "../../../constants/constants"; +import { TemplateVariableType } from "../../../types/api"; + +const useRowData = (myData) => { + const rowData = useMemo(() => { + return Object.keys(myData.current.node!.template) + .filter((key: string) => { + const templateParam = myData.current.node!.template[ + key + ] as TemplateVariableType; + return ( + key.charAt(0) !== "_" && + templateParam.show && + LANGFLOW_SUPPORTED_TYPES.has(templateParam.type) && + !( + (key === "code" && templateParam.type === "code") || + (key.includes("code") && templateParam.proxy) + ) + ); + }) + .map((key: string) => { + const templateParam = myData.current.node!.template[ + key + ] as TemplateVariableType; + return { + ...templateParam, + key: key, + id: key, + }; + }); + }, [myData.current.node!.template]); + + return rowData; +}; + +export default useRowData; diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx index a9922386e..9de14977f 100644 --- a/src/frontend/src/modals/editNodeModal/index.tsx +++ b/src/frontend/src/modals/editNodeModal/index.tsx @@ -1,18 +1,13 @@ -import { ColDef, ValueGetterParams } from "ag-grid-community"; +import { ColDef } from "ag-grid-community"; import { forwardRef, useEffect, useRef } from "react"; import IconComponent from "../../components/genericIconComponent"; -import TableAutoCellRender from "../../components/tableAutoCellRender"; import TableComponent from "../../components/tableComponent"; -import TableNodeCellRender from "../../components/tableNodeCellRender"; -import TableTooltipRender from "../../components/tableTooltipRender"; -import ToggleShadComponent from "../../components/toggleShadComponent"; import { Badge } from "../../components/ui/badge"; -import { LANGFLOW_SUPPORTED_TYPES } from "../../constants/constants"; import useFlowStore from "../../stores/flowStore"; -import { TemplateVariableType } from "../../types/api"; import { NodeDataType } from "../../types/flow"; import BaseModal from "../baseModal"; -import TableToggleCellRender from "../../components/tableToggleCellRender"; +import useColumnDefs from "./hooks/use-column-defs"; +import useRowData from "./hooks/use-row-data"; const EditNodeModal = forwardRef( ( @@ -27,7 +22,7 @@ const EditNodeModal = forwardRef( setOpen: (open: boolean) => void; data: NodeDataType; }, - ref, + ref ) => { const nodes = useFlowStore((state) => state.nodes); @@ -52,98 +47,13 @@ const EditNodeModal = forwardRef( } }, [open]); - const rowData = Object.keys(myData.current.node!.template) - .filter((key: string) => { - const templateParam = myData.current.node!.template[ - key - ] as TemplateVariableType; - return ( - key.charAt(0) !== "_" && - templateParam.show && - LANGFLOW_SUPPORTED_TYPES.has(templateParam.type) && - !( - (key === "code" && templateParam.type === "code") || - (key.includes("code") && templateParam.proxy) - ) - ); - }) - .map((key: string) => { - const templateParam = myData.current.node!.template[ - key - ] as TemplateVariableType; - return { - ...templateParam, - key: key, - id: key, - }; - }); + const rowData = useRowData(myData); - const columnDefs: ColDef[] = [ - { - headerName: "Name", - field: "display_name", - valueGetter: (params) => { - const templateParam = params.data; - return ( - (templateParam.display_name - ? templateParam.display_name - : templateParam.name) ?? params.data.key - ); - }, - cellRenderer: TableAutoCellRender, - flex: 1, - resizable: false, - cellClass: "no-border", - }, - { - headerName: "Description", - field: "info", - tooltipField: "info", - tooltipComponent: TableTooltipRender, - cellRenderer: TableAutoCellRender, - autoHeight: true, - flex: 2, - resizable: false, - cellClass: "no-border", - }, - { - headerName: "Value", - field: "value", - cellRenderer: TableNodeCellRender, - valueGetter: (params: ValueGetterParams) => { - return { - value: params.data.value, - nodeClass: myData.current.node, - handleOnNewValue: handleOnNewValue, - handleOnChangeDb: (value, key) => { - myData.current.node!.template[key].load_from_db = value; - }, - }; - }, - minWidth: 330, - flex: 1, - resizable: false, - cellClass: "no-border", - }, - { - headerName: "Show", - field: "advanced", - cellRenderer: TableToggleCellRender, - valueGetter: (params: ValueGetterParams) => { - return { - name: params.data.name, - enabled: !params.data.advanced, - setEnabled: () => { - changeAdvanced(params.data.key); - }, - }; - }, - editable: false, - maxWidth: 80, - resizable: false, - cellClass: "no-border", - }, - ]; + const columnDefs: ColDef[] = useColumnDefs( + myData, + handleOnNewValue, + changeAdvanced + ); return ( ); - }, + } ); export default EditNodeModal;