Creates ES|QL where filters for ordinal charts

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,40 @@ export const createFiltersFromValueClickAction = async ({
     compareFilters(a, b, COMPARE_ALL_OPTIONS)
   );
 };
+
+/** @public */
+export const appendFilterToESQLQueryFromValueClickAction = async ({
+  data,
+  query,
+}: ValueClickDataContext) => {
+  let queryWithFilter: string | undefined;
+
+  await Promise.all(
+    data
+      .filter((point) => point)
+      .map(async (val) => {
+        const { table, column: columnIndex, row: rowIndex } = val;
+        if (table && table.columns && table.columns[columnIndex]) {
+          const column = table.columns[columnIndex];
+          const value: unknown = rowIndex > -1 ? table.rows[rowIndex][column.id] : null;
+
+          // 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 isDate = column.meta?.type === 'date';
+
+          if (value === null || value === undefined || isDate || !query) return;
+
+          const queryString = query.esql;
+          queryWithFilter = appendWhereClauseToESQLQuery(
+            queryString,
+            column.id,
+            value,
+            '+',
+            column.meta?.type
+          );
+        }
+      })
+  );
+
+  return queryWithFilter;
+};

src/plugins/data/public/actions/value_click_action.ts

@@ -6,11 +6,14 @@
  * Side Public License, v 1.
  */
 
-import type { Filter } from '@kbn/es-query';
+import { Filter, AggregateQuery, isOfAggregateQueryType } from '@kbn/es-query';
 import { Datatable } from '@kbn/expressions-plugin/public';
 import { UiActionsActionDefinition, UiActionsStart } from '@kbn/ui-actions-plugin/public';
 import { APPLY_FILTER_TRIGGER } from '../triggers';
-import { createFiltersFromValueClickAction } from './filters/create_filters_from_value_click';
+import {
+  createFiltersFromValueClickAction,
+  appendFilterToESQLQueryFromValueClickAction,
+} from './filters/create_filters_from_value_click';
 
 export type ValueClickActionContext = ValueClickContext;
 export const ACTION_VALUE_CLICK = 'ACTION_VALUE_CLICK';
@@ -28,6 +31,7 @@ export interface ValueClickContext {
     }>;
     timeFieldName?: string;
     negate?: boolean;
+    query?: AggregateQuery;
   };
 }
 
@@ -39,18 +43,32 @@ export function createValueClickActionDefinition(
     id: ACTION_VALUE_CLICK,
     shouldAutoExecute: async () => true,
     isCompatible: async (context: ValueClickContext) => {
+      if (context.data.query && isOfAggregateQueryType(context.data.query)) {
+        const queryString = await appendFilterToESQLQueryFromValueClickAction(context.data);
+        return queryString != null;
+      }
       const filters = await createFiltersFromValueClickAction(context.data);
       return filters.length > 0;
     },
     execute: async (context: ValueClickActionContext) => {
       try {
-        const filters: Filter[] = await createFiltersFromValueClickAction(context.data);
-        if (filters.length > 0) {
-          await getStartServices().uiActions.getTrigger(APPLY_FILTER_TRIGGER).exec({
-            filters,
+        if (context.data.query && isOfAggregateQueryType(context.data.query)) {
+          // ES|QL charts have a different way of applying filters,
+          // they are appending a where clause to the query
+          const queryString = await appendFilterToESQLQueryFromValueClickAction(context.data);
+          await getStartServices().uiActions.getTrigger('UPDATE_ESQL_QUERY_TRIGGER').exec({
             embeddable: context.embeddable,
-            timeFieldName: context.data.timeFieldName,
+            queryString,
           });
+        } else {
+          const filters: Filter[] = await createFiltersFromValueClickAction(context.data);
+          if (filters.length > 0) {
+            await getStartServices().uiActions.getTrigger(APPLY_FILTER_TRIGGER).exec({
+              filters,
+              embeddable: context.embeddable,
+              timeFieldName: context.data.timeFieldName,
+            });
+          }
         }
       } catch (e) {
         // eslint-disable-next-line no-console

src/plugins/data/tsconfig.json

@@ -56,6 +56,7 @@
     "@kbn/react-kibana-mount",
     "@kbn/search-types",
     "@kbn/safer-lodash-set",
+    "@kbn/esql-utils",
   ],
   "exclude": [
     "target/**/*",

src/plugins/text_based_languages/kibana.jsonc

@@ -12,7 +12,8 @@
     "requiredPlugins": [
       "data",
       "expressions",
-      "dataViews"
+      "dataViews",
+      "uiActions",
     ],
     "requiredBundles": [
       "kibanaReact",