From 68a7d5e6b33f0f395238a1c2ca7c7a437b0ccf23 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Thu, 31 Oct 2024 06:22:44 +1100
Subject: [PATCH 1/2] [8.x] [ML] Data Frame Analytics: removing scss overrides
 for exploration pages  (#197724) (#198157)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ML] Data Frame Analytics: removing scss overrides for exploration
pages (#197724)](https://github.com/elastic/kibana/pull/197724)

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

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

<!--BACKPORT [{"author":{"name":"Melissa
Alvarez","email":"melissa.alvarez@elastic.co"},"sourceCommit":{"committedDate":"2024-10-29T15:41:57Z","message":"[ML]
Data Frame Analytics: removing scss overrides for exploration pages
(#197724)\n\n## Summary\r\n\r\nRelated meta issue:
https://github.com/elastic/kibana/issues/140695\r\n\r\nRegression model
evaluation before:\r\n\r\n<img width=\"1455\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/cfdb794d-4576-4c10-96c1-0b3856857cdd\">\r\n\r\nAfter:\r\n\r\n<img
width=\"1455\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/4c2bbdf3-85ef-489e-bc3a-1281d3531328\">\r\n\r\n\r\nClassification
evaluation before:\r\n\r\n<img width=\"1474\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/e565cac3-8c1d-4e4f-8cac-7ea8abf4358d\">\r\n\r\nAfter
switching fully to flex layout as we no longer support IE11 and\r\nall
the workarounds were no longer needed (Note it's all left
aligned\r\nnow):\r\n\r\n<img width=\"1467\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/280ea446-17fc-4622-a925-57ef6c01cd89\">\r\n\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [ ] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\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- [ ] Any UI touched in this PR is
usable by keyboard only (learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [ ] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[ ] If a plugin configuration key changed, check if it needs to
be\r\nallowlisted in the cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n-
[ ] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[ ] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n---------\r\n\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"669dc381bfc671637d4763930c8b4ede7ad7fbf3","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":[":ml","release_note:skip","Feature:Data
Frame Analytics","v9.0.0","backport:version","v8.17.0"],"title":"[ML]
Data Frame Analytics: removing scss overrides for exploration pages
","number":197724,"url":"https://github.com/elastic/kibana/pull/197724","mergeCommit":{"message":"[ML]
Data Frame Analytics: removing scss overrides for exploration pages
(#197724)\n\n## Summary\r\n\r\nRelated meta issue:
https://github.com/elastic/kibana/issues/140695\r\n\r\nRegression model
evaluation before:\r\n\r\n<img width=\"1455\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/cfdb794d-4576-4c10-96c1-0b3856857cdd\">\r\n\r\nAfter:\r\n\r\n<img
width=\"1455\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/4c2bbdf3-85ef-489e-bc3a-1281d3531328\">\r\n\r\n\r\nClassification
evaluation before:\r\n\r\n<img width=\"1474\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/e565cac3-8c1d-4e4f-8cac-7ea8abf4358d\">\r\n\r\nAfter
switching fully to flex layout as we no longer support IE11 and\r\nall
the workarounds were no longer needed (Note it's all left
aligned\r\nnow):\r\n\r\n<img width=\"1467\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/280ea446-17fc-4622-a925-57ef6c01cd89\">\r\n\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [ ] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\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- [ ] Any UI touched in this PR is
usable by keyboard only (learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [ ] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[ ] If a plugin configuration key changed, check if it needs to
be\r\nallowlisted in the cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n-
[ ] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[ ] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n---------\r\n\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"669dc381bfc671637d4763930c8b4ede7ad7fbf3"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/197724","number":197724,"mergeCommit":{"message":"[ML]
Data Frame Analytics: removing scss overrides for exploration pages
(#197724)\n\n## Summary\r\n\r\nRelated meta issue:
https://github.com/elastic/kibana/issues/140695\r\n\r\nRegression model
evaluation before:\r\n\r\n<img width=\"1455\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/cfdb794d-4576-4c10-96c1-0b3856857cdd\">\r\n\r\nAfter:\r\n\r\n<img
width=\"1455\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/4c2bbdf3-85ef-489e-bc3a-1281d3531328\">\r\n\r\n\r\nClassification
evaluation before:\r\n\r\n<img width=\"1474\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/e565cac3-8c1d-4e4f-8cac-7ea8abf4358d\">\r\n\r\nAfter
switching fully to flex layout as we no longer support IE11 and\r\nall
the workarounds were no longer needed (Note it's all left
aligned\r\nnow):\r\n\r\n<img width=\"1467\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/280ea446-17fc-4622-a925-57ef6c01cd89\">\r\n\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [ ] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[
]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\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- [ ] Any UI touched in this PR is
usable by keyboard only (learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [ ] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[ ] If a plugin configuration key changed, check if it needs to
be\r\nallowlisted in the cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\r\n-
[ ] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[ ] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n---------\r\n\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"669dc381bfc671637d4763930c8b4ede7ad7fbf3"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Melissa Alvarez <melissa.alvarez@elastic.co>
---
 .../data_frame_analytics/_index.scss          |   4 +-
 .../_classification_exploration.scss          |  47 ---
 .../classification_exploration.tsx            |  26 +-
 .../evaluate_panel.tsx                        | 382 ++++++++++--------
 .../evaluate_stat.tsx                         |  43 +-
 .../data_view_prompt/data_view_prompt.tsx     |  58 +--
 .../expandable_section.scss                   |  13 -
 .../expandable_section/expandable_section.tsx | 116 +++---
 .../expandable_section_results.tsx            |  10 +-
 .../expandable_section_splom.tsx              |  10 +-
 .../regression_exploration/_index.scss        |   1 -
 .../_regression_exploration.scss              |   3 -
 .../regression_exploration/evaluate_stat.tsx  |  43 +-
 .../expanded_row_details_pane.scss            |   8 -
 .../expanded_row_details_pane.tsx             |  25 +-
 .../create_analytics_button/_index.scss       |   4 -
 .../timeseries_chart/timeseries_chart.js      |   2 -
 17 files changed, 381 insertions(+), 414 deletions(-)
 delete mode 100644 x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/_classification_exploration.scss
 delete mode 100644 x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section.scss
 delete mode 100644 x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/regression_exploration/_index.scss
 delete mode 100644 x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/regression_exploration/_regression_exploration.scss
 delete mode 100644 x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.scss
 delete mode 100644 x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_button/_index.scss

diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/_index.scss b/x-pack/plugins/ml/public/application/data_frame_analytics/_index.scss
index a043a691c9ef6..9b97275417d50 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/_index.scss
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/_index.scss
@@ -1,5 +1,3 @@
-@import 'pages/analytics_exploration/components/regression_exploration/index';
 @import 'pages/job_map/components/index';
 @import 'pages/analytics_management/components/analytics_list/index';
-@import 'pages/analytics_management/components/create_analytics_button/index';
-@import 'pages/analytics_creation/components/index';
+@import 'pages/analytics_creation/components/index';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/_classification_exploration.scss b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/_classification_exploration.scss
deleted file mode 100644
index c429daaf3c8dc..0000000000000
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/_classification_exploration.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-/* Fixed width so we can align it with the padding of the AUC ROC chart. */
-$labelColumnWidth: 80px;
-
-/*
-  Workaround for EuiDataGrid within a Flex Layout,
-  this tricks browsers treating the width as a px value instead of %
-*/
-.mlDataFrameAnalyticsClassification {
-  width: 100%;
-}
-
-.mlDataFrameAnalyticsClassification__evaluateSectionContent {
-  padding: 0 5%;
-}
-
-/*
-  The following two classes are a workaround to avoid having EuiDataGrid in a flex layout
-  and just uses a legacy approach for a two column layout so we don't break IE11.
-*/
-.mlDataFrameAnalyticsClassification__evaluateSectionContent:after {
-  content: '';
-  display: table;
-  clear: both;
-}
-
-.mlDataFrameAnalyticsClassification__actualLabel {
-  float: left;
-  width: $labelColumnWidth;
-  padding-top: $euiSize * 4;
-}
-
-/*
-  Gives EuiDataGrid a min-width of 480px, otherwise the columns options will disappear if you hide all columns.
-*/
-.mlDataFrameAnalyticsClassification__dataGridMinWidth {
-  float: left;
-  min-width: 480px;
-  width: calc(100% - #{$labelColumnWidth});
-
-  .euiDataGridRowCell--boolean {
-    text-transform: none;
-  }
-}
-
-.mlDataFrameAnalyticsClassification__evaluationMetrics {
-  width: 60%;
-}
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/classification_exploration.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/classification_exploration.tsx
index 8a198666a9732..fac1c8e76a759 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/classification_exploration.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/classification_exploration.tsx
@@ -19,18 +19,16 @@ interface Props {
 }
 
 export const ClassificationExploration: FC<Props> = ({ jobId }) => (
-  <div className="mlDataFrameAnalyticsClassification">
-    <ExplorationPageWrapper
-      jobId={jobId}
-      title={i18n.translate(
-        'xpack.ml.dataframe.analytics.classificationExploration.tableJobIdTitle',
-        {
-          defaultMessage: 'Destination index for classification job ID {jobId}',
-          values: { jobId },
-        }
-      )}
-      EvaluatePanel={EvaluatePanel}
-      FeatureImportanceSummaryPanel={FeatureImportanceSummaryPanel}
-    />
-  </div>
+  <ExplorationPageWrapper
+    jobId={jobId}
+    title={i18n.translate(
+      'xpack.ml.dataframe.analytics.classificationExploration.tableJobIdTitle',
+      {
+        defaultMessage: 'Destination index for classification job ID {jobId}',
+        values: { jobId },
+      }
+    )}
+    EvaluatePanel={EvaluatePanel}
+    FeatureImportanceSummaryPanel={FeatureImportanceSummaryPanel}
+  />
 );
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/evaluate_panel.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/evaluate_panel.tsx
index 0298a70ba4afa..0d30b0371a027 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/evaluate_panel.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/evaluate_panel.tsx
@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-import './_classification_exploration.scss';
-
 import type { FC } from 'react';
 import React, { useEffect, useState } from 'react';
 
@@ -291,190 +289,218 @@ export const EvaluatePanel: FC<EvaluatePanelProps> = ({ jobConfig, jobStatus, se
         }
         contentPadding={true}
         content={
-          <>
-            {!isLoadingConfusionMatrix ? (
-              <>
-                {errorConfusionMatrix !== null && <ErrorCallout error={errorConfusionMatrix} />}
-                {errorConfusionMatrix === null && (
+          <EuiFlexGroup direction="column" css={{ width: '80%' }} gutterSize="l">
+            <EuiFlexItem>
+              {/* Confusion matrix title and table */}
+              <EuiFlexGroup direction="column">
+                {!isLoadingConfusionMatrix ? (
                   <>
-                    <EuiFlexGroup gutterSize="none" alignItems="center">
-                      <EuiTitle size="xxs">
-                        <span>{getHelpText(dataSubsetTitle)}</span>
-                      </EuiTitle>
-                      <EuiFlexItem grow={false}>
-                        <MulticlassConfusionMatrixHelpPopover />
-                      </EuiFlexItem>
-                    </EuiFlexGroup>
-                    {/* BEGIN TABLE ELEMENTS */}
-                    <EuiSpacer size="m" />
-                    <div className="mlDataFrameAnalyticsClassification__evaluateSectionContent">
-                      <div className="mlDataFrameAnalyticsClassification__actualLabel">
-                        <EuiText size="xs" color="subdued">
-                          <FormattedMessage
-                            id="xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixActualLabel"
-                            defaultMessage="Actual class"
-                          />
-                        </EuiText>
-                      </div>
-                      <div className="mlDataFrameAnalyticsClassification__dataGridMinWidth">
-                        {columns.length > 0 && columnsData.length > 0 && (
-                          <>
-                            <div>
+                    {errorConfusionMatrix !== null && <ErrorCallout error={errorConfusionMatrix} />}
+                    {errorConfusionMatrix === null && (
+                      <>
+                        {/* confusion matrix title */}
+                        <EuiFlexItem>
+                          <EuiFlexGroup gutterSize="none" alignItems="center">
+                            <EuiFlexItem grow={false}>
+                              <EuiTitle size="xxs">
+                                <span>{getHelpText(dataSubsetTitle)}</span>
+                              </EuiTitle>
+                            </EuiFlexItem>
+                            <EuiFlexItem grow={false}>
+                              <MulticlassConfusionMatrixHelpPopover />
+                            </EuiFlexItem>
+                          </EuiFlexGroup>
+                        </EuiFlexItem>
+                        {/* confusion matrix table */}
+                        <EuiFlexItem>
+                          <EuiFlexGroup
+                            gutterSize="xs"
+                            alignItems="center"
+                            justifyContent="spaceAround"
+                          >
+                            <EuiFlexItem grow={false}>
                               <EuiText size="xs" color="subdued">
                                 <FormattedMessage
-                                  id="xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixPredictedLabel"
-                                  defaultMessage="Predicted class"
+                                  id="xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixActualLabel"
+                                  defaultMessage="Actual class"
                                 />
                               </EuiText>
-                            </div>
-                            <EuiSpacer size="s" />
-                            <EuiDataGrid
-                              data-test-subj="mlDFAnalyticsClassificationExplorationConfusionMatrix"
-                              aria-label={i18n.translate(
-                                'xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixLabel',
-                                {
-                                  defaultMessage: 'Classification confusion matrix',
-                                }
-                              )}
-                              columns={shownColumns}
-                              columnVisibility={{ visibleColumns, setVisibleColumns }}
-                              rowCount={rowCount}
-                              renderCellValue={renderCellValue}
-                              inMemory={{ level: 'sorting' }}
-                              toolbarVisibility={{
-                                showColumnSelector: true,
-                                showDisplaySelector: false,
-                                showFullScreenSelector: false,
-                                showSortSelector: false,
-                              }}
-                              gridStyle={{
-                                border: 'all',
-                                fontSize: 's',
-                                cellPadding: 's',
-                                stripes: false,
-                                rowHover: 'none',
-                                header: 'shade',
-                              }}
-                              trailingControlColumns={
-                                showTrailingColumns === true && showFullColumns === false
-                                  ? getTrailingControlColumns(extraColumns, setShowFullColumns)
-                                  : undefined
-                              }
-                            />
-                          </>
-                        )}
-                      </div>
-                    </div>
-                    {/* END TABLE ELEMENTS */}
-                  </>
-                )}
-              </>
-            ) : null}
-            {/* Accuracy and Recall */}
-            <EuiSpacer size="xl" />
-            <EuiTitle size="xxs">
-              <span>{evaluationQualityMetricsHelpText}</span>
-            </EuiTitle>
-            <EuiSpacer size="s" />
-            <EuiFlexGroup
-              direction="column"
-              justifyContent="center"
-              className="mlDataFrameAnalyticsClassification__evaluationMetrics"
-            >
-              <EuiFlexItem grow={false}>
-                <EuiFlexGroup gutterSize="l">
-                  <EuiFlexItem grow={false}>
-                    <EvaluateStat
-                      dataTestSubj={'mlDFAEvaluateSectionOverallAccuracyStat'}
-                      title={overallAccuracy}
-                      isLoading={isLoadingConfusionMatrix}
-                      description={i18n.translate(
-                        'xpack.ml.dataframe.analytics.classificationExploration.evaluateSectionOverallAccuracyStat',
-                        {
-                          defaultMessage: 'Overall accuracy',
-                        }
-                      )}
-                      tooltipContent={i18n.translate(
-                        'xpack.ml.dataframe.analytics.classificationExploration.evaluateSectionOverallAccuracyTooltip',
-                        {
-                          defaultMessage:
-                            'The ratio of the number of correct class predictions to the total number of predictions.',
-                        }
-                      )}
-                    />
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={false}>
-                    <EvaluateStat
-                      dataTestSubj={'mlDFAEvaluateSectionAvgRecallStat'}
-                      title={avgRecall}
-                      isLoading={isLoadingConfusionMatrix}
-                      description={i18n.translate(
-                        'xpack.ml.dataframe.analytics.classificationExploration.evaluateSectionMeanRecallStat',
-                        {
-                          defaultMessage: 'Mean recall',
-                        }
-                      )}
-                      tooltipContent={i18n.translate(
-                        'xpack.ml.dataframe.analytics.classificationExploration.evaluateSectionAvgRecallTooltip',
-                        {
-                          defaultMessage:
-                            'Mean recall shows how many of the data points that are actual class members were identified correctly as class members.',
-                        }
-                      )}
-                    />
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EvaluationQualityMetricsTable evaluationMetricsItems={evaluationMetricsItems} />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-            {/* AUC ROC Chart */}
-            <EuiSpacer size="l" />
-            <EuiFlexGroup gutterSize="none" alignItems="center">
-              <EuiTitle size="xxs">
-                <span>
-                  <FormattedMessage
-                    id="xpack.ml.dataframe.analytics.classificationExploration.evaluateSectionRocTitle"
-                    defaultMessage="Receiver operating characteristic (ROC) curve"
-                  />
-                </span>
-              </EuiTitle>
-              <EuiFlexItem grow={false}>
-                <RocCurveHelpPopover />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-            {Array.isArray(errorRocCurve) && (
-              <ErrorCallout
-                error={
-                  <>
-                    {errorRocCurve.map((e) => (
-                      <>
-                        {e}
-                        <br />
+                            </EuiFlexItem>
+                            <EuiFlexItem>
+                              <EuiFlexGroup direction="column" gutterSize="s">
+                                {columns.length > 0 && columnsData.length > 0 ? (
+                                  <>
+                                    <EuiFlexItem>
+                                      <EuiText size="xs" color="subdued">
+                                        <FormattedMessage
+                                          id="xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixPredictedLabel"
+                                          defaultMessage="Predicted class"
+                                        />
+                                      </EuiText>
+                                    </EuiFlexItem>
+                                    <EuiFlexItem>
+                                      <EuiDataGrid
+                                        data-test-subj="mlDFAnalyticsClassificationExplorationConfusionMatrix"
+                                        aria-label={i18n.translate(
+                                          'xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixLabel',
+                                          {
+                                            defaultMessage: 'Classification confusion matrix',
+                                          }
+                                        )}
+                                        columns={shownColumns}
+                                        columnVisibility={{ visibleColumns, setVisibleColumns }}
+                                        rowCount={rowCount}
+                                        renderCellValue={renderCellValue}
+                                        inMemory={{ level: 'sorting' }}
+                                        toolbarVisibility={{
+                                          showColumnSelector: true,
+                                          showDisplaySelector: false,
+                                          showFullScreenSelector: false,
+                                          showSortSelector: false,
+                                        }}
+                                        gridStyle={{
+                                          border: 'all',
+                                          fontSize: 's',
+                                          cellPadding: 's',
+                                          stripes: false,
+                                          rowHover: 'none',
+                                          header: 'shade',
+                                        }}
+                                        trailingControlColumns={
+                                          showTrailingColumns === true && showFullColumns === false
+                                            ? getTrailingControlColumns(
+                                                extraColumns,
+                                                setShowFullColumns
+                                              )
+                                            : undefined
+                                        }
+                                      />
+                                    </EuiFlexItem>
+                                  </>
+                                ) : null}
+                              </EuiFlexGroup>
+                            </EuiFlexItem>
+                          </EuiFlexGroup>
+                        </EuiFlexItem>
                       </>
-                    ))}
+                    )}
                   </>
-                }
-              />
-            )}
-            {!isLoadingRocCurve && errorRocCurve === null && rocCurveData.length > 0 && (
-              <div
-                className="mlDataFrameAnalyticsClassification__evaluateSectionContent"
-                data-test-subj="mlDFAnalyticsClassificationExplorationRocCurveChart"
-              >
-                <VegaChart
-                  vegaSpec={getRocCurveChartVegaLiteSpec(
-                    classificationClasses,
-                    rocCurveData,
-                    getDependentVar(jobConfig.analysis),
-                    euiTheme
+                ) : null}
+              </EuiFlexGroup>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              {/* evaluation quality metrics */}
+              <EuiFlexGroup direction="column" gutterSize="s">
+                <EuiFlexItem>
+                  {/* evaluation title */}
+                  <EuiTitle size="xxs">
+                    <span>{evaluationQualityMetricsHelpText}</span>
+                  </EuiTitle>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  {/* evaluation stats */}
+                  <EuiFlexGroup gutterSize="l">
+                    <EuiFlexItem grow={false}>
+                      <EvaluateStat
+                        dataTestSubj={'mlDFAEvaluateSectionOverallAccuracyStat'}
+                        title={overallAccuracy}
+                        isLoading={isLoadingConfusionMatrix}
+                        description={i18n.translate(
+                          'xpack.ml.dataframe.analytics.classificationExploration.evaluateSectionOverallAccuracyStat',
+                          {
+                            defaultMessage: 'Overall accuracy',
+                          }
+                        )}
+                        tooltipContent={i18n.translate(
+                          'xpack.ml.dataframe.analytics.classificationExploration.evaluateSectionOverallAccuracyTooltip',
+                          {
+                            defaultMessage:
+                              'The ratio of the number of correct class predictions to the total number of predictions.',
+                          }
+                        )}
+                      />
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <EvaluateStat
+                        dataTestSubj={'mlDFAEvaluateSectionAvgRecallStat'}
+                        title={avgRecall}
+                        isLoading={isLoadingConfusionMatrix}
+                        description={i18n.translate(
+                          'xpack.ml.dataframe.analytics.classificationExploration.evaluateSectionMeanRecallStat',
+                          {
+                            defaultMessage: 'Mean recall',
+                          }
+                        )}
+                        tooltipContent={i18n.translate(
+                          'xpack.ml.dataframe.analytics.classificationExploration.evaluateSectionAvgRecallTooltip',
+                          {
+                            defaultMessage:
+                              'Mean recall shows how many of the data points that are actual class members were identified correctly as class members.',
+                          }
+                        )}
+                      />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiSpacer size="s" />
+                  <EvaluationQualityMetricsTable evaluationMetricsItems={evaluationMetricsItems} />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              {/* AUC ROC Chart */}
+              <EuiFlexGroup direction="column">
+                <EuiFlexItem>
+                  <EuiFlexGroup gutterSize="none" alignItems="center">
+                    <EuiTitle size="xxs">
+                      <span>
+                        <FormattedMessage
+                          id="xpack.ml.dataframe.analytics.classificationExploration.evaluateSectionRocTitle"
+                          defaultMessage="Receiver operating characteristic (ROC) curve"
+                        />
+                      </span>
+                    </EuiTitle>
+                    <EuiFlexItem grow={false}>
+                      <RocCurveHelpPopover />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  {Array.isArray(errorRocCurve) && (
+                    <ErrorCallout
+                      error={
+                        <>
+                          {errorRocCurve.map((e) => (
+                            <>
+                              {e}
+                              <br />
+                            </>
+                          ))}
+                        </>
+                      }
+                    />
+                  )}
+                  {!isLoadingRocCurve && errorRocCurve === null && rocCurveData.length > 0 && (
+                    <div
+                      className="mlDataFrameAnalyticsClassification__evaluateSectionContent"
+                      data-test-subj="mlDFAnalyticsClassificationExplorationRocCurveChart"
+                    >
+                      <VegaChart
+                        vegaSpec={getRocCurveChartVegaLiteSpec(
+                          classificationClasses,
+                          rocCurveData,
+                          getDependentVar(jobConfig.analysis),
+                          euiTheme
+                        )}
+                      />
+                    </div>
                   )}
-                />
-              </div>
-            )}
-            {isLoadingRocCurve && <VegaChartLoading />}
-          </>
+                  {isLoadingRocCurve && <VegaChartLoading />}
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          </EuiFlexGroup>
         }
       />
       <EuiSpacer size="m" />
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/evaluate_stat.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/evaluate_stat.tsx
index c4ebd2da2ead9..279744e479b80 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/evaluate_stat.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/evaluate_stat.tsx
@@ -7,7 +7,7 @@
 
 import type { FC } from 'react';
 import React from 'react';
-import { EuiStat, EuiIconTip, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiStat, EuiIconTip, EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui';
 import { EMPTY_STAT } from '../../../../common/analytics';
 
 interface Props {
@@ -24,22 +24,25 @@ export const EvaluateStat: FC<Props> = ({
   description,
   dataTestSubj,
   tooltipContent,
-}) => (
-  <EuiFlexGroup gutterSize="xs" data-test-subj={dataTestSubj}>
-    <EuiFlexItem grow={false}>
-      <EuiStat
-        reverse
-        isLoading={isLoading}
-        title={title !== null ? Math.round(title * 1000) / 1000 : EMPTY_STAT}
-        description={description}
-        titleSize="xs"
-      />
-    </EuiFlexItem>
-    <EuiFlexItem grow={false}>
-      <EuiIconTip
-        anchorClassName="mlDataFrameAnalyticsRegression__evaluateStat"
-        content={tooltipContent}
-      />
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
+}) => {
+  const {
+    euiTheme: { size },
+  } = useEuiTheme();
+
+  return (
+    <EuiFlexGroup gutterSize="xs" data-test-subj={dataTestSubj} alignItems="flexEnd">
+      <EuiFlexItem grow={false}>
+        <EuiStat
+          reverse
+          isLoading={isLoading}
+          title={title !== null ? Math.round(title * 1000) / 1000 : EMPTY_STAT}
+          description={description}
+          titleSize="xs"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false} css={{ paddingBottom: `${size.xxs}` }}>
+        <EuiIconTip content={tooltipContent} />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/data_view_prompt/data_view_prompt.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/data_view_prompt/data_view_prompt.tsx
index 9f3cfaffc53fb..6de4a59521313 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/data_view_prompt/data_view_prompt.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/data_view_prompt/data_view_prompt.tsx
@@ -8,7 +8,7 @@
 import type { FC } from 'react';
 import React, { useMemo } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiLink, EuiText } from '@elastic/eui';
+import { EuiLink, EuiText, useEuiTheme } from '@elastic/eui';
 import { useMlKibana } from '../../../../../contexts/kibana';
 
 interface Props {
@@ -24,6 +24,10 @@ export const DataViewPrompt: FC<Props> = ({ destIndex, color }) => {
     },
   } = useMlKibana();
 
+  const {
+    euiTheme: { size },
+  } = useEuiTheme();
+
   const canCreateDataView = useMemo(
     () =>
       capabilities.savedObjectsManagement.edit === true || capabilities.indexPatterns.save === true,
@@ -31,36 +35,34 @@ export const DataViewPrompt: FC<Props> = ({ destIndex, color }) => {
   );
 
   return (
-    <>
-      <EuiText size="xs" color={color ?? 'warning'}>
+    <EuiText size="xs" color={color ?? 'warning'} css={{ padding: `${size.s}` }}>
+      <FormattedMessage
+        id="xpack.ml.dataframe.analytics.dataViewPromptMessage"
+        defaultMessage="No data view exists for index {destIndex}. "
+        values={{
+          destIndex: destIndex ?? '',
+        }}
+      />
+      {canCreateDataView === true ? (
         <FormattedMessage
-          id="xpack.ml.dataframe.analytics.dataViewPromptMessage"
-          defaultMessage="No data view exists for index {destIndex}. "
+          id="xpack.ml.dataframe.analytics.dataViewPromptLink"
+          defaultMessage="{linkToDataViewManagement}{destIndex}."
           values={{
-            destIndex: destIndex ?? '',
+            destIndex: destIndex ? ` for ${destIndex}` : '',
+            linkToDataViewManagement: (
+              <EuiLink
+                href={`${basePath.get()}/app/management/kibana/dataViews/create`}
+                target="_blank"
+              >
+                <FormattedMessage
+                  id="xpack.ml.dataframe.analytics.dataViewPromptLinkText"
+                  defaultMessage="Create a data view"
+                />
+              </EuiLink>
+            ),
           }}
         />
-        {canCreateDataView === true ? (
-          <FormattedMessage
-            id="xpack.ml.dataframe.analytics.dataViewPromptLink"
-            defaultMessage="{linkToDataViewManagement}{destIndex}."
-            values={{
-              destIndex: destIndex ? ` for ${destIndex}` : '',
-              linkToDataViewManagement: (
-                <EuiLink
-                  href={`${basePath.get()}/app/management/kibana/dataViews/create`}
-                  target="_blank"
-                >
-                  <FormattedMessage
-                    id="xpack.ml.dataframe.analytics.dataViewPromptLinkText"
-                    defaultMessage="Create a data view"
-                  />
-                </EuiLink>
-              ),
-            }}
-          />
-        ) : null}
-      </EuiText>
-    </>
+      ) : null}
+    </EuiText>
   );
 };
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section.scss b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section.scss
deleted file mode 100644
index 59fd59d69c4a5..0000000000000
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.mlExpandableSection {
-  padding: $euiSizeS $euiSize;
-}
-
-.mlExpandableSection-contentPadding {
-  padding: $euiSizeS;
-}
-
-// Make sure the charts tooltip in popover
-// have higher zIndex than Eui popover cells
-[id^='echTooltipPortal'] {
-  z-index: $euiZLevel9 !important;
-}
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section.tsx
index 68de97b30b575..9ba13f16926fe 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section.tsx
@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-import './expandable_section.scss';
-
 import type { FC, ReactNode } from 'react';
 import React, { useCallback, useMemo } from 'react';
 
@@ -18,6 +16,7 @@ import {
   EuiSkeletonText,
   EuiPanel,
   EuiText,
+  useEuiTheme,
 } from '@elastic/eui';
 import {
   getDefaultExplorationPageUrlState,
@@ -59,6 +58,10 @@ export const ExpandableSection: FC<ExpandableSectionProps> = ({
   docsLink,
   urlStateKey,
 }) => {
+  const {
+    euiTheme: { size },
+  } = useEuiTheme();
+
   const overrides = useMemo(
     () => (isExpandedDefault !== undefined ? { [urlStateKey]: isExpandedDefault } : undefined),
     [urlStateKey, isExpandedDefault]
@@ -77,68 +80,65 @@ export const ExpandableSection: FC<ExpandableSectionProps> = ({
 
   return (
     <EuiPanel
-      paddingSize="none"
+      paddingSize="s"
       data-test-subj={`mlDFExpandableSection-${dataTestId}`}
       hasShadow={false}
       hasBorder
     >
-      <div className="mlExpandableSection">
-        <EuiFlexGroup justifyContent="spaceBetween" gutterSize="none" alignItems="center">
-          <EuiFlexItem>
-            <EuiFlexGroup gutterSize="l">
-              <EuiFlexItem grow={false}>
-                <EuiButtonEmpty
-                  onClick={toggleExpanded}
-                  iconType={isExpanded ? 'arrowDown' : 'arrowRight'}
-                  iconSide="left"
-                  flush="left"
-                  data-test-subj={`mlDFExpandableSection-${dataTestId}-toggle-button`}
-                >
-                  <EuiText size="m" color="default" style={{ fontWeight: 'bold' }}>
-                    <p>{title}</p>
-                  </EuiText>
-                </EuiButtonEmpty>
-              </EuiFlexItem>
-              {headerItems === HEADER_ITEMS_LOADING && <EuiSkeletonText lines={1} />}
-              {isHeaderItems(headerItems)
-                ? headerItems.map(({ label, value, id }) => (
-                    <EuiFlexItem
-                      grow={false}
-                      key={id}
-                      data-test-subj={`mlDFExpandableSectionItem-${dataTestId}-${id}`}
-                    >
-                      {label !== undefined && value !== undefined ? (
-                        <EuiFlexGroup gutterSize="xs" alignItems="center">
-                          <EuiFlexItem grow={false}>
-                            <EuiText size="xs" textAlign="center">
-                              <p>{label}</p>
-                            </EuiText>
-                          </EuiFlexItem>
-                          <EuiFlexItem grow={false}>
-                            <EuiBadge>{value}</EuiBadge>
-                          </EuiFlexItem>
-                        </EuiFlexGroup>
-                      ) : null}
-                      {label === undefined ? (
-                        <EuiFlexGroup alignItems="center">
-                          <EuiFlexItem grow={false}>
-                            <EuiText size="xs" color="subdued" textAlign="center">
-                              {value}
-                            </EuiText>
-                          </EuiFlexItem>
-                        </EuiFlexGroup>
-                      ) : null}
-                    </EuiFlexItem>
-                  ))
-                : null}
-            </EuiFlexGroup>
-          </EuiFlexItem>
-          {docsLink !== undefined && <EuiFlexItem grow={false}>{docsLink}</EuiFlexItem>}
-        </EuiFlexGroup>
-      </div>
+      <EuiFlexGroup justifyContent="spaceBetween" gutterSize="none" alignItems="center">
+        <EuiFlexItem>
+          <EuiFlexGroup gutterSize="l">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty
+                onClick={toggleExpanded}
+                iconType={isExpanded ? 'arrowDown' : 'arrowRight'}
+                iconSide="left"
+                data-test-subj={`mlDFExpandableSection-${dataTestId}-toggle-button`}
+              >
+                <EuiText size="m" color="default" style={{ fontWeight: 'bold' }}>
+                  <p>{title}</p>
+                </EuiText>
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+            {headerItems === HEADER_ITEMS_LOADING && <EuiSkeletonText lines={1} />}
+            {isHeaderItems(headerItems)
+              ? headerItems.map(({ label, value, id }) => (
+                  <EuiFlexItem
+                    grow={false}
+                    key={id}
+                    data-test-subj={`mlDFExpandableSectionItem-${dataTestId}-${id}`}
+                  >
+                    {label !== undefined && value !== undefined ? (
+                      <EuiFlexGroup gutterSize="xs" alignItems="center">
+                        <EuiFlexItem grow={false}>
+                          <EuiText size="xs" textAlign="center">
+                            <p>{label}</p>
+                          </EuiText>
+                        </EuiFlexItem>
+                        <EuiFlexItem grow={false}>
+                          <EuiBadge>{value}</EuiBadge>
+                        </EuiFlexItem>
+                      </EuiFlexGroup>
+                    ) : null}
+                    {label === undefined ? (
+                      <EuiFlexGroup alignItems="center">
+                        <EuiFlexItem grow={false}>
+                          <EuiText size="xs" color="subdued" textAlign="center">
+                            {value}
+                          </EuiText>
+                        </EuiFlexItem>
+                      </EuiFlexGroup>
+                    ) : null}
+                  </EuiFlexItem>
+                ))
+              : null}
+          </EuiFlexGroup>
+        </EuiFlexItem>
+        {docsLink !== undefined && <EuiFlexItem grow={false}>{docsLink}</EuiFlexItem>}
+      </EuiFlexGroup>
       {isExpanded && (
         <div
-          className={contentPadding ? 'mlExpandableSection-contentPadding' : ''}
+          css={contentPadding ? { padding: `${size.s}` } : undefined}
           data-test-subj={`mlDFExpandableSection-${dataTestId}-content`}
         >
           {content}
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section_results.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section_results.tsx
index cc296a42afbae..d8c20f7f3d6fc 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section_results.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section_results.tsx
@@ -23,6 +23,7 @@ import {
   EuiSpacer,
   EuiText,
   EuiToolTip,
+  useEuiTheme,
 } from '@elastic/eui';
 
 import type { DataView } from '@kbn/data-views-plugin/public';
@@ -142,6 +143,9 @@ export const ExpandableSectionResults: FC<ExpandableSectionResultsProps> = ({
       notifications: { toasts },
     },
   } = useMlKibana();
+  const {
+    euiTheme: { size },
+  } = useEuiTheme();
 
   const dataViewId = dataView?.id;
 
@@ -371,14 +375,12 @@ export const ExpandableSectionResults: FC<ExpandableSectionResultsProps> = ({
   const resultsSectionContent = (
     <>
       {jobConfig !== undefined && needsDestDataView && (
-        <div className="mlExpandableSection-contentPadding">
-          <DataViewPrompt destIndex={jobConfig.dest.index} />
-        </div>
+        <DataViewPrompt destIndex={jobConfig.dest.index} />
       )}
       {jobConfig !== undefined &&
         (isRegressionAnalysis(jobConfig.analysis) ||
           isClassificationAnalysis(jobConfig.analysis)) && (
-          <EuiText size="xs" color="subdued" className="mlExpandableSection-contentPadding">
+          <EuiText size="xs" color="subdued" css={{ padding: `${size.s}` }}>
             {tableItems.length === SEARCH_SIZE ? showingFirstDocs : showingDocs}
           </EuiText>
         )}
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section_splom.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section_splom.tsx
index 22b31abb17661..8ada4cab23410 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section_splom.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section_splom.tsx
@@ -5,14 +5,12 @@
  * 2.0.
  */
 
-import './expandable_section.scss';
-
 import type { FC } from 'react';
 import React from 'react';
 
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import { EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
+import { EuiHorizontalRule, EuiSpacer, useEuiTheme } from '@elastic/eui';
 
 import type { ScatterplotMatrixProps } from '../../../../../components/scatterplot_matrix';
 import { ScatterplotMatrix } from '../../../../../components/scatterplot_matrix';
@@ -20,11 +18,15 @@ import { ScatterplotMatrix } from '../../../../../components/scatterplot_matrix'
 import { ExpandableSection } from './expandable_section';
 
 export const ExpandableSectionSplom: FC<ScatterplotMatrixProps> = (props) => {
+  const {
+    euiTheme: { size },
+  } = useEuiTheme();
+
   const splomSectionHeaderItems = undefined;
   const splomSectionContent = (
     <>
       <EuiHorizontalRule size="full" margin="none" />
-      <div className="mlExpandableSection-contentPadding">
+      <div css={{ padding: `${size.s}` }}>
         <ScatterplotMatrix {...props} />
       </div>
     </>
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/regression_exploration/_index.scss b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/regression_exploration/_index.scss
deleted file mode 100644
index bb948785d3efa..0000000000000
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/regression_exploration/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'regression_exploration';
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/regression_exploration/_regression_exploration.scss b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/regression_exploration/_regression_exploration.scss
deleted file mode 100644
index edcc9870ff93b..0000000000000
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/regression_exploration/_regression_exploration.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.mlDataFrameAnalyticsRegression__evaluateStat {
-  padding-top: $euiSizeL;
-}
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/regression_exploration/evaluate_stat.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/regression_exploration/evaluate_stat.tsx
index 89582c51b68f0..f56e1b1dc53f7 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/regression_exploration/evaluate_stat.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/regression_exploration/evaluate_stat.tsx
@@ -9,7 +9,7 @@ import type { FC } from 'react';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiStat, EuiIconTip, EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
+import { EuiStat, EuiIconTip, EuiFlexGroup, EuiFlexItem, EuiLink, useEuiTheme } from '@elastic/eui';
 import { REGRESSION_STATS } from '../../../../common/analytics';
 
 interface Props {
@@ -83,24 +83,25 @@ const tooltipContent = {
   ),
 };
 
-export const EvaluateStat: FC<Props> = ({ isLoading, statType, title, dataTestSubj }) => (
-  <EuiFlexGroup gutterSize="xs" data-test-subj={dataTestSubj}>
-    <EuiFlexItem grow={false}>
-      <EuiStat
-        reverse
-        isLoading={isLoading}
-        title={title}
-        description={statDescriptions[statType]}
-        titleSize="xxs"
-      />
-    </EuiFlexItem>
-    <EuiFlexItem grow={false}>
-      {statType !== REGRESSION_STATS.HUBER && (
-        <EuiIconTip
-          anchorClassName="mlDataFrameAnalyticsRegression__evaluateStat"
-          content={tooltipContent[statType]}
+export const EvaluateStat: FC<Props> = ({ isLoading, statType, title, dataTestSubj }) => {
+  const {
+    euiTheme: { size },
+  } = useEuiTheme();
+
+  return (
+    <EuiFlexGroup gutterSize="xs" data-test-subj={dataTestSubj} alignItems="flexEnd">
+      <EuiFlexItem grow={false}>
+        <EuiStat
+          reverse
+          isLoading={isLoading}
+          title={title}
+          description={statDescriptions[statType]}
+          titleSize="xxs"
         />
-      )}
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
+      </EuiFlexItem>
+      <EuiFlexItem grow={false} css={{ paddingBottom: `${size.xxs}` }}>
+        {statType !== REGRESSION_STATS.HUBER && <EuiIconTip content={tooltipContent[statType]} />}
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.scss b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.scss
deleted file mode 100644
index 5343760b1fe9f..0000000000000
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.mlExpandedRowDetails {
-  padding: $euiSizeS $euiSize $euiSize;
-}
-
-/* Hide the basic table's header */
-.mlExpandedRowDetailsSection thead {
-  display: none;
-}
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx
index 32394ec3d1dd4..2c9a79fbc1c0d 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx
@@ -5,10 +5,9 @@
  * 2.0.
  */
 
-import './expanded_row_details_pane.scss';
-
 import type { FC, ReactElement } from 'react';
 import React from 'react';
+import { i18n } from '@kbn/i18n';
 
 import {
   EuiBasicTable,
@@ -21,6 +20,7 @@ import {
   EuiText,
   EuiTitle,
   EuiSpacer,
+  useEuiTheme,
 } from '@elastic/eui';
 
 export interface SectionItem {
@@ -106,11 +106,21 @@ export const Section: FC<SectionProps> = ({ section }) => {
   const columns = [
     {
       field: 'title',
-      name: '',
+      name: i18n.translate(
+        'xpack.ml.dataframe.analytics.expandedRowDetails.analysisStatsHeaderField',
+        {
+          defaultMessage: 'Field',
+        }
+      ),
     },
     {
       field: 'description',
-      name: '',
+      name: i18n.translate(
+        'xpack.ml.dataframe.analytics.expandedRowDetails.analysisStatsHeaderValue',
+        {
+          defaultMessage: 'Value',
+        }
+      ),
       render: (v: SectionItem['description']) => <>{v}</>,
     },
   ];
@@ -126,7 +136,6 @@ export const Section: FC<SectionProps> = ({ section }) => {
         columns={columns}
         tableCaption={section.title}
         tableLayout="auto"
-        className="mlExpandedRowDetailsSection"
         data-test-subj={`${section.dataTestSubj}-table`}
       />
     </div>
@@ -150,12 +159,16 @@ export const ExpandedRowDetailsPane: FC<ExpandedRowDetailsPaneProps> = ({
   progress,
   dataTestSubj,
 }) => {
+  const {
+    euiTheme: { size },
+  } = useEuiTheme();
+
   return (
     <>
       <EuiSpacer />
       <EuiFlexGroup
         direction="column"
-        className="mlExpandedRowDetails"
+        css={{ padding: `${size.s} ${size.base} ${size.base}` }}
         data-test-subj={dataTestSubj}
         gutterSize="s"
       >
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_button/_index.scss b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_button/_index.scss
deleted file mode 100644
index 14ff9de7ded4d..0000000000000
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_button/_index.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.dataFrameAnalyticsCreateSearchDialog {
-  width: $euiSizeL * 30;
-  min-height: $euiSizeL * 25;
-}
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
index d78ed1ed6e7fc..f39bab106c643 100644
--- a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
@@ -1370,8 +1370,6 @@ class TimeseriesChartIntl extends Component {
       .attr('y', -2)
       .attr('height', contextChartLineTopMargin);
 
-    // Draw the brush handles using SVG foreignObject elements.
-    // Note these are not supported on IE11 and below, so will not appear in IE.
     const leftHandle = contextGroup
       .append('foreignObject')
       .attr('width', 10)

From 5a4a17f67c4c0c84ee313c0a20731ae9e583b84e Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Thu, 31 Oct 2024 06:47:33 +1100
Subject: [PATCH 2/2] [8.x] [Mappings editor] Handle unsupported types
 (#198185) (#198421)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Mappings editor] Handle unsupported types
(#198185)](https://github.com/elastic/kibana/pull/198185)

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

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

<!--BACKPORT [{"author":{"name":"Elena
Stoeva","email":"59341489+ElenaStoeva@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-10-30T18:03:36Z","message":"[Mappings
editor] Handle unsupported types (#198185)\n\nFixes
https://github.com/elastic/kibana/issues/197592\r\n\r\n##
Summary\r\n\r\nThis PR fixes the bug where the index Mappings details
page crashes if\r\nthe index has a mapping field with a type that is not
recognized in\r\nKibana. We fix this by using `getTypeLabelFromField`
instead of directly\r\nfetching the `label` property of an object that
might be `undefined` -\r\n`getTypeLabelFromField` takes care of this
case.\r\n\r\n**How to test:**\r\n1. Create the following index in
Console (it has the unsupported\r\n`counted_keyword` field
type):\r\n```\r\nPUT test\r\n{\r\n \"mappings\": {\r\n \"properties\":
{\r\n \"@timestamp\": {\r\n \"type\": \"date\"\r\n },\r\n \"log\": {\r\n
\"type\": \"text\"\r\n },\r\n \"ids\": {\r\n \"type\":
\"counted_keyword\"\r\n }\r\n }\r\n }\r\n}\r\n```\r\n2. Go to Index
Management and click on the index that we just created\r\n3. Go to
Mappings tab\r\n4. Verify that the page loads correctly\r\n5. Check that
the opening filter and selecting an option doesn't make\r\nthe page
crash.\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4a595968-7cd8-4d36-9a53-264a0d5db50f","sha":"3c5319f2152cb38333e53dd2cc993aada8a38e34","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Kibana
Management","release_note:skip","Feature:Mappings
Editor","v9.0.0","backport:prev-minor","v8.17.0"],"title":"[Mappings
editor] Handle unsupported
types","number":198185,"url":"https://github.com/elastic/kibana/pull/198185","mergeCommit":{"message":"[Mappings
editor] Handle unsupported types (#198185)\n\nFixes
https://github.com/elastic/kibana/issues/197592\r\n\r\n##
Summary\r\n\r\nThis PR fixes the bug where the index Mappings details
page crashes if\r\nthe index has a mapping field with a type that is not
recognized in\r\nKibana. We fix this by using `getTypeLabelFromField`
instead of directly\r\nfetching the `label` property of an object that
might be `undefined` -\r\n`getTypeLabelFromField` takes care of this
case.\r\n\r\n**How to test:**\r\n1. Create the following index in
Console (it has the unsupported\r\n`counted_keyword` field
type):\r\n```\r\nPUT test\r\n{\r\n \"mappings\": {\r\n \"properties\":
{\r\n \"@timestamp\": {\r\n \"type\": \"date\"\r\n },\r\n \"log\": {\r\n
\"type\": \"text\"\r\n },\r\n \"ids\": {\r\n \"type\":
\"counted_keyword\"\r\n }\r\n }\r\n }\r\n}\r\n```\r\n2. Go to Index
Management and click on the index that we just created\r\n3. Go to
Mappings tab\r\n4. Verify that the page loads correctly\r\n5. Check that
the opening filter and selecting an option doesn't make\r\nthe page
crash.\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4a595968-7cd8-4d36-9a53-264a0d5db50f","sha":"3c5319f2152cb38333e53dd2cc993aada8a38e34"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/198185","number":198185,"mergeCommit":{"message":"[Mappings
editor] Handle unsupported types (#198185)\n\nFixes
https://github.com/elastic/kibana/issues/197592\r\n\r\n##
Summary\r\n\r\nThis PR fixes the bug where the index Mappings details
page crashes if\r\nthe index has a mapping field with a type that is not
recognized in\r\nKibana. We fix this by using `getTypeLabelFromField`
instead of directly\r\nfetching the `label` property of an object that
might be `undefined` -\r\n`getTypeLabelFromField` takes care of this
case.\r\n\r\n**How to test:**\r\n1. Create the following index in
Console (it has the unsupported\r\n`counted_keyword` field
type):\r\n```\r\nPUT test\r\n{\r\n \"mappings\": {\r\n \"properties\":
{\r\n \"@timestamp\": {\r\n \"type\": \"date\"\r\n },\r\n \"log\": {\r\n
\"type\": \"text\"\r\n },\r\n \"ids\": {\r\n \"type\":
\"counted_keyword\"\r\n }\r\n }\r\n }\r\n}\r\n```\r\n2. Go to Index
Management and click on the index that we just created\r\n3. Go to
Mappings tab\r\n4. Verify that the page loads correctly\r\n5. Check that
the opening filter and selecting an option doesn't make\r\nthe page
crash.\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/4a595968-7cd8-4d36-9a53-264a0d5db50f","sha":"3c5319f2152cb38333e53dd2cc993aada8a38e34"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Elena Stoeva <59341489+ElenaStoeva@users.noreply.github.com>
---
 .../application/components/mappings_editor/lib/utils.ts     | 6 ++----
 .../components/mappings_editor/use_state_listener.tsx       | 4 ++--
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/utils.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/utils.ts
index 728ba79eedd81..71231c89b673c 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/utils.ts
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/utils.ts
@@ -623,7 +623,7 @@ export const getFieldsMatchingFilterFromState = (
 } => {
   return Object.fromEntries(
     Object.entries(state.fields.byId).filter(([_, fieldId]) =>
-      filteredDataTypes.includes(TYPE_DEFINITION[state.fields.byId[fieldId.id].source.type].label)
+      filteredDataTypes.includes(getTypeLabelFromField(state.fields.byId[fieldId.id].source))
     )
   );
 };
@@ -646,9 +646,7 @@ export const getFieldsFromState = (
   const getField = (fieldId: string) => {
     if (filteredDataTypes) {
       if (
-        filteredDataTypes.includes(
-          TYPE_DEFINITION[normalizedFields.byId[fieldId].source.type].label
-        )
+        filteredDataTypes.includes(getTypeLabelFromField(normalizedFields.byId[fieldId].source))
       ) {
         return normalizedFields.byId[fieldId];
       }
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/use_state_listener.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/use_state_listener.tsx
index 5c5e1c6a289fa..26610773ddbf4 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/use_state_listener.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/use_state_listener.tsx
@@ -26,9 +26,9 @@ import {
   deNormalizeRuntimeFields,
   getAllFieldTypesFromState,
   getFieldsFromState,
+  getTypeLabelFromField,
 } from './lib';
 import { useMappingsState, useDispatch } from './mappings_state_context';
-import { TYPE_DEFINITION } from './constants';
 
 interface Args {
   onChange?: OnUpdateHandler;
@@ -56,7 +56,7 @@ export const useMappingsStateListener = ({ onChange, value, status }: Args) => {
     const allFieldsTypes = getAllFieldTypesFromState(deNormalize(normalize(mappedFields)));
     return allFieldsTypes.map((dataType) => ({
       checked: undefined,
-      label: TYPE_DEFINITION[dataType].label,
+      label: getTypeLabelFromField({ type: dataType }),
       'data-test-subj': `indexDetailsMappingsSelectFilter-${dataType}`,
     }));
   }, [mappedFields]);