[ES|QL viz] Filters and drill downs on xy, heatmap and partition charts: provide feedback when cannot apply filter or drill downs when the value is computed

packages/kbn-optimizer/limits.yml

@@ -56,15 +56,15 @@ pageLoadAssetSize:
   embeddableAlertsTable: 6524
   enterpriseSearch: 37565
   entityStore: 9718
-  esql: 29547
+  esql: 29469
   esqlDataGrid: 10209
   esUiShared: 101220
   evals: 6117
   eventAnnotation: 22334
   eventAnnotationListing: 13164
   exploratoryView: 45042
   expressionGauge: 15748
-  expressionHeatmap: 17563
+  expressionHeatmap: 20303
   expressionLegacyMetricVis: 11834
   expressionMetricVis: 18100
   expressionPartitionVis: 29826

src/platform/packages/shared/chart-expressions-common/computed_column_warning.ts

@@ -0,0 +1,85 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { DatatableColumn } from '@kbn/expressions-plugin/common';
+import { i18n } from '@kbn/i18n';
+
+const getComputedColumnFilterDisabledMessage = ({
+  computedColumnNames,
+  allColumnsAreComputed,
+}: {
+  computedColumnNames: string[];
+  allColumnsAreComputed: boolean;
+}) => {
+  const count = computedColumnNames.length;
+
+  if (allColumnsAreComputed) {
+    return i18n.translate(
+      'chartExpressionsCommon.computedColumn.filterDrilldownDisabledDescription',
+      {
+        defaultMessage:
+          "You can't apply a filter or drill down {count, plural, one {from this value because it relies on a field} other {from these values because they rely on fields}} created at query time.",
+        values: { count },
+      }
+    );
+  }
+
+  const names = computedColumnNames.map((n) => `'${n}'`).join(', ');
+  return i18n.translate(
+    'chartExpressionsCommon.computedColumn.partialFilterDrilldownDisabledDescription',
+    {
+      defaultMessage:
+        "You can't apply a filter or drill down from {names} because {count, plural, one {it relies on a field} other {they rely on fields}} created at query time.",
+      values: { names, count },
+    }
+  );
+};
+
+export function isComputedColumnNonFilterable(column: DatatableColumn): boolean {
+  if (column.isComputedColumn !== true) {
+    return false;
+  }
+  const sourceField = column.meta?.sourceParams?.sourceField;
+  // Without a string sourceField the filter action falls back to column.name, which always
+  // collides with the computed output column itself — filtering is never possible.
+  if (typeof sourceField !== 'string') {
+    return true;
+  }
+  // A column produced by RENAME has name !== sourceField; the underlying index field
+  // remains addressable, so filtering is still possible.
+  return column.name === sourceField;
+}
+
+/**
+ * Returns the warning message to show when filterable chart columns are computed ES|QL
+ * fields that cannot be used for filtering. Returns `undefined` when there is nothing
+ * to warn about.
+ */
+export const getComputedColumnWarningForColumns = (
+  filterableColumns: Array<DatatableColumn | undefined>
+): string | undefined => {
+  const defined = filterableColumns.filter((c): c is DatatableColumn => c != null);
+  if (defined.length === 0) {
+    return undefined;
+  }
+
+  const nonFilterableComputedColumnNames = defined
+    .filter((col) => isComputedColumnNonFilterable(col))
+    .map((col) => col.name);
+
+  if (nonFilterableComputedColumnNames.length === 0) {
+    return undefined;
+  }
+
+  const allColumnsAreComputed = nonFilterableComputedColumnNames.length === defined.length;
+  return getComputedColumnFilterDisabledMessage({
+    computedColumnNames: nonFilterableComputedColumnNames,
+    allColumnsAreComputed,
+  });
+};

src/platform/packages/shared/chart-expressions-common/index.ts

@@ -32,6 +32,7 @@ export {
   getLegendLayout,
 } from './legend';
 
+export { getComputedColumnWarningForColumns } from './computed_column_warning';
 export type { Simplify, MakeOverridesSerializable, ChartSizeSpec, ChartSizeEvent } from './types';
 export { isChartSizeEvent } from './types';
 export type { ExpressionValueVisDimension } from './expression_value_dimension';

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

@@ -9,6 +9,9 @@
 
 import type { FC } from 'react';
 import React, { memo, useMemo, useState, useCallback, useRef } from 'react';
+import { css } from '@emotion/react';
+import type { UseEuiTheme } from '@elastic/eui';
+import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
 import moment from 'moment';
 import { ESQL_TABLE_TYPE } from '@kbn/data-plugin/common';
 import type {
@@ -23,12 +26,17 @@ import type {
   SettingsProps,
   SeriesIdentifier,
   TooltipValue,
+  PointerValue,
 } from '@elastic/charts';
 import { Chart, Heatmap, ScaleType, Settings, TooltipType, Tooltip } from '@elastic/charts';
 import type { CustomPaletteState } from '@kbn/charts-plugin/public';
 import { search } from '@kbn/data-plugin/public';
 import { LegendToggle, EmptyPlaceholder, useActiveCursor } from '@kbn/charts-plugin/public';
-import { getAccessorByDimension, getFormatByAccessor } from '@kbn/chart-expressions-common';
+import {
+  getAccessorByDimension,
+  getFormatByAccessor,
+  getComputedColumnWarningForColumns,
+} from '@kbn/chart-expressions-common';
 import { i18n } from '@kbn/i18n';
 import type { DatatableColumn } from '@kbn/expressions-plugin/public';
 import { IconChartHeatmap } from '@kbn/chart-icons';
@@ -39,6 +47,7 @@ import {
 } from '@kbn/chart-expressions-common';
 import { useKibanaIsDarkMode } from '@kbn/react-kibana-context-theme';
 import type { CoreSetup } from '@kbn/core/public';
+
 import type { HeatmapRenderProps, FilterEvent, BrushEvent } from '../../common';
 import {
   applyPaletteParams,
@@ -279,6 +288,25 @@ export function getDateFormatPattern(
   return uiSettings.get('dateFormat');
 }
 
+const chartTooltipFooterMessageStyles = {
+  root: ({ euiTheme }: UseEuiTheme) =>
+    css`
+      color: ${euiTheme.colors.textSubdued};
+      font-size: ${euiTheme.size.m};
+      font-weight: ${euiTheme.font.weight.regular};
+    `,
+};
+
+/** Renders a styled message in the footer of the chart tooltip. */
+const ChartTooltipFooterMessage: React.FC<{ message: string }> = ({ message }) => {
+  const styles = useMemoCss(chartTooltipFooterMessageStyles);
+  return (
+    <div css={styles.root} data-test-subj="chartTooltipFooterMessage">
+      {message}
+    </div>
+  );
+};
+
 export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
   ({
     data: table,
@@ -454,6 +482,24 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
 
     const hasTooltipActions = interactive && !isEsqlMode;
 
+    // Compute warning message for ES|QL computed columns that cannot be filtered.
+    const warningMessage = useMemo(
+      () =>
+        isEsqlMode ? getComputedColumnWarningForColumns([xAxisColumn, yAxisColumn]) : undefined,
+      [isEsqlMode, xAxisColumn, yAxisColumn]
+    );
+
+    const TooltipFooter = useMemo<
+      | React.ComponentType<{
+          items: Array<TooltipValue<Record<string, string | number>, SeriesIdentifier>>;
+          header: PointerValue<Record<string, string | number>> | null;
+        }>
+      | 'default'
+    >(() => {
+      if (!warningMessage) return 'default';
+      return () => <ChartTooltipFooterMessage message={warningMessage} />;
+    }, [warningMessage]);
+
     const onElementClick = useCallback(
       (e: HeatmapElementEvent[]) => {
         const cell = e[0][0];
@@ -860,6 +906,7 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
                   : undefined
               }
               type={args.showTooltip ? TooltipType.Follow : TooltipType.None}
+              footer={TooltipFooter}
             />
             <Settings
               onRenderChange={onRenderChange}

src/platform/plugins/shared/chart_expressions/expression_heatmap/tsconfig.json

@@ -30,7 +30,8 @@
     "@kbn/react-kibana-context-theme",
     "@kbn/chart-test-jest-helpers",
     "@kbn/field-formats-common",
-    "@kbn/visualizations-common"
+    "@kbn/visualizations-common",
+    "@kbn/css-utils"
   ],
   "exclude": [
     "target/**/*",

src/platform/plugins/shared/chart_expressions/expression_partition_vis/moon.yml

@@ -34,6 +34,7 @@ dependsOn:
   - '@kbn/chart-icons'
   - '@kbn/chart-expressions-common'
   - '@kbn/cell-actions'
+  - '@kbn/css-utils'
   - '@kbn/react-kibana-context-render'
   - '@kbn/core-rendering-browser'
   - '@kbn/palettes'

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

@@ -16,16 +16,23 @@ import type {
   PartitionElementEvent,
   SettingsProps,
   TooltipValue,
+  PointerValue,
 } from '@elastic/charts';
 import { Chart, Partition, Position, Settings, TooltipType, Tooltip } from '@elastic/charts';
 import { ESQL_TABLE_TYPE } from '@kbn/data-plugin/common';
+import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
+import type { UseEuiTheme } from '@elastic/eui';
 import { useEuiTheme } from '@elastic/eui';
+import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
 import type { PaletteRegistry } from '@kbn/coloring';
 import type { ChartsPluginSetup } from '@kbn/charts-plugin/public';
 import { LegendToggle } from '@kbn/charts-plugin/public';
 import type { PersistedState } from '@kbn/visualizations-common';
-import { getColumnByAccessor } from '@kbn/chart-expressions-common';
+import {
+  getColumnByAccessor,
+  getComputedColumnWarningForColumns,
+} from '@kbn/chart-expressions-common';
 import type {
   Datatable,
   DatatableColumn,
@@ -84,6 +91,26 @@ declare global {
     _echDebugStateFlag?: boolean;
   }
 }
+
+const chartTooltipFooterMessageStyles = {
+  root: ({ euiTheme }: UseEuiTheme) =>
+    css`
+      color: ${euiTheme.colors.textSubdued};
+      font-size: ${euiTheme.size.m};
+      font-weight: ${euiTheme.font.weight.regular};
+    `,
+};
+
+/** Renders a styled message in the footer of the chart tooltip. */
+const ChartTooltipFooterMessage: React.FC<{ message: string }> = ({ message }) => {
+  const styles = useMemoCss(chartTooltipFooterMessageStyles);
+  return (
+    <div css={styles.root} data-test-subj="chartTooltipFooterMessage">
+      {message}
+    </div>
+  );
+};
+
 export type PartitionVisComponentProps = Omit<
   PartitionChartProps,
   'navigateToLens' | 'visConfig'
@@ -408,6 +435,28 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => {
   const hasTooltipActions =
     interactive && !isEsqlMode && bucketAccessors.filter((a) => a !== 'metric-name').length > 0;
 
+  // Compute warning message for ES|QL computed columns that cannot be filtered.
+  const warningMessage = useMemo(
+    () =>
+      isEsqlMode
+        ? getComputedColumnWarningForColumns(
+            bucketColumns.map((col) => visData.columns.find((c) => c.id === col.id))
+          )
+        : undefined,
+    [isEsqlMode, bucketColumns, visData.columns]
+  );
+
+  const TooltipFooter = useMemo<
+    | React.ComponentType<{
+        items: Array<TooltipValue<Record<'key', string | number>, SeriesIdentifier>>;
+        header: PointerValue<Record<'key', string | number>> | null;
+      }>
+    | 'default'
+  >(() => {
+    if (!warningMessage) return 'default';
+    return () => <ChartTooltipFooterMessage message={warningMessage} />;
+  }, [warningMessage]);
+
   const tooltip: TooltipProps = {
     ...(fixedViewPort ? { boundary: fixedViewPort } : {}),
     type: visParams.addTooltip ? TooltipType.Follow : TooltipType.None,
@@ -544,7 +593,7 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => {
                 splitColumnAccessor={splitChartColumnAccessor}
                 splitRowAccessor={splitChartRowAccessor}
               />
-              <Tooltip {...tooltip} />
+              <Tooltip {...tooltip} footer={TooltipFooter} />
               <Settings
                 noResults={
                   <VisualizationNoResults chartType={visType} renderComplete={onRenderChange} />