[Lens][Datatable] Fix share export and inspect data

src/plugins/chart_expressions/expression_gauge/common/types/expression_functions.ts

@@ -11,6 +11,8 @@ import { $Values } from '@kbn/utility-types';
 import type { PaletteOutput, CustomPaletteParams } from '@kbn/coloring';
 import {
   Datatable,
+  DefaultInspectorAdapters,
+  ExecutionContext,
   ExpressionFunctionDefinition,
   ExpressionValueRender,
 } from '@kbn/expressions-plugin/common';
@@ -86,7 +88,8 @@ export type GaugeExpressionFunctionDefinition = ExpressionFunctionDefinition<
   typeof EXPRESSION_GAUGE_NAME,
   GaugeInput,
   GaugeArguments,
-  ExpressionValueRender<GaugeExpressionProps>
+  ExpressionValueRender<GaugeExpressionProps>,
+  ExecutionContext<DefaultInspectorAdapters>
 >;
 
 export interface Accessors {

src/plugins/chart_expressions/expression_heatmap/common/types/expression_functions.ts

@@ -11,6 +11,8 @@ import { Position } from '@elastic/charts';
 import type { PaletteOutput } from '@kbn/coloring';
 import {
   Datatable,
+  DefaultInspectorAdapters,
+  ExecutionContext,
   ExpressionFunctionDefinition,
   ExpressionValueRender,
 } from '@kbn/expressions-plugin/common';
@@ -114,7 +116,8 @@ export type HeatmapExpressionFunctionDefinition = ExpressionFunctionDefinition<
   typeof EXPRESSION_HEATMAP_NAME,
   HeatmapInput,
   HeatmapArguments,
-  ExpressionValueRender<HeatmapExpressionProps>
+  ExpressionValueRender<HeatmapExpressionProps>,
+  ExecutionContext<DefaultInspectorAdapters>
 >;
 
 export type HeatmapLegendExpressionFunctionDefinition = ExpressionFunctionDefinition<

src/plugins/chart_expressions/expression_legacy_metric/common/types/expression_functions.ts

@@ -10,6 +10,8 @@
 import type { PaletteOutput } from '@kbn/coloring';
 import {
   Datatable,
+  DefaultInspectorAdapters,
+  ExecutionContext,
   ExpressionFunctionDefinition,
   ExpressionValueRender,
   Style,
@@ -47,5 +49,6 @@ export type MetricVisExpressionFunctionDefinition = ExpressionFunctionDefinition
   typeof EXPRESSION_METRIC_NAME,
   MetricInput,
   MetricArguments,
-  ExpressionValueRender<MetricVisRenderConfig>
+  ExpressionValueRender<MetricVisRenderConfig>,
+  ExecutionContext<DefaultInspectorAdapters>
 >;

src/plugins/chart_expressions/expression_metric/common/types/expression_functions.ts

@@ -12,6 +12,8 @@ import { LayoutDirection, MetricStyle, MetricWTrend } from '@elastic/charts';
 import { $Values } from '@kbn/utility-types';
 import {
   Datatable,
+  DefaultInspectorAdapters,
+  ExecutionContext,
   ExpressionFunctionDefinition,
   ExpressionValueRender,
 } from '@kbn/expressions-plugin/common';
@@ -64,7 +66,8 @@ export type MetricVisExpressionFunctionDefinition = ExpressionFunctionDefinition
   typeof EXPRESSION_METRIC_NAME,
   MetricInput,
   MetricArguments,
-  ExpressionValueRender<MetricVisRenderConfig>
+  ExpressionValueRender<MetricVisRenderConfig>,
+  ExecutionContext<DefaultInspectorAdapters>
 >;
 
 export interface TrendlineArguments {

src/plugins/chart_expressions/expression_partition_vis/common/types/expression_functions.ts

@@ -14,6 +14,8 @@ import {
   Datatable,
   ExpressionValueRender,
   ExpressionValueBoxed,
+  DefaultInspectorAdapters,
+  ExecutionContext,
 } from '@kbn/expressions-plugin/common';
 import {
   PARTITION_LABELS_VALUE,
@@ -66,28 +68,32 @@ export type PieVisExpressionFunctionDefinition = ExpressionFunctionDefinition<
   typeof PIE_VIS_EXPRESSION_NAME,
   Datatable,
   PieVisConfig,
-  ExpressionValueRender<PartitionChartProps>
+  ExpressionValueRender<PartitionChartProps>,
+  ExecutionContext<DefaultInspectorAdapters>
 >;
 
 export type TreemapVisExpressionFunctionDefinition = ExpressionFunctionDefinition<
   typeof TREEMAP_VIS_EXPRESSION_NAME,
   Datatable,
   TreemapVisConfig,
-  ExpressionValueRender<PartitionChartProps>
+  ExpressionValueRender<PartitionChartProps>,
+  ExecutionContext<DefaultInspectorAdapters>
 >;
 
 export type MosaicVisExpressionFunctionDefinition = ExpressionFunctionDefinition<
   typeof MOSAIC_VIS_EXPRESSION_NAME,
   Datatable,
   MosaicVisConfig,
-  ExpressionValueRender<PartitionChartProps>
+  ExpressionValueRender<PartitionChartProps>,
+  ExecutionContext<DefaultInspectorAdapters>
 >;
 
 export type WaffleVisExpressionFunctionDefinition = ExpressionFunctionDefinition<
   typeof WAFFLE_VIS_EXPRESSION_NAME,
   Datatable,
   WaffleVisConfig,
-  ExpressionValueRender<PartitionChartProps>
+  ExpressionValueRender<PartitionChartProps>,
+  ExecutionContext<DefaultInspectorAdapters>
 >;
 
 export enum ChartTypes {

src/plugins/chart_expressions/expression_xy/common/types/expression_functions.ts

@@ -13,6 +13,8 @@ import type { PaletteOutput } from '@kbn/coloring';
 import type {
   Datatable,
   DatatableColumnMeta,
+  DefaultInspectorAdapters,
+  ExecutionContext,
   ExpressionFunctionDefinition,
 } from '@kbn/expressions-plugin/common';
 import {
@@ -449,13 +451,15 @@ export type XyVisFn = ExpressionFunctionDefinition<
   typeof XY_VIS,
   Datatable,
   XYArgs,
-  Promise<XYRender>
+  Promise<XYRender>,
+  ExecutionContext<DefaultInspectorAdapters>
 >;
 export type LayeredXyVisFn = ExpressionFunctionDefinition<
   typeof LAYERED_XY_VIS,
   Datatable,
   LayeredXYArgs,
-  Promise<XYRender>
+  Promise<XYRender>,
+  ExecutionContext<DefaultInspectorAdapters>
 >;
 
 export type ExtendedDataLayerFn = ExpressionFunctionDefinition<

src/plugins/chart_expressions/expression_xy/common/utils/log_datatables.ts

@@ -8,7 +8,11 @@
  */
 
 import { QueryPointEventAnnotationOutput } from '@kbn/event-annotation-plugin/common';
-import { Datatable, ExecutionContext } from '@kbn/expressions-plugin/common';
+import {
+  Datatable,
+  DefaultInspectorAdapters,
+  ExecutionContext,
+} from '@kbn/expressions-plugin/common';
 import { ExpressionValueVisDimension } from '@kbn/visualizations-plugin/common';
 import { Dimension, prepareLogTable } from '@kbn/visualizations-plugin/common/utils';
 import { LayerTypes, REFERENCE_LINE } from '../constants';
@@ -23,7 +27,7 @@ import {
 
 export const logDatatables = (
   layers: CommonXYLayerConfig[],
-  handlers: ExecutionContext,
+  handlers: ExecutionContext<DefaultInspectorAdapters>,
   splitColumnAccessor?: string | ExpressionValueVisDimension,
   splitRowAccessor?: string | ExpressionValueVisDimension,
   annotations?: ExpressionAnnotationResult
@@ -88,7 +92,7 @@ const getLogAnnotationTable = (data: Datatable, layer: AnnotationLayerConfigResu
 export const logDatatable = (
   data: Datatable,
   layers: CommonXYLayerConfig[],
-  handlers: ExecutionContext,
+  handlers: ExecutionContext<DefaultInspectorAdapters>,
   splitColumnAccessor?: string | ExpressionValueVisDimension,
   splitRowAccessor?: string | ExpressionValueVisDimension
 ) => {

src/plugins/data/common/exports/export_csv.test.ts

@@ -103,7 +103,7 @@ describe('CSV exporter', () => {
     expect(
       datatableToCSV(datatable, {
         ...getDefaultOptions(),
-        columnsSorting: ['col2', 'col1'],
+        sortedColumns: ['col2', 'col1'],
       })
     ).toMatch('columnTwo,columnOne\r\n"Formatted_5","Formatted_value"\r\n');
   });

src/plugins/data/common/exports/export_csv.tsx

@@ -11,6 +11,7 @@
 
 import { Datatable } from '@kbn/expressions-plugin/common';
 import { FormatFactory } from '@kbn/field-formats-plugin/common';
+import { EuiDataGridColumnSortingConfig } from '@elastic/eui';
 import { createEscapeValue } from './escape_value';
 
 export const LINE_FEED_CHARACTER = '\r\n';
@@ -22,34 +23,54 @@ interface CSVOptions {
   escapeFormulaValues: boolean;
   formatFactory: FormatFactory;
   raw?: boolean;
-  columnsSorting?: string[];
+  sortedColumns?: string[];
+  columnSorting?: EuiDataGridColumnSortingConfig[];
 }
 
 export function datatableToCSV(
   { columns, rows }: Datatable,
-  { csvSeparator, quoteValues, formatFactory, raw, escapeFormulaValues, columnsSorting }: CSVOptions
+  {
+    csvSeparator,
+    quoteValues,
+    formatFactory,
+    raw,
+    escapeFormulaValues,
+    sortedColumns,
+    columnSorting,
+  }: CSVOptions
 ) {
   const escapeValues = createEscapeValue({
     separator: csvSeparator,
     quoteValues,
     escapeFormulaValues,
   });
 
-  const sortedIds = columnsSorting || columns.map((col) => col.id);
+  const sortedIds = sortedColumns
+    ? columns
+        .map((c) => {
+          // need to find original id for transposed column
+          const sortIndex = sortedColumns.findIndex((id) => c.id.endsWith(id));
+          return {
+            id: c.id,
+            sortIndex,
+            isTransposed: (sortedColumns[sortIndex] ?? '') !== c.id,
+          };
+        })
+        .filter(({ sortIndex }) => sortIndex >= 0)
+        // keep original zipped order between multiple transposed columns
+        .sort((a, b) => (a.isTransposed && b.isTransposed ? 0 : a.sortIndex - b.sortIndex))
+        .map(({ id }) => id)
+    : columns.map(({ id }) => id);
 
-  // Build an index lookup table
-  const columnIndexLookup = sortedIds.reduce((memo, id, index) => {
-    memo[id] = index;
-    return memo;
-  }, {} as Record<string, number>);
+  const columnIndexLookup = new Map(sortedIds.map((id, i) => [id, i]));
 
-  // Build the header row by its names
   const header: string[] = [];
   const sortedColumnIds: string[] = [];
   const formatters: Record<string, ReturnType<FormatFactory>> = {};
 
   for (const column of columns) {
-    const columnIndex = columnIndexLookup[column.id];
+    const columnIndex = columnIndexLookup.get(column.id) ?? -1;
+    if (columnIndex < 0) continue; // hidden or not found
 
     header[columnIndex] = escapeValues(column.name);
     sortedColumnIds[columnIndex] = column.id;
@@ -61,14 +82,36 @@ export function datatableToCSV(
   }
 
   // Convert the array of row objects to an array of row arrays
-  const csvRows = rows.map((row) => {
-    return sortedColumnIds.map((id) =>
-      escapeValues(raw ? row[id] : formatters[id].convert(row[id]))
-    );
-  });
+  const csvRows = rows
+    .map((row) => {
+      return sortedColumnIds.map((id) =>
+        escapeValues(raw ? row[id] : formatters[id].convert(row[id]))
+      );
+    })
+    .sort(rowSortPredicate(sortedColumnIds, columnSorting));
 
   return (
     [header, ...csvRows].map((row) => row.join(csvSeparator)).join(LINE_FEED_CHARACTER) +
     LINE_FEED_CHARACTER
   ); // Add \r\n after last line
 }
+
+function rowSortPredicate(
+  sortedColumnIds: string[],
+  columnSorting?: EuiDataGridColumnSortingConfig[]
+) {
+  if (!columnSorting) return () => 0;
+
+  const columnIdMap = new Map(columnSorting.map(({ id }) => [id, sortedColumnIds.indexOf(id)]));
+  return (rowA: string[], rowB: string[]) => {
+    return columnSorting.reduce((acc, { id, direction }) => {
+      const i = columnIdMap.get(id) ?? -1;
+      if (i < 0) return acc;
+
+      const a = rowA[i];
+      const b = rowB[i];
+      const emptyValueSort = a === '' ? 1 : b === '' ? -1 : 0; // always put empty values at bottom
+      return acc || emptyValueSort || a.localeCompare(b) * (direction === 'asc' ? 1 : -1);
+    }, 0);
+  };
+}

src/plugins/data/public/utils/table_inspector_view/components/data_table_selector.tsx

@@ -9,7 +9,6 @@
 
 import React, { Component } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import PropTypes from 'prop-types';
 import {
   EuiButtonEmpty,
   EuiContextMenuPanel,
@@ -27,16 +26,10 @@ interface TableSelectorState {
 interface TableSelectorProps {
   tables: Datatable[];
   selectedTable: Datatable;
-  onTableChanged: Function;
+  onTableChanged: (table: Datatable) => void;
 }
 
 export class TableSelector extends Component<TableSelectorProps, TableSelectorState> {
-  static propTypes = {
-    tables: PropTypes.array.isRequired,
-    selectedTable: PropTypes.object.isRequired,
-    onTableChanged: PropTypes.func,
-  };
-
   state = {
     isPopoverOpen: false,
   };
@@ -85,35 +78,37 @@ export class TableSelector extends Component<TableSelectorProps, TableSelectorSt
             />
           </strong>
         </EuiFlexItem>
-        <EuiFlexItem grow={true}>
-          <EuiPopover
-            id="inspectorTableChooser"
-            button={
-              <EuiButtonEmpty
-                iconType="arrowDown"
-                iconSide="right"
-                size="s"
-                onClick={this.togglePopover}
-                data-test-subj="inspectorTableChooser"
-              >
-                <FormattedMessage
-                  id="data.inspector.table.inspectorTableChooserButton"
-                  defaultMessage="Table {index}"
-                  values={{ index: currentIndex + 1 }}
-                />
-              </EuiButtonEmpty>
-            }
-            isOpen={this.state.isPopoverOpen}
-            closePopover={this.closePopover}
-            panelPaddingSize="none"
-            anchorPosition="downLeft"
-            repositionOnScroll
-          >
-            <EuiContextMenuPanel
-              items={this.props.tables.map(this.renderTableDropdownItem)}
-              data-test-subj="inspectorTableChooserMenuPanel"
-            />
-          </EuiPopover>
+        <EuiFlexItem>
+          <div>
+            <EuiPopover
+              id="inspectorTableChooser"
+              button={
+                <EuiButtonEmpty
+                  iconType="arrowDown"
+                  iconSide="right"
+                  size="s"
+                  onClick={this.togglePopover}
+                  data-test-subj="inspectorTableChooser"
+                >
+                  <FormattedMessage
+                    id="data.inspector.table.inspectorTableChooserButton"
+                    defaultMessage="Table {index}"
+                    values={{ index: currentIndex + 1 }}
+                  />
+                </EuiButtonEmpty>
+              }
+              isOpen={this.state.isPopoverOpen}
+              closePopover={this.closePopover}
+              panelPaddingSize="none"
+              anchorPosition="downLeft"
+              repositionOnScroll
+            >
+              <EuiContextMenuPanel
+                items={this.props.tables.map(this.renderTableDropdownItem)}
+                data-test-subj="inspectorTableChooserMenuPanel"
+              />
+            </EuiPopover>
+          </div>
         </EuiFlexItem>
       </EuiFlexGroup>
     );