[ML] Anomaly Explorer: Migrate Explorer from SCSS to Emotion

x-pack/platform/plugins/shared/ml/public/application/_index.scss

@@ -1,9 +1,6 @@
 // Protect the rest of Kibana from ML generic namespacing
 // SASSTODO: Prefix ml selectors instead
 .ml-app {
-  // Sub applications
-  @import 'explorer/index'; // SASSTODO: This file needs to be rewritten
-
   // Components
   @import 'components/anomalies_table/index'; // SASSTODO: This file overwrites EUI directly
   @import 'components/job_selector/index';

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

@@ -5,15 +5,15 @@
  * 2.0.
  */
 
-import './_explorer_chart_label.scss';
 import PropTypes from 'prop-types';
 import React, { Fragment, useCallback } from 'react';
 
-import { EuiIconTip } from '@elastic/eui';
+import { EuiIconTip, useEuiTheme } from '@elastic/eui';
 
 import { ExplorerChartLabelBadge } from './explorer_chart_label_badge';
 import { ExplorerChartInfoTooltip } from '../../explorer_chart_info_tooltip';
 import { EntityFilter } from './entity_filter';
+import { css } from '@emotion/react';
 
 export function ExplorerChartLabel({
   detectorLabel,
@@ -67,20 +67,30 @@ export function ExplorerChartLabel({
   });
 
   const infoIcon = (
-    <span className="ml-explorer-chart-info-icon">
+    <span>
       <EuiIconTip
-        className="ml-explorer-chart-eui-icon-tip"
+        css={{
+          maxWidth: 'none',
+        }}
         content={<ExplorerChartInfoTooltip {...infoTooltip} />}
         position="top"
         size="s"
       />
     </span>
   );
 
+  const { euiTheme } = useEuiTheme();
+
+  const badgesStyles = css({
+    display: 'flex',
+    alignItems: 'center',
+    marginTop: euiTheme.size.xs,
+  });
+
   return (
     <>
-      <span className="ml-explorer-chart-label">
-        <span className="ml-explorer-chart-label-detector">
+      <span>
+        <span>
           {detectorLabel}
           {labelSeparator}
         </span>
@@ -91,7 +101,7 @@ export function ExplorerChartLabel({
           </>
         )}
       </span>
-      {wrapLabel && <span className="ml-explorer-chart-label-badges">{entityFieldBadges}</span>}
+      {wrapLabel && <span css={badgesStyles}>{entityFieldBadges}</span>}
     </>
   );
 }

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

@@ -5,13 +5,13 @@
  * 2.0.
  */
 
-import './_explorer_chart_tooltip.scss';
 import PropTypes from 'prop-types';
 import React from 'react';
 
 import { CHART_TYPE } from '../explorer_constants';
 
 import { i18n } from '@kbn/i18n';
+import { useExplorerChartTooltipStyles } from './explorer_chart_tooltip_styles';
 
 const CHART_DESCRIPTION = {
   [CHART_TYPE.EVENT_DISTRIBUTION]: i18n.translate(
@@ -36,12 +36,18 @@ const CHART_DESCRIPTION = {
 import { EuiSpacer } from '@elastic/eui';
 
 function TooltipDefinitionList({ toolTipData }) {
+  const {
+    title: titleStyle,
+    description: descriptionStyle,
+    descriptionList,
+  } = useExplorerChartTooltipStyles();
+
   return (
-    <dl className="mlDescriptionList">
+    <dl css={descriptionList}>
       {toolTipData.map(({ title, description }) => (
         <React.Fragment key={`${title} ${description}`}>
-          <dt className="mlDescriptionList__title">{title}</dt>
-          <dd className="mlDescriptionList__description">{description}</dd>
+          <dt css={titleStyle}>{title}</dt>
+          <dd css={descriptionStyle}>{description}</dd>
         </React.Fragment>
       ))}
     </dl>
@@ -55,6 +61,8 @@ export const ExplorerChartInfoTooltip = ({
   chartType,
   entityFields = [],
 }) => {
+  const { tooltip, chartDescription: chartDescriptionStyle } = useExplorerChartTooltipStyles();
+
   const chartDescription = CHART_DESCRIPTION[chartType];
 
   const toolTipData = [
@@ -86,12 +94,12 @@ export const ExplorerChartInfoTooltip = ({
   });
 
   return (
-    <div className="ml-explorer-chart-info-tooltip">
+    <div css={tooltip}>
       <TooltipDefinitionList toolTipData={toolTipData} />
       {chartDescription && (
         <React.Fragment>
           <EuiSpacer size="s" />
-          <div className="ml-explorer-chart-description">{chartDescription}</div>
+          <div css={chartDescriptionStyle}>{chartDescription}</div>
         </React.Fragment>
       )}
     </div>

x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/explorer_chart_tooltip_styles.ts

@@ -0,0 +1,50 @@
+/*
+ * 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 { useEuiFontSize, useEuiTheme } from '@elastic/eui';
+import { useMemo } from 'react';
+import { css } from '@emotion/react';
+
+export const useExplorerChartTooltipStyles = () => {
+  const { euiTheme } = useEuiTheme();
+  const euiFontSizeXS = useEuiFontSize('xs').fontSize;
+
+  return useMemo(
+    () => ({
+      tooltip: css({
+        maxWidth: '384px',
+      }),
+      descriptionList: css({
+        display: 'grid',
+        gridTemplateColumns: 'max-content auto',
+        '& > *': {
+          marginTop: euiTheme.size.xs,
+        },
+      }),
+      title: css({
+        color: euiTheme.colors.ghost,
+        fontSize: euiFontSizeXS,
+        fontWeight: 'normal',
+        whiteSpace: 'nowrap',
+        gridColumnStart: 1,
+      }),
+      description: css({
+        color: euiTheme.colors.ghost,
+        fontSize: euiFontSizeXS,
+        fontWeight: 'bold',
+        paddingLeft: euiTheme.size.s,
+        maxWidth: '256px',
+        gridColumnStart: 2,
+      }),
+      chartDescription: css({
+        fontSize: euiFontSizeXS,
+        fontStyle: 'italic',
+      }),
+    }),
+    [euiFontSizeXS, euiTheme]
+  );
+};

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

@@ -4,8 +4,6 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import './_index.scss';
-
 import React, { useEffect, useState, useCallback, useRef } from 'react';
 
 import {