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 = 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 = React.memo( { - explorerService.setSwimLaneSeverity(update); + setSeverityUpdate(update); }, [])} />