diff --git a/src/plugins/discover/public/application/main/components/layout/get_debounced_histogram_props.ts b/src/plugins/discover/public/application/main/components/layout/get_debounced_histogram_props.ts new file mode 100644 index 0000000000000..d9ba029cfdc03 --- /dev/null +++ b/src/plugins/discover/public/application/main/components/layout/get_debounced_histogram_props.ts @@ -0,0 +1,44 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the "Elastic License + * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side + * Public License v 1"; you may not use this file except in compliance with, at + * your election, the "Elastic License 2.0", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import { Ref } from 'react'; +import { debounce } from 'lodash'; +import type { + UnifiedHistogramContainerProps, + UnifiedHistogramApi, +} from '@kbn/unified-histogram-plugin/public'; + +type Props = Omit & { + ref: Ref; +}; +let debouncedProps: Props | undefined; + +const updateDebouncedProps = debounce( + (props: Props) => { + // console.log('updated props', props.timeRange, props.filters?.length); + debouncedProps = props; + }, + 100, + { leading: false, trailing: true } +); + +export const getDebouncedHistogramProps = (props: Props): Props => { + if (!debouncedProps) { + debouncedProps = props; + } else { + // console.log('next props', props.timeRange, props.filters?.length); + updateDebouncedProps(props); + } + + return debouncedProps; +}; + +export const clearDebouncedHistogramProps = () => { + debouncedProps = undefined; +}; 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 66b5be4d02ab7..a4a620dca3815 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 @@ -45,6 +45,10 @@ import type { DiscoverAppState } from '../../state_management/discover_app_state import { DataDocumentsMsg } from '../../state_management/discover_data_state_container'; import { useSavedSearch } from '../../state_management/discover_state_provider'; import { useIsEsqlMode } from '../../hooks/use_is_esql_mode'; +import { + getDebouncedHistogramProps, + clearDebouncedHistogramProps, +} from './get_debounced_histogram_props'; const EMPTY_ESQL_COLUMNS: DatatableColumn[] = []; const EMPTY_FILTERS: Filter[] = []; @@ -381,7 +385,13 @@ export const useDiscoverHistogram = ({ [stateContainer] ); - return { + useEffect(() => { + return () => { + clearDebouncedHistogramProps(); + }; + }, []); + + return getDebouncedHistogramProps({ ref, getCreationOptions, services, @@ -402,7 +412,7 @@ export const useDiscoverHistogram = ({ ? savedSearchState?.visContext : undefined, onVisContextChanged: isEsqlMode ? onVisContextChanged : undefined, - }; + }); }; // Use pairwise to diff the previous and current state (starting with undefined to ensure