Merge branch 'dev' into agenta-web-enhancements

agenta-web/package.json

@@ -22,6 +22,11 @@
     },
     "dependencies": {
         "@ant-design/cssinjs": "^1.21.1",
+        "@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",
         "@dnd-kit/sortable": "^8.0.0",
@@ -47,8 +52,6 @@
         "@types/uuid": "^9.0.7",
         "@typescript-eslint/eslint-plugin": "^5",
         "@typescript-eslint/parser": "^5",
-        "ag-grid-community": "^31.3.4",
-        "ag-grid-react": "^31.3.4",
         "antd": "^5.20.6",
         "autoprefixer": "10.4.14",
         "axios": "^1.7.7",

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",

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: {

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<TestsetTableProps> = ({mode}) => {
     const [inputValues, setInputValues] = useStateCallback(columnDefs.map((col) => col.field))
     const [focusedRowData, setFocusedRowData] = useState<GenericObject>()
     const [writeMode, setWriteMode] = useState(mode)
-    const gridRef = useRef<any>(null)
+    const [gridRef, setGridRef] = useState<AgGridReactType["api"]>()
 
     const [selectedRow, setSelectedRow] = useState([])
 
@@ -180,8 +181,8 @@ const TestsetTable: React.FC<TestsetTableProps> = ({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<TestsetTableProps> = ({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<TestsetTableProps> = ({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<TestsetTableProps> = ({mode}) => {
                 style={{height: 500}}
             >
                 <AgGridReact
-                    onGridReady={(params) => (gridRef.current = params.api)}
+                    onGridReady={(params) => setGridRef(params.api)}
                     rowData={rowData}
                     columnDefs={columnDefs}
                     defaultColDef={defaultColDef}

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: {

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"

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<Props> = () => {
     const [rows, setRows] = useState<ComparisonResultRow[]>([])
     const [testset, setTestset] = useState<TestSet>()
     const [evaluators] = useAtom(evaluatorsAtom)
-    const gridRef = useRef<AgGridReact<_EvaluationScenario>>()
+    const [gridRef, setGridRef] = useState<AgGridReactType<ComparisonResultRow>>()
     const [isFilterColsDropdownOpen, setIsFilterColsDropdownOpen] = useState(false)
     const [isDiffDropdownOpen, setIsDiffDropdownOpen] = useState(false)
     const [selectedCorrectAnswer, setSelectedCorrectAnswer] = useState(["noDiffColumnIsSelected"])
@@ -375,23 +375,24 @@ const EvaluationCompareMode: React.FC<Props> = () => {
                 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)
             })
             .catch(() => setFetching(false))
     }
 
     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<Props> = () => {
     }
 
     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<Props> = () => {
                     data-cy="evaluation-compare-table"
                 >
                     <AgGridReact<ComparisonResultRow>
-                        ref={gridRef as any}
+                        gridRef={setGridRef}
                         rowData={rows}
                         columnDefs={colDefs}
                         getRowId={(params) => params.data.rowId}

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<Props> = () => {
     const [scenarios, setScenarios] = useState<_EvaluationScenario[]>([])
     const [fetching, setFetching] = useState(false)
     const [evaluators, setEvaluators] = useAtom(evaluatorsAtom)
-    const gridRef = useRef<AgGridReact<_EvaluationScenario>>()
+    const [gridRef, setGridRef] = useState<AgGridReactType<_EvaluationScenario>>()
     const evalaution = scenarios[0]?.evaluation
     const [selectedCorrectAnswer, setSelectedCorrectAnswer] = useState(["noDiffColumnIsSelected"])
     const [isFilterColsDropdownOpen, setIsFilterColsDropdownOpen] = useState(false)
@@ -287,14 +287,14 @@ const EvaluationScenarios: React.FC<Props> = () => {
                 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<Props> = () => {
     }
 
     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<Props> = () => {
                     data-cy="evalaution-scenarios-table"
                 >
                     <AgGridReact<_EvaluationScenario>
-                        ref={gridRef as any}
+                        gridRef={setGridRef}
                         rowData={scenarios}
                         columnDefs={colDefs}
                         getRowId={(params) => params.data.id}