[ML] Fixes Anomaly Explorer swimlane label and chart tooltips (#61327)

Co-authored-by: Elastic Machine <[email protected]>
elastic · Mar 26, 2020 · 6d23735 · 6d23735
1 parent cec9165
commit 6d23735
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 5 deletions.
diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/_index.scss b/x-pack/plugins/ml/public/application/explorer/explorer_charts/_index.scss
@@ -1,4 +1,3 @@
 @import 'components/explorer_chart_label/index';
 @import 'explorer_chart';
-@import 'explorer_chart_tooltip';
-@import 'explorer_charts_container';
+@import 'explorer_charts_container';
diff --git a/...lication/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js b/...lication/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import './_explorer_chart_label.scss';
 import PropTypes from 'prop-types';
 import React from 'react';
 

diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_info_tooltip.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_info_tooltip.js
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import './_explorer_chart_tooltip.scss';
 import PropTypes from 'prop-types';
 import React from 'react';
 

diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.js b/x-pack/plugins/ml/public/application/explorer/explorer_swimlane.js
@@ -387,9 +387,17 @@ export class ExplorerSwimlane extends React.Component {
       .each(function() {
         if (swimlaneData.fieldName !== undefined) {
           d3.select(this)
-            .on('mouseover', label => {
+            .on('mouseover', value => {
               mlChartTooltipService.show(
-                [{ skipHeader: true }, { name: swimlaneData.fieldName, value: label }],
+                [
+                  { skipHeader: true },
+                  {
+                    label: swimlaneData.fieldName,
+                    value,
+                    seriesIdentifier: { key: value },
+                    valueAccessor: 'fieldName',
+                  },
+                ],
                 this,
                 {
                   x: laneLabelWidth,
@@ -400,7 +408,7 @@ export class ExplorerSwimlane extends React.Component {
             .on('mouseout', () => {
               mlChartTooltipService.hide();
             })
-            .attr('aria-label', label => `${mlEscape(swimlaneData.fieldName)}: ${mlEscape(label)}`);
+            .attr('aria-label', value => `${mlEscape(swimlaneData.fieldName)}: ${mlEscape(value)}`);
         }
       });