[ML] Add debounce to the severity control update (#101581)

elastic · Jun 9, 2021 · 97b952b · 97b952b
1 parent 58eb0d4
commit 97b952b
Showing 1 changed file with 21 additions and 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
@@ -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>