diff --git a/src/plugins/discover/public/application/main/components/layout/use_discover_histogram.ts b/src/plugins/discover/public/application/main/components/layout/use_discover_histogram.ts index 1ebeb8d7d1b7f..f73b2d98ea7c7 100644 --- a/src/plugins/discover/public/application/main/components/layout/use_discover_histogram.ts +++ b/src/plugins/discover/public/application/main/components/layout/use_discover_histogram.ts @@ -62,6 +62,7 @@ export const useDiscoverHistogram = ({ }: UseDiscoverHistogramProps) => { const services = useDiscoverServices(); const savedSearchData$ = stateContainer.dataState.data$; + const savedSearchHits$ = savedSearchData$.totalHits$; const savedSearchState = useSavedSearch(); const isEsqlMode = useIsEsqlMode(); @@ -153,10 +154,7 @@ export const useDiscoverHistogram = ({ * Total hits */ - const setTotalHitsError = useMemo( - () => sendErrorTo(savedSearchData$.totalHits$), - [savedSearchData$.totalHits$] - ); + const setTotalHitsError = useMemo(() => sendErrorTo(savedSearchHits$), [savedSearchHits$]); useEffect(() => { const subscription = createTotalHitsObservable(unifiedHistogram?.state$)?.subscribe( @@ -172,7 +170,7 @@ export const useDiscoverHistogram = ({ return; } - const { result: totalHitsResult } = savedSearchData$.totalHits$.getValue(); + const { result: totalHitsResult } = savedSearchHits$.getValue(); if ( (status === UnifiedHistogramFetchStatus.loading || @@ -184,11 +182,34 @@ export const useDiscoverHistogram = ({ return; } - // Sync the totalHits$ observable with the unified histogram state - savedSearchData$.totalHits$.next({ - fetchStatus: status.toString() as FetchStatus, - result, - }); + const fetchStatus = status.toString() as FetchStatus; + if ( + fetchStatus === FetchStatus.COMPLETE && + savedSearchHits$.getValue().fetchStatus === FetchStatus.COMPLETE && + result !== savedSearchHits$.getValue().result + ) { + // this is a workaround to make sure the new total hits value is displayed + // a different value without a loading state in between would lead to be ignored by useDataState + addLog( + '[UnifiedHistogram] send loading to totalHits$ to make sure the new value is displayed', + { status, result } + ); + savedSearchHits$.next({ + fetchStatus: FetchStatus.LOADING, + }); + } + + const isSavedSearchLoading = + savedSearchHits$.getValue().fetchStatus === FetchStatus.LOADING; + const isUnifiedHistogramLoading = status === UnifiedHistogramFetchStatus.loading; + + // Sync the totalHits$ observable with the unified histogram state unless both are set to loading + if (isSavedSearchLoading !== isUnifiedHistogramLoading) { + savedSearchHits$.next({ + fetchStatus, + result, + }); + } if (status !== UnifiedHistogramFetchStatus.complete || typeof result !== 'number') { return; @@ -205,7 +226,7 @@ export const useDiscoverHistogram = ({ }, [ isEsqlMode, savedSearchData$.main$, - savedSearchData$.totalHits$, + savedSearchHits$, setTotalHitsError, stateContainer.appState, unifiedHistogram?.state$, diff --git a/src/plugins/discover/public/application/main/data_fetching/fetch_all.ts b/src/plugins/discover/public/application/main/data_fetching/fetch_all.ts index 660dff3bdb4ff..63479a5a884a5 100644 --- a/src/plugins/discover/public/application/main/data_fetching/fetch_all.ts +++ b/src/plugins/discover/public/application/main/data_fetching/fetch_all.ts @@ -98,6 +98,8 @@ export function fetchAll( sendLoadingMsg(dataSubjects.totalHits$, { result: dataSubjects.totalHits$.getValue().result, }); + } else { + sendLoadingMsg(dataSubjects.totalHits$); } // Start fetching all required requests diff --git a/src/plugins/discover/public/application/main/state_management/discover_data_state_container.ts b/src/plugins/discover/public/application/main/state_management/discover_data_state_container.ts index ce7f820aa3cdd..4d01c2b72d327 100644 --- a/src/plugins/discover/public/application/main/state_management/discover_data_state_container.ts +++ b/src/plugins/discover/public/application/main/state_management/discover_data_state_container.ts @@ -185,6 +185,12 @@ export function getDataStateContainer({ documents$: new BehaviorSubject(initialState), totalHits$: new BehaviorSubject(initialState), }; + // This is debugging code, helping you to understand which messages are sent to the data observables + // Adding a debugger in the functions can be helpful to understand what triggers a message + // dataSubjects.main$.subscribe((msg) => addLog('dataSubjects.main$', msg)); + // dataSubjects.documents$.subscribe((msg) => addLog('dataSubjects.documents$', msg)); + // dataSubjects.totalHits$.subscribe((msg) => addLog('dataSubjects.totalHits$', msg);); + // Add window.ELASTIC_DISCOVER_LOGGER = 'debug' to see messages in console let autoRefreshDone: AutoRefreshDoneFn | undefined | null = null; /**