[ML] Anomaly Explorer: Updates dragSelect to 1.13.1. Fixes reload issue. (#43779)

- Updates the dragSelect library to 1.13.1. 9221622 updates the library. c9a870b fixes a regression caused by the update.
- Fixes an issue where a timefilter refresh would clear a swimlane selection. 3d1c43d removes a duplicate timefilter subscription and changes the triggered event to REDRAW instead of RELOAD (which triggered a full reload and cleared the selection).
- Fixes an issue with timefilter/datepicker: EuiSuperDatePicker checks isPaused only with componentDidMount() so it might miss changing props. The fix in aa9555d works around that by adding a check on the onRefresh() callback.

x-pack/legacy/plugins/ml/public/components/navigation_menu/top_nav/top_nav.tsx

@@ -103,7 +103,13 @@ export const TopNav: FC = () => {
             isAutoRefreshOnly={!isTimeRangeSelectorEnabled}
             refreshInterval={refreshInterval.value}
             onTimeChange={updateFilter}
-            onRefresh={() => mlTimefilterRefresh$.next()}
+            onRefresh={() => {
+              // This check is a workaround to catch a bug in EuiSuperDatePicker which
+              // might not have disabled the refresh interval after a props change.
+              if (!refreshInterval.pause) {
+                mlTimefilterRefresh$.next();
+              }
+            }}
             onRefreshChange={updateInterval}
             recentlyUsedRanges={recentlyUsedRanges}
             dateFormat={dateFormat}

x-pack/legacy/plugins/ml/public/explorer/explorer.js

@@ -267,6 +267,7 @@ export const Explorer = injectI18n(injectObservablesAsProps(
           stateUpdate.indexPattern = indexPattern;
 
           this.updateExplorer(stateUpdate, true);
+          return;
         }
 
         // Listen for changes to job selection.
@@ -313,17 +314,20 @@ export const Explorer = injectI18n(injectObservablesAsProps(
           }
 
           this.updateExplorer(stateUpdate, true);
+          return;
         }
 
         // RELOAD reloads full Anomaly Explorer and clears the selection.
         if (action === EXPLORER_ACTION.RELOAD) {
           this.props.appStateHandler(APP_STATE_ACTION.CLEAR_SELECTION);
           this.updateExplorer({ ...payload, ...getClearedSelectedAnomaliesState() }, true);
+          return;
         }
 
         // REDRAW reloads Anomaly Explorer and tries to retain the selection.
         if (action === EXPLORER_ACTION.REDRAW) {
           this.updateExplorer({}, false);
+          return;
         }
       } else if (this.previousSwimlaneLimit !== this.props.swimlaneLimit) {
         this.previousSwimlaneLimit = this.props.swimlaneLimit;
@@ -903,15 +907,21 @@ export const Explorer = injectI18n(injectObservablesAsProps(
       });
     };
 
+    isSwimlaneSelectActive = false;
     onSwimlaneEnterHandler = () => this.setSwimlaneSelectActive(true);
     onSwimlaneLeaveHandler = () => this.setSwimlaneSelectActive(false);
     setSwimlaneSelectActive = (active) => {
-      if (!active && this.disableDragSelectOnMouseLeave) {
-        this.dragSelect.clearSelection();
+      if (this.isSwimlaneSelectActive && !active && this.disableDragSelectOnMouseLeave) {
         this.dragSelect.stop();
+        this.isSwimlaneSelectActive = active;
         return;
       }
-      this.dragSelect.start();
+      if (!this.isSwimlaneSelectActive && active) {
+        this.dragSelect.start();
+        this.dragSelect.clearSelection();
+        this.dragSelect.setSelectables(document.getElementsByClassName('sl-cell'));
+        this.isSwimlaneSelectActive = active;
+      }
     };
 
     // This queue tracks click events while the swimlanes are loading.

x-pack/legacy/plugins/ml/public/explorer/explorer_controller.js

@@ -198,7 +198,7 @@ module.controller('MlExplorerController', function (
 
   subscriptions.add(mlTimefilterRefresh$.subscribe(() => {
     if ($scope.jobSelectionUpdateInProgress === false) {
-      explorer$.next({ action: EXPLORER_ACTION.RELOAD });
+      explorer$.next({ action: EXPLORER_ACTION.REDRAW });
     }
   }));
 
@@ -209,13 +209,6 @@ module.controller('MlExplorerController', function (
     }
   });
 
-  // Add a watcher for auto-refresh of the time filter to refresh all the data.
-  subscriptions.add(mlTimefilterRefresh$.subscribe(() => {
-    if ($scope.jobSelectionUpdateInProgress === false) {
-      explorer$.next({ action: EXPLORER_ACTION.RELOAD });
-    }
-  }));
-
   subscriptions.add(subscribeAppStateToObservable(AppState, 'mlShowCharts', showCharts$, () => $rootScope.$applyAsync()));
   subscriptions.add(subscribeAppStateToObservable(AppState, 'mlSelectInterval', interval$, () => $rootScope.$applyAsync()));
   subscriptions.add(subscribeAppStateToObservable(AppState, 'mlSelectSeverity', severity$, () => $rootScope.$applyAsync()));

x-pack/package.json

@@ -233,7 +233,7 @@
     "d3-scale": "1.0.7",
     "dataloader": "^1.4.0",
     "dedent": "^0.7.0",
-    "dragselect": "1.8.1",
+    "dragselect": "1.13.1",
     "elasticsearch": "^16.2.0",
     "extract-zip": "1.6.7",
     "file-saver": "^1.3.8",

yarn.lock

@@ -10316,10 +10316,10 @@ download@^5.0.3:
     mkdirp "^0.5.1"
     pify "^2.3.0"
 
-dragselect@1.8.1:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/dragselect/-/dragselect-1.8.1.tgz#63f71a6f980f710c87e28b328e175b7afc9e162b"
-  integrity sha512-4YbJCcS6zwK8vMX2GiIX3tUrXFSo9a6xmV2z66EIJ8nj+iMHP1o4j0PeFdf5zjfhqVZJi+6zuVKPZInnrTLMbw==
+dragselect@1.13.1:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/dragselect/-/dragselect-1.13.1.tgz#aa4166e1164b51ed5ee0cd89e0c5310a9c35be6a"
+  integrity sha512-spfUz6/sNnlY4fF/OxPBwaKLa5hVz6V+fq5XhVuD+h47RAkA75TMkfvr4AoWUh5Ufq3V1oIAbfu+sjc9QbewoA==
 
 duplexer2@0.0.2, duplexer2@~0.0.2:
   version "0.0.2"