[Discover] Fix redundant request when toggling histogram

src/plugins/discover/public/application/main/components/layout/discover_documents.test.tsx

@@ -45,6 +45,17 @@ async function mountComponent(fetchStatus: FetchStatus, hits: EsHitRecord[]) {
   stateContainer.appState.update({
     dataSource: createDataViewDataSource({ dataViewId: dataViewMock.id! }),
   });
+  stateContainer.internalState.transitions.setDataRequestParams({
+    timeRangeRelative: {
+      from: '2020-05-14T11:05:13.590',
+      to: '2020-05-14T11:20:13.590',
+    },
+    timeRangeAbsolute: {
+      from: '2020-05-14T11:05:13.590',
+      to: '2020-05-14T11:20:13.590',
+    },
+  });
+
   stateContainer.dataState.data$.documents$ = documents$;
 
   const props = {

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

@@ -46,7 +46,6 @@ import useObservable from 'react-use/lib/useObservable';
 import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import { DiscoverGridSettings } from '@kbn/saved-search-plugin/common';
 import { useQuerySubscriber } from '@kbn/unified-field-list';
-import { map } from 'rxjs';
 import { DiscoverGrid } from '../../../../components/discover_grid';
 import { getDefaultRowsPerPage } from '../../../../../common/constants';
 import { useInternalStateSelector } from '../../state_management/discover_internal_state_container';
@@ -112,6 +111,7 @@ function DiscoverDocumentsComponent({
   const documents$ = stateContainer.dataState.data$.documents$;
   const savedSearch = useSavedSearchInitial();
   const { dataViews, capabilities, uiSettings, uiActions, ebtManager, fieldsMetadata } = services;
+  const requestParams = useInternalStateSelector((state) => state.dataRequestParams);
   const [
     dataSource,
     query,
@@ -269,20 +269,14 @@ function DiscoverDocumentsComponent({
         : undefined,
     [documentState.esqlQueryColumns]
   );
-
   const { filters } = useQuerySubscriber({ data: services.data });
 
-  const timeRange = useObservable(
-    services.timefilter.getTimeUpdate$().pipe(map(() => services.timefilter.getTime())),
-    services.timefilter.getTime()
-  );
-
   const cellActionsMetadata = useAdditionalCellActions({
     dataSource,
     dataView,
     query,
     filters,
-    timeRange,
+    timeRange: requestParams.timeRangeAbsolute,
   });
 
   const renderDocumentView = useCallback(

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

@@ -38,20 +38,30 @@ import { createDataViewDataSource } from '../../../../../common/data_sources';
 function getStateContainer(savedSearch?: SavedSearch) {
   const stateContainer = getDiscoverStateMock({ isTimeBased: true, savedSearch });
   const dataView = savedSearch?.searchSource?.getField('index') as DataView;
-
-  stateContainer.appState.update({
+  const appState = {
     dataSource: createDataViewDataSource({ dataViewId: dataView?.id! }),
     interval: 'auto',
     hideChart: false,
-  });
+  };
+
+  stateContainer.appState.update(appState);
 
   stateContainer.internalState.transitions.setDataView(dataView);
+  stateContainer.internalState.transitions.setDataRequestParams({
+    timeRangeAbsolute: {
+      from: '2020-05-14T11:05:13.590',
+      to: '2020-05-14T11:20:13.590',
+    },
+    timeRangeRelative: {
+      from: '2020-05-14T11:05:13.590',
+      to: '2020-05-14T11:20:13.590',
+    },
+  });
 
   return stateContainer;
 }
 
 const mountComponent = async ({
-  isEsqlMode = false,
   storage,
   savedSearch = savedSearchMockWithTimeField,
   searchSessionId = '123',
@@ -65,16 +75,7 @@ const mountComponent = async ({
   const dataView = savedSearch?.searchSource?.getField('index') as DataView;
 
   let services = discoverServiceMock;
-  services.data.query.timefilter.timefilter.getAbsoluteTime = () => {
-    return { from: '2020-05-14T11:05:13.590', to: '2020-05-14T11:20:13.590' };
-  };
-  services.data.query.timefilter.timefilter.getTime = () => {
-    return { from: '2020-05-14T11:05:13.590', to: '2020-05-14T11:20:13.590' };
-  };
-  (services.data.query.queryString.getDefaultQuery as jest.Mock).mockReturnValue({
-    language: 'kuery',
-    query: '',
-  });
+
   (searchSourceInstanceMock.fetch$ as jest.Mock).mockImplementation(
     jest.fn().mockReturnValue(of({ rawResponse: { hits: { total: 2 } } }))
   );
@@ -176,8 +177,6 @@ describe('Discover histogram layout component', () => {
       const { component } = await mountComponent();
       expect(component.find(PanelsToggle).first().prop('isChartAvailable')).toBe(undefined);
       expect(component.find(PanelsToggle).first().prop('renderedFor')).toBe('histogram');
-      expect(component.find(PanelsToggle).last().prop('isChartAvailable')).toBe(true);
-      expect(component.find(PanelsToggle).last().prop('renderedFor')).toBe('tabs');
     });
   });
 });

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

@@ -75,6 +75,18 @@ export const DiscoverHistogramLayout = ({
   if (!searchSessionId && !isEsqlMode) {
     return null;
   }
+  if (hideChart) {
+    return (
+      <>
+        <DiscoverMainContent
+          {...mainContentProps}
+          stateContainer={stateContainer}
+          dataView={dataView}
+          panelsToggle={renderCustomChartToggleActions()}
+        />
+      </>
+    );
+  }
 
   return (
     <UnifiedHistogramContainer

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

@@ -104,6 +104,10 @@ async function mountComponent(
     query,
   });
   stateContainer.internalState.transitions.setDataView(dataView);
+  stateContainer.internalState.transitions.setDataRequestParams({
+    timeRangeAbsolute: time,
+    timeRangeRelative: time,
+  });
 
   const props = {
     dataView,

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

@@ -160,22 +160,19 @@ describe('Discover main content component', () => {
 
     it('should include PanelsToggle when chart is available', async () => {
       const component = await mountComponent({ isChartAvailable: true });
-      expect(component.find(PanelsToggle).prop('isChartAvailable')).toBe(true);
-      expect(component.find(PanelsToggle).prop('renderedFor')).toBe('tabs');
+      expect(component.find(PanelsToggle).prop('renderedFor')).toBe('root');
       expect(component.find(EuiHorizontalRule).exists()).toBe(true);
     });
 
     it('should include PanelsToggle when chart is available and hidden', async () => {
       const component = await mountComponent({ isChartAvailable: true, hideChart: true });
-      expect(component.find(PanelsToggle).prop('isChartAvailable')).toBe(true);
-      expect(component.find(PanelsToggle).prop('renderedFor')).toBe('tabs');
+      expect(component.find(PanelsToggle).prop('renderedFor')).toBe('root');
       expect(component.find(EuiHorizontalRule).exists()).toBe(false);
     });
 
     it('should include PanelsToggle when chart is not available', async () => {
       const component = await mountComponent({ isChartAvailable: false });
-      expect(component.find(PanelsToggle).prop('isChartAvailable')).toBe(false);
-      expect(component.find(PanelsToggle).prop('renderedFor')).toBe('tabs');
+      expect(component.find(PanelsToggle).prop('renderedFor')).toBe('root');
       expect(component.find(EuiHorizontalRule).exists()).toBe(false);
     });
   });

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

@@ -106,23 +106,11 @@ export const DiscoverMainContent = ({
           setDiscoverViewMode={setDiscoverViewMode}
           patternCount={patternCount}
           dataView={dataView}
-          prepend={
-            React.isValidElement(panelsToggle)
-              ? React.cloneElement(panelsToggle, { renderedFor: 'tabs', isChartAvailable })
-              : undefined
-          }
+          prepend={panelsToggle}
         />
       );
     },
-    [
-      viewMode,
-      isEsqlMode,
-      stateContainer,
-      setDiscoverViewMode,
-      dataView,
-      panelsToggle,
-      isChartAvailable,
-    ]
+    [viewMode, isEsqlMode, stateContainer, setDiscoverViewMode, dataView, panelsToggle]
   );
 
   const viewModeToggle = useMemo(() => renderViewModeToggle(), [renderViewModeToggle]);

src/plugins/discover/public/application/main/components/layout/use_discover_histogram.test.tsx

@@ -379,6 +379,23 @@ describe('useDiscoverHistogram', () => {
       });
       expect(hook.result.current.isChartLoading).toBe(true);
     });
+
+    it('should use timerange + timeRangeRelative + query given by the internalState container', async () => {
+      const fetch$ = new Subject<void>();
+      const stateContainer = getStateContainer();
+      const timeRangeAbs = { from: '2021-05-01T20:00:00Z', to: '2021-05-02T20:00:00Z' };
+      const timeRangeRel = { from: 'now-15m', to: 'now' };
+      stateContainer.internalState.transitions.setDataRequestParams({
+        timeRangeAbsolute: timeRangeAbs,
+        timeRangeRelative: timeRangeRel,
+      });
+      const { hook } = await renderUseDiscoverHistogram({ stateContainer });
+      act(() => {
+        fetch$.next();
+      });
+      expect(hook.result.current.timeRange).toBe(timeRangeAbs);
+      expect(hook.result.current.relativeTimeRange).toBe(timeRangeRel);
+    });
   });
 
   describe('refetching', () => {

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

@@ -217,14 +217,9 @@ export const useDiscoverHistogram = ({
    * Request params
    */
   const { query, filters } = useQuerySubscriber({ data: services.data });
+  const requestParams = useInternalStateSelector((state) => state.dataRequestParams);
   const customFilters = useInternalStateSelector((state) => state.customFilters);
-  const timefilter = services.data.query.timefilter.timefilter;
-  const timeRange = timefilter.getAbsoluteTime();
-  const relativeTimeRange = useObservable(
-    timefilter.getTimeUpdate$().pipe(map(() => timefilter.getTime())),
-    timefilter.getTime()
-  );
-
+  const { timeRangeRelative: relativeTimeRange, timeRangeAbsolute: timeRange } = requestParams;
   // When in ES|QL mode, update the data view, query, and
   // columns only when documents are done fetching so the Lens suggestions
   // don't frequently change, such as when the user modifies the table
@@ -272,15 +267,15 @@ export const useDiscoverHistogram = ({
    * Data fetching
    */
 
-  const skipRefetch = useRef<boolean>();
+  const skipRefetch = useRef<number | undefined>();
 
   // Skip refetching when showing the chart since Lens will
   // automatically fetch when the chart is shown
   useEffect(() => {
     if (skipRefetch.current === undefined) {
-      skipRefetch.current = false;
-    } else {
-      skipRefetch.current = !hideChart;
+      skipRefetch.current = 0;
+    } else if (!hideChart) {
+      skipRefetch.current = 3;
     }
   }, [hideChart]);
 
@@ -309,13 +304,14 @@ export const useDiscoverHistogram = ({
     }
 
     const subscription = fetchChart$.subscribe((source) => {
-      if (!skipRefetch.current) {
+      if (skipRefetch.current === 0) {
         if (source === 'discover') addLog('Unified Histogram - Discover refetch');
         if (source === 'lens') addLog('Unified Histogram - Lens suggestion refetch');
         unifiedHistogram.refetch();
+      } else {
+        addLog('Unified Histogram - Skip refetch');
+        skipRefetch.current = skipRefetch.current! - 1;
       }
-
-      skipRefetch.current = false;
     });
 
     // triggering the initial request for total hits hook
@@ -499,8 +495,25 @@ const createTotalHitsObservable = (state$?: Observable<UnifiedHistogramState>) =
 
 const createCurrentSuggestionObservable = (state$: Observable<UnifiedHistogramState>) => {
   return state$.pipe(
-    map((state) => state.currentSuggestionContext),
-    distinctUntilChanged(isEqual)
+    // Emit the previous and current state as a pair
+    pairwise(),
+    // Filter out the transition where chartHidden changes from false to true
+    filter(([prev, curr]) => {
+      const isTransition = prev.chartHidden && !curr.chartHidden;
+      if (isTransition) {
+        // console.log('Filtered out transition from chartHidden: false to true');
+        return false;
+      }
+      /**
+      const differences = getDifferences(
+        prev.currentSuggestionContext.suggestion,
+        curr.currentSuggestionContext.suggestion
+      );
+      console.log('Differences in currentSuggestionContext:', differences);
+       **/
+
+      return !isEqual(prev.currentSuggestionContext, curr.currentSuggestionContext);
+    })
   );
 };
 

src/plugins/discover/public/application/main/data_fetching/fetch_all.test.ts

@@ -81,6 +81,7 @@ describe('test fetchAll', () => {
           rowHeight: false,
           breakdownField: false,
         },
+        dataRequestParams: {},
       }),
       searchSessionId: '123',
       initialFetchStatus: FetchStatus.UNINITIALIZED,
@@ -273,6 +274,7 @@ describe('test fetchAll', () => {
           rowHeight: false,
           breakdownField: false,
         },
+        dataRequestParams: {},
       }),
     };
     fetchAll(subjects, false, deps);
@@ -396,6 +398,7 @@ describe('test fetchAll', () => {
             rowHeight: false,
             breakdownField: false,
           },
+          dataRequestParams: {},
         }),
       };
       fetchAll(subjects, false, deps);