Switch Table viz to AG Grid Enterprise (#8702)

- Closes #8660
- Switches Table viz to use AG Grid Enterprise

# Important Notes
- Not sure this is the proper way to enable full AG Grid Enterprise.

app/gui2/package.json

@@ -31,6 +31,9 @@
     "generate-metadata": "node scripts/generateIconMetadata.js",
     "download-fonts": "node scripts/downloadFonts.js"
   },
+  "//": [
+    "'ag-grid-community' is required as a peer dependency of 'ag-grid-enterprise'."
+  ],
   "dependencies": {
     "@ag-grid-community/client-side-row-model": "^30.2.0",
     "@ag-grid-community/core": "^30.2.0",
@@ -45,6 +48,8 @@
     "@open-rpc/client-js": "^1.8.1",
     "@pinia/testing": "^0.1.3",
     "@vueuse/core": "^10.4.1",
+    "ag-grid-community": "^30.2.1",
+    "ag-grid-enterprise": "^30.2.1",
     "codemirror": "^6.0.1",
     "culori": "^3.2.0",
     "enso-authentication": "^1.0.0",

app/gui2/src/components/visualizations/TableVisualization.vue

@@ -57,32 +57,25 @@ interface UnknownTable {
   data: unknown[][] | undefined
   indices: unknown[][] | undefined
 }
+
+declare module 'ag-grid-enterprise' {
+  // These type parameters are defined on the original interface.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface AbstractColDef<TData, TValue> {
+    field: string
+  }
+}
 </script>
 
 <script setup lang="ts">
+import { useAutoBlur } from '@/util/autoBlur'
 import { VisualizationContainer } from '@/util/visualizationBuiltins'
-import type {
-  ColDef,
-  ColumnResizedEvent,
-  GridOptions,
-  HeaderValueGetterParams,
-} from '@ag-grid-community/core'
 import '@ag-grid-community/styles/ag-grid.css'
 import '@ag-grid-community/styles/ag-theme-alpine.css'
+import type { ColumnResizedEvent } from 'ag-grid-community'
+import type { ColDef, GridOptions, HeaderValueGetterParams } from 'ag-grid-enterprise'
 import { computed, onMounted, reactive, ref, watchEffect, type Ref } from 'vue'
-const [
-  { ClientSideRowModelModule },
-  { RangeSelectionModule },
-  { Grid, ModuleRegistry },
-  { LicenseManager },
-] = await Promise.all([
-  import('@ag-grid-community/client-side-row-model'),
-  import('@ag-grid-enterprise/range-selection'),
-  import('@ag-grid-community/core'),
-  import('@ag-grid-enterprise/core'),
-])
-
-ModuleRegistry.registerModules([ClientSideRowModelModule, RangeSelectionModule])
+const { Grid, LicenseManager } = await import('ag-grid-enterprise')
 
 const props = defineProps<{ data: Data }>()
 const emit = defineEmits<{
@@ -97,6 +90,7 @@ const pageLimit = ref(0)
 const rowCount = ref(0)
 const isTruncated = ref(false)
 const tableNode = ref<HTMLElement>()
+useAutoBlur(tableNode)
 const widths = reactive(new Map<string, number>())
 const defaultColDef = {
   editable: false,

app/gui2/src/components/visualizations/dependencyTypesPatches.ts → app/gui2/src/components/visualizations/d3Types.ts

@@ -1,4 +1,4 @@
-// Fixes and extensions for dependencies' type definitions.
+// Fixes and extensions for D3's type definitions.
 
 import type { BaseType, Selection } from 'd3'
 
@@ -13,13 +13,3 @@ declare module 'd3' {
     ticks(): number[]
   }
 }
-
-import '@ag-grid-community/core'
-
-declare module '@ag-grid-community/core' {
-  // These type parameters are defined on the original interface.
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  interface AbstractColDef<TData, TValue> {
-    field: string
-  }
-}