Set up server side row model for table visualization

app/gui/src/project-view/components/GraphEditor/GraphVisualization.vue

@@ -61,6 +61,7 @@ const {
   setToolbarDefinition,
   visualizationDefinedToolbar,
   toolbarOverlay,
+  executeExpression,
 } = useVisualizationData({
   selectedVis: toRef(props, 'currentType'),
   dataSource: toRef(props, 'dataSource'),
@@ -190,6 +191,7 @@ const visParams = computed(() => {
     data: effectiveVisualizationData.value,
     size: contentElementSize.value,
     nodeType: props.typename,
+    executeExpression,
   }
 })
 </script>

app/gui/src/project-view/components/GraphEditor/GraphVisualization/visualizationData.ts

@@ -1,6 +1,8 @@
 import LoadingErrorVisualization from '@/components/visualizations/LoadingErrorVisualization.vue'
 import LoadingVisualization from '@/components/visualizations/LoadingVisualization.vue'
 import type { ToolbarItem } from '@/components/visualizations/toolbar'
+import { useGraphStore } from '@/stores/graph'
+import { NodeId } from '@/stores/graph/graphDatabase'
 import { useProjectStore } from '@/stores/project'
 import type { NodeVisualizationConfiguration } from '@/stores/project/executionContext'
 import {
@@ -56,6 +58,7 @@ export function useVisualizationData({
 
   const projectStore = useProjectStore()
   const visualizationStore = useVisualizationStore()
+  const graph = useGraphStore()
 
   // Flag used to prevent rendering the visualization with a stale preprocessor while the new preprocessor is being
   // prepared asynchronously.
@@ -92,6 +95,50 @@ export function useVisualizationData({
     },
   )
 
+  const executeExpression = async (
+    visulizationModule: string,
+    expressionString: string,
+    formatFunction:
+      | ((arg: any, tempModule: Ast.MutableModule) => Ast.Owned<Ast.MutableExpression>)
+      | null,
+    ...positionalArgumentsExpressions: any[]
+  ) => {
+    const dataSourceValue = toValue(dataSource)
+    if (dataSourceValue?.type !== 'node') return
+    const graphDb = graph.db
+    const nodeFirstOurputPort = graphDb.getNodeFirstOutputPort(dataSourceValue.nodeId as NodeId)
+    const identifier = graphDb.getOutputPortIdentifier(nodeFirstOurputPort)
+    if (identifier === undefined) return
+    const contextId =
+      dataSourceValue.nodeId &&
+      graphDb.nodeIdToNode.get(dataSourceValue.nodeId as NodeId)?.outerAst.externalId
+    if (contextId === undefined) return
+    try {
+      const tempModule = Ast.MutableModule.Transient()
+      const preprocessorModule = Ast.parseExpression(visulizationModule, tempModule)!
+      const preprocessorQn = Ast.PropertyAccess.new(
+        tempModule,
+        preprocessorModule,
+        Ast.identifier(expressionString)!,
+      )
+
+      const preprocessorInvocation = Ast.App.PositionalSequence(preprocessorQn, [
+        Ast.Wildcard.new(tempModule),
+        ...positionalArgumentsExpressions.map((arg) => {
+          const parsedArg =
+            formatFunction ? formatFunction(arg, tempModule) : Ast.parseExpression(arg, tempModule)!
+          return Ast.Group.new(tempModule, parsedArg)
+        }),
+      ])
+      const rhs = Ast.parseExpression(identifier, tempModule)!
+      const expression = Ast.OprApp.new(tempModule, preprocessorInvocation, '<|', rhs)
+      return projectStore.executeExpression(contextId, expression.code())
+    } catch (e) {
+      console.error(e)
+      throw e
+    }
+  }
+
   const currentType = computed(() => {
     const selectedTypeValue = toValue(selectedVis)
     if (selectedTypeValue) return selectedTypeValue
@@ -260,5 +307,19 @@ export function useVisualizationData({
       (toolbarDefinition.value = definition),
     visualizationDefinedToolbar: computed(() => toValue(toolbarDefinition.value)),
     toolbarOverlay,
+    executeExpression: (
+      visulizationModule: string,
+      expressionString: string,
+      formatFunction:
+        | ((arg: any, tempModule: Ast.MutableModule) => Ast.Owned<Ast.MutableExpression>)
+        | null,
+      ...positionalArgumentsExpressions: string[]
+    ) =>
+      executeExpression(
+        visulizationModule,
+        expressionString,
+        formatFunction,
+        ...positionalArgumentsExpressions,
+      ),
   }
 }

app/gui/src/project-view/components/shared/AgGridTableView.vue

@@ -83,16 +83,14 @@ import type {
   ICellEditorComp,
   IHeaderComp,
   IHeaderParams,
+  IServerSideDatasource,
   MenuItemDef,
   ProcessDataFromClipboardParams,
   RowDataUpdatedEvent,
   RowEditingStartedEvent,
   RowEditingStoppedEvent,
-  RowHeightParams,
   SortChangedEvent,
 } from 'ag-grid-enterprise'
-import * as iter from 'enso-common/src/utilities/data/iter'
-import { LINE_BOUNDARIES } from 'enso-common/src/utilities/data/string'
 import {
   Component,
   type ComponentInstance,
@@ -110,8 +108,6 @@ import {
   tableToEnsoExpression,
 } from '../GraphEditor/widgets/WidgetTableEditor/tableParsing'
 
-const DEFAULT_ROW_HEIGHT = 22
-
 const props = defineProps<{
   rowData: TData[]
   columnDefs: (ColDef<TData, TValue> | ColGroupDef<TData>)[] | null
@@ -124,6 +120,9 @@ const props = defineProps<{
   suppressMoveWhenColumnDragging?: boolean
   textFormatOption?: TextFormatOptions
   processDataFromClipboard?: (params: ProcessDataFromClipboardParams<TData>) => string[][] | null
+  datasource?: IServerSideDatasource
+  rowCount?: number
+  isServerSideModel?: boolean
 }>()
 const emit = defineEmits<{
   cellEditingStarted: [event: CellEditingStartedEvent]
@@ -145,24 +144,7 @@ function onGridReady(event: GridReadyEvent<TData>) {
   gridApi.value = event.api
 }
 
-function getRowHeight(params: RowHeightParams): number {
-  if (props.textFormatOption === 'off') {
-    return DEFAULT_ROW_HEIGHT
-  }
-  const rowData = Object.values(params.data)
-  const textValues = rowData.filter((r): r is string => typeof r === 'string')
-
-  if (!textValues.length) {
-    return DEFAULT_ROW_HEIGHT
-  }
-
-  const returnCharsCount = iter.map(textValues, (text) =>
-    iter.count(text.matchAll(LINE_BOUNDARIES)),
-  )
-
-  const maxReturnCharsCount = iter.reduce(returnCharsCount, Math.max, 0)
-  return (maxReturnCharsCount + 1) * DEFAULT_ROW_HEIGHT
-}
+const rowModelType = computed(() => (props.isServerSideModel ? 'serverSide' : 'clientSide'))
 
 watch(
   () => props.textFormatOption,
@@ -360,8 +342,10 @@ const { AgGridVue } = await import('./AgGridTableView/AgGridVue')
       ref="grid"
       class="ag-theme-alpine inner"
       :headerHeight="26"
-      :getRowHeight="getRowHeight"
-      :rowData="rowData"
+      :rowModelType="rowModelType"
+      :serverSideDatasource="datasource"
+      :rowCount="rowCount"
+      :rowData="rowModelType === 'clientSide' ? rowData : null"
       :columnDefs="columnDefs"
       :defaultColDef="defaultColDef"
       :copyHeadersToClipboard="true"