fixing circular dependency

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

@@ -39,18 +39,30 @@ export const DiscoverHistogramLayout = ({
     isPlainRecord,
   });
 
+  const datatable = useObservable(dataState.data$.documents$);
+
   // Initialized when the first search has been requested or
   // when in text-based mode since search sessions are not supported
   if (!searchSessionId && !isPlainRecord) {
     return null;
   }
 
+  if (!datatable || !['partial', 'complete'].includes(datatable.fetchStatus)) {
+    return null;
+  }
+
+  const table = {
+    type: 'datatable' as 'datatable',
+    rows: datatable.result!.map((r) => r.raw),
+    columns: datatable.textBasedQueryColumns || [],
+  };
+
   return (
     <UnifiedHistogramContainer
       {...unifiedHistogramProps}
       searchSessionId={searchSessionId}
       requestAdapter={dataState.inspectorAdapters.requests}
-      documents$={dataState.data$.documents$}
+      table={table}
       container={container}
       css={histogramLayoutCss}
     >

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

@@ -11,7 +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 { DataDocuments$ } from '@kbn/discover-plugin/public/application/main/services/discover_data_state_container';
+import { Datatable } from '@kbn/expressions-plugin/common';
 import { UnifiedHistogramLayout, UnifiedHistogramLayoutProps } from '../layout';
 import type { UnifiedHistogramInputMessage, UnifiedHistogramRequestContext } from '../types';
 import {
@@ -44,7 +44,7 @@ export type UnifiedHistogramContainerProps = {
   searchSessionId?: UnifiedHistogramRequestContext['searchSessionId'];
   requestAdapter?: UnifiedHistogramRequestContext['adapter'];
   isChartLoading?: boolean;
-  documents$: DataDocuments$;
+  table: Datatable;
 } & Pick<
   UnifiedHistogramLayoutProps,
   | 'services'

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

@@ -15,11 +15,10 @@ 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';
-import { DataDocuments$ } from '@kbn/discover-plugin/public/application/main/services/discover_data_state_container';
 import { computeInterval } from './compute_interval';
 const TRANSFORMATIONAL_COMMANDS = ['stats', 'project', 'keep'];
 
@@ -33,7 +32,7 @@ export const useLensSuggestions = ({
   timeRange,
   lensSuggestionsApi,
   onSuggestionChange,
-  documents$,
+  table,
 }: {
   dataView: DataView;
   query?: Query | AggregateQuery;
@@ -44,15 +43,15 @@ export const useLensSuggestions = ({
   timeRange?: TimeRange;
   lensSuggestionsApi: LensSuggestionsApi;
   onSuggestionChange?: (suggestion: Suggestion | undefined) => void;
-  documents$?: DataDocuments$;
+  table?: Datatable;
 }) => {
   const suggestions = useMemo(() => {
     const context = {
       dataViewSpec: dataView?.toSpec(),
       fieldName: '',
       textBasedColumns: columns,
       query: query && isOfAggregateQueryType(query) ? query : undefined,
-      documents$,
+      table,
     };
     const allSuggestions = isPlainRecord
       ? lensSuggestionsApi(context, dataView, ['lnsDatatable']) ?? []
@@ -61,7 +60,7 @@ export const useLensSuggestions = ({
     const [firstSuggestion] = allSuggestions;
 
     return { firstSuggestion, allSuggestions };
-  }, [dataView, columns, query, documents$, isPlainRecord, lensSuggestionsApi]);
+  }, [dataView, columns, query, table, isPlainRecord, lensSuggestionsApi]);
 
   const [allSuggestions, setAllSuggestions] = useState(suggestions.allSuggestions);
   const currentSuggestion = originalSuggestion ?? suggestions.firstSuggestion;
@@ -114,7 +113,7 @@ export const useLensSuggestions = ({
         query: {
           esql: esqlQuery,
         },
-        documents$,
+        table,
       };
       const sug = lensSuggestionsApi(context, dataView, ['lnsDatatable']) ?? [];
       if (sug.length) {
@@ -124,7 +123,7 @@ export const useLensSuggestions = ({
     }
     histogramQuery.current = undefined;
     return undefined;
-  }, [currentSuggestion, dataView, query, timeRange, data, documents$, lensSuggestionsApi]);
+  }, [currentSuggestion, dataView, query, timeRange, data, table, lensSuggestionsApi]);
 
   useEffect(() => {
     const newSuggestionsDeps = getSuggestionDeps({ dataView, query, columns });

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

@@ -11,7 +11,7 @@ import React, { PropsWithChildren, ReactElement, useMemo, 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,
@@ -26,7 +26,6 @@ import {
   ResizableLayoutMode,
   ResizableLayoutDirection,
 } from '@kbn/resizable-layout';
-import { DataDocuments$ } from '@kbn/discover-plugin/public/application/main/services/discover_data_state_container';
 import { Chart } from '../chart';
 import type {
   UnifiedHistogramChartContext,
@@ -177,7 +176,7 @@ export interface UnifiedHistogramLayoutProps extends PropsWithChildren<unknown>
    */
   withDefaultActions?: EmbeddableComponentProps['withDefaultActions'];
 
-  documents$: DataDocuments$;
+  table: Datatable;
 }
 
 export const UnifiedHistogramLayout = ({
@@ -206,7 +205,7 @@ export const UnifiedHistogramLayout = ({
   disabledActions,
   lensSuggestionsApi,
   input$,
-  documents$,
+  table,
   onTopPanelHeightChange,
   onChartHiddenChange,
   onTimeIntervalChange,
@@ -235,7 +234,7 @@ export const UnifiedHistogramLayout = ({
     data: services.data,
     lensSuggestionsApi,
     onSuggestionChange,
-    documents$,
+    table,
   });
 
   const chart = suggestionUnsupported ? undefined : originalChart;

x-pack/plugins/lens/public/lens_suggestions_api.ts

@@ -6,14 +6,14 @@
  */
 import type { VisualizeFieldContext } from '@kbn/ui-actions-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/public';
-import { DataDocuments$ } from '@kbn/discover-plugin/public/application/main/services/discover_data_state_container';
+import { Datatable } from '@kbn/expressions-plugin/common';
 import { TextBasedPersistedState } from './datasources/text_based/types';
 import { getSuggestions } from './editor_frame_service/editor_frame/suggestion_helpers';
 import type { DatasourceMap, VisualizationMap, VisualizeEditorContext } from './types';
 import type { DataViewsState } from './state_management';
 
 interface SuggestionsApi {
-  context: (VisualizeFieldContext | VisualizeEditorContext) & { documents$?: DataDocuments$ };
+  context: (VisualizeFieldContext | VisualizeEditorContext) & { table?: Datatable };
   dataView: DataView;
   visualizationMap?: VisualizationMap;
   datasourceMap?: DatasourceMap;
@@ -27,7 +27,7 @@ export const suggestionsApi = ({
   visualizationMap,
   excludedVisualizations,
 }: SuggestionsApi) => {
-  const { documents$, ...initialContext } = context;
+  const { table, ...initialContext } = context;
   if (!datasourceMap || !visualizationMap || !dataView.id) return undefined;
   const datasourceStates = {
     formBased: {
@@ -93,16 +93,12 @@ export const suggestionsApi = ({
   // we want to sort XY first
   const sortXYFirst = suggestionsList.sort((a, b) => (a.visualizationId === 'lnsXY' ? -1 : 1));
 
-  if (documents$?.value) {
+  if (table) {
     sortXYFirst.forEach((suggestion) => {
       const { layers } = suggestion.datasourceState as TextBasedPersistedState;
       Object.keys(layers).forEach((key) => {
         const layer = layers[key];
-        layer.table = {
-          type: 'datatable',
-          rows: documents$.value.result!.map((r) => r.raw),
-          columns: documents$.value.textBasedQueryColumns!,
-        };
+        layer.table = table;
       });
     });
   }