[ML] Anomaly Detection: Migrate chart tooltip from SCSS to emotion (e…

…lastic#199417)

## Summary

Part of elastic#140695

Migrates SCSS to emotion for the Anomaly Detection chart tooltip.

![CleanShot 2024-11-08 at 08 01
22@2x](https://github.com/user-attachments/assets/a7cd94c2-15b7-42bc-b98a-3596eaeeafe1)

### Checklist

- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)

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

@@ -9,14 +9,14 @@ import type { FC } from 'react';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import TooltipTrigger from 'react-popper-tooltip';
+import type { ChildrenArg, TooltipTriggerProps } from 'react-popper-tooltip/dist/types';
+
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import type { TooltipValueFormatter } from '@elastic/charts';
 
-import './_index.scss';
-
-import type { ChildrenArg, TooltipTriggerProps } from 'react-popper-tooltip/dist/types';
 import type { ChartTooltipValue, TooltipData } from './chart_tooltip_service';
 import { ChartTooltipService } from './chart_tooltip_service';
+import { useChartTooltipStyles } from './chart_tooltip_styles';
 
 const renderHeader = (headerData?: ChartTooltipValue, formatter?: TooltipValueFormatter) => {
   if (!headerData) {
@@ -30,17 +30,26 @@ const renderHeader = (headerData?: ChartTooltipValue, formatter?: TooltipValueFo
  * Pure component for rendering the tooltip content with a custom layout across the ML plugin.
  */
 export const FormattedTooltip: FC<{ tooltipData: TooltipData }> = ({ tooltipData }) => {
+  const {
+    mlChartTooltip,
+    mlChartTooltipList,
+    mlChartTooltipHeader,
+    mlChartTooltipItem,
+    mlChartTooltipLabel,
+    mlChartTooltipValue,
+  } = useChartTooltipStyles();
+
   return (
-    <div className="mlChartTooltip">
+    <div css={mlChartTooltip}>
       {tooltipData.length > 0 && tooltipData[0].skipHeader === undefined && (
-        <div className="mlChartTooltip__header">{renderHeader(tooltipData[0])}</div>
+        <div css={mlChartTooltipHeader}>{renderHeader(tooltipData[0])}</div>
       )}
       {tooltipData.length > 1 && (
-        <div className="mlChartTooltip__list">
+        <div css={mlChartTooltipList}>
           {tooltipData
             .slice(1)
             .map(({ label, value, color, isHighlighted, seriesIdentifier, valueAccessor }) => {
-              const classes = classNames('mlChartTooltip__item', {
+              const classes = classNames({
                 // eslint-disable-next-line @typescript-eslint/naming-convention
                 echTooltip__rowHighlighted: isHighlighted,
               });
@@ -52,16 +61,21 @@ export const FormattedTooltip: FC<{ tooltipData: TooltipData }> = ({ tooltipData
               return (
                 <div
                   key={`${seriesIdentifier.key}__${valueAccessor}`}
+                  css={mlChartTooltipItem}
                   className={classes}
                   style={{
                     borderLeftColor: color,
                   }}
                 >
                   <EuiFlexGroup>
-                    <EuiFlexItem className="eui-textBreakWord mlChartTooltip__label" grow={false}>
+                    <EuiFlexItem
+                      css={mlChartTooltipLabel}
+                      className="eui-textBreakWord"
+                      grow={false}
+                    >
                       {label}
                     </EuiFlexItem>
-                    <EuiFlexItem className="eui-textBreakAll mlChartTooltip__value">
+                    <EuiFlexItem css={mlChartTooltipValue} className="eui-textBreakAll">
                       {renderValue}
                     </EuiFlexItem>
                   </EuiFlexGroup>

x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip_styles.ts

@@ -0,0 +1,65 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { css } from '@emotion/react';
+
+import { mathWithUnits, transparentize, useEuiTheme } from '@elastic/eui';
+// @ts-expect-error style types not defined
+import { euiToolTipStyles } from '@elastic/eui/lib/components/tool_tip/tool_tip.styles';
+
+import { useCurrentEuiThemeVars } from '@kbn/ml-kibana-theme';
+
+import { useMlKibana } from '../../contexts/kibana';
+
+export const useChartTooltipStyles = () => {
+  const euiThemeContext = useEuiTheme();
+  const {
+    services: { theme },
+  } = useMlKibana();
+  const { euiTheme } = useCurrentEuiThemeVars(theme);
+  const euiStyles = euiToolTipStyles(euiThemeContext);
+
+  return {
+    mlChartTooltip: css([
+      euiStyles.euiToolTip,
+      {
+        fontSize: euiTheme.euiFontSizeXS,
+        padding: 0,
+        transition: `opacity ${euiTheme.euiAnimSpeedNormal}`,
+        pointerEvents: 'none',
+        userSelect: 'none',
+        maxWidth: '512px',
+        position: 'relative',
+      },
+    ]),
+    mlChartTooltipList: css({
+      margin: euiTheme.euiSizeXS,
+      paddingBottom: euiTheme.euiSizeXS,
+    }),
+    mlChartTooltipHeader: css({
+      fontWeight: euiTheme.euiFontWeightBold,
+      padding: `${euiTheme.euiSizeXS} ${mathWithUnits(euiTheme.euiSizeS, (x) => x * 2)}`,
+      marginBottom: euiTheme.euiSizeXS,
+      borderBottom: `1px solid ${transparentize(euiTheme.euiBorderColor, 0.8)}`,
+    }),
+    mlChartTooltipItem: css({
+      display: 'flex',
+      padding: '3px',
+      boxSizing: 'border-box',
+      borderLeft: `${euiTheme.euiSizeXS} solid transparent`,
+    }),
+    mlChartTooltipLabel: css({
+      minWidth: '1px',
+    }),
+    mlChartTooltipValue: css({
+      fontWeight: euiTheme.euiFontWeightBold,
+      textAlign: 'right',
+      fontFeatureSettings: 'tnum',
+      marginLeft: '8px',
+    }),
+  };
+};