From dddeec51b72bb9cd49e3b8eccfc7004ba983da0d Mon Sep 17 00:00:00 2001
From: Dima Arnautov <dmitrii.arnautov@elastic.co>
Date: Thu, 7 May 2020 11:52:28 +0200
Subject: [PATCH] [ML] Fix the limit control on the Anomaly explorer page
 (#65459)

* [ML] persist limit control value

* [ML] remove console statement

* [ML] fix default value
---
 .../plugins/ml/public/application/explorer/explorer.js   | 9 ++-------
 .../explorer/select_limit/select_limit.test.tsx          | 2 --
 .../application/explorer/select_limit/select_limit.tsx   | 6 +++---
 3 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/explorer/explorer.js b/x-pack/plugins/ml/public/application/explorer/explorer.js
index 86d16776b68e..36dac05add55 100644
--- a/x-pack/plugins/ml/public/application/explorer/explorer.js
+++ b/x-pack/plugins/ml/public/application/explorer/explorer.js
@@ -14,7 +14,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import DragSelect from 'dragselect/dist/ds.min.js';
 import { Subject } from 'rxjs';
-import { map, takeUntil } from 'rxjs/operators';
+import { takeUntil } from 'rxjs/operators';
 
 import {
   EuiFlexGroup,
@@ -169,12 +169,7 @@ export class Explorer extends React.Component {
   };
 
   componentDidMount() {
-    limit$
-      .pipe(
-        takeUntil(this._unsubscribeAll),
-        map(d => d.val)
-      )
-      .subscribe(explorerService.setSwimlaneLimit);
+    limit$.pipe(takeUntil(this._unsubscribeAll)).subscribe(explorerService.setSwimlaneLimit);
 
     // Required to redraw the time series chart when the container is resized.
     this.resizeChecker = new ResizeChecker(this.resizeRef.current);
diff --git a/x-pack/plugins/ml/public/application/explorer/select_limit/select_limit.test.tsx b/x-pack/plugins/ml/public/application/explorer/select_limit/select_limit.test.tsx
index 657f1c6c7af2..cf65419e4bd8 100644
--- a/x-pack/plugins/ml/public/application/explorer/select_limit/select_limit.test.tsx
+++ b/x-pack/plugins/ml/public/application/explorer/select_limit/select_limit.test.tsx
@@ -9,8 +9,6 @@ import { act } from 'react-dom/test-utils';
 import { shallow } from 'enzyme';
 import { SelectLimit } from './select_limit';
 
-jest.useFakeTimers();
-
 describe('SelectLimit', () => {
   test('creates correct initial selected value', () => {
     const wrapper = shallow(<SelectLimit />);
diff --git a/x-pack/plugins/ml/public/application/explorer/select_limit/select_limit.tsx b/x-pack/plugins/ml/public/application/explorer/select_limit/select_limit.tsx
index 383d07eb7a9f..03e3273b8083 100644
--- a/x-pack/plugins/ml/public/application/explorer/select_limit/select_limit.tsx
+++ b/x-pack/plugins/ml/public/application/explorer/select_limit/select_limit.tsx
@@ -9,7 +9,7 @@
  */
 import React from 'react';
 import useObservable from 'react-use/lib/useObservable';
-import { Subject } from 'rxjs';
+import { BehaviorSubject } from 'rxjs';
 
 import { EuiSelect } from '@elastic/eui';
 
@@ -20,13 +20,13 @@ const euiOptions = limitOptions.map(limit => ({
   text: `${limit}`,
 }));
 
-export const limit$ = new Subject<number>();
 export const defaultLimit = limitOptions[1];
+export const limit$ = new BehaviorSubject<number>(defaultLimit);
 
 export const useSwimlaneLimit = (): [number, (newLimit: number) => void] => {
   const limit = useObservable(limit$, defaultLimit);
 
-  return [limit, (newLimit: number) => limit$.next(newLimit)];
+  return [limit!, (newLimit: number) => limit$.next(newLimit)];
 };
 
 export const SelectLimit = () => {