[6.x] [ML] Fixes Anomaly Explorer IE11 issues (#23558)

x-pack/package.json

@@ -117,7 +117,7 @@
     "d3": "3.5.6",
     "d3-scale": "1.0.6",
     "dedent": "^0.7.0",
-    "dragselect": "1.7.17",
+    "dragselect": "1.8.1",
     "elasticsearch": "^15.1.1",
     "extract-zip": "1.5.0",
     "file-saver": "^1.3.8",

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

@@ -105,7 +105,7 @@ module.controller('MlExplorerController', function (
   $scope.queryFilters = [];
 
   const dragSelect = new DragSelect({
-    selectables: document.querySelectorAll('.sl-cell'),
+    selectables: document.getElementsByClassName('sl-cell'),
     callback(elements) {
       if (elements.length > 1 && !ALLOW_CELL_RANGE_SELECTION) {
         elements = [elements[0]];
@@ -508,7 +508,8 @@ module.controller('MlExplorerController', function (
 
   // Listens to render updates of the swimlanes to update dragSelect
   const swimlaneRenderDoneListener = function () {
-    dragSelect.addSelectables(document.querySelectorAll('.sl-cell'));
+    dragSelect.clearSelection();
+    dragSelect.setSelectables(document.getElementsByClassName('sl-cell'));
   };
   mlExplorerDashboardService.swimlaneRenderDone.watch(swimlaneRenderDoneListener);
 

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

@@ -202,8 +202,6 @@ export class ExplorerSwimlane extends React.Component {
   }
 
   clearSelection() {
-    const { mlExplorerDashboardService } = this.props;
-
     // This selects both overall and viewby swimlane
     const wrapper = d3.selectAll('.ml-explorer-swimlane');
 
@@ -212,8 +210,6 @@ export class ExplorerSwimlane extends React.Component {
     wrapper.selectAll('.sl-cell-inner.sl-cell-inner-selected').classed('sl-cell-inner-selected', false);
     wrapper.selectAll('.sl-cell-inner-dragselect.sl-cell-inner-selected').classed('sl-cell-inner-selected', false);
     wrapper.selectAll('.ds-selected').classed('sl-cell-inner-selected', false);
-
-    mlExplorerDashboardService.swimlaneCellClick.changed({});
   }
 
   renderSwimlane() {

x-pack/plugins/ml/public/util/chart_utils.js

@@ -228,6 +228,20 @@ export function getTickValues(startTimeMs, tickInterval, earliest, latest) {
   return tickValues;
 }
 
+// To get xTransform it would be nicer to use d3.transform, but that doesn't play well with JSDOM.
+// So this uses a regex variant because we definitely want test coverage for the label removal.
+// Once JSDOM supports SVGAnimatedTransformList we can use this simpler inline version:
+// const xTransform = d3.transform(tick.attr('transform')).translate[0];
+export function getXTransform(t) {
+  const regexResult = /translate\(\s*([^\s,)]+)([ ,]([^\s,)]+))?\)/.exec(t);
+  if (Array.isArray(regexResult) && regexResult.length >= 2) {
+    return Number(regexResult[1]);
+  }
+
+  // fall back to NaN if regex didn't return any results.
+  return NaN;
+}
+
 // This removes overlapping x-axis labels by starting off from a specific label
 // that is required/wanted to show up. The code then traverses to both sides along the axis
 // and decides which labels to keep or remove. All vertical tick lines will be kept visible,
@@ -266,11 +280,7 @@ export function removeLabelOverlap(axis, startTimeMs, tickInterval, width) {
 
       const tickWidth = textNode.getBBox().width;
       const padding = 15;
-      // To get xTransform it would be nicer to use d3.transform, but that doesn't play well with JSDOM.
-      // So this uses a regex variant because we definitely want test coverage for the label removal.
-      // Once JSDOM supports SVGAnimatedTransformList we can use the simpler version.
-      // const xTransform = d3.transform(tick.attr('transform')).translate[0];
-      const xTransform = +(/translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)\)/.exec(tick.attr('transform'))[1]);
+      const xTransform = getXTransform(tick.attr('transform'));
       const xMinOffset = xTransform - (tickWidth / 2 + padding);
       const xMaxOffset = xTransform + (tickWidth / 2 + padding);
 

x-pack/plugins/ml/public/util/chart_utils.test.js

@@ -47,6 +47,7 @@ import { timefilter } from 'ui/timefilter';
 import {
   getExploreSeriesLink,
   getTickValues,
+  getXTransform,
   removeLabelOverlap
 } from './chart_utils';
 
@@ -133,6 +134,28 @@ describe('getTickValues', () => {
   });
 });
 
+describe('getXTransform', () => {
+  const expectedXTransform = 0.007167499999999999;
+
+  test('Chrome/Safari/Firefox String variant.', () => {
+    const transformStr = 'translate(0.007167499999999999,0)';
+    const xTransform = getXTransform(transformStr);
+    expect(xTransform).toEqual(expectedXTransform);
+  });
+
+  test('IE11 String variant.', () => {
+    const transformStr = 'translate(0.007167499999999999)';
+    const xTransform = getXTransform(transformStr);
+    expect(xTransform).toEqual(expectedXTransform);
+  });
+
+  test('Invalid String.', () => {
+    const transformStr = 'translate()';
+    const xTransform = getXTransform(transformStr);
+    expect(xTransform).toEqual(NaN);
+  });
+});
+
 describe('removeLabelOverlap', () => {
   const originalGetBBox = SVGElement.prototype.getBBox;
 

x-pack/yarn.lock

@@ -2341,9 +2341,9 @@ [email protected]:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-2.0.0.tgz#bd759c357aaa70365e01c96b7b0bec08a6e0d949"
 
-dragselect@1.7.17:
-  version "1.7.17"
-  resolved "https://registry.yarnpkg.com/dragselect/-/dragselect-1.7.17.tgz#ab98661d8599286c0ada66ce5f5923b06b4f09fd"
+dragselect@1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/dragselect/-/dragselect-1.8.1.tgz#63f71a6f980f710c87e28b328e175b7afc9e162b"
 
 [email protected], duplexer2@~0.0.2:
   version "0.0.2"

yarn.lock

@@ -4187,9 +4187,9 @@ download@^5.0.3:
     mkdirp "^0.5.1"
     pify "^2.3.0"
 
-dragselect@1.7.17:
-  version "1.7.17"
-  resolved "https://registry.yarnpkg.com/dragselect/-/dragselect-1.7.17.tgz#ab98661d8599286c0ada66ce5f5923b06b4f09fd"
+dragselect@1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/dragselect/-/dragselect-1.8.1.tgz#63f71a6f980f710c87e28b328e175b7afc9e162b"
 
 [email protected]:
   version "3.7.0"