diff --git a/agenta-web/package-lock.json b/agenta-web/package-lock.json index d30e525cee..5f32a7e5d8 100644 --- a/agenta-web/package-lock.json +++ b/agenta-web/package-lock.json @@ -8,6 +8,10 @@ "name": "agenta", "version": "0.29.0", "dependencies": { + "@ag-grid-community/client-side-row-model": "^31.3.4", + "@ag-grid-community/core": "^31.3.4", + "@ag-grid-community/react": "^31.3.4", + "@ag-grid-community/styles": "^31.3.4", "@ant-design/colors": "^7.0.0", "@ant-design/icons": "^5.3.7", "@dnd-kit/core": "^6.1.0", @@ -39,8 +43,6 @@ "@types/react-resizable": "^3.0.7", "@types/react-syntax-highlighter": "^15.5.7", "@types/uuid": "^9.0.7", - "ag-grid-community": "^31.3.4", - "ag-grid-react": "^31.3.4", "antd": "^5.20.6", "autoprefixer": "10.4.14", "axios": "^1.7.7", @@ -92,6 +94,45 @@ "node": ">=18" } }, + "node_modules/@ag-grid-community/client-side-row-model": { + "version": "31.3.4", + "resolved": "https://registry.npmjs.org/@ag-grid-community/client-side-row-model/-/client-side-row-model-31.3.4.tgz", + "integrity": "sha512-lbrbhwSoY1/N2CiOQBa322gVnrhyrbzyG7cvbOef3itAiaLUzQ03PWBw09d9mj+/0hnqMs386ZuGX15FWJaTqQ==", + "license": "MIT", + "dependencies": { + "@ag-grid-community/core": "31.3.4", + "tslib": "^2.3.0" + } + }, + "node_modules/@ag-grid-community/core": { + "version": "31.3.4", + "resolved": "https://registry.npmjs.org/@ag-grid-community/core/-/core-31.3.4.tgz", + "integrity": "sha512-Fz7P4lMAYDo9rG6jOA8OXlAXta/4E+PiCdjT7M9OloaXAJtU47oO4f3VKV7rdbVCC8SGSo0cBCateddQTAFCNQ==", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + } + }, + "node_modules/@ag-grid-community/react": { + "version": "31.3.4", + "resolved": "https://registry.npmjs.org/@ag-grid-community/react/-/react-31.3.4.tgz", + "integrity": "sha512-mNkVEDiatxny6AeNIxkJe/oNsakV0RaP6qqyDla/bijKFX1cVR7t13SFYMujxdM3lF7j1s+HHJv1Z4dg9xRqSw==", + "license": "MIT", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@ag-grid-community/core": "31.3.4", + "react": "^16.3.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@ag-grid-community/styles": { + "version": "31.3.4", + "resolved": "https://registry.npmjs.org/@ag-grid-community/styles/-/styles-31.3.4.tgz", + "integrity": "sha512-5pgt/Qq/GxiJi59UA17ltG5U4r0J+GB3S/QCysJFi6kmgmCDsbCfisekTwSh0xxOGO+OIhejoqsOuEnTcw78kg==", + "license": "MIT" + }, "node_modules/@alloc/quick-lru": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", @@ -1816,6 +1857,21 @@ } } }, + "node_modules/@next/swc-darwin-arm64": { + "version": "14.2.17", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.17.tgz", + "integrity": "sha512-WiOf5nElPknrhRMTipXYTJcUz7+8IAjOYw3vXzj3BYRcVY0hRHKWgTgQ5439EvzQyHEko77XK+yN9x9OJ0oOog==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, "node_modules/@next/swc-darwin-x64": { "version": "14.2.17", "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.17.tgz", @@ -1832,6 +1888,111 @@ "node": ">= 10" } }, + "node_modules/@next/swc-linux-arm64-gnu": { + "version": "14.2.17", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.17.tgz", + "integrity": "sha512-SSHLZls3ZwNEHsc+d0ynKS+7Af0Nr8+KTUBAy9pm6xz9SHkJ/TeuEg6W3cbbcMSh6j4ITvrjv3Oi8n27VR+IPw==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-musl": { + "version": "14.2.17", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.17.tgz", + "integrity": "sha512-VFge37us5LNPatB4F7iYeuGs9Dprqe4ZkW7lOEJM91r+Wf8EIdViWHLpIwfdDXinvCdLl6b4VyLpEBwpkctJHA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-gnu": { + "version": "14.2.17", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.17.tgz", + "integrity": "sha512-aaQlpxUVb9RZ41adlTYVQ3xvYEfBPUC8+6rDgmQ/0l7SvK8S1YNJzPmDPX6a4t0jLtIoNk7j+nroS/pB4nx7vQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-musl": { + "version": "14.2.17", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.17.tgz", + "integrity": "sha512-HSyEiFaEY3ay5iATDqEup5WAfrhMATNJm8dYx3ZxL+e9eKv10XKZCwtZByDoLST7CyBmyDz+OFJL1wigyXeaoA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-arm64-msvc": { + "version": "14.2.17", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.17.tgz", + "integrity": "sha512-h5qM9Btqv87eYH8ArrnLoAHLyi79oPTP2vlGNSg4CDvUiXgi7l0+5KuEGp5pJoMhjuv9ChRdm7mRlUUACeBt4w==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-ia32-msvc": { + "version": "14.2.17", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.17.tgz", + "integrity": "sha512-BD/G++GKSLexQjdyoEUgyo5nClU7er5rK0sE+HlEqnldJSm96CIr/+YOTT063LVTT/dUOeQsNgp5DXr86/K7/A==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-x64-msvc": { + "version": "14.2.17", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.17.tgz", + "integrity": "sha512-vkQfN1+4V4KqDibkW2q0sJ6CxQuXq5l2ma3z0BRcfIqkAMZiiW67T9yCpwqJKP68QghBtPEFjPAlaqe38O6frw==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -5445,26 +5606,6 @@ "node": ">=0.4.0" } }, - "node_modules/ag-grid-community": { - "version": "31.3.4", - "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-31.3.4.tgz", - "integrity": "sha512-jOxQO86C6eLnk1GdP24HB6aqaouFzMWizgfUwNY5MnetiWzz9ZaAmOGSnW/XBvdjXvC5Fpk3gSbvVKKQ7h9kBw==", - "license": "MIT" - }, - "node_modules/ag-grid-react": { - "version": "31.3.4", - "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-31.3.4.tgz", - "integrity": "sha512-WmPASHRFGSTxCMRStWG5bRtln0Ugsdqbb3+Y8sEyGHeLw4hXqfpqie3lT9kqCOl7wPWUjCpwmFdXzRnWPmyyeg==", - "license": "MIT", - "dependencies": { - "ag-grid-community": "31.3.4", - "prop-types": "^15.8.1" - }, - "peerDependencies": { - "react": "^16.3.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/agent-base": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", @@ -20357,126 +20498,6 @@ "type": "github", "url": "https://github.com/sponsors/wooorm" } - }, - "node_modules/@next/swc-darwin-arm64": { - "version": "14.2.17", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.17.tgz", - "integrity": "sha512-WiOf5nElPknrhRMTipXYTJcUz7+8IAjOYw3vXzj3BYRcVY0hRHKWgTgQ5439EvzQyHEko77XK+yN9x9OJ0oOog==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-arm64-gnu": { - "version": "14.2.17", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.17.tgz", - "integrity": "sha512-SSHLZls3ZwNEHsc+d0ynKS+7Af0Nr8+KTUBAy9pm6xz9SHkJ/TeuEg6W3cbbcMSh6j4ITvrjv3Oi8n27VR+IPw==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-arm64-musl": { - "version": "14.2.17", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.17.tgz", - "integrity": "sha512-VFge37us5LNPatB4F7iYeuGs9Dprqe4ZkW7lOEJM91r+Wf8EIdViWHLpIwfdDXinvCdLl6b4VyLpEBwpkctJHA==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-x64-gnu": { - "version": "14.2.17", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.17.tgz", - "integrity": "sha512-aaQlpxUVb9RZ41adlTYVQ3xvYEfBPUC8+6rDgmQ/0l7SvK8S1YNJzPmDPX6a4t0jLtIoNk7j+nroS/pB4nx7vQ==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-x64-musl": { - "version": "14.2.17", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.17.tgz", - "integrity": "sha512-HSyEiFaEY3ay5iATDqEup5WAfrhMATNJm8dYx3ZxL+e9eKv10XKZCwtZByDoLST7CyBmyDz+OFJL1wigyXeaoA==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-win32-arm64-msvc": { - "version": "14.2.17", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.17.tgz", - "integrity": "sha512-h5qM9Btqv87eYH8ArrnLoAHLyi79oPTP2vlGNSg4CDvUiXgi7l0+5KuEGp5pJoMhjuv9ChRdm7mRlUUACeBt4w==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-win32-ia32-msvc": { - "version": "14.2.17", - "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.17.tgz", - "integrity": "sha512-BD/G++GKSLexQjdyoEUgyo5nClU7er5rK0sE+HlEqnldJSm96CIr/+YOTT063LVTT/dUOeQsNgp5DXr86/K7/A==", - "cpu": [ - "ia32" - ], - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-win32-x64-msvc": { - "version": "14.2.17", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.17.tgz", - "integrity": "sha512-vkQfN1+4V4KqDibkW2q0sJ6CxQuXq5l2ma3z0BRcfIqkAMZiiW67T9yCpwqJKP68QghBtPEFjPAlaqe38O6frw==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10" - } } } } diff --git a/agenta-web/package.json b/agenta-web/package.json index a17552b529..d5643b1702 100644 --- a/agenta-web/package.json +++ b/agenta-web/package.json @@ -21,6 +21,10 @@ "types:watch": "tsc -w" }, "dependencies": { + "@ag-grid-community/core": "^31.3.4", + "@ag-grid-community/react": "^31.3.4", + "@ag-grid-community/client-side-row-model": "^31.3.4", + "@ag-grid-community/styles": "^31.3.4", "@ant-design/colors": "^7.0.0", "@ant-design/icons": "^5.3.7", "@dnd-kit/core": "^6.1.0", @@ -52,8 +56,6 @@ "@types/react-resizable": "^3.0.7", "@types/react-syntax-highlighter": "^15.5.7", "@types/uuid": "^9.0.7", - "ag-grid-community": "^31.3.4", - "ag-grid-react": "^31.3.4", "antd": "^5.20.6", "autoprefixer": "10.4.14", "axios": "^1.7.7", diff --git a/agenta-web/src/components/TestSetTable/EditRowModal.tsx b/agenta-web/src/components/TestSetTable/EditRowModal.tsx index 2e593f265c..73f646473b 100644 --- a/agenta-web/src/components/TestSetTable/EditRowModal.tsx +++ b/agenta-web/src/components/TestSetTable/EditRowModal.tsx @@ -1,11 +1,12 @@ import {capitalize} from "@/lib/helpers/utils" -import {AgGridReact} from "ag-grid-react" import {Input, Modal} from "antd" import React, {forwardRef, useCallback, useImperativeHandle, useMemo, useState} from "react" import {useAppTheme} from "../Layout/ThemeContextProvider" import useResizeObserver from "@/hooks/useResizeObserver" import {createUseStyles} from "react-jss" +import AgGridReact from "@/lib/helpers/agGrid" + const useStyles = createUseStyles({ cellContainer: { lineHeight: "22px", diff --git a/agenta-web/src/components/TestSetTable/TableCellsRenderer.tsx b/agenta-web/src/components/TestSetTable/TableCellsRenderer.tsx index 9c7461329c..6e20673a67 100644 --- a/agenta-web/src/components/TestSetTable/TableCellsRenderer.tsx +++ b/agenta-web/src/components/TestSetTable/TableCellsRenderer.tsx @@ -1,7 +1,7 @@ import {Tooltip} from "antd" import {createUseStyles} from "react-jss" import {EditOutlined} from "@ant-design/icons" -import {ICellRendererParams} from "ag-grid-community" +import {type ICellRendererParams} from "@ag-grid-community/core" const useStylesCell = createUseStyles({ cellContainer: { diff --git a/agenta-web/src/components/TestSetTable/TestsetTable.tsx b/agenta-web/src/components/TestSetTable/TestsetTable.tsx index 42c216760f..7047529804 100644 --- a/agenta-web/src/components/TestSetTable/TestsetTable.tsx +++ b/agenta-web/src/components/TestSetTable/TestsetTable.tsx @@ -1,6 +1,6 @@ import React, {useState, useRef, useEffect, ReactNode} from "react" -import {AgGridReact} from "ag-grid-react" -import {IHeaderParams} from "ag-grid-community" + +import {type IHeaderParams} from "@ag-grid-community/core" import {createUseStyles} from "react-jss" import {Button, Input, Typography, message} from "antd" import TestsetMusHaveNameModal from "./InsertTestsetNameModal" @@ -17,6 +17,7 @@ import {NoticeType} from "antd/es/message/interface" import {GenericObject, KeyValuePair} from "@/lib/Types" import TableCellsRenderer from "./TableCellsRenderer" import TableHeaderComponent from "./TableHeaderComponent" +import AgGridReact, {type AgGridReactType} from "@/lib/helpers/agGrid" type TestsetTableProps = { mode: "edit" @@ -83,7 +84,7 @@ const TestsetTable: React.FC = ({mode}) => { const [inputValues, setInputValues] = useStateCallback(columnDefs.map((col) => col.field)) const [focusedRowData, setFocusedRowData] = useState() const [writeMode, setWriteMode] = useState(mode) - const gridRef = useRef(null) + const [gridRef, setGridRef] = useState() const [selectedRow, setSelectedRow] = useState([]) @@ -180,8 +181,8 @@ const TestsetTable: React.FC = ({mode}) => { setColumnDefs(newColumnDefs) setRowData(newRowData) - if (gridRef.current) { - gridRef.current.setColumnDefs(newColumnDefs) + if (gridRef) { + gridRef.setColumnDefs(newColumnDefs) } } @@ -224,12 +225,14 @@ const TestsetTable: React.FC = ({mode}) => { } const onRowSelectedOrDeselected = () => { - if (!gridRef?.current) return - setSelectedRow(gridRef?.current?.getSelectedNodes()) + if (!gridRef) return + const selectedNodes = gridRef?.getSelectedNodes() + setSelectedRow(selectedNodes as any) } const onDeleteRow = () => { - const selectedNodes = gridRef.current.getSelectedNodes() + if (!gridRef) return + const selectedNodes = gridRef.getSelectedNodes() const selectedData = selectedNodes.map((node: GenericObject) => node.data) const newrowData = rowData.filter((row) => !selectedData.includes(row)) setRowData(newrowData) @@ -256,8 +259,8 @@ const TestsetTable: React.FC = ({mode}) => { setColumnDefs(newColumnDefs) setRowData(newRowData) setIsDataChanged(true) - if (gridRef.current) { - gridRef.current.setColumnDefs(newColumnDefs) + if (gridRef) { + gridRef.setColumnDefs(newColumnDefs) } } @@ -342,7 +345,7 @@ const TestsetTable: React.FC = ({mode}) => { style={{height: 500}} > (gridRef.current = params.api)} + onGridReady={(params) => setGridRef(params.api)} rowData={rowData} columnDefs={columnDefs} defaultColDef={defaultColDef} diff --git a/agenta-web/src/components/pages/evaluations/FilterColumns/FilterColumns.tsx b/agenta-web/src/components/pages/evaluations/FilterColumns/FilterColumns.tsx index f008293c0e..ff7be0ca1f 100644 --- a/agenta-web/src/components/pages/evaluations/FilterColumns/FilterColumns.tsx +++ b/agenta-web/src/components/pages/evaluations/FilterColumns/FilterColumns.tsx @@ -4,7 +4,7 @@ import {Button, Dropdown, Space} from "antd" import {ItemType} from "antd/es/menu/interface" import React from "react" import {createUseStyles} from "react-jss" -import {ColDef} from "ag-grid-community" +import {type ColDef} from "@ag-grid-community/core" const useStyles = createUseStyles((theme: JSSTheme) => ({ dropdownMenu: { diff --git a/agenta-web/src/components/pages/evaluations/cellRenderers/cellRenderers.tsx b/agenta-web/src/components/pages/evaluations/cellRenderers/cellRenderers.tsx index 9d7e3bb75a..48ef1e6173 100644 --- a/agenta-web/src/components/pages/evaluations/cellRenderers/cellRenderers.tsx +++ b/agenta-web/src/components/pages/evaluations/cellRenderers/cellRenderers.tsx @@ -12,7 +12,7 @@ import { FullscreenOutlined, InfoCircleOutlined, } from "@ant-design/icons" -import {ICellRendererParams} from "ag-grid-community" +import {type ICellRendererParams} from "@ag-grid-community/core" import {GlobalToken, Space, Tooltip, Typography, message, theme} from "antd" import dayjs from "dayjs" import relativeTime from "dayjs/plugin/relativeTime" diff --git a/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx b/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx index c8d7de665f..5da1fd9f24 100644 --- a/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx +++ b/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx @@ -8,9 +8,8 @@ import { _Evaluation, _EvaluationScenario, } from "@/lib/Types" -import {ColDef, ICellRendererParams} from "ag-grid-community" +import {type ColDef, type ICellRendererParams} from "@ag-grid-community/core" import {fetchAllComparisonResults} from "@/services/evaluations/api" -import {AgGridReact} from "ag-grid-react" import {Button, DropdownProps, Space, Spin, Tag, Tooltip, Typography} from "antd" import React, {useEffect, useMemo, useRef, useState} from "react" import {createUseStyles} from "react-jss" @@ -33,6 +32,7 @@ import {escapeNewlines} from "@/lib/helpers/fileManipulations" import EvaluationErrorModal from "../EvaluationErrorProps/EvaluationErrorModal" import EvaluationErrorText from "../EvaluationErrorProps/EvaluationErrorText" import {getStringOrJson} from "@/lib/helpers/utils" +import AgGridReact, {type AgGridReactType} from "@/lib/helpers/agGrid" const useStyles = createUseStyles((theme: JSSTheme) => ({ table: { @@ -87,7 +87,7 @@ const EvaluationCompareMode: React.FC = () => { const [rows, setRows] = useState([]) const [testset, setTestset] = useState() const [evaluators] = useAtom(evaluatorsAtom) - const gridRef = useRef>() + const [gridRef, setGridRef] = useState>() const [isFilterColsDropdownOpen, setIsFilterColsDropdownOpen] = useState(false) const [isDiffDropdownOpen, setIsDiffDropdownOpen] = useState(false) const [selectedCorrectAnswer, setSelectedCorrectAnswer] = useState(["noDiffColumnIsSelected"]) @@ -375,14 +375,14 @@ const EvaluationCompareMode: React.FC = () => { setRows(rows) setTestset(testset) setTimeout(() => { - if (!gridRef.current) return + if (!gridRef) return const ids: string[] = - gridRef.current.api + gridRef.api .getColumns() ?.filter((column) => column.getColDef().field?.endsWith("result")) ?.map((item) => item.getColId()) || [] - gridRef.current.api.autoSizeColumns(ids, false) + gridRef.api.autoSizeColumns(ids, false) setFetching(false) }, 100) }) @@ -390,8 +390,9 @@ const EvaluationCompareMode: React.FC = () => { } useEffect(() => { + if (!gridRef) return fetcher() - }, [appId, evaluationIdsStr]) + }, [appId, evaluationIdsStr, gridRef]) const handleToggleVariantVisibility = (evalId: string) => { if (!hiddenVariants.includes(evalId)) { @@ -437,7 +438,7 @@ const EvaluationCompareMode: React.FC = () => { } const onExport = (): void => { - const gridApi = gridRef.current?.api + const gridApi = gridRef?.api if (!gridApi) return const {currentApp} = getAppValues() @@ -576,7 +577,7 @@ const EvaluationCompareMode: React.FC = () => { data-cy="evaluation-compare-table" > - ref={gridRef as any} + gridRef={setGridRef} rowData={rows} columnDefs={colDefs} getRowId={(params) => params.data.rowId} diff --git a/agenta-web/src/components/pages/evaluations/evaluationScenarios/EvaluationScenarios.tsx b/agenta-web/src/components/pages/evaluations/evaluationScenarios/EvaluationScenarios.tsx index 0fe867e6d2..a7f3c60826 100644 --- a/agenta-web/src/components/pages/evaluations/evaluationScenarios/EvaluationScenarios.tsx +++ b/agenta-web/src/components/pages/evaluations/evaluationScenarios/EvaluationScenarios.tsx @@ -13,8 +13,7 @@ import { fetchAllEvaluators, } from "@/services/evaluations/api" import {CheckOutlined, DeleteOutlined, DownloadOutlined} from "@ant-design/icons" -import {ColDef, ICellRendererParams} from "ag-grid-community" -import {AgGridReact} from "ag-grid-react" +import {type ColDef, type ICellRendererParams} from "@ag-grid-community/core" import {DropdownProps, Space, Spin, Tag, Tooltip, Typography} from "antd" import {useRouter} from "next/router" import React, {useEffect, useMemo, useRef, useState} from "react" @@ -36,6 +35,7 @@ import FilterColumns, {generateFilterItems} from "../FilterColumns/FilterColumns import {variantNameWithRev} from "@/lib/helpers/variantHelper" import {escapeNewlines} from "@/lib/helpers/fileManipulations" import {getStringOrJson} from "@/lib/helpers/utils" +import AgGridReact, {type AgGridReactType} from "@/lib/helpers/agGrid" const useStyles = createUseStyles((theme: JSSTheme) => ({ infoRow: { @@ -66,7 +66,7 @@ const EvaluationScenarios: React.FC = () => { const [scenarios, setScenarios] = useState<_EvaluationScenario[]>([]) const [fetching, setFetching] = useState(false) const [evaluators, setEvaluators] = useAtom(evaluatorsAtom) - const gridRef = useRef>() + const [gridRef, setGridRef] = useState>() const evalaution = scenarios[0]?.evaluation const [selectedCorrectAnswer, setSelectedCorrectAnswer] = useState(["noDiffColumnIsSelected"]) const [isFilterColsDropdownOpen, setIsFilterColsDropdownOpen] = useState(false) @@ -287,14 +287,14 @@ const EvaluationScenarios: React.FC = () => { setScenarios(scenarios) setEvaluators(evaluators) setTimeout(() => { - if (!gridRef.current) return + if (!gridRef) return const ids: string[] = - gridRef.current.api + gridRef.api .getColumns() ?.filter((column) => column.getColDef().field === "results") ?.map((item) => item.getColId()) || [] - gridRef.current.api.autoSizeColumns(ids, false) + gridRef.api.autoSizeColumns(ids, false) setFetching(false) }, 100) }) @@ -303,13 +303,14 @@ const EvaluationScenarios: React.FC = () => { } useEffect(() => { + if (!gridRef) return fetcher() - }, [appId, evaluationId]) + }, [appId, gridRef, evaluationId]) const onExport = () => { - if (!gridRef.current) return + if (!gridRef) return const {currentApp} = getAppValues() - gridRef.current.api.exportDataAsCsv({ + gridRef.api.exportDataAsCsv({ fileName: `${currentApp?.app_name}_${evalaution.variants[0].variantName}.csv`, processHeaderCallback: (params) => { if (params.column.getColDef().headerName === "Output") { @@ -422,7 +423,7 @@ const EvaluationScenarios: React.FC = () => { data-cy="evalaution-scenarios-table" > - ref={gridRef as any} + gridRef={setGridRef} rowData={scenarios} columnDefs={colDefs} getRowId={(params) => params.data.id} diff --git a/agenta-web/src/hooks/useAgGridCustomHeaders.tsx b/agenta-web/src/hooks/useAgGridCustomHeaders.tsx deleted file mode 100644 index 221ef33edf..0000000000 --- a/agenta-web/src/hooks/useAgGridCustomHeaders.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import {ColDef} from "ag-grid-community" -import {useEffect, useMemo, useState} from "react" -import {createCache, extractStyle, StyleProvider} from "@ant-design/cssinjs" -import type Entity from "@ant-design/cssinjs/es/Cache" -import {renderToString} from "react-dom/server" -import {AgGridReact} from "ag-grid-react" - -export const useAgGridCustomHeaders = (gridApi?: AgGridReact["api"]) => { - const [gridRendered, setGridRendered] = useState(false) - const cache = useMemo(() => createCache(), []) - - const colDefs: ColDef[] = gridApi?.getColumnDefs() || [] - - useEffect(() => { - gridApi?.addEventListener("firstDataRendered", () => { - setGridRendered(true) - }) - }, [gridApi]) - - useEffect(() => { - if (!gridRendered) return - - const colDefsMap: Record = {} - - colDefs - .filter((colDef) => !!colDef.headerComponentParams?.headerNode) - .forEach((colDef) => { - const field = colDef.field! - if (!colDefsMap[field]) colDefsMap[field] = [] - colDefsMap[field].push(colDef) - }) - - Object.entries(colDefsMap).forEach(([field, colDefs]) => { - document.querySelectorAll(`.ag-header-cell[col-id^="${field}"]`).forEach((el, ix) => { - const html = renderToString( - - - {colDefs[ix].headerComponentParams.headerNode} - - , - ) - const headerNode = el.querySelector(".ag-header-cell-text") - if (headerNode) { - headerNode.innerHTML = html - const agHeader = document.querySelector(".ag-header-row") - - if (agHeader) { - // re insert html if it gets removed - const observer = new MutationObserver(() => { - document - .querySelectorAll(`.ag-header-cell[col-id^="${field}"]`) - .forEach((el) => { - const hasCustomHeader = !!el.querySelector( - ".agenta-custom-header-ag-grid", - ) - if (!hasCustomHeader) headerNode.innerHTML = html - }) - }) - observer.observe(agHeader, { - characterData: false, - childList: true, - attributes: false, - }) - } - } - }) - }) - - const styleText = extractStyle(cache) - let styleNode = document.querySelector("#antd-custom-style-node") - if (!styleNode) { - styleNode = document.createElement("div") - styleNode.id = "antd-custom-style-node" - document.body.appendChild(styleNode) - } - styleNode.innerHTML = styleText - }, [colDefs, gridRendered]) -} diff --git a/agenta-web/src/lib/helpers/agGrid.tsx b/agenta-web/src/lib/helpers/agGrid.tsx new file mode 100644 index 0000000000..e6e5565da7 --- /dev/null +++ b/agenta-web/src/lib/helpers/agGrid.tsx @@ -0,0 +1,38 @@ +import type {SetStateAction, ComponentProps, LegacyRef} from "react" +import dynamic from "next/dynamic" +import {type AgGridReact as AgGridReactType, AgGridReactProps} from "@ag-grid-community/react" + +type ComponentType = ( + props: AgGridReactProps & { + gridRef?: LegacyRef> | ((ref: AgGridReactType) => void) + }, +) => JSX.Element + +const AgGridReact = dynamic( + async (): Promise => { + const ClientSideRowModelModule = await import( + "@ag-grid-community/client-side-row-model" + ).then((module) => module.ClientSideRowModelModule) + const ModuleRegistry = await import("@ag-grid-community/core").then( + (module) => module.ModuleRegistry, + ) + ModuleRegistry.registerModules([ClientSideRowModelModule]) + + const AgGridReact = await import("@ag-grid-community/react").then((mod) => mod.AgGridReact) + + const GridWrapper = ( + props: AgGridReactProps & {gridRef?: LegacyRef>}, + ) => { + return + } + + return GridWrapper as ComponentType + }, + { + ssr: false, + }, +) + +export type {AgGridReactType} + +export default AgGridReact as unknown as ComponentType diff --git a/agenta-web/src/pages/_app.tsx b/agenta-web/src/pages/_app.tsx index b24e72a3a0..d47ae0bf67 100644 --- a/agenta-web/src/pages/_app.tsx +++ b/agenta-web/src/pages/_app.tsx @@ -9,8 +9,6 @@ import ThemeContextProvider from "@/components/Layout/ThemeContextProvider" import AppContextProvider from "@/contexts/app.context" import ProfileContextProvider from "@/contexts/profile.context" import ProjectContextProvider from "@/contexts/project.context" -import "ag-grid-community/styles/ag-grid.css" -import "ag-grid-community/styles/ag-theme-alpine.css" import {Inter} from "next/font/google" import AgSWRConfig from "@/lib/api/SWRConfig" diff --git a/agenta-web/src/pages/apps/[app_id]/evaluations/human_a_b_testing/[evaluation_id]/index.tsx b/agenta-web/src/pages/apps/[app_id]/evaluations/human_a_b_testing/[evaluation_id]/index.tsx index 33f8a33a68..f2f75cdfbb 100644 --- a/agenta-web/src/pages/apps/[app_id]/evaluations/human_a_b_testing/[evaluation_id]/index.tsx +++ b/agenta-web/src/pages/apps/[app_id]/evaluations/human_a_b_testing/[evaluation_id]/index.tsx @@ -12,6 +12,9 @@ import {useAtom} from "jotai" import {evaluationAtom, evaluationScenariosAtom} from "@/lib/atoms/evaluation" import {getTestsetChatColumn} from "@/lib/helpers/testset" +import "@ag-grid-community/styles/ag-grid.css" +import "@ag-grid-community/styles/ag-theme-alpine.css" + export default function Evaluation() { const router = useRouter() const evaluationTableId = router.query.evaluation_id diff --git a/agenta-web/src/pages/apps/[app_id]/evaluations/index.tsx b/agenta-web/src/pages/apps/[app_id]/evaluations/index.tsx index aa69f6987c..b7888273c3 100644 --- a/agenta-web/src/pages/apps/[app_id]/evaluations/index.tsx +++ b/agenta-web/src/pages/apps/[app_id]/evaluations/index.tsx @@ -7,6 +7,9 @@ import {ChartDonut, ListChecks, TestTube} from "@phosphor-icons/react" import {Tabs, TabsProps, Typography} from "antd" import {createUseStyles} from "react-jss" +import "@ag-grid-community/styles/ag-grid.css" +import "@ag-grid-community/styles/ag-theme-alpine.css" + const useStyles = createUseStyles((theme: JSSTheme) => ({ container: { display: "flex", diff --git a/agenta-web/src/pages/apps/[app_id]/evaluations/results/[evaluation_id]/index.tsx b/agenta-web/src/pages/apps/[app_id]/evaluations/results/[evaluation_id]/index.tsx index fb2d997f15..5faa93de6b 100644 --- a/agenta-web/src/pages/apps/[app_id]/evaluations/results/[evaluation_id]/index.tsx +++ b/agenta-web/src/pages/apps/[app_id]/evaluations/results/[evaluation_id]/index.tsx @@ -1,6 +1,9 @@ import React from "react" import EvaluationScenarios from "@/components/pages/evaluations/evaluationScenarios/EvaluationScenarios" +import "@ag-grid-community/styles/ag-grid.css" +import "@ag-grid-community/styles/ag-theme-alpine.css" + const EvaluationDetail = () => { return } diff --git a/agenta-web/src/pages/apps/[app_id]/evaluations/results/compare/index.tsx b/agenta-web/src/pages/apps/[app_id]/evaluations/results/compare/index.tsx index 0e346a3b7b..aae01c02ec 100644 --- a/agenta-web/src/pages/apps/[app_id]/evaluations/results/compare/index.tsx +++ b/agenta-web/src/pages/apps/[app_id]/evaluations/results/compare/index.tsx @@ -1,6 +1,9 @@ import React from "react" import EvaluationCompare from "@/components/pages/evaluations/evaluationCompare/EvaluationCompare" +import "@ag-grid-community/styles/ag-grid.css" +import "@ag-grid-community/styles/ag-theme-alpine.css" + const EvaluationCompareDetails = () => { return } diff --git a/agenta-web/src/pages/apps/[app_id]/evaluations/single_model_test/[evaluation_id]/index.tsx b/agenta-web/src/pages/apps/[app_id]/evaluations/single_model_test/[evaluation_id]/index.tsx index 9c0573d2eb..ed9dc5e25f 100644 --- a/agenta-web/src/pages/apps/[app_id]/evaluations/single_model_test/[evaluation_id]/index.tsx +++ b/agenta-web/src/pages/apps/[app_id]/evaluations/single_model_test/[evaluation_id]/index.tsx @@ -10,6 +10,9 @@ import {fetchVariants} from "@/services/api" import {getTestsetChatColumn} from "@/lib/helpers/testset" import SingleModelEvaluationTable from "@/components/EvaluationTable/SingleModelEvaluationTable" +import "@ag-grid-community/styles/ag-grid.css" +import "@ag-grid-community/styles/ag-theme-alpine.css" + export default function Evaluation() { const router = useRouter() const evaluationTableId = router.query.evaluation_id diff --git a/agenta-web/src/pages/testsets/[testset_id]/index.tsx b/agenta-web/src/pages/testsets/[testset_id]/index.tsx index 9e9a4a47bf..8e983cde67 100644 --- a/agenta-web/src/pages/testsets/[testset_id]/index.tsx +++ b/agenta-web/src/pages/testsets/[testset_id]/index.tsx @@ -1,5 +1,7 @@ import React from "react" import TestsetTable from "@/components/TestSetTable/TestsetTable" +import "@ag-grid-community/styles/ag-grid.css" +import "@ag-grid-community/styles/ag-theme-alpine.css" const testsetDisplay = () => { return diff --git a/agenta-web/src/pages/testsets/index.tsx b/agenta-web/src/pages/testsets/index.tsx index 6ccc96f6ad..ace37fedcd 100644 --- a/agenta-web/src/pages/testsets/index.tsx +++ b/agenta-web/src/pages/testsets/index.tsx @@ -1,5 +1,5 @@ -import React, {useMemo, useState} from "react" -import TestsetModal from "@/components/pages/testset/modals" +import {type Key, useMemo, useState} from "react" +import dynamic from "next/dynamic" import NoResultsFound from "@/components/NoResultsFound/NoResultsFound" import {formatDate} from "@/lib/helpers/dateTimeHelper" import {checkIfResourceValidForDeletion} from "@/lib/helpers/evaluate" @@ -14,6 +14,10 @@ import {createUseStyles} from "react-jss" import dayjs from "dayjs" import {useAppsData} from "@/contexts/app.context" +const TestsetModal = dynamic(() => import("@/components/pages/testset/modals"), { + ssr: false, +}) + const useStyles = createUseStyles((theme: JSSTheme) => ({ modal: { transition: "width 0.3s ease", @@ -55,7 +59,7 @@ const Testset = () => { const classes = useStyles() const router = useRouter() const {apps, isLoading: isAppsLoading} = useAppsData() - const [selectedRowKeys, setSelectedRowKeys] = useState([]) + const [selectedRowKeys, setSelectedRowKeys] = useState([]) const {testsets, isTestsetsLoading, mutate} = useLoadTestsetsList() const [isCreateTestsetModalOpen, setIsCreateTestsetModalOpen] = useState(false) const [searchTerm, setSearchTerm] = useState("") @@ -64,7 +68,7 @@ const Testset = () => { const [current, setCurrent] = useState(0) const rowSelection = { - onChange: (selectedRowKeys: React.Key[]) => { + onChange: (selectedRowKeys: Key[]) => { setSelectedRowKeys(selectedRowKeys) }, }