Split datatable render function

x-pack/plugins/lens/common/expressions/datatable/datatable.ts

@@ -6,54 +6,38 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { cloneDeep } from 'lodash';
-import type {
-  DatatableColumnMeta,
-  ExpressionFunctionDefinition,
-} from '../../../../../../src/plugins/expressions/common';
-import type { FormatFactory, LensMultiTable } from '../../types';
-import type { ColumnConfigArg } from './datatable_column';
-import { getSortingCriteria } from './sorting';
-import { computeSummaryRowForColumn } from './summary';
-import { transposeTable } from './transpose_helpers';
+import type { ExpressionFunctionDefinition } from '../../../../../../src/plugins/expressions/common';
+import type { DatatableTransformerResult, DatatableTransformerArgs } from './datatable_transformer';
 
-export interface DatatableProps {
-  data: LensMultiTable;
-  untransposedData?: LensMultiTable;
+export type DatatableProps = Omit<DatatableTransformerResult, 'type' | 'columns'> & {
   args: DatatableArgs;
-}
+};
 
 export interface DatatableRender {
   type: 'render';
   as: 'lens_datatable_renderer';
   value: DatatableProps;
 }
 
-export interface DatatableArgs {
+interface DatatableRendererArgs extends Omit<DatatableTransformerArgs, 'columns'> {
   title: string;
   description?: string;
-  columns: ColumnConfigArg[];
-  sortingColumnId: string | undefined;
-  sortingDirection: 'asc' | 'desc' | 'none';
 }
 
-function isRange(meta: { params?: { id?: string } } | undefined) {
-  return meta?.params?.id === 'range';
+export interface DatatableArgs extends DatatableTransformerArgs {
+  title: string;
+  description?: string;
 }
 
-export const getDatatable = ({
-  formatFactory,
-}: {
-  formatFactory: FormatFactory;
-}): ExpressionFunctionDefinition<
+export const datatable: ExpressionFunctionDefinition<
   'lens_datatable',
-  LensMultiTable,
-  DatatableArgs,
+  DatatableTransformerResult,
+  DatatableRendererArgs,
   DatatableRender
-> => ({
+> = {
   name: 'lens_datatable',
   type: 'render',
-  inputTypes: ['lens_multitable'],
+  inputTypes: ['multiple_lens_multitable'],
   help: i18n.translate('xpack.lens.datatable.expressionHelpLabel', {
     defaultMessage: 'Datatable renderer',
   }),
@@ -68,11 +52,6 @@ export const getDatatable = ({
       types: ['string'],
       help: '',
     },
-    columns: {
-      types: ['lens_datatable_column'],
-      help: '',
-      multi: true,
-    },
     sortingColumnId: {
       types: ['string'],
       help: '',
@@ -82,61 +61,15 @@ export const getDatatable = ({
       help: '',
     },
   },
-  fn(data, args, context) {
-    let untransposedData: LensMultiTable | undefined;
-    // do the sorting at this level to propagate it also at CSV download
+  fn({ data, untransposedData, columns }, args, context) {
     const [firstTable] = Object.values(data.tables);
-    const [layerId] = Object.keys(context.inspectorAdapters.tables || {});
-    const formatters: Record<string, ReturnType<FormatFactory>> = {};
-
-    firstTable.columns.forEach((column) => {
-      formatters[column.id] = formatFactory(column.meta?.params);
-    });
-
-    const hasTransposedColumns = args.columns.some((c) => c.isTransposed);
-    if (hasTransposedColumns) {
-      // store original shape of data separately
-      untransposedData = cloneDeep(data);
-      // transposes table and args inplace
-      transposeTable(args, firstTable, formatters);
-    }
-
     const { sortingColumnId: sortBy, sortingDirection: sortDirection } = args;
 
-    const columnsReverseLookup = firstTable.columns.reduce<
-      Record<string, { name: string; index: number; meta?: DatatableColumnMeta }>
-    >((memo, { id, name, meta }, i) => {
-      memo[id] = { name, index: i, meta };
-      return memo;
-    }, {});
-
-    const columnsWithSummary = args.columns.filter((c) => c.summaryRow);
-    for (const column of columnsWithSummary) {
-      column.summaryRowValue = computeSummaryRowForColumn(
-        column,
-        firstTable,
-        formatters,
-        formatFactory({ id: 'number' })
-      );
-    }
-
-    if (sortBy && columnsReverseLookup[sortBy] && sortDirection !== 'none') {
-      // Sort on raw values for these types, while use the formatted value for the rest
-      const sortingCriteria = getSortingCriteria(
-        isRange(columnsReverseLookup[sortBy]?.meta)
-          ? 'range'
-          : columnsReverseLookup[sortBy]?.meta?.type,
-        sortBy,
-        formatters[sortBy],
-        sortDirection
-      );
-      // replace the table here
-      context.inspectorAdapters.tables[layerId].rows = (firstTable.rows || [])
-        .slice()
-        .sort(sortingCriteria);
-      // replace also the local copy
-      firstTable.rows = context.inspectorAdapters.tables[layerId].rows;
-    } else {
+    if (
+      !sortBy ||
+      sortDirection === 'none' ||
+      !firstTable.columns.some(({ id }) => id === sortBy)
+    ) {
       args.sortingColumnId = undefined;
       args.sortingDirection = 'none';
     }
@@ -146,8 +79,11 @@ export const getDatatable = ({
       value: {
         data,
         untransposedData,
-        args,
+        args: {
+          ...args,
+          columns,
+        },
       },
     };
   },
-});
+};

x-pack/plugins/lens/common/expressions/datatable/datatable_transformer.ts

@@ -0,0 +1,128 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { cloneDeep } from 'lodash';
+import type {
+  DatatableColumnMeta,
+  ExpressionFunctionDefinition,
+} from '../../../../../../src/plugins/expressions/common';
+import type { FormatFactory, LensMultiTable } from '../../types';
+import { ColumnConfigArg } from './datatable_column';
+import { getSortingCriteria } from './sorting';
+import { computeSummaryRowForColumn } from './summary';
+import { transposeTable } from './transpose_helpers';
+
+export interface DatatableTransformerResult {
+  type: 'multiple_lens_multitable';
+  data: LensMultiTable;
+  untransposedData?: LensMultiTable;
+  columns: ColumnConfigArg[];
+}
+
+export interface DatatableTransformerArgs {
+  columns: ColumnConfigArg[];
+  sortingColumnId: string | undefined;
+  sortingDirection: 'asc' | 'desc' | 'none';
+}
+
+function isRange(meta: { params?: { id?: string } } | undefined) {
+  return meta?.params?.id === 'range';
+}
+
+export const getDatatableTransformer = ({
+  formatFactory,
+}: {
+  formatFactory: FormatFactory;
+}): ExpressionFunctionDefinition<
+  'lens_datatable_transformer',
+  LensMultiTable,
+  DatatableTransformerArgs,
+  DatatableTransformerResult
+> => ({
+  name: 'lens_datatable_transformer',
+  type: 'multiple_lens_multitable',
+  inputTypes: ['lens_multitable'],
+  help: '',
+  args: {
+    columns: {
+      types: ['lens_datatable_column'],
+      help: '',
+      multi: true,
+    },
+    sortingColumnId: {
+      types: ['string'],
+      help: '',
+    },
+    sortingDirection: {
+      types: ['string'],
+      help: '',
+    },
+  },
+  fn(data, args, context) {
+    let untransposedData: LensMultiTable | undefined;
+    // do the sorting at this level to propagate it also at CSV download
+    const [firstTable] = Object.values(data.tables);
+    const [layerId] = Object.keys(context.inspectorAdapters.tables || {});
+    const formatters: Record<string, ReturnType<FormatFactory>> = {};
+
+    firstTable.columns.forEach((column) => {
+      formatters[column.id] = formatFactory(column.meta?.params);
+    });
+
+    const hasTransposedColumns = args.columns.some((c) => c.isTransposed);
+    if (hasTransposedColumns) {
+      // store original shape of data separately
+      untransposedData = cloneDeep(data);
+      // transposes table and args inplace
+      transposeTable(args, firstTable, formatters);
+    }
+
+    const { sortingColumnId: sortBy, sortingDirection: sortDirection } = args;
+
+    const columnsReverseLookup = firstTable.columns.reduce<
+      Record<string, { name: string; index: number; meta?: DatatableColumnMeta }>
+    >((memo, { id, name, meta }, i) => {
+      memo[id] = { name, index: i, meta };
+      return memo;
+    }, {});
+
+    const columnsWithSummary = args.columns.filter((c) => c.summaryRow);
+    for (const column of columnsWithSummary) {
+      column.summaryRowValue = computeSummaryRowForColumn(
+        column,
+        firstTable,
+        formatters,
+        formatFactory({ id: 'number' })
+      );
+    }
+
+    if (sortBy && columnsReverseLookup[sortBy] && sortDirection !== 'none') {
+      // Sort on raw values for these types, while use the formatted value for the rest
+      const sortingCriteria = getSortingCriteria(
+        isRange(columnsReverseLookup[sortBy]?.meta)
+          ? 'range'
+          : columnsReverseLookup[sortBy]?.meta?.type,
+        sortBy,
+        formatters[sortBy],
+        sortDirection
+      );
+      // replace the table here
+      context.inspectorAdapters.tables[layerId].rows = (firstTable.rows || [])
+        .slice()
+        .sort(sortingCriteria);
+      // replace also the local copy
+      firstTable.rows = context.inspectorAdapters.tables[layerId].rows;
+    }
+    return {
+      type: 'multiple_lens_multitable',
+      data,
+      untransposedData,
+      // columns have been manipulated by transpose, so export new columns config
+      columns: args.columns,
+    };
+  },
+});

x-pack/plugins/lens/common/expressions/datatable/index.ts

@@ -6,6 +6,7 @@
  */
 
 export * from './datatable_column';
+export * from './datatable_transformer';
 export * from './datatable';
 export * from './sorting';
 export * from './summary';

x-pack/plugins/lens/common/expressions/datatable/transpose_helpers.ts

@@ -46,7 +46,7 @@ export function getOriginalId(id: string) {
  * @param formatters Formatters for all columns to transpose columns by actual display values
  */
 export function transposeTable(
-  args: DatatableArgs,
+  args: Pick<DatatableArgs, 'columns'>,
   firstTable: Datatable,
   formatters: Record<string, FieldFormat>
 ) {
@@ -116,7 +116,7 @@ function transposeRows(
  * grouped by unique value
  */
 function updateColumnArgs(
-  args: DatatableArgs,
+  args: Pick<DatatableArgs, 'columns'>,
   bucketsColumnArgs: ColumnConfig['columns'],
   transposedColumnGroups: Array<ColumnConfig['columns']>
 ) {
@@ -154,7 +154,7 @@ function getUniqueValues(table: Datatable, formatter: FieldFormat, columnId: str
  * @param uniqueValues
  */
 function transposeColumns(
-  args: DatatableArgs,
+  args: Pick<DatatableArgs, 'columns'>,
   bucketsColumnArgs: ColumnConfig['columns'],
   metricColumns: ColumnConfig['columns'],
   firstTable: Datatable,

x-pack/plugins/lens/public/datatable_visualization/datatable_visualization.ts

@@ -5,6 +5,6 @@
  * 2.0.
  */
 
-export { datatableColumn, getDatatable } from '../../common/expressions';
+export { datatableColumn, getDatatableTransformer, datatable } from '../../common/expressions';
 export * from './expression';
 export * from './visualization';

x-pack/plugins/lens/public/datatable_visualization/expression.test.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { getDatatable, DatatableProps } from '../../common/expressions';
+import { datatable, getDatatableTransformer, DatatableProps } from '../../common/expressions';
 import type { LensMultiTable } from '../../common';
 import { createMockExecutionContext } from '../../../../../src/plugins/expressions/common/mocks';
 import { IFieldFormat } from '../../../../../src/plugins/data/public';
@@ -84,12 +84,14 @@ describe('datatable_expression', () => {
   describe('datatable renders', () => {
     test('it renders with the specified data and args', () => {
       const { data, args } = sampleArgs();
-      const result = getDatatable({ formatFactory: (x) => x as IFieldFormat }).fn(
+      const dataProcessed = getDatatableTransformer({ formatFactory: (x) => x as IFieldFormat }).fn(
         data,
         args,
         createMockExecutionContext()
       );
 
+      const result = datatable.fn(dataProcessed, args, createMockExecutionContext());
+
       expect(result).toEqual({
         type: 'render',
         as: 'lens_datatable_renderer',

x-pack/plugins/lens/public/datatable_visualization/index.ts

@@ -31,7 +31,8 @@ export class DatatableVisualization {
   ) {
     editorFrame.registerVisualization(async () => {
       const {
-        getDatatable,
+        datatable,
+        getDatatableTransformer,
         datatableColumn,
         getDatatableRenderer,
         getDatatableVisualization,
@@ -40,7 +41,10 @@ export class DatatableVisualization {
       const resolvedFormatFactory = await formatFactory;
 
       expressions.registerFunction(() => datatableColumn);
-      expressions.registerFunction(() => getDatatable({ formatFactory: resolvedFormatFactory }));
+      expressions.registerFunction(() => datatable);
+      expressions.registerFunction(() =>
+        getDatatableTransformer({ formatFactory: resolvedFormatFactory })
+      );
       expressions.registerRenderer(() =>
         getDatatableRenderer({
           formatFactory: resolvedFormatFactory,