Wip/mk/default visualisations for connections (#10340)

Allows users to click on the index column of a row/value and the row/value will be extracted into another node

![7473](https://github.com/enso-org/enso/assets/170310417/8abaf5e4-90c9-4344-94ac-fff451b15ce8)

CHANGELOG.md

@@ -20,6 +20,8 @@
   widget.][10337]
 - [Fixed issue where picking "<Numeric literal>" variant in some ports
   disallowed changing it again.][10337]
+- [Added click through on table and vector visualisation][10340] clicking on
+  index column will select row or value in seperate node
 
 [10064]: https://github.com/enso-org/enso/pull/10064
 [10179]: https://github.com/enso-org/enso/pull/10179
@@ -31,6 +33,7 @@
 [10310]: https://github.com/enso-org/enso/pull/10310
 [10327]: https://github.com/enso-org/enso/pull/10327
 [10337]: https://github.com/enso-org/enso/pull/10337
+[10340]: https://github.com/enso-org/enso/pull/10340
 
 #### Enso Standard Library
 

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

@@ -1,10 +1,17 @@
 <script lang="ts">
 import icons from '@/assets/icons.svg'
+import { Ast } from '@/util/ast'
+import { Pattern } from '@/util/ast/match'
 import { useAutoBlur } from '@/util/autoBlur'
-import { VisualizationContainer } from '@/util/visualizationBuiltins'
+import { VisualizationContainer, useVisualizationConfig } from '@/util/visualizationBuiltins'
 import '@ag-grid-community/styles/ag-grid.css'
 import '@ag-grid-community/styles/ag-theme-alpine.css'
-import type { CellClassParams, ColumnResizedEvent, ICellRendererParams } from 'ag-grid-community'
+import type {
+  CellClassParams,
+  CellClickedEvent,
+  ColumnResizedEvent,
+  ICellRendererParams,
+} from 'ag-grid-community'
 import type { ColDef, GridOptions, HeaderValueGetterParams } from 'ag-grid-enterprise'
 import {
   computed,
@@ -89,8 +96,12 @@ const props = defineProps<{ data: Data }>()
 const emit = defineEmits<{
   'update:preprocessor': [module: string, method: string, ...args: string[]]
 }>()
+const config = useVisualizationConfig()
 
 const INDEX_FIELD_NAME = '#'
+const TABLE_NODE_TYPE = 'Standard.Table.Table.Table'
+const VECTOR_NODE_TYPE = 'Standard.Base.Data.Vector.Vector'
+const COLUMN_NODE_TYPE = 'Standard.Table.Column.Column'
 
 const rowLimit = ref(0)
 const page = ref(0)
@@ -255,8 +266,46 @@ function toField(name: string, valueType?: ValueType | null | undefined): ColDef
   }
 }
 
+const getPattern = (index: number) =>
+  Pattern.new((ast) =>
+    Ast.App.positional(
+      Ast.PropertyAccess.new(ast.module, ast, Ast.identifier('at')!),
+      Ast.tryNumberToEnso(index, ast.module)!,
+    ),
+  )
+
+const getTablePattern = (index: number) =>
+  Pattern.new((ast) =>
+    Ast.OprApp.new(
+      ast.module,
+      Ast.App.positional(
+        Ast.PropertyAccess.new(ast.module, ast, Ast.identifier('rows')!),
+        Ast.parse('(..All_Rows)'),
+      ),
+      '.',
+      Ast.App.positional(
+        Ast.Ident.new(ast.module, Ast.identifier('get')!),
+        Ast.tryNumberToEnso(index, ast.module)!,
+      ),
+    ),
+  )
+function createNode(params: CellClickedEvent) {
+  if (config.nodeType === VECTOR_NODE_TYPE || config.nodeType === COLUMN_NODE_TYPE) {
+    config.createNodes({
+      content: getPattern(params.data[INDEX_FIELD_NAME]),
+      commit: true,
+    })
+  }
+  if (config.nodeType === TABLE_NODE_TYPE) {
+    config.createNodes({
+      content: getTablePattern(params.data[INDEX_FIELD_NAME]),
+      commit: true,
+    })
+  }
+}
+
 function indexField(): ColDef {
-  return { field: INDEX_FIELD_NAME }
+  return { field: INDEX_FIELD_NAME, onCellClicked: (params) => createNode(params) }
 }
 
 /** Return a human-readable representation of an object. */