From 5dd76c860a8253f0afc363b0169b4c6b3ebc0936 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Fri, 8 May 2020 09:47:23 +0200
Subject: [PATCH 1/5] [ML] Data Frame Analytics: Fix confusion matrix data grid
 width.

---
 .../_classification_exploration.scss          |  9 ++++-
 .../evaluate_panel.tsx                        | 38 ++++++++-----------
 2 files changed, 23 insertions(+), 24 deletions(-)

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
index 1141dddf398b0..3488ac655ecaf 100644
--- 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
@@ -1,4 +1,9 @@
-.euiFormRow.mlDataFrameAnalyticsClassification__actualLabel {
-  padding-top: $euiSize * 4;
+.mlDataFrameAnalyticsClassification__actualLabel {
+  padding-top: $euiSize * 4.2;
 }
 
+/* EuiDataGrid needs a minWidth of 480px, otherwise the columns options will disappear if you hide all columns. */
+.mlDataFrameAnalyticsClassification__dataGridMinWidth {
+  min-width: 480px;
+  width: 90%;
+}
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 af90547606f82..6428b039da79e 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
@@ -12,7 +12,6 @@ import {
   EuiDataGrid,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
   EuiIconTip,
   EuiPanel,
   EuiSpacer,
@@ -394,36 +393,31 @@ export const EvaluatePanel: FC<Props> = ({ jobConfig, jobStatus, searchQuery })
             {/* BEGIN TABLE ELEMENTS */}
             <EuiFlexItem grow={false}>
               <EuiFlexGroup gutterSize="s" style={{ paddingLeft: '5%', paddingRight: '5%' }}>
-                <EuiFlexItem grow={false}>
-                  <EuiFormRow
+                <EuiFlexItem grow={false} style={{ minWidth: '70px' }}>
+                  <EuiText
+                    size="xs"
+                    color="subdued"
                     className="mlDataFrameAnalyticsClassification__actualLabel"
-                    helpText={i18n.translate(
-                      'xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixActualLabel',
-                      {
-                        defaultMessage: 'Actual label',
-                      }
-                    )}
                   >
-                    <Fragment />
-                  </EuiFormRow>
+                    <FormattedMessage
+                      id="xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixActualLabel"
+                      defaultMessage="Actual label"
+                    />
+                  </EuiText>
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
                   {columns.length > 0 && columnsData.length > 0 && (
                     <Fragment>
                       <EuiFlexGroup direction="column" justifyContent="center" gutterSize="s">
                         <EuiFlexItem grow={false}>
-                          <EuiFormRow
-                            helpText={i18n.translate(
-                              'xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixPredictedLabel',
-                              {
-                                defaultMessage: 'Predicted label',
-                              }
-                            )}
-                          >
-                            <Fragment />
-                          </EuiFormRow>
+                          <EuiText size="xs" color="subdued">
+                            <FormattedMessage
+                              id="xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixPredictedLabel"
+                              defaultMessage="Predicted label"
+                            />
+                          </EuiText>
                         </EuiFlexItem>
-                        <EuiFlexItem grow={false} style={{ width: '90%' }}>
+                        <EuiFlexItem className="mlDataFrameAnalyticsClassification__dataGridMinWidth">
                           <EuiDataGrid
                             data-test-subj="mlDFAnalyticsClassificationExplorationConfusionMatrix"
                             aria-label={i18n.translate(

From b5ebbd9ddb1f1bbe3768dc3f610a503e8d92cd16 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Fri, 8 May 2020 10:02:30 +0200
Subject: [PATCH 2/5] [ML] Styles cleanup.

---
 .../data_frame_analytics/_index.scss          |  1 -
 .../_classification_exploration.scss          | 10 +++++
 .../classification_exploration/_index.scss    |  1 -
 .../evaluate_panel.tsx                        | 41 ++++++-------------
 4 files changed, 22 insertions(+), 31 deletions(-)
 delete mode 100644 x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/_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 83314a74331fd..89a0018f90401 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,4 @@
 @import 'pages/analytics_exploration/components/regression_exploration/index';
-@import 'pages/analytics_exploration/components/classification_exploration/index';
 @import 'pages/analytics_management/components/analytics_list/index';
 @import 'pages/analytics_management/components/create_analytics_form/index';
 @import 'pages/analytics_management/components/create_analytics_flyout/index';
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
index 3488ac655ecaf..2b3460a39042e 100644
--- 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
@@ -1,4 +1,14 @@
+/* Workaround for EuiDataGrid within a Flex Layout */
+.mlDataFrameAnalyticsClassification {
+  width: calc(100% - 0px);
+}
+
+.mlDataFrameAnalyticsClassification__confusionMatrix {
+  padding: 0 5%;
+}
+
 .mlDataFrameAnalyticsClassification__actualLabel {
+  min-width: 70px;
   padding-top: $euiSize * 4.2;
 }
 
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/_index.scss b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/_index.scss
deleted file mode 100644
index 88edd92951d41..0000000000000
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'classification_exploration';
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 6428b039da79e..6024870d0bc64 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
@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import './_classification_exploration.scss';
+
 import React, { FC, useState, useEffect, Fragment } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -45,8 +47,6 @@ import {
   getTrailingControlColumns,
 } from './column_data';
 
-const defaultPanelWidth = 500;
-
 interface Props {
   jobConfig: DataFrameAnalyticsConfig;
   jobStatus?: DATA_FRAME_TASK_STATE;
@@ -103,7 +103,6 @@ export const EvaluatePanel: FC<Props> = ({ jobConfig, jobStatus, searchQuery })
   const [docsCount, setDocsCount] = useState<null | number>(null);
   const [error, setError] = useState<null | string>(null);
   const [dataSubsetTitle, setDataSubsetTitle] = useState<SUBSET_TITLE>(SUBSET_TITLE.ENTIRE);
-  const [panelWidth, setPanelWidth] = useState<number>(defaultPanelWidth);
   // Column visibility
   const [visibleColumns, setVisibleColumns] = useState(() =>
     columns.map(({ id }: { id: string }) => id)
@@ -167,24 +166,6 @@ export const EvaluatePanel: FC<Props> = ({ jobConfig, jobStatus, searchQuery })
     }
   };
 
-  const resizeHandler = () => {
-    const tablePanelWidth: number =
-      document.getElementById('mlDataFrameAnalyticsTableResultsPanel')?.clientWidth ||
-      defaultPanelWidth;
-    // Keep the evaluate panel width slightly smaller than the results table
-    // to ensure results table can resize correctly. Temporary workaround DataGrid issue with flex
-    const newWidth = tablePanelWidth - 8;
-    setPanelWidth(newWidth);
-  };
-
-  useEffect(() => {
-    window.addEventListener('resize', resizeHandler);
-    resizeHandler();
-    return () => {
-      window.removeEventListener('resize', resizeHandler);
-    };
-  }, []);
-
   useEffect(() => {
     if (confusionMatrixData.length > 0) {
       const { columns: derivedColumns, columnData } = getColumnData(confusionMatrixData);
@@ -309,7 +290,7 @@ export const EvaluatePanel: FC<Props> = ({ jobConfig, jobStatus, searchQuery })
   return (
     <EuiPanel
       data-test-subj="mlDFAnalyticsClassificationExplorationEvaluatePanel"
-      style={{ width: `${panelWidth}px` }}
+      className="mlDataFrameAnalyticsClassification"
     >
       <EuiFlexGroup direction="column" gutterSize="s">
         <EuiFlexItem>
@@ -392,13 +373,15 @@ export const EvaluatePanel: FC<Props> = ({ jobConfig, jobStatus, searchQuery })
             )}
             {/* BEGIN TABLE ELEMENTS */}
             <EuiFlexItem grow={false}>
-              <EuiFlexGroup gutterSize="s" style={{ paddingLeft: '5%', paddingRight: '5%' }}>
-                <EuiFlexItem grow={false} style={{ minWidth: '70px' }}>
-                  <EuiText
-                    size="xs"
-                    color="subdued"
-                    className="mlDataFrameAnalyticsClassification__actualLabel"
-                  >
+              <EuiFlexGroup
+                gutterSize="s"
+                className="mlDataFrameAnalyticsClassification__confusionMatrix"
+              >
+                <EuiFlexItem
+                  grow={false}
+                  className="mlDataFrameAnalyticsClassification__actualLabel"
+                >
+                  <EuiText size="xs" color="subdued">
                     <FormattedMessage
                       id="xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixActualLabel"
                       defaultMessage="Actual label"

From de5e1c0dc08adb9906563e0e87cf39f27ac81c15 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Fri, 8 May 2020 14:26:12 +0200
Subject: [PATCH 3/5] [ML] Fix IE11 layout issues.

---
 .../_classification_exploration.scss          |  24 +-
 .../evaluate_panel.tsx                        | 252 ++++++++----------
 2 files changed, 136 insertions(+), 140 deletions(-)

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
index 2b3460a39042e..94874a4e320e7 100644
--- 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
@@ -1,4 +1,7 @@
-/* Workaround for EuiDataGrid within a Flex Layout */
+/*
+  Workaround for EuiDataGrid within a Flex Layout,
+  this tricks browsers treating the width as a px value instead of %
+*/
 .mlDataFrameAnalyticsClassification {
   width: calc(100% - 0px);
 }
@@ -7,13 +10,26 @@
   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__confusionMatrix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
 .mlDataFrameAnalyticsClassification__actualLabel {
-  min-width: 70px;
+  float: left;
+  width: 70px;
   padding-top: $euiSize * 4.2;
 }
 
-/* EuiDataGrid needs a minWidth of 480px, otherwise the columns options will disappear if you hide all columns. */
+/*
+  Gives EuiDataGrid a min-width of 480px, otherwise the columns options will disappear if you hide all columns.
+*/
 .mlDataFrameAnalyticsClassification__dataGridMinWidth {
   min-width: 480px;
-  width: 90%;
+  width: calc(100% - 0px);
 }
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 6024870d0bc64..45f883c4ccd94 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
@@ -292,153 +292,133 @@ export const EvaluatePanel: FC<Props> = ({ jobConfig, jobStatus, searchQuery })
       data-test-subj="mlDFAnalyticsClassificationExplorationEvaluatePanel"
       className="mlDataFrameAnalyticsClassification"
     >
-      <EuiFlexGroup direction="column" gutterSize="s">
-        <EuiFlexItem>
-          <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
-            <EuiFlexItem grow={false}>
-              <EuiTitle size="xs">
-                <span>
-                  {i18n.translate(
-                    'xpack.ml.dataframe.analytics.classificationExploration.evaluateJobIdTitle',
-                    {
-                      defaultMessage: 'Evaluation of classification job ID {jobId}',
-                      values: { jobId: jobConfig.id },
-                    }
-                  )}
-                </span>
-              </EuiTitle>
-            </EuiFlexItem>
-            {jobStatus !== undefined && (
-              <EuiFlexItem grow={false}>
-                <span>{getTaskStateBadge(jobStatus)}</span>
-              </EuiFlexItem>
-            )}
-            <EuiFlexItem>
-              <EuiSpacer />
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                target="_blank"
-                iconType="help"
-                iconSide="left"
-                color="primary"
-                href={`${ELASTIC_WEBSITE_URL}guide/en/machine-learning/${DOC_LINK_VERSION}/ml-dfanalytics-evaluate.html#ml-dfanalytics-classification`}
-              >
+      <div>
+        <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiTitle size="xs">
+              <span>
                 {i18n.translate(
-                  'xpack.ml.dataframe.analytics.classificationExploration.classificationDocsLink',
+                  'xpack.ml.dataframe.analytics.classificationExploration.evaluateJobIdTitle',
                   {
-                    defaultMessage: 'Classification evaluation docs ',
+                    defaultMessage: 'Evaluation of classification job ID {jobId}',
+                    values: { jobId: jobConfig.id },
                   }
                 )}
-              </EuiButtonEmpty>
+              </span>
+            </EuiTitle>
+          </EuiFlexItem>
+          {jobStatus !== undefined && (
+            <EuiFlexItem grow={false}>
+              <span>{getTaskStateBadge(jobStatus)}</span>
             </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlexItem>
-        {error !== null && (
+          )}
+          <EuiFlexItem />
           <EuiFlexItem grow={false}>
-            <ErrorCallout error={error} />
+            <EuiButtonEmpty
+              target="_blank"
+              iconType="help"
+              iconSide="left"
+              color="primary"
+              href={`${ELASTIC_WEBSITE_URL}guide/en/machine-learning/${DOC_LINK_VERSION}/ml-dfanalytics-evaluate.html#ml-dfanalytics-classification`}
+            >
+              {i18n.translate(
+                'xpack.ml.dataframe.analytics.classificationExploration.classificationDocsLink',
+                {
+                  defaultMessage: 'Classification evaluation docs ',
+                }
+              )}
+            </EuiButtonEmpty>
           </EuiFlexItem>
-        )}
-        {error === null && (
-          <Fragment>
-            <EuiFlexItem grow={false}>
-              <EuiFlexGroup gutterSize="xs">
-                <EuiTitle size="xxs">
-                  <span>{getHelpText(dataSubsetTitle)}</span>
-                </EuiTitle>
-                <EuiFlexItem grow={false}>
-                  <EuiIconTip
-                    anchorClassName="mlDataFrameAnalyticsClassificationInfoTooltip"
-                    content={i18n.translate(
-                      'xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixTooltip',
+        </EuiFlexGroup>
+      </div>
+      {error !== null && <ErrorCallout error={error} />}
+      {error === null && (
+        <Fragment>
+          <div>
+            <EuiFlexGroup gutterSize="xs">
+              <EuiTitle size="xxs">
+                <span>{getHelpText(dataSubsetTitle)}</span>
+              </EuiTitle>
+              <EuiFlexItem grow={false}>
+                <EuiIconTip
+                  anchorClassName="mlDataFrameAnalyticsClassificationInfoTooltip"
+                  content={i18n.translate(
+                    'xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixTooltip',
+                    {
+                      defaultMessage:
+                        'The multi-class confusion matrix contains the number of occurrences where the analysis classified data points correctly with their actual class as well as the number of occurrences where it misclassified them with another class',
+                    }
+                  )}
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </div>
+          {docsCount !== null && (
+            <EuiText size="xs" color="subdued">
+              <FormattedMessage
+                id="xpack.ml.dataframe.analytics.classificationExploration.generalizationDocsCount"
+                defaultMessage="{docsCount, plural, one {# doc} other {# docs}} evaluated"
+                values={{ docsCount }}
+              />
+            </EuiText>
+          )}
+          {/* BEGIN TABLE ELEMENTS */}
+          <EuiSpacer size="m" />
+          <div className="mlDataFrameAnalyticsClassification__confusionMatrix">
+            <div className="mlDataFrameAnalyticsClassification__actualLabel">
+              <EuiText size="xs" color="subdued">
+                <FormattedMessage
+                  id="xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixActualLabel"
+                  defaultMessage="Actual label"
+                />
+              </EuiText>
+            </div>
+            <div className="mlDataFrameAnalyticsClassification__dataGridMinWidth">
+              {columns.length > 0 && columnsData.length > 0 && (
+                <>
+                  <div>
+                    <EuiText size="xs" color="subdued">
+                      <FormattedMessage
+                        id="xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixPredictedLabel"
+                        defaultMessage="Predicted label"
+                      />
+                    </EuiText>
+                  </div>
+                  <EuiSpacer size="s" />
+                  <EuiDataGrid
+                    data-test-subj="mlDFAnalyticsClassificationExplorationConfusionMatrix"
+                    aria-label={i18n.translate(
+                      'xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixLabel',
                       {
-                        defaultMessage:
-                          'The multi-class confusion matrix contains the number of occurrences where the analysis classified data points correctly with their actual class as well as the number of occurrences where it misclassified them with another class',
+                        defaultMessage: 'Classification confusion matrix',
                       }
                     )}
+                    columns={shownColumns}
+                    columnVisibility={{ visibleColumns, setVisibleColumns }}
+                    rowCount={rowCount}
+                    renderCellValue={renderCellValue}
+                    inMemory={{ level: 'sorting' }}
+                    toolbarVisibility={{
+                      showColumnSelector: true,
+                      showStyleSelector: false,
+                      showFullScreenSelector: false,
+                      showSortSelector: false,
+                    }}
+                    popoverContents={popoverContents}
+                    gridStyle={{ rowHover: 'none' }}
+                    trailingControlColumns={
+                      showTrailingColumns === true && showFullColumns === false
+                        ? getTrailingControlColumns(extraColumns, setShowFullColumns)
+                        : undefined
+                    }
                   />
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiFlexItem>
-            {docsCount !== null && (
-              <EuiFlexItem grow={false}>
-                <EuiText size="xs" color="subdued">
-                  <FormattedMessage
-                    id="xpack.ml.dataframe.analytics.classificationExploration.generalizationDocsCount"
-                    defaultMessage="{docsCount, plural, one {# doc} other {# docs}} evaluated"
-                    values={{ docsCount }}
-                  />
-                </EuiText>
-              </EuiFlexItem>
-            )}
-            {/* BEGIN TABLE ELEMENTS */}
-            <EuiFlexItem grow={false}>
-              <EuiFlexGroup
-                gutterSize="s"
-                className="mlDataFrameAnalyticsClassification__confusionMatrix"
-              >
-                <EuiFlexItem
-                  grow={false}
-                  className="mlDataFrameAnalyticsClassification__actualLabel"
-                >
-                  <EuiText size="xs" color="subdued">
-                    <FormattedMessage
-                      id="xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixActualLabel"
-                      defaultMessage="Actual label"
-                    />
-                  </EuiText>
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                  {columns.length > 0 && columnsData.length > 0 && (
-                    <Fragment>
-                      <EuiFlexGroup direction="column" justifyContent="center" gutterSize="s">
-                        <EuiFlexItem grow={false}>
-                          <EuiText size="xs" color="subdued">
-                            <FormattedMessage
-                              id="xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixPredictedLabel"
-                              defaultMessage="Predicted label"
-                            />
-                          </EuiText>
-                        </EuiFlexItem>
-                        <EuiFlexItem className="mlDataFrameAnalyticsClassification__dataGridMinWidth">
-                          <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,
-                              showStyleSelector: false,
-                              showFullScreenSelector: false,
-                              showSortSelector: false,
-                            }}
-                            popoverContents={popoverContents}
-                            gridStyle={{ rowHover: 'none' }}
-                            trailingControlColumns={
-                              showTrailingColumns === true && showFullColumns === false
-                                ? getTrailingControlColumns(extraColumns, setShowFullColumns)
-                                : undefined
-                            }
-                          />
-                        </EuiFlexItem>
-                      </EuiFlexGroup>
-                    </Fragment>
-                  )}
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiFlexItem>
-          </Fragment>
-        )}
-        {/* END TABLE ELEMENTS */}
-      </EuiFlexGroup>
+                </>
+              )}
+            </div>
+          </div>
+        </Fragment>
+      )}
+      {/* END TABLE ELEMENTS */}
     </EuiPanel>
   );
 };

From 7905eecd1e710454ce921c2c82d8c950c5c88080 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Tue, 12 May 2020 16:36:54 +0200
Subject: [PATCH 4/5] [ML] calc() no longer necessary after flex removal.

---
 .../_classification_exploration.scss                        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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
index 94874a4e320e7..c570321499301 100644
--- 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
@@ -3,7 +3,7 @@
   this tricks browsers treating the width as a px value instead of %
 */
 .mlDataFrameAnalyticsClassification {
-  width: calc(100% - 0px);
+  width: 100%;
 }
 
 .mlDataFrameAnalyticsClassification__confusionMatrix {
@@ -22,7 +22,7 @@
 
 .mlDataFrameAnalyticsClassification__actualLabel {
   float: left;
-  width: 70px;
+  width: 80px;
   padding-top: $euiSize * 4.2;
 }
 
@@ -31,5 +31,5 @@
 */
 .mlDataFrameAnalyticsClassification__dataGridMinWidth {
   min-width: 480px;
-  width: calc(100% - 0px);
+  width: 100%;
 }

From d67b062545215e4ba66bb3ed5d5620fcd54d229d Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Tue, 12 May 2020 16:50:07 +0200
Subject: [PATCH 5/5] [ML] Tweak padding.

---
 .../classification_exploration/_classification_exploration.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index c570321499301..102f6630f2ee2 100644
--- 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
@@ -23,7 +23,7 @@
 .mlDataFrameAnalyticsClassification__actualLabel {
   float: left;
   width: 80px;
-  padding-top: $euiSize * 4.2;
+  padding-top: $euiSize * 4 + $euiSizeXS;
 }
 
 /*