[Discover] Update unfiied histogram to make total hits request

src/plugins/discover/public/application/main/components/layout/__stories__/get_layout_props.ts

@@ -11,11 +11,9 @@ import { SearchSource } from '@kbn/data-plugin/common';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { RequestAdapter } from '@kbn/inspector-plugin/common';
 import { action } from '@storybook/addon-actions';
-import type { SearchResponse } from '@elastic/elasticsearch/lib/api/types';
 import { FetchStatus } from '../../../../types';
 import {
   AvailableFields$,
-  DataCharts$,
   DataDocuments$,
   DataMain$,
   DataTotalHits$,
@@ -47,11 +45,6 @@ const documentObservables = {
     fetchStatus: FetchStatus.COMPLETE,
     result: Number(esHits.length),
   }) as DataTotalHits$,
-
-  charts$: new BehaviorSubject({
-    fetchStatus: FetchStatus.COMPLETE,
-    response: {} as unknown as SearchResponse,
-  }) as DataCharts$,
 };
 
 const plainRecordObservables = {
@@ -77,11 +70,6 @@ const plainRecordObservables = {
     fetchStatus: FetchStatus.COMPLETE,
     recordRawType: RecordRawType.PLAIN,
   }) as DataTotalHits$,
-
-  charts$: new BehaviorSubject({
-    fetchStatus: FetchStatus.COMPLETE,
-    recordRawType: RecordRawType.PLAIN,
-  }) as DataCharts$,
 };
 
 const getCommonProps = (dataView: DataView) => {

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

@@ -72,6 +72,7 @@ export function DiscoverLayout({
   persistDataView,
   updateAdHocDataViewId,
   adHocDataViewList,
+  searchSessionManager,
 }: DiscoverLayoutProps) {
   const {
     trackUiMetric,
@@ -324,6 +325,8 @@ export function DiscoverLayout({
                   onFieldEdited={onFieldEdited}
                   columns={columns}
                   resizeRef={resizeRef}
+                  inspectorAdapters={inspectorAdapters}
+                  searchSessionManager={searchSessionManager}
                 />
               )}
             </EuiPageContent>

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

@@ -15,6 +15,7 @@ import { UnifiedHistogramLayout } from '@kbn/unified-histogram-plugin/public';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
+import type { RequestAdapter } from '@kbn/inspector-plugin/public';
 import { useDiscoverServices } from '../../../../hooks/use_discover_services';
 import { DataTableRecord } from '../../../../types';
 import { DocumentViewModeToggle, VIEW_MODE } from '../../../../components/view_mode_toggle';
@@ -25,6 +26,7 @@ import { FieldStatisticsTable } from '../field_stats_table';
 import { DiscoverDocuments } from './discover_documents';
 import { DOCUMENTS_VIEW_CLICK, FIELD_STATISTICS_VIEW_CLICK } from '../field_stats_table/constants';
 import { useDiscoverHistogram } from './use_discover_histogram';
+import type { DiscoverSearchSessionManager } from '../../services/discover_search_session';
 
 const FieldStatisticsTableMemoized = React.memo(FieldStatisticsTable);
 
@@ -46,6 +48,8 @@ export interface DiscoverMainContentProps {
   onFieldEdited: () => Promise<void>;
   columns: string[];
   resizeRef: RefObject<HTMLDivElement>;
+  inspectorAdapters: { requests: RequestAdapter };
+  searchSessionManager: DiscoverSearchSessionManager;
 }
 
 export const DiscoverMainContent = ({
@@ -66,6 +70,8 @@ export const DiscoverMainContent = ({
   onFieldEdited,
   columns,
   resizeRef,
+  inspectorAdapters,
+  searchSessionManager,
 }: DiscoverMainContentProps) => {
   const services = useDiscoverServices();
   const { trackUiMetric } = services;
@@ -87,6 +93,7 @@ export const DiscoverMainContent = ({
 
   const {
     topPanelHeight,
+    request,
     hits,
     chart,
     breakdown,
@@ -95,6 +102,7 @@ export const DiscoverMainContent = ({
     onChartHiddenChange,
     onTimeIntervalChange,
     onBreakdownFieldChange,
+    onTotalHitsChange,
   } = useDiscoverHistogram({
     stateContainer,
     state,
@@ -103,6 +111,8 @@ export const DiscoverMainContent = ({
     savedSearch,
     isTimeBased,
     isPlainRecord,
+    inspectorAdapters,
+    searchSessionManager,
   });
 
   const resetSearchButtonWrapper = css`
@@ -114,6 +124,7 @@ export const DiscoverMainContent = ({
       className="dscPageContent__inner"
       services={services}
       dataView={dataView}
+      request={request}
       hits={hits}
       chart={chart}
       breakdown={breakdown}
@@ -144,6 +155,7 @@ export const DiscoverMainContent = ({
       onChartHiddenChange={onChartHiddenChange}
       onTimeIntervalChange={onTimeIntervalChange}
       onBreakdownFieldChange={onBreakdownFieldChange}
+      onTotalHitsChange={onTotalHitsChange}
     >
       <EuiFlexGroup
         className="eui-fullHeight"

src/plugins/discover/public/application/main/components/layout/types.ts

@@ -14,6 +14,7 @@ import { SavedSearch } from '@kbn/saved-search-plugin/public';
 import { DataTableRecord } from '../../../../types';
 import { AppState, GetStateReturn } from '../../services/discover_state';
 import { DataRefetch$, SavedSearchData } from '../../hooks/use_saved_search';
+import type { DiscoverSearchSessionManager } from '../../services/discover_search_session';
 
 export interface DiscoverLayoutProps {
   dataView: DataView;
@@ -37,4 +38,5 @@ export interface DiscoverLayoutProps {
   persistDataView: (dataView: DataView) => Promise<DataView | undefined>;
   updateAdHocDataViewId: (dataView: DataView) => Promise<DataView>;
   adHocDataViewList: DataView[];
+  searchSessionManager: DiscoverSearchSessionManager;
 }

src/plugins/discover/public/application/main/components/layout/use_discover_histogram.ts

@@ -13,12 +13,17 @@ import {
   triggerVisualizeActions,
 } from '@kbn/unified-field-list-plugin/public';
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { UnifiedHistogramFetchStatus } from '@kbn/unified-histogram-plugin/public';
+import type { RequestAdapter } from '@kbn/inspector-plugin/public';
+import useDebounce from 'react-use/lib/useDebounce';
 import { getUiActions } from '../../../../kibana_services';
 import { PLUGIN_ID } from '../../../../../common';
 import { useDiscoverServices } from '../../../../hooks/use_discover_services';
 import { useDataState } from '../../hooks/use_data_state';
 import type { SavedSearchData } from '../../hooks/use_saved_search';
 import type { AppState, GetStateReturn } from '../../services/discover_state';
+import { FetchStatus } from '../../../types';
+import type { DiscoverSearchSessionManager } from '../../services/discover_search_session';
 
 export const CHART_HIDDEN_KEY = 'discover:chartHidden';
 export const HISTOGRAM_HEIGHT_KEY = 'discover:histogramHeight';
@@ -32,6 +37,8 @@ export const useDiscoverHistogram = ({
   savedSearch,
   isTimeBased,
   isPlainRecord,
+  inspectorAdapters,
+  searchSessionManager,
 }: {
   stateContainer: GetStateReturn;
   state: AppState;
@@ -40,6 +47,8 @@ export const useDiscoverHistogram = ({
   savedSearch: SavedSearch;
   isTimeBased: boolean;
   isPlainRecord: boolean;
+  inspectorAdapters: { requests: RequestAdapter };
+  searchSessionManager: DiscoverSearchSessionManager;
 }) => {
   const { storage } = useDiscoverServices();
 
@@ -115,9 +124,60 @@ export const useDiscoverHistogram = ({
   );
 
   /**
-   * Data
+   * Request
    */
 
+  const [lastReloadRequestTime, setLastReloadRequestTime] = useState(0);
+  const { fetchStatus: mainFetchStatus } = useDataState(savedSearchData$.main$);
+
+  // Reload unified histogram when a refetch is triggered,
+  // with a debounce to avoid multiple requests
+  const [, cancelDebounce] = useDebounce(
+    () => {
+      if (mainFetchStatus === FetchStatus.LOADING) {
+        setLastReloadRequestTime(Date.now());
+      }
+    },
+    100,
+    [mainFetchStatus]
+  );
+
+  // A refetch is triggered when the data view is changed,
+  // but we don't want to reload unified histogram in this case,
+  // so cancel the debounced effect on unmount
+  useEffect(() => cancelDebounce, [cancelDebounce]);
+
+  const searchSessionId = searchSessionManager.getLastSearchSessionId();
+  const request = useMemo(
+    () => ({
+      searchSessionId,
+      adapter: inspectorAdapters.requests,
+      lastReloadRequestTime,
+    }),
+    [inspectorAdapters.requests, lastReloadRequestTime, searchSessionId]
+  );
+
+  /**
+   * Total hits
+   */
+
+  const onTotalHitsChange = useCallback(
+    (status: UnifiedHistogramFetchStatus, totalHits?: number) => {
+      const { fetchStatus, recordRawType } = savedSearchData$.totalHits$.getValue();
+
+      if (fetchStatus === 'partial' && status === 'loading') {
+        return;
+      }
+
+      savedSearchData$.totalHits$.next({
+        fetchStatus: status as FetchStatus,
+        result: totalHits,
+        recordRawType,
+      });
+    },
+    [savedSearchData$.totalHits$]
+  );
+
   const { fetchStatus: hitsFetchStatus, result: hitsTotal } = useDataState(
     savedSearchData$.totalHits$
   );
@@ -133,6 +193,10 @@ export const useDiscoverHistogram = ({
     [hitsFetchStatus, hitsTotal, isPlainRecord]
   );
 
+  /**
+   * Chart
+   */
+
   const chart = useMemo(
     () =>
       isPlainRecord || !isTimeBased
@@ -168,6 +232,7 @@ export const useDiscoverHistogram = ({
 
   return {
     topPanelHeight,
+    request,
     hits,
     chart,
     breakdown,
@@ -176,5 +241,6 @@ export const useDiscoverHistogram = ({
     onChartHiddenChange,
     onTimeIntervalChange,
     onBreakdownFieldChange,
+    onTotalHitsChange,
   };
 };

src/plugins/discover/public/application/main/discover_main_app.tsx

@@ -62,6 +62,7 @@ export function DiscoverMainApp(props: DiscoverMainProps) {
     state,
     stateContainer,
     adHocDataViewList,
+    searchSessionManager,
   } = useDiscoverState({
     services,
     history: usedHistory,
@@ -121,6 +122,7 @@ export function DiscoverMainApp(props: DiscoverMainProps) {
         persistDataView={persistDataView}
         updateAdHocDataViewId={updateAdHocDataViewId}
         adHocDataViewList={adHocDataViewList}
+        searchSessionManager={searchSessionManager}
       />
     </DiscoverAppStateProvider>
   );

src/plugins/discover/public/application/main/hooks/use_discover_state.ts

@@ -308,5 +308,6 @@ export function useDiscoverState({
     adHocDataViewList,
     persistDataView,
     updateAdHocDataViewId,
+    searchSessionManager,
   };
 }

src/plugins/discover/public/application/main/hooks/use_saved_search.ts

@@ -36,7 +36,6 @@ export interface SavedSearchData {
 export type DataMain$ = BehaviorSubject<DataMainMsg>;
 export type DataDocuments$ = BehaviorSubject<DataDocumentsMsg>;
 export type DataTotalHits$ = BehaviorSubject<DataTotalHitsMsg>;
-export type DataCharts$ = BehaviorSubject<DataChartsMessage>;
 export type AvailableFields$ = BehaviorSubject<DataAvailableFieldsMsg>;
 
 export type DataRefetch$ = Subject<DataRefetchMsg>;
@@ -125,18 +124,16 @@ export const useSavedSearch = ({
   const main$: DataMain$ = useBehaviorSubject(initialState) as DataMain$;
   const documents$: DataDocuments$ = useBehaviorSubject(initialState) as DataDocuments$;
   const totalHits$: DataTotalHits$ = useBehaviorSubject(initialState) as DataTotalHits$;
-  const charts$: DataCharts$ = useBehaviorSubject(initialState) as DataCharts$;
   const availableFields$: AvailableFields$ = useBehaviorSubject(initialState) as AvailableFields$;
 
   const dataSubjects = useMemo(() => {
     return {
       main$,
       documents$,
       totalHits$,
-      charts$,
       availableFields$,
     };
-  }, [main$, charts$, documents$, totalHits$, availableFields$]);
+  }, [main$, documents$, totalHits$, availableFields$]);
 
   /**
    * The observable to trigger data fetching in UI

src/plugins/discover/public/application/main/hooks/use_saved_search_messages.ts

@@ -6,14 +6,13 @@
  * Side Public License, v 1.
  */
 
-import { AggregateQuery, Query } from '@kbn/es-query';
+import type { BehaviorSubject } from 'rxjs';
 import { FetchStatus } from '../../types';
-import {
-  DataCharts$,
+import type {
   DataDocuments$,
   DataMain$,
+  DataMsg,
   DataTotalHits$,
-  RecordRawType,
   SavedSearchData,
 } from './use_saved_search';
 
@@ -60,27 +59,22 @@ export function sendPartialMsg(main$: DataMain$) {
 /**
  * Send LOADING message via main observable
  */
-export function sendLoadingMsg(
-  data$: DataMain$ | DataDocuments$ | DataTotalHits$ | DataCharts$,
-  recordRawType: RecordRawType,
-  query?: AggregateQuery | Query
+export function sendLoadingMsg<T extends DataMsg>(
+  data$: BehaviorSubject<T>,
+  props: Omit<T, 'fetchStatus'>
 ) {
   if (data$.getValue().fetchStatus !== FetchStatus.LOADING) {
     data$.next({
+      ...props,
       fetchStatus: FetchStatus.LOADING,
-      recordRawType,
-      query,
-    });
+    } as T);
   }
 }
 
 /**
  * Send ERROR message
  */
-export function sendErrorMsg(
-  data$: DataMain$ | DataDocuments$ | DataTotalHits$ | DataCharts$,
-  error: Error
-) {
+export function sendErrorMsg(data$: DataMain$ | DataDocuments$ | DataTotalHits$, error: Error) {
   const recordRawType = data$.getValue().recordRawType;
   data$.next({
     fetchStatus: FetchStatus.ERROR,

src/plugins/discover/public/application/main/services/discover_search_session.test.ts

@@ -28,6 +28,7 @@ describe('DiscoverSearchSessionManager', () => {
       const id = searchSessionManager.getNextSearchSessionId();
       expect(id).toEqual(nextId);
       expect(session.start).toBeCalled();
+      expect(searchSessionManager.getLastSearchSessionId()).toEqual(id);
     });
 
     test('restores a session using query param from the URL', () => {