[Lens] value based ES|QL data source

src/plugins/discover/public/application/main/components/layout/discover_histogram_layout.tsx

@@ -10,6 +10,7 @@ import React, { useCallback } from 'react';
 import { UnifiedHistogramContainer } from '@kbn/unified-histogram-plugin/public';
 import { css } from '@emotion/react';
 import useObservable from 'react-use/lib/useObservable';
+import { Datatable } from '@kbn/expressions-plugin/common';
 import { useDiscoverHistogram } from './use_discover_histogram';
 import { type DiscoverMainContentProps, DiscoverMainContent } from './discover_main_content';
 import { useAppStateSelector } from '../../services/discover_app_state_container';
@@ -40,6 +41,7 @@ export const DiscoverHistogramLayout = ({
     isPlainRecord,
   });
 
+  const datatable = useObservable(dataState.data$.documents$);
   const renderCustomChartToggleActions = useCallback(
     () =>
       React.isValidElement(panelsToggle)
@@ -54,11 +56,21 @@ export const DiscoverHistogramLayout = ({
     return null;
   }
 
+  let table: Datatable | undefined;
+  if (datatable && ['partial', 'complete'].includes(datatable.fetchStatus)) {
+    table = {
+      type: 'datatable' as 'datatable',
+      rows: datatable.result!.map((r) => r.raw),
+      columns: datatable.textBasedQueryColumns || [],
+    };
+  }
+
   return (
     <UnifiedHistogramContainer
       {...unifiedHistogramProps}
       searchSessionId={searchSessionId}
       requestAdapter={dataState.inspectorAdapters.requests}
+      table={table}
       container={container}
       css={histogramLayoutCss}
       renderCustomChartToggleActions={renderCustomChartToggleActions}

src/plugins/unified_histogram/public/chart/chart.tsx

@@ -20,6 +20,8 @@ import type { DataView, DataViewField } from '@kbn/data-views-plugin/public';
 import type { LensEmbeddableInput } from '@kbn/lens-plugin/public';
 import type { AggregateQuery, Filter, Query, TimeRange } from '@kbn/es-query';
 import { Subject } from 'rxjs';
+import { LensAttributes } from '@kbn/lens-embeddable-utils';
+import { TextBasedPersistedState } from '@kbn/lens-plugin/public/datasources/text_based/types';
 import { Histogram } from './histogram';
 import type {
   UnifiedHistogramBreakdownContext,
@@ -267,6 +269,35 @@ export function Chart({
     });
   }
 
+  const removeTables = (attributes: LensAttributes) => {
+    const layers = attributes.state.datasourceStates.textBased?.layers;
+
+    const newState = {
+      ...attributes,
+      state: {
+        ...attributes.state,
+        datasourceStates: {
+          ...attributes.state.datasourceStates,
+          textBased: {
+            ...(attributes.state.datasourceStates.textBased || {}),
+            layers: {} as TextBasedPersistedState['layers'],
+          },
+        },
+      },
+    };
+
+    if (layers) {
+      for (const key of Object.keys(layers)) {
+        // Modify the value as needed, e.g., appending ' modified' to each value
+        const newLayer = { ...layers[key] };
+        delete newLayer.table;
+        newState.state.datasourceStates.textBased!.layers[key] = newLayer;
+      }
+    }
+
+    return newState;
+  };
+
   return (
     <EuiFlexGroup
       {...a11yCommonProps}
@@ -397,7 +428,9 @@ export function Chart({
       )}
       {canSaveVisualization && isSaveModalVisible && lensAttributesContext.attributes && (
         <LensSaveModalComponent
-          initialInput={lensAttributesContext.attributes as unknown as LensEmbeddableInput}
+          initialInput={
+            removeTables(lensAttributesContext.attributes) as unknown as LensEmbeddableInput
+          }
           onSave={() => {}}
           onClose={() => setIsSaveModalVisible(false)}
           isSaveable={false}

src/plugins/unified_histogram/public/container/container.tsx

@@ -11,6 +11,7 @@ import { Subject } from 'rxjs';
 import { pick } from 'lodash';
 import useMount from 'react-use/lib/useMount';
 import { LensSuggestionsApi } from '@kbn/lens-plugin/public';
+import { Datatable } from '@kbn/expressions-plugin/common';
 import { UnifiedHistogramLayout, UnifiedHistogramLayoutProps } from '../layout';
 import type { UnifiedHistogramInputMessage, UnifiedHistogramRequestContext } from '../types';
 import {
@@ -43,6 +44,7 @@ export type UnifiedHistogramContainerProps = {
   searchSessionId?: UnifiedHistogramRequestContext['searchSessionId'];
   requestAdapter?: UnifiedHistogramRequestContext['adapter'];
   isChartLoading?: boolean;
+  table?: Datatable;
 } & Pick<
   UnifiedHistogramLayoutProps,
   | 'services'

src/plugins/unified_histogram/public/layout/hooks/use_lens_suggestions.ts

@@ -15,7 +15,7 @@ import {
   Query,
   TimeRange,
 } from '@kbn/es-query';
-import type { DatatableColumn } from '@kbn/expressions-plugin/common';
+import type { Datatable, DatatableColumn } from '@kbn/expressions-plugin/common';
 import { LensSuggestionsApi, Suggestion } from '@kbn/lens-plugin/public';
 import { isEqual } from 'lodash';
 import { useEffect, useMemo, useRef, useState } from 'react';
@@ -32,6 +32,7 @@ export const useLensSuggestions = ({
   timeRange,
   lensSuggestionsApi,
   onSuggestionChange,
+  table,
 }: {
   dataView: DataView;
   query?: Query | AggregateQuery;
@@ -42,13 +43,15 @@ export const useLensSuggestions = ({
   timeRange?: TimeRange;
   lensSuggestionsApi: LensSuggestionsApi;
   onSuggestionChange?: (suggestion: Suggestion | undefined) => void;
+  table?: Datatable;
 }) => {
   const suggestions = useMemo(() => {
     const context = {
       dataViewSpec: dataView?.toSpec(),
       fieldName: '',
       textBasedColumns: columns,
       query: query && isOfAggregateQueryType(query) ? query : undefined,
+      table,
     };
     const allSuggestions = isPlainRecord
       ? lensSuggestionsApi(context, dataView, ['lnsDatatable']) ?? []
@@ -57,10 +60,10 @@ export const useLensSuggestions = ({
     const [firstSuggestion] = allSuggestions;
 
     return { firstSuggestion, allSuggestions };
-  }, [dataView, isPlainRecord, lensSuggestionsApi, query, columns]);
+  }, [dataView, columns, query, table, isPlainRecord, lensSuggestionsApi]);
 
   const [allSuggestions, setAllSuggestions] = useState(suggestions.allSuggestions);
-  const currentSuggestion = originalSuggestion ?? suggestions.firstSuggestion;
+  const currentSuggestion = originalSuggestion || suggestions.firstSuggestion;
   const suggestionDeps = useRef(getSuggestionDeps({ dataView, query, columns }));
   const histogramQuery = useRef<AggregateQuery | undefined>();
   const histogramSuggestion = useMemo(() => {
@@ -122,7 +125,7 @@ export const useLensSuggestions = ({
   }, [currentSuggestion, dataView, query, timeRange, data, lensSuggestionsApi]);
 
   useEffect(() => {
-    const newSuggestionsDeps = getSuggestionDeps({ dataView, query, columns });
+    const newSuggestionsDeps = getSuggestionDeps({ dataView, query, columns, table });
 
     if (!isEqual(suggestionDeps.current, newSuggestionsDeps)) {
       setAllSuggestions(suggestions.allSuggestions);
@@ -133,6 +136,7 @@ export const useLensSuggestions = ({
   }, [
     columns,
     dataView,
+    table,
     onSuggestionChange,
     query,
     suggestions.firstSuggestion,
@@ -152,8 +156,10 @@ const getSuggestionDeps = ({
   dataView,
   query,
   columns,
+  table,
 }: {
   dataView: DataView;
   query?: Query | AggregateQuery;
   columns?: DatatableColumn[];
-}) => [dataView.id, columns, query];
+  table?: Datatable;
+}) => [dataView.id, columns, query, table];

src/plugins/unified_histogram/public/layout/layout.tsx

@@ -11,7 +11,7 @@ import React, { PropsWithChildren, ReactElement, useState } from 'react';
 import { Observable } from 'rxjs';
 import { createHtmlPortalNode, InPortal, OutPortal } from 'react-reverse-portal';
 import { css } from '@emotion/css';
-import type { DatatableColumn } from '@kbn/expressions-plugin/common';
+import type { Datatable, DatatableColumn } from '@kbn/expressions-plugin/common';
 import type { DataView, DataViewField } from '@kbn/data-views-plugin/public';
 import type {
   EmbeddableComponentProps,
@@ -179,6 +179,8 @@ export interface UnifiedHistogramLayoutProps extends PropsWithChildren<unknown>
    * Allows users to enable/disable default actions
    */
   withDefaultActions?: EmbeddableComponentProps['withDefaultActions'];
+
+  table?: Datatable;
 }
 
 export const UnifiedHistogramLayout = ({
@@ -207,6 +209,7 @@ export const UnifiedHistogramLayout = ({
   disabledActions,
   lensSuggestionsApi,
   input$,
+  table,
   onTopPanelHeightChange,
   onChartHiddenChange,
   onTimeIntervalChange,
@@ -235,6 +238,7 @@ export const UnifiedHistogramLayout = ({
     data: services.data,
     lensSuggestionsApi,
     onSuggestionChange,
+    table,
   });
 
   const chart = suggestionUnsupported ? undefined : originalChart;

src/plugins/unified_histogram/tsconfig.json

@@ -27,6 +27,7 @@
     "@kbn/resizable-layout",
     "@kbn/shared-ux-button-toolbar",
     "@kbn/calculate-width-from-char-count",
+    "@kbn/lens-embeddable-utils",
     "@kbn/i18n-react",
     "@kbn/field-utils",
   ],

test/functional/apps/discover/group3/_request_counts.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import expect from '@kbn/expect';
+import expect from '@kbn/expect/expect';
 import { FtrProviderContext } from '../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
@@ -88,56 +88,51 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       query2,
       savedSearchesRequests,
       setQuery,
+      expectedRequests = 2,
+      expectedRefreshRequest = expectedRequests,
     }: {
       type: 'ese' | 'esql';
       savedSearch: string;
       query1: string;
       query2: string;
       savedSearchesRequests?: number;
       setQuery: (query: string) => Promise<void>;
+      expectedRequests?: number;
+      expectedRefreshRequest?: number;
     }) => {
-      it('should send 2 search requests (documents + chart) on page load', async () => {
+      it(`should send ${expectedRequests} search requests (documents + chart) on page load`, async () => {
         await browser.refresh();
         await browser.execute(async () => {
           performance.setResourceTimingBufferSize(Number.MAX_SAFE_INTEGER);
         });
         await waitForLoadingToFinish();
         const searchCount = await getSearchCount(type);
-        expect(searchCount).to.be(2);
+        expect(searchCount).to.be(expectedRequests);
       });
 
-      it('should send 2 requests (documents + chart) when refreshing', async () => {
-        await expectSearches(type, 2, async () => {
+      it(`should send ${expectedRefreshRequest} requests (documents + chart) when refreshing`, async () => {
+        await expectSearches(type, expectedRequests, async () => {
           await queryBar.clickQuerySubmitButton();
         });
       });
 
-      it('should send 2 requests (documents + chart) when changing the query', async () => {
-        await expectSearches(type, 2, async () => {
+      it(`should send ${expectedRequests} requests (documents + chart) when changing the query`, async () => {
+        await expectSearches(type, expectedRequests, async () => {
           await setQuery(query1);
           await queryBar.clickQuerySubmitButton();
         });
       });
 
-      it('should send 2 requests (documents + chart) when changing the time range', async () => {
-        await expectSearches(type, 2, async () => {
+      it(`should send ${expectedRequests} requests (documents + chart) when changing the time range`, async () => {
+        await expectSearches(type, expectedRequests, async () => {
           await PageObjects.timePicker.setAbsoluteRange(
             'Sep 21, 2015 @ 06:31:44.000',
             'Sep 23, 2015 @ 00:00:00.000'
           );
         });
       });
 
-      it('should send 2 requests (documents + chart) when toggling the chart visibility', async () => {
-        await expectSearches(type, 2, async () => {
-          await PageObjects.discover.toggleChartVisibility();
-        });
-        await expectSearches(type, 2, async () => {
-          await PageObjects.discover.toggleChartVisibility();
-        });
-      });
-
-      it('should send 2 requests for saved search changes', async () => {
+      it(`should send ${savedSearchesRequests} requests for saved search changes`, async () => {
         await setQuery(query1);
         await queryBar.clickQuerySubmitButton();
         await PageObjects.timePicker.setAbsoluteRange(
@@ -148,24 +143,24 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         // TODO: Check why the request happens 4 times in case of opening a saved search
         // https://github.com/elastic/kibana/issues/165192
         // creating the saved search
-        await expectSearches(type, savedSearchesRequests ?? 2, async () => {
+        await expectSearches(type, savedSearchesRequests ?? expectedRequests, async () => {
           await PageObjects.discover.saveSearch(savedSearch);
         });
         // resetting the saved search
         await setQuery(query2);
         await queryBar.clickQuerySubmitButton();
         await waitForLoadingToFinish();
-        await expectSearches(type, 2, async () => {
+        await expectSearches(type, expectedRequests, async () => {
           await PageObjects.discover.revertUnsavedChanges();
         });
         // clearing the saved search
-        await expectSearches('ese', 2, async () => {
+        await expectSearches('ese', savedSearchesRequests ?? expectedRequests, async () => {
           await testSubjects.click('discoverNewButton');
           await waitForLoadingToFinish();
         });
         // loading the saved search
         // TODO: https://github.com/elastic/kibana/issues/165192
-        await expectSearches(type, savedSearchesRequests ?? 2, async () => {
+        await expectSearches(type, savedSearchesRequests ?? expectedRequests, async () => {
           await PageObjects.discover.loadSavedSearch(savedSearch);
         });
       });
@@ -182,6 +177,15 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         setQuery: (query) => queryBar.setQuery(query),
       });
 
+      it(`should send 2 requests (documents + chart) when toggling the chart visibility`, async () => {
+        await expectSearches(type, 2, async () => {
+          await PageObjects.discover.toggleChartVisibility();
+        });
+        await expectSearches(type, 2, async () => {
+          await PageObjects.discover.toggleChartVisibility();
+        });
+      });
+
       it('should send 2 requests (documents + chart) when adding a filter', async () => {
         await expectSearches(type, 2, async () => {
           await filterBar.addFilter({
@@ -240,8 +244,19 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         savedSearch: 'esql test',
         query1: 'from logstash-* | where bytes > 1000 | stats countB = count(bytes) ',
         query2: 'from logstash-* | where bytes < 2000 | stats countB = count(bytes) ',
-        savedSearchesRequests: 3,
+        savedSearchesRequests: 2,
         setQuery: (query) => monacoEditor.setCodeEditorValue(query),
+        expectedRequests: 1,
+        expectedRefreshRequest: 2,
+      });
+
+      it(`should send 2 requests (documents + chart) when toggling the chart visibility`, async () => {
+        await expectSearches(type, 2, async () => {
+          await PageObjects.discover.toggleChartVisibility();
+        });
+        await expectSearches(type, 1, async () => {
+          await PageObjects.discover.toggleChartVisibility();
+        });
       });
     });
   });