Merge pull request #1534 from phac-nml/dependencies/ag-grid_31.3.4

chore(deps): Update ag-grid to 31.3.4

src/main/webapp/package.json

@@ -18,7 +18,7 @@
     "last 2 Opera versions"
   ],
   "dependencies": {
-    "@ag-grid-community/csv-export": "27.1.0",
+    "@ag-grid-community/csv-export": "31.3.4",
     "@ant-design/icons": "4.7.0",
     "@ant-design/plots": "1.0.9",
     "@antv/color-util": "2.0.6",
@@ -35,8 +35,8 @@
     "@luma.gl/webgl": "8.5.14",
     "@phylocanvas/phylocanvas.gl": "1.43.0",
     "@reduxjs/toolkit": "1.8.5",
-    "ag-grid-community": "27.1.0",
-    "ag-grid-react": "27.1.0",
+    "ag-grid-community": "31.3.4",
+    "ag-grid-react": "31.3.4",
     "antd": "4.19.5",
     "axios": "0.28.0",
     "clipboard": "1.7.1",

src/main/webapp/resources/js/pages/projects/linelist/components/Table/Table.jsx

@@ -3,8 +3,8 @@ import { connect } from "react-redux";
 import { Button, notification, Spin } from "antd";
 import isEqual from "lodash/isEqual";
 import { AgGridReact } from "ag-grid-react";
-import "ag-grid-community/dist/styles/ag-grid.css";
-import "ag-grid-community/dist/styles/ag-theme-material.css";
+import "ag-grid-community/styles/ag-grid.css";
+import "ag-grid-community/styles/ag-theme-material.css";
 import { CsvExportModule } from "@ag-grid-community/csv-export";
 import LoadingOverlay from "./LoadingOverlay";
 import {
@@ -172,15 +172,15 @@ export class TableComponent extends React.Component {
     /*
     Resize the icons since no extra space is needed.
      */
-    this.columnApi.autoSizeColumns([FIELDS.icons]);
+    this.api.autoSizeColumns([FIELDS.icons]);
   };
 
   /**
    * Event handler for if a user drags a column to a new spot on the current
    * table.
    */
   onColumnDropped = () => {
-    const colOrder = [...this.columnApi.getColumnState()];
+    const colOrder = [...this.api.getColumnState()];
     // Remove sample name
     colOrder.shift();
 
@@ -245,7 +245,7 @@ export class TableComponent extends React.Component {
          * Get the visible columns.  Need to ignore the icon columns since
          * it does not contain any data that we want.
          */
-        const filteredColIds = this.columnApi
+        const filteredColIds = this.api
           .getColumnState()
           .filter((c) => !c.hide && c.colId !== "icons")
           .map((c) => c.colId);
@@ -386,6 +386,7 @@ export class TableComponent extends React.Component {
     return (
       <AgGridReact
         id="linelist-grid"
+        reactiveCustomComponents={true}
         rowSelection="multiple"
         onFilterChanged={this.setFilterCount}
         localeText={{
@@ -408,7 +409,6 @@ export class TableComponent extends React.Component {
           sortable: true,
           filter: true,
         }}
-        enableCellChangeFlash={true}
         onCellEditingStarted={this.onCellEditingStarted}
         onCellEditingStopped={this.onCellEditingStopped}
       />