[8.x] [ML] Data Frame Analytics: Migrate scatterplot matrix from SCSS…

… to emotion (#199180) (#199685)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ML] Data Frame Analytics: Migrate scatterplot matrix from SCSS to
emotion (#199180)](#199180)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Walter
Rafelsberger","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-11T18:12:51Z","message":"[ML]
Data Frame Analytics: Migrate scatterplot matrix from SCSS to emotion
(#199180)\n\n## Summary\r\n\r\nPart of
https://github.com/elastic/kibana/issues/140695\r\n\r\nMigrates SCSS to
emotion for the DFA scatterplot matrix.\r\n\r\n![CleanShot 2024-11-06 at
17
27\r\n35@2x](https://github.com/user-attachments/assets/a022b4b8-a659-495d-ae82-10b65cf42579)\r\n\r\n###
Checklist\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [x] This was checked for breaking
API changes and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)","sha":"aeef51f2dd6858792e8c3d54c772b91ae20ebb9b","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":[":ml","v8.0.0","release_note:skip","Feature:Data
Frame Analytics","v9.0.0","backport:version","v8.17.0"],"title":"[ML]
Data Frame Analytics: Migrate scatterplot matrix from SCSS to
emotion","number":199180,"url":"https://github.com/elastic/kibana/pull/199180","mergeCommit":{"message":"[ML]
Data Frame Analytics: Migrate scatterplot matrix from SCSS to emotion
(#199180)\n\n## Summary\r\n\r\nPart of
https://github.com/elastic/kibana/issues/140695\r\n\r\nMigrates SCSS to
emotion for the DFA scatterplot matrix.\r\n\r\n![CleanShot 2024-11-06 at
17
27\r\n35@2x](https://github.com/user-attachments/assets/a022b4b8-a659-495d-ae82-10b65cf42579)\r\n\r\n###
Checklist\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [x] This was checked for breaking
API changes and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)","sha":"aeef51f2dd6858792e8c3d54c772b91ae20ebb9b"}},"sourceBranch":"main","suggestedTargetBranches":["8.0","8.x"],"targetPullRequestStates":[{"branch":"8.0","label":"v8.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/199180","number":199180,"mergeCommit":{"message":"[ML]
Data Frame Analytics: Migrate scatterplot matrix from SCSS to emotion
(#199180)\n\n## Summary\r\n\r\nPart of
https://github.com/elastic/kibana/issues/140695\r\n\r\nMigrates SCSS to
emotion for the DFA scatterplot matrix.\r\n\r\n![CleanShot 2024-11-06 at
17
27\r\n35@2x](https://github.com/user-attachments/assets/a022b4b8-a659-495d-ae82-10b65cf42579)\r\n\r\n###
Checklist\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [x] This was checked for breaking
API changes and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)","sha":"aeef51f2dd6858792e8c3d54c772b91ae20ebb9b"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Walter Rafelsberger <[email protected]>

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>