From 520bb9d9b9c4d1d5fc4765c1f2bce95c2ed25b2a Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter.rafelsberger@elastic.co>
Date: Mon, 11 Nov 2024 19:12:51 +0100
Subject: [PATCH] [ML] Data Frame Analytics: Migrate scatterplot matrix from
 SCSS to emotion (#199180)

## Summary

Part of https://github.com/elastic/kibana/issues/140695

Migrates SCSS to emotion for the DFA scatterplot matrix.

![CleanShot 2024-11-06 at 17 27
35@2x](https://github.com/user-attachments/assets/a022b4b8-a659-495d-ae82-10b65cf42579)

### 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)
---
 .../scatterplot_matrix/scatterplot_matrix.scss   |  8 --------
 .../scatterplot_matrix/scatterplot_matrix.tsx    | 16 ++++++++++++++--
 2 files changed, 14 insertions(+), 10 deletions(-)
 delete mode 100644 x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.scss

diff --git a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.scss b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.scss
deleted file mode 100644
index 322cdb4971f05..0000000000000
--- a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.mlScatterplotMatrix {
-  overflow-x: auto;
-
-  .vega-bind span {
-    font-size: $euiFontSizeXS;
-    padding: 0 $euiSizeXS;
-  }
-}
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx
index dab7dc4117083..763addd4aaa87 100644
--- a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx
+++ b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx
@@ -7,6 +7,7 @@
 
 import type { FC } from 'react';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { css } from '@emotion/react';
 
 import type * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
 import type { EuiComboBoxOptionOption } from '@elastic/eui';
@@ -35,6 +36,7 @@ import {
   type RuntimeMappings,
 } from '@kbn/ml-runtime-field-utils';
 import { getProcessedFields } from '@kbn/ml-data-grid';
+import { euiThemeVars } from '@kbn/ui-theme';
 
 import { useCurrentThemeVars, useMlApi, useMlKibana } from '../../contexts/kibana';
 
@@ -48,7 +50,17 @@ import {
   OUTLIER_SCORE_FIELD,
 } from './scatterplot_matrix_vega_lite_spec';
 
-import './scatterplot_matrix.scss';
+const cssOverrides = css({
+  // Prevent the chart from overflowing the container
+  overflowX: 'auto',
+  // Overrides for the outlier threshold slider
+  '.vega-bind': {
+    span: {
+      fontSize: euiThemeVars.euiFontSizeXS,
+      padding: `0 ${euiThemeVars.euiSizeXS}`,
+    },
+  },
+});
 
 const SCATTERPLOT_MATRIX_DEFAULT_FIELDS = 4;
 const SCATTERPLOT_MATRIX_DEFAULT_FETCH_SIZE = 1000;
@@ -413,7 +425,7 @@ export const ScatterplotMatrix: FC<ScatterplotMatrixProps> = ({
       ) : (
         <div
           data-test-subj={`mlScatterplotMatrix ${isLoading ? 'loading' : 'loaded'}`}
-          className="mlScatterplotMatrix"
+          css={cssOverrides}
         >
           <EuiFlexGroup>
             <EuiFlexItem>