[ML] Chart info tooltips include a descriptive text for rare and popu…

…lation charts.

x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import './styles/explorer_chart_label.less';
+
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -12,7 +14,7 @@ import {
 } from '@elastic/eui';
 
 import { ExplorerChartLabelBadge } from './explorer_chart_label_badge';
-import { ExplorerChartTooltip } from '../../explorer_chart_tooltip';
+import { ExplorerChartInfoTooltip } from '../../explorer_chart_info_tooltip';
 
 export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, wrapLabel = false }) {
   // Depending on whether we wrap the entityField badges to a new line, we render this differently:
@@ -41,7 +43,8 @@ export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, w
   const infoIcon = (
     <span className="ml-explorer-chart-info-icon">
       <EuiIconTip
-        content={<ExplorerChartTooltip {...infoTooltip} />}
+        className="ml-explorer-chart-eui-icon-tip"
+        content={<ExplorerChartInfoTooltip {...infoTooltip} />}
         position="top"
         size="s"
       />

x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label.less

@@ -0,0 +1,3 @@
+.ml-explorer-chart-eui-icon-tip {
+  max-width: none;
+}

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

@@ -0,0 +1,81 @@
+/*
+ * 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.
+ */
+
+
+import './styles/explorer_chart_info_tooltip.less';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { CHART_TYPE } from '../explorer_constants';
+
+const CHART_DESCRIPTION = {
+  [CHART_TYPE.EVENT_DISTRIBUTION]: 'The gray dots depict the distribution of occurences over time for a sample of by_field_values with \
+more frequent event types at the top and more rare ones at the bottom.',
+  [CHART_TYPE.POPULATION_DISTRIBUTION]: 'The gray dots depict the distribution of values over time for a sample of over_field_values.'
+};
+
+function TooltipDefinitionList({ toolTipData }) {
+  return (
+    <dl className="mlDescriptionList">
+      {toolTipData.map(({ title, description }) => {
+        return (
+          <React.Fragment>
+            <dt className="mlDescriptionList__title">{title}</dt>
+            <dd className="mlDescriptionList__description">{description}</dd>
+          </React.Fragment>
+        );
+      })}
+    </dl>
+  );
+}
+
+export function ExplorerChartInfoTooltip({
+  jobId,
+  aggregationInterval,
+  chartFunction,
+  chartType,
+  entityFields = [],
+}) {
+  const chartDescription = CHART_DESCRIPTION[chartType];
+
+  const toolTipData = [
+    {
+      title: 'job ID',
+      description: jobId,
+    },
+    {
+      title: 'aggregation interval',
+      description: aggregationInterval,
+    },
+    {
+      title: 'chart function',
+      description: chartFunction,
+    },
+  ];
+
+  entityFields.forEach((entityField) => {
+    toolTipData.push({
+      title: entityField.fieldName,
+      description: entityField.fieldValue
+    });
+  });
+
+  return (
+    <div className="ml-explorer-chart-info-tooltip">
+      <TooltipDefinitionList toolTipData={toolTipData} />
+      {chartDescription && (
+        <span className="ml-explorer-chart-description">{chartDescription}</span>
+      )}
+    </div>
+  );
+}
+ExplorerChartInfoTooltip.propTypes = {
+  jobId: PropTypes.string.isRequired,
+  aggregationInterval: PropTypes.string,
+  chartFunction: PropTypes.string,
+  entityFields: PropTypes.array
+};

x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart_tooltip.test.js → x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart_info_tooltip.test.js

@@ -8,7 +8,7 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import { ExplorerChartTooltip } from './explorer_chart_tooltip';
+import { ExplorerChartInfoTooltip } from './explorer_chart_info_tooltip';
 
 describe('ExplorerChartTooltip', () => {
   test('Render tooltip based on infoTooltip data.', () => {
@@ -22,7 +22,7 @@ describe('ExplorerChartTooltip', () => {
       jobId: 'mock-job-id'
     };
 
-    const wrapper = shallow(<ExplorerChartTooltip {...infoTooltip} />);
+    const wrapper = shallow(<ExplorerChartInfoTooltip {...infoTooltip} />);
     expect(wrapper).toMatchSnapshot();
   });
 });

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

@@ -65,7 +65,7 @@ function ExplorerChartContainer({
           <ExplorerChartLabel
             detectorLabel={detectorLabel}
             entityFields={entityFields}
-            infoTooltip={series.infoTooltip}
+            infoTooltip={{ ...series.infoTooltip, chartType }}
             wrapLabel={wrapLabel}
           />
         </EuiFlexItem>

x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_chart_info_tooltip.less

@@ -0,0 +1,34 @@
+.ml-explorer-chart-info-tooltip {
+  max-width: 384px;
+}
+
+.ml-explorer-chart-description {
+  font-size: 12px;
+  font-style: italic;
+}
+
+.ml-explorer-chart-info-tooltip .mlDescriptionList > * {
+  margin-top: 3px;
+}
+
+.ml-explorer-chart-info-tooltip .mlDescriptionList {
+  display: grid;
+  grid-template-columns: max-content auto;
+
+  .mlDescriptionList__title {
+    color: #fff;
+    font-size: 12px;
+    font-weight: normal;
+    white-space: nowrap;
+    grid-column-start: 1;
+  }
+
+  .mlDescriptionList__description {
+    color: #fff;
+    font-size: 12px;
+    font-weight: bold;
+    padding-left: 8px;
+    max-width: 256px;
+    grid-column-start: 2;
+  }
+}