[ML] Fixes Anomaly Explorer Swimlane race condition, adds tests.

x-pack/plugins/ml/public/explorer/__mocks__/mock_overall_swimlane.json

@@ -0,0 +1,35 @@
+{
+  "laneLabels": [
+    "Overall"
+  ],
+  "points": [
+    {
+      "laneLabel": "Overall",
+      "time": 1486425600,
+      "value": 0
+    },
+    {
+      "laneLabel": "Overall",
+      "time": 1486440000,
+      "value": 0.01107053
+    },
+    {
+      "laneLabel": "Overall",
+      "time": 1486454400,
+      "value": 0.1870243
+    },
+    {
+      "laneLabel": "Overall",
+      "time": 1486468800,
+      "value": 0.5947769
+    },
+    {
+      "laneLabel": "Overall",
+      "time": 1486483200,
+      "value": 0
+    }
+  ],
+  "interval": 14400,
+  "earliest": 1486425600,
+  "latest": 1486483200
+}

x-pack/plugins/ml/public/explorer/__snapshots__/explorer_swimlane.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ExplorerSwimlane Overall swimlane 1`] = `"<div class=\\"ml-swimlanes\\"><div class=\\"lane\\"><div class=\\"lane-label\\" style=\\"width: 170px;\\">Overall</div><div class=\\"cells-container\\"><div class=\\"sl-cell \\" style=\\"width: 200px;\\" data-lane-label=\\"Overall\\" data-time=\\"1486425600\\"><div class=\\"sl-cell-inner-dragselect\\"></div></div><div class=\\"sl-cell \\" style=\\"width: 200px;\\" data-lane-label=\\"Overall\\" data-time=\\"1486440000\\" data-score=\\"0.01107053\\"><div class=\\"sl-cell-inner\\" style=\\"background-color: rgb(210, 233, 247);\\"></div></div><div class=\\"sl-cell \\" style=\\"width: 200px;\\" data-lane-label=\\"Overall\\" data-time=\\"1486454400\\" data-score=\\"0.1870243\\"><div class=\\"sl-cell-inner\\" style=\\"background-color: rgb(210, 233, 247);\\"></div></div><div class=\\"sl-cell \\" style=\\"width: 200px;\\" data-lane-label=\\"Overall\\" data-time=\\"1486468800\\" data-score=\\"0.5947769\\"><div class=\\"sl-cell-inner\\" style=\\"background-color: rgb(210, 233, 247);\\"></div></div></div></div><div class=\\"time-tick-labels\\"><svg width=\\"800\\" height=\\"25\\"><g class=\\"x axis\\"><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(0,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T01:00:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(25,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T01:30:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(50,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T02:00:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(75,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T02:30:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(100,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T03:00:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(125,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T03:30:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(150,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T04:00:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(175,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T04:30:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(200,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T05:00:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(225,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T05:30:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(250,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T06:00:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(275,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T06:30:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(300,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T07:00:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(325,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T07:30:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(350,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T08:00:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(375,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T08:30:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(400,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T09:00:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(425,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T09:30:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(450,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T10:00:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(475,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T10:30:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(500,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T11:00:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(525,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T11:30:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(550,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T12:00:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(575,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T12:30:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(600,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T13:00:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(625,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T13:30:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(650,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T14:00:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(675,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T14:30:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(700,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T15:00:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(725,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T15:30:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(750,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T16:00:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(775,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T16:30:00+01:00</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(800,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T17:00:00+01:00</text></g><path class=\\"domain\\" d=\\"M0,6V0H800V6\\"></path></g></svg></div></div>"`;

x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container_service.js

@@ -7,9 +7,9 @@
 
 
 /*
- * Angular controller for the container for the anomaly charts in the
+ * Service for the container for the anomaly charts in the
  * Machine Learning Explorer dashboard.
- * The controller processes the data required to draw each of the charts
+ * The service processes the data required to draw each of the charts
  * and manages the layout of the charts in the containing div.
  */
 
@@ -384,7 +384,7 @@ export function explorerChartsContainerServiceFactory(
 
     });
 
-    console.log('explorer charts aggregatedData is:', aggregatedData);
+    //console.log('explorer charts aggregatedData is:', aggregatedData);
     let recordsForSeries = [];
     // Convert to an array of the records with the highest record_score per unique series.
     _.each(aggregatedData, (detectorsForJob) => {

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

@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+/*
+ * Contains values for ML anomaly explorer.
+ */
+
+export const DRAG_SELECT_ACTION = {
+  NEW_SELECTION: 'newSelection',
+  ELEMENT_SELECT: 'elementSelect',
+  DRAG_START: 'dragStart'
+};