From 97b952b0e1e7decbd5f3bd97641a4b121bcfc95e Mon Sep 17 00:00:00 2001
From: Dima Arnautov <dmitrii.arnautov@elastic.co>
Date: Wed, 9 Jun 2021 16:08:08 +0200
Subject: [PATCH] [ML] Add debounce to the severity control update  (#101581)

---
 .../application/explorer/anomaly_timeline.tsx | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx b/x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx
index 8375b0a0b1dfc..d20042ddd9443 100644
--- a/x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx
+++ b/x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx
@@ -8,20 +8,21 @@
 import React, { FC, useCallback, useMemo, useState } from 'react';
 import { isEqual } from 'lodash';
 import {
-  EuiPanel,
-  EuiPopover,
-  EuiContextMenuPanel,
+  EuiButtonEmpty,
   EuiButtonIcon,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiPanel,
+  EuiPopover,
   EuiSelect,
-  EuiTitle,
   EuiSpacer,
-  EuiContextMenuItem,
-  EuiButtonEmpty,
+  EuiTitle,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
+import useDebounce from 'react-use/lib/useDebounce';
 import { OVERALL_LABEL, SWIMLANE_TYPE, VIEW_BY_JOB_LABEL } from './explorer_constants';
 import { AddSwimlaneToDashboardControl } from './dashboard_controls/add_swimlane_to_dashboard_controls';
 import { useMlKibana } from '../contexts/kibana';
@@ -93,6 +94,18 @@ export const AnomalyTimeline: FC<AnomalyTimelineProps> = React.memo(
       viewBySwimlaneData,
     } = explorerState;
 
+    const [severityUpdate, setSeverityUpdate] = useState(swimLaneSeverity);
+
+    useDebounce(
+      () => {
+        if (severityUpdate === swimLaneSeverity) return;
+
+        explorerService.setSwimLaneSeverity(severityUpdate!);
+      },
+      500,
+      [severityUpdate, swimLaneSeverity]
+    );
+
     const annotations = useMemo(() => overallAnnotations.annotationsData, [overallAnnotations]);
 
     const menuItems = useMemo(() => {
@@ -194,9 +207,9 @@ export const AnomalyTimeline: FC<AnomalyTimelineProps> = React.memo(
 
             <EuiFlexItem grow={true}>
               <SeverityControl
-                value={swimLaneSeverity ?? 0}
+                value={severityUpdate ?? 0}
                 onChange={useCallback((update) => {
-                  explorerService.setSwimLaneSeverity(update);
+                  setSeverityUpdate(update);
                 }, [])}
               />
             </EuiFlexItem>