Creates ES|QL where filters for ordinal charts

src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx

@@ -7,6 +7,7 @@
  */
 
 import React, { memo, FC, useMemo, useState, useCallback, useRef } from 'react';
+import { ESQL_TABLE_TYPE } from '@kbn/data-plugin/common';
 import {
   Chart,
   ElementClickListener,
@@ -253,7 +254,9 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
       datatables: [formattedTable.table],
     });
 
-    const hasTooltipActions = interactive;
+    const isEsqlMode = table?.meta?.type === ESQL_TABLE_TYPE;
+
+    const hasTooltipActions = interactive && !isEsqlMode;
 
     const onElementClick = useCallback(
       (e: HeatmapElementEvent[]) => {

src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx

@@ -22,6 +22,7 @@ import {
   Tooltip,
   TooltipValue,
 } from '@elastic/charts';
+import { ESQL_TABLE_TYPE } from '@kbn/data-plugin/common';
 import { i18n } from '@kbn/i18n';
 import { useEuiTheme } from '@elastic/eui';
 import type { PaletteRegistry } from '@kbn/coloring';
@@ -409,8 +410,9 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => {
     ? getColumnByAccessor(splitRow[0], visData.columns)
     : undefined;
 
+  const isEsqlMode = originalVisData?.meta?.type === ESQL_TABLE_TYPE;
   const hasTooltipActions =
-    interactive && bucketAccessors.filter((a) => a !== 'metric-name').length > 0;
+    interactive && !isEsqlMode && bucketAccessors.filter((a) => a !== 'metric-name').length > 0;
 
   const tooltip: TooltipProps = {
     ...(fixedViewPort ? { boundary: fixedViewPort } : {}),

src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx

@@ -863,7 +863,7 @@ export function XYChart({
             xDomain={xDomain}
             // enable brushing only for time charts, for both ES|QL and DSL queries
             onBrushEnd={interactive ? (brushHandler as BrushEndListener) : undefined}
-            onElementClick={interactive && !isEsqlMode ? clickHandler : undefined}
+            onElementClick={interactive ? clickHandler : undefined}
             legendAction={
               interactive
                 ? getLegendAction(

src/plugins/data/public/actions/filters/create_filters_from_value_click.test.ts

@@ -9,97 +9,167 @@
 import { DataViewsContract } from '@kbn/data-views-plugin/common';
 import { dataPluginMock } from '../../mocks';
 import { setIndexPatterns, setSearchService } from '../../services';
-import { createFiltersFromValueClickAction } from './create_filters_from_value_click';
+import {
+  createFiltersFromValueClickAction,
+  appendFilterToESQLQueryFromValueClickAction,
+} from './create_filters_from_value_click';
 import { FieldFormatsGetConfigFn, BytesFormat } from '@kbn/field-formats-plugin/common';
 import { RangeFilter } from '@kbn/es-query';
 
 const mockField = {
   name: 'bytes',
   filterable: true,
 };
+describe('createFiltersFromClickEvent', () => {
+  const dataStart = dataPluginMock.createStartContract();
+  setSearchService(dataStart.search);
+  setIndexPatterns({
+    ...dataStart.indexPatterns,
+    get: async () => ({
+      id: 'logstash-*',
+      fields: {
+        getByName: () => mockField,
+        filter: () => [mockField],
+      },
+      getFormatterForField: () => new BytesFormat({}, (() => {}) as FieldFormatsGetConfigFn),
+    }),
+  } as unknown as DataViewsContract);
+  describe('createFiltersFromValueClick', () => {
+    let dataPoints: Parameters<typeof createFiltersFromValueClickAction>[0]['data'];
 
-describe('createFiltersFromValueClick', () => {
-  let dataPoints: Parameters<typeof createFiltersFromValueClickAction>[0]['data'];
-
-  beforeEach(() => {
-    dataPoints = [
-      {
-        table: {
-          columns: [
-            {
-              name: 'test',
-              id: '1-1',
-              meta: {
-                type: 'date',
-                source: 'esaggs',
-                sourceParams: {
-                  indexPatternId: 'logstash-*',
-                  type: 'histogram',
-                  params: {
-                    field: 'bytes',
-                    interval: 30,
-                    otherBucket: true,
+    beforeEach(() => {
+      dataPoints = [
+        {
+          table: {
+            columns: [
+              {
+                name: 'test',
+                id: '1-1',
+                meta: {
+                  type: 'date',
+                  source: 'esaggs',
+                  sourceParams: {
+                    indexPatternId: 'logstash-*',
+                    type: 'histogram',
+                    params: {
+                      field: 'bytes',
+                      interval: 30,
+                      otherBucket: true,
+                    },
                   },
                 },
               },
-            },
-          ],
-          rows: [
-            {
-              '1-1': '2048',
-            },
-          ],
-        },
-        column: 0,
-        row: 0,
-        value: 'test',
-      },
-    ];
-
-    const dataStart = dataPluginMock.createStartContract();
-    setSearchService(dataStart.search);
-    setIndexPatterns({
-      ...dataStart.indexPatterns,
-      get: async () => ({
-        id: 'logstash-*',
-        fields: {
-          getByName: () => mockField,
-          filter: () => [mockField],
+            ],
+            rows: [
+              {
+                '1-1': '2048',
+              },
+            ],
+          },
+          column: 0,
+          row: 0,
+          value: 'test',
         },
-        getFormatterForField: () => new BytesFormat({}, (() => {}) as FieldFormatsGetConfigFn),
-      }),
-    } as unknown as DataViewsContract);
-  });
+      ];
+    });
+    test('ignores event when value for rows is not provided', async () => {
+      dataPoints[0].table.rows[0]['1-1'] = null;
+      const filters = await createFiltersFromValueClickAction({ data: dataPoints });
 
-  test('ignores event when value for rows is not provided', async () => {
-    dataPoints[0].table.rows[0]['1-1'] = null;
-    const filters = await createFiltersFromValueClickAction({ data: dataPoints });
+      expect(filters.length).toEqual(0);
+    });
 
-    expect(filters.length).toEqual(0);
-  });
+    test('handles an event when aggregations type is a terms', async () => {
+      (dataPoints[0].table.columns[0].meta.sourceParams as any).type = 'terms';
+      const filters = await createFiltersFromValueClickAction({ data: dataPoints });
 
-  test('handles an event when aggregations type is a terms', async () => {
-    (dataPoints[0].table.columns[0].meta.sourceParams as any).type = 'terms';
-    const filters = await createFiltersFromValueClickAction({ data: dataPoints });
+      expect(filters.length).toEqual(1);
+      expect(filters[0].query?.match_phrase?.bytes).toEqual('2048');
+    });
 
-    expect(filters.length).toEqual(1);
-    expect(filters[0].query?.match_phrase?.bytes).toEqual('2048');
-  });
+    test('handles an event when aggregations type is not terms', async () => {
+      const filters = await createFiltersFromValueClickAction({ data: dataPoints });
 
-  test('handles an event when aggregations type is not terms', async () => {
-    const filters = await createFiltersFromValueClickAction({ data: dataPoints });
+      expect(filters.length).toEqual(1);
 
-    expect(filters.length).toEqual(1);
+      const [rangeFilter] = filters as RangeFilter[];
+      expect(rangeFilter.query.range.bytes.gte).toEqual(2048);
+      expect(rangeFilter.query.range.bytes.lt).toEqual(2078);
+    });
 
-    const [rangeFilter] = filters as RangeFilter[];
-    expect(rangeFilter.query.range.bytes.gte).toEqual(2048);
-    expect(rangeFilter.query.range.bytes.lt).toEqual(2078);
+    test('handles non-unique filters', async () => {
+      const [point] = dataPoints;
+      const filters = await createFiltersFromValueClickAction({ data: [point, point] });
+
+      expect(filters.length).toEqual(1);
+    });
   });
+  describe('appendFilterToESQLQueryFromValueClickAction', () => {
+    let dataPoints: Parameters<typeof appendFilterToESQLQueryFromValueClickAction>[0]['data'];
+    beforeEach(() => {
+      dataPoints = [
+        {
+          table: {
+            columns: [
+              {
+                name: 'columnA',
+                id: 'columnA',
+                meta: {
+                  type: 'date',
+                },
+              },
+            ],
+            rows: [
+              {
+                columnA: '2048',
+              },
+            ],
+          },
+          column: 0,
+          row: 0,
+          value: 'test',
+        },
+      ];
+    });
+    test('should return null for date fields', async () => {
+      const queryString = await appendFilterToESQLQueryFromValueClickAction({
+        data: dataPoints,
+        query: { esql: 'from meow' },
+      });
+
+      expect(queryString).toBeUndefined();
+    });
 
-  test('handles non-unique filters', async () => {
-    const [point] = dataPoints;
-    const filters = await createFiltersFromValueClickAction({ data: [point, point] });
+    test('should return null if no aggregate query is present', async () => {
+      dataPoints[0].table.columns[0] = {
+        name: 'test',
+        id: '1-1',
+        meta: {
+          type: 'string',
+        },
+      };
+      const queryString = await appendFilterToESQLQueryFromValueClickAction({
+        data: dataPoints,
+      });
+
+      expect(queryString).toBeUndefined();
+    });
+
+    test('should return the update query string', async () => {
+      dataPoints[0].table.columns[0] = {
+        name: 'columnA',
+        id: 'columnA',
+        meta: {
+          type: 'string',
+        },
+      };
+      const queryString = await appendFilterToESQLQueryFromValueClickAction({
+        data: dataPoints,
+        query: { esql: 'from meow' },
+      });
 
-    expect(filters.length).toEqual(1);
+      expect(queryString).toEqual(`from meow
+| where \`columnA\`=="2048"`);
+    });
   });
 });

src/plugins/data/public/actions/filters/create_filters_from_value_click.ts

@@ -8,7 +8,14 @@
 
 import _ from 'lodash';
 import { Datatable } from '@kbn/expressions-plugin/public';
-import { compareFilters, COMPARE_ALL_OPTIONS, Filter, toggleFilterNegated } from '@kbn/es-query';
+import {
+  compareFilters,
+  COMPARE_ALL_OPTIONS,
+  Filter,
+  toggleFilterNegated,
+  type AggregateQuery,
+} from '@kbn/es-query';
+import { appendWhereClauseToESQLQuery } from '@kbn/esql-utils';
 import { getIndexPatterns, getSearchService } from '../../services';
 import { AggConfigSerialized } from '../../../common/search/aggs';
 import { mapAndFlattenFilters } from '../../query';
@@ -22,6 +29,7 @@ interface ValueClickDataContext {
   }>;
   timeFieldName?: string;
   negate?: boolean;
+  query?: AggregateQuery;
 }
 
 /**
@@ -148,3 +156,32 @@ export const createFiltersFromValueClickAction = async ({
     compareFilters(a, b, COMPARE_ALL_OPTIONS)
   );
 };
+
+/** @public */
+export const appendFilterToESQLQueryFromValueClickAction = ({
+  data,
+  query,
+}: ValueClickDataContext) => {
+  if (!query) {
+    return;
+  }
+  // Do not append in case of time series, for now. We need to find a way to compute the interval
+  // to create the time range filter correctly. The users can brush to update the time filter instead.
+  const dataPoints = data.filter((point) => {
+    return point && point.table?.columns?.[point.column]?.meta?.type !== 'date';
+  });
+
+  if (!dataPoints.length) {
+    return;
+  }
+  const { table, column: columnIndex, row: rowIndex } = dataPoints[dataPoints.length - 1];
+
+  if (table?.columns?.[columnIndex]) {
+    const column = table.columns[columnIndex];
+    const value: unknown = rowIndex > -1 ? table.rows[rowIndex][column.id] : null;
+    if (value == null) {
+      return;
+    }
+    return appendWhereClauseToESQLQuery(query.esql, column.name, value, '+', column.meta?.type);
+  }
+};