From bcf13a3dc165dfaab3e1bc24fd730e5cb4423ea5 Mon Sep 17 00:00:00 2001
From: Dima Arnautov <dmitrii.arnautov@elastic.co>
Date: Thu, 16 Jul 2020 18:40:58 +0200
Subject: [PATCH 1/3] [ML] remove selector element on unmount

---
 .../public/application/explorer/explorer_swimlane.tsx  | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.tsx b/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.tsx
index 926f38ac8b552..35ed7fd7cd8d4 100644
--- a/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.tsx
+++ b/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.tsx
@@ -211,11 +211,11 @@ export class ExplorerSwimlane extends React.Component<ExplorerSwimlaneProps> {
   }
 
   componentWillUnmount() {
-    if (this.dragSelectSubscriber !== null) {
-      this.dragSelectSubscriber.unsubscribe();
-    }
-    const element = d3.select(this.rootNode.current!);
-    element.html('');
+    this.dragSelectSubscriber!.unsubscribe();
+    // Remove selector element from DOM
+    this.dragSelect.selector.remove();
+    // removes all mousedown event handlers
+    this.dragSelect.stop(true);
   }
 
   selectCell(cellsToSelect: any[], { laneLabels, bucketScore, times }: SelectedData) {

From dec9d6cee275477ac704a5516741712db196188e Mon Sep 17 00:00:00 2001
From: Dima Arnautov <dmitrii.arnautov@elastic.co>
Date: Fri, 17 Jul 2020 14:27:51 +0200
Subject: [PATCH 2/3] [ML] stop handler on mount

---
 .../public/application/explorer/explorer_swimlane.tsx  | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.tsx b/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.tsx
index 35ed7fd7cd8d4..a37a309343e92 100644
--- a/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.tsx
+++ b/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.tsx
@@ -10,7 +10,7 @@
 
 import React from 'react';
 import './_explorer.scss';
-import _, { isEqual } from 'lodash';
+import _, { isEqual, throttle } from 'lodash';
 import d3 from 'd3';
 import moment from 'moment';
 import DragSelect from 'dragselect';
@@ -204,6 +204,8 @@ export class ExplorerSwimlane extends React.Component<ExplorerSwimlaneProps> {
     });
 
     this.renderSwimlane();
+
+    this.dragSelect.stop();
   }
 
   componentDidUpdate() {
@@ -735,14 +737,16 @@ export class ExplorerSwimlane extends React.Component<ExplorerSwimlaneProps> {
     }
   }
 
+  throttledSetSwimLaneActive = throttle(this.setSwimlaneSelectActive, 500);
+
   render() {
     const { swimlaneType } = this.props;
 
     return (
       <div
         className="mlExplorerSwimlane"
-        onMouseEnter={this.setSwimlaneSelectActive.bind(this, true)}
-        onMouseLeave={this.setSwimlaneSelectActive.bind(this, false)}
+        onMouseEnter={this.throttledSetSwimLaneActive.bind(this, true)}
+        onMouseLeave={this.throttledSetSwimLaneActive.bind(this, false)}
         data-test-subj={this.props['data-test-subj'] ?? null}
       >
         <div

From 1d8decd68f79e5d5c779f6ff5745a900d0a37a85 Mon Sep 17 00:00:00 2001
From: Dima Arnautov <dmitrii.arnautov@elastic.co>
Date: Fri, 17 Jul 2020 15:08:13 +0200
Subject: [PATCH 3/3] [ML] remove throttling

---
 .../ml/public/application/explorer/explorer_swimlane.tsx  | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.tsx b/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.tsx
index a37a309343e92..2590ab2f1cb23 100644
--- a/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.tsx
+++ b/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.tsx
@@ -10,7 +10,7 @@
 
 import React from 'react';
 import './_explorer.scss';
-import _, { isEqual, throttle } from 'lodash';
+import _, { isEqual } from 'lodash';
 import d3 from 'd3';
 import moment from 'moment';
 import DragSelect from 'dragselect';
@@ -737,16 +737,14 @@ export class ExplorerSwimlane extends React.Component<ExplorerSwimlaneProps> {
     }
   }
 
-  throttledSetSwimLaneActive = throttle(this.setSwimlaneSelectActive, 500);
-
   render() {
     const { swimlaneType } = this.props;
 
     return (
       <div
         className="mlExplorerSwimlane"
-        onMouseEnter={this.throttledSetSwimLaneActive.bind(this, true)}
-        onMouseLeave={this.throttledSetSwimLaneActive.bind(this, false)}
+        onMouseEnter={this.setSwimlaneSelectActive.bind(this, true)}
+        onMouseLeave={this.setSwimlaneSelectActive.bind(this, false)}
         data-test-subj={this.props['data-test-subj'] ?? null}
       >
         <div