[ML] Migrates chart tooltip to react. (#48122) (#48264)

- The tooltip styling, code and features have been updated to be more in line with Elastic Charts tooltips. This prepares us should we want to use Elastic Charts' tooltip as is at some point.
- jQuery is no longer used in mlChartTooltipService.
- The tooltip content is no longer raw HTML, a mostly Elastic Charts compatible data structure is now passed around by mlChartTooltipService.

Author: walterra

x-pack/legacy/plugins/ml/public/components/chart_tooltip/_chart_tooltip.scss

@@ -1,31 +1,54 @@
+@import '@elastic/eui/src/components/tool_tip/variables';
+@import '@elastic/eui/src/components/tool_tip/mixins';
+
 .mlChartTooltip {
+  @include euiToolTipStyle('s');
+  @include euiFontSizeXS;
   position: absolute;
-  border: 2px solid $euiColorDarkestShade;
-  border-radius: 5px;
-  padding: 7px 5px;
-  color: $euiColorEmptyShade;
-  background-color: $euiColorDarkestShade;
-  font-family: $euiFontFamily;
-  font-size: $euiFontSizeXS;
-  opacity: 0;
-  display: none;
-  white-space: nowrap;
-  z-index: 1;
-  transition: opacity 0.2s;
-  z-index: 20;
-  max-width: 500px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  hr {
-    margin-top: $euiSizeXS;
-    margin-bottom: $euiSizeXS;
-    border: none;
-    height: 1px;
-    background-color: $euiColorMediumShade;
+  padding: 0;
+  transition: opacity $euiAnimSpeedNormal;
+  pointer-events: none;
+  user-select: none;
+  max-width: 512px;
+
+  &__list {
+    margin: $euiSizeXS;
+  }
+
+  &__header {
+    @include euiToolTipTitle;
+    padding: $euiSizeXS ($euiSizeXS * 2);
+  }
+
+  &__item {
+    display: flex;
+    padding: 3px;
+    box-sizing: border-box;
+    border-left: $euiSizeXS solid transparent;
+  }
+
+  &__label {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    min-width: 1px;
+    flex: 1 1 auto;
+  }
+
+  &__value {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    font-weight: $euiFontWeightBold;
+    text-align: right;
+    font-feature-settings: 'tnum';
+    margin-left: 8px;
+  }
+
+  &__rowHighlighted {
+    background-color: transparentize($euiColorGhost, 0.9);
+  }
+
+  &--hidden {
+    opacity: 0;
   }
-}
 
-.mlChartTooltip--noTransition {
-  transition: opacity 0s;
 }

x-pack/legacy/plugins/ml/public/components/chart_tooltip/chart_tooltip.html

@@ -0,0 +1,75 @@
+/*
+ * 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 classNames from 'classnames';
+import React, { useRef, FC } from 'react';
+import { TooltipValueFormatter } from '@elastic/charts';
+
+// TODO: Below import is temporary, use `react-use` lib instead.
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { useObservable } from '../../../../../../../src/plugins/kibana_react/public/util/use_observable';
+
+import { chartTooltip$, mlChartTooltipService, ChartTooltipValue } from './chart_tooltip_service';
+
+const renderHeader = (headerData?: ChartTooltipValue, formatter?: TooltipValueFormatter) => {
+  if (!headerData) {
+    return null;
+  }
+
+  return formatter ? formatter(headerData) : headerData.name;
+};
+
+export const ChartTooltip: FC = () => {
+  const chartTooltipElement = useRef(null);
+
+  mlChartTooltipService.element = chartTooltipElement.current;
+
+  const chartTooltipState = useObservable(chartTooltip$);
+
+  if (chartTooltipState === undefined || !chartTooltipState.isTooltipVisible) {
+    return <div className="mlChartTooltip mlChartTooltip--hidden" ref={chartTooltipElement} />;
+  }
+
+  const { tooltipData, tooltipHeaderFormatter, tooltipPosition } = chartTooltipState;
+
+  return (
+    <div
+      className="mlChartTooltip"
+      style={{ transform: tooltipPosition.transform }}
+      ref={chartTooltipElement}
+    >
+      {tooltipData.length > 0 && tooltipData[0].skipHeader === undefined && (
+        <div className="mlChartTooltip__header">
+          {renderHeader(tooltipData[0], tooltipHeaderFormatter)}
+        </div>
+      )}
+      {tooltipData.length > 1 && (
+        <div className="mlChartTooltip__list">
+          {tooltipData
+            .slice(1)
+            .map(({ name, value, color, isHighlighted, seriesKey, yAccessor }) => {
+              const classes = classNames('mlChartTooltip__item', {
+                /* eslint @typescript-eslint/camelcase:0 */
+                echTooltip__rowHighlighted: isHighlighted,
+              });
+              return (
+                <div
+                  key={`${seriesKey}--${yAccessor}`}
+                  className={classes}
+                  style={{
+                    borderLeftColor: color,
+                  }}
+                >
+                  <span className="mlChartTooltip__label">{name}</span>
+                  <span className="mlChartTooltip__value">{value}</span>
+                </div>
+              );
+            })}
+        </div>
+      )}
+    </div>
+  );
+};

x-pack/legacy/plugins/ml/public/components/chart_tooltip/chart_tooltip.js

@@ -0,0 +1,39 @@
+/*
+ * 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 { BehaviorSubject } from 'rxjs';
+
+import { TooltipValue, TooltipValueFormatter } from '@elastic/charts';
+
+export interface ChartTooltipValue extends TooltipValue {
+  skipHeader?: boolean;
+}
+
+interface ChartTooltipState {
+  isTooltipVisible: boolean;
+  tooltipData: ChartTooltipValue[];
+  tooltipHeaderFormatter?: TooltipValueFormatter;
+  tooltipPosition: { transform: string };
+}
+
+export declare const chartTooltip$: BehaviorSubject<ChartTooltipState>;
+
+interface ToolTipOffset {
+  x: number;
+  y: number;
+}
+
+interface MlChartTooltipService {
+  element: HTMLElement | null;
+  show: (
+    tooltipData: ChartTooltipValue[],
+    target: HTMLElement | null,
+    offset: ToolTipOffset
+  ) => void;
+  hide: () => void;
+}
+
+export declare const mlChartTooltipService: MlChartTooltipService;

x-pack/legacy/plugins/ml/public/components/chart_tooltip/chart_tooltip.tsx

@@ -4,86 +4,76 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { BehaviorSubject } from 'rxjs';
 
+const doc = document.documentElement;
 
-import $ from 'jquery';
+const chartTooltipDefaultState = {
+  isTooltipVisible: false,
+  tooltipData: [],
+  tooltipPosition: { transform: 'translate(0px, 0px)' }
+};
 
-const doc = document.documentElement;
-const FADE_TIMEOUT_MS = 200;
+export const chartTooltip$ = new BehaviorSubject(chartTooltipDefaultState);
 
 export const mlChartTooltipService = {
   element: null,
-  fadeTimeout: null,
-  visible: false
 };
 
-mlChartTooltipService.show = function (contents, target, offset = { x: 0, y: 0 }) {
+mlChartTooltipService.show = function (tooltipData, target, offset = { x: 0, y: 0 }) {
   if (this.element === null || typeof target === 'undefined') {
     return;
   }
 
-  this.visible = true;
-  // if a previous fade out was happening, stop it
-  if (this.fadeTimeout !== null) {
-    clearTimeout(this.fadeTimeout);
+  // side bar width
+  const euiNavDrawer = document.getElementsByClassName('euiNavDrawer');
+
+  if (euiNavDrawer.length === 0) {
+    return;
   }
 
-  // populate the tooltip contents
-  this.element.html(contents);
+  // enable the tooltip to render it in the DOM
+  // so the correct `tooltipWidth` gets returned.
+  const tooltipState = {
+    ...chartTooltipDefaultState,
+    isTooltipVisible: true,
+    tooltipData,
+  };
+  chartTooltip$.next(tooltipState);
 
-  // side bar width
-  const navOffset = $('.euiNavDrawer').width() || 0;  // Offset by width of side navbar
-  const contentWidth = $('body').width() - navOffset;
-  const tooltipWidth = this.element.width();
+  const navOffset = euiNavDrawer[0].clientWidth; // Offset by width of side navbar
+  const contentWidth = document.body.clientWidth - navOffset;
+  const tooltipWidth = this.element.clientWidth;
 
   const pos = target.getBoundingClientRect();
-  let left = (pos.left + (offset.x) + 4) - navOffset;
+  let left = pos.left + offset.x + 4 - navOffset;
   if (left + tooltipWidth > contentWidth) {
     // the tooltip is hanging off the side of the page,
     // so move it to the other side of the target
-    const markerWidthAdjustment = 22;
+    const markerWidthAdjustment = 10;
     left = left - (tooltipWidth + offset.x + markerWidthAdjustment);
   }
 
   // Calculate top offset
   const scrollTop = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
-  const topNavHeightAdjustment = 75;
-  const top = pos.top + (offset.y) + scrollTop - topNavHeightAdjustment;
+  const topNavHeightAdjustment = 190;
+  const top = pos.top + offset.y + scrollTop - topNavHeightAdjustment;
 
-  this.element.css({
-    left,
-    top,
-    opacity: '0.9',
-    display: 'block'
+  // render the tooltip with adjusted position.
+  chartTooltip$.next({
+    ...tooltipState,
+    tooltipPosition: { transform: `translate(${left}px, ${top}px)` }
   });
+
 };
 
-// When selecting multiple cells using dargSelect, we need to quickly
+// When selecting multiple cells using dragSelect, we need to quickly
 // hide the tooltip with `noTransition`, otherwise, if the mouse pointer
 // enters the tooltip while dragging, it will cancel selecting multiple
 // swimlane cells which we'd like to avoid of course.
-mlChartTooltipService.hide = function (noTransition = false) {
-  if (this.element === null) {
-    return;
-  }
-
-  this.visible = false;
-
-  if (noTransition) {
-    this.element.addClass('mlChartTooltip--noTransition');
-    this.element.css({ opacity: '0', display: 'none' });
-    this.element.removeClass('mlChartTooltip--noTransition');
-    return;
-  }
-
-  this.element.css({ opacity: '0' });
-
-  // after the fade out transition has finished, set the display to
-  // none so it doesn't block any mouse events underneath it.
-  this.fadeTimeout = setTimeout(() => {
-    if (this.visible === false) {
-      this.element.css('display', 'none');
-    }
-    this.fadeTimeout = null;
-  }, FADE_TIMEOUT_MS);
+mlChartTooltipService.hide = function () {
+  chartTooltip$.next({
+    ...chartTooltipDefaultState,
+    isTooltipVisible: false
+  });
 };

x-pack/legacy/plugins/ml/public/components/chart_tooltip/chart_tooltip_service.d.ts

@@ -4,6 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-
-
-import './chart_tooltip';
+export { mlChartTooltipService } from './chart_tooltip_service';
+export { ChartTooltip } from './chart_tooltip';

x-pack/legacy/plugins/ml/public/components/chart_tooltip/chart_tooltip_service.js

@@ -19,7 +19,6 @@ import {
   ScaleType,
   Settings,
   TooltipValueFormatter,
-  TooltipValue,
 } from '@elastic/charts';
 
 import darkTheme from '@elastic/eui/dist/eui_theme_dark.json';
@@ -28,6 +27,7 @@ import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
 import { MetricDistributionChartTooltipHeader } from './metric_distribution_chart_tooltip_header';
 import { useUiChromeContext } from '../../../../../contexts/ui/use_ui_chrome_context';
 import { kibanaFieldFormat } from '../../../../../formatters/kibana_field_format';
+import { ChartTooltipValue } from '../../../../../components/chart_tooltip/chart_tooltip_service';
 
 export interface MetricDistributionChartData {
   x: number;
@@ -60,7 +60,7 @@ export const MetricDistributionChart: FC<Props> = ({ width, height, chartData, f
   const themeName = IS_DARK_THEME ? darkTheme : lightTheme;
   const AREA_SERIES_COLOR = themeName.euiColorVis1;
 
-  const headerFormatter: TooltipValueFormatter = (tooltipData: TooltipValue) => {
+  const headerFormatter: TooltipValueFormatter = (tooltipData: ChartTooltipValue) => {
     const xValue = tooltipData.value;
     const chartPoint: MetricDistributionChartData | undefined = chartData.find(
       data => data.x === xValue