From a2be0c5eab2ad84947623455d5ea27f8da0db188 Mon Sep 17 00:00:00 2001
From: Julia Rechkunova <julia.rechkunova@elastic.co>
Date: Wed, 13 Nov 2024 17:29:02 +0100
Subject: [PATCH] [Discover] Experiment with debounced UnifiedHistogram props

---
 .../layout/get_debounced_histogram_props.ts   | 44 +++++++++++++++++++
 .../layout/use_discover_histogram.ts          | 14 +++++-
 2 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 src/plugins/discover/public/application/main/components/layout/get_debounced_histogram_props.ts

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<UnifiedHistogramContainerProps, 'container'> & {
+  ref: Ref<UnifiedHistogramApi>;
+};
+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