From a149915c523e1ba7ea9daa90d8cb82ded1c19242 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Wed, 13 May 2020 09:30:24 +0200
Subject: [PATCH] [ML] Data Frame Analytics: Fix confusion matrix data grid
 width. (#65818)

- Fixes an issue where hiding all columns for the confusion matrix would hide the menu item to enable columns again.
- Replaces resizeHandler based workaround for EuiDataGrid within flex layouts with a CSS based workaround.
- Moves inline styles to SCSS file and imports that file directly.
- Fixes IE11 layout issues.
---
 .../data_frame_analytics/_index.scss          |   1 -
 .../_classification_exploration.scss          |  35 ++-
 .../classification_exploration/_index.scss    |   1 -
 .../evaluate_panel.tsx                        | 279 ++++++++----------
 4 files changed, 151 insertions(+), 165 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 83314a74331fd7..89a0018f90401a 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 1141dddf398b01..102f6630f2ee22 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,35 @@
-.euiFormRow.mlDataFrameAnalyticsClassification__actualLabel {
-  padding-top: $euiSize * 4;
+/*
+  Workaround for EuiDataGrid within a Flex Layout,
+  this tricks browsers treating the width as a px value instead of %
+*/
+.mlDataFrameAnalyticsClassification {
+  width: 100%;
 }
 
+.mlDataFrameAnalyticsClassification__confusionMatrix {
+  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 {
+  float: left;
+  width: 80px;
+  padding-top: $euiSize * 4 + $euiSizeXS;
+}
+
+/*
+  Gives EuiDataGrid a min-width of 480px, otherwise the columns options will disappear if you hide all columns.
+*/
+.mlDataFrameAnalyticsClassification__dataGridMinWidth {
+  min-width: 480px;
+  width: 100%;
+}
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 88edd92951d41c..00000000000000
--- 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 af90547606f82d..45f883c4ccd941 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';
@@ -12,7 +14,6 @@ import {
   EuiDataGrid,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
   EuiIconTip,
   EuiPanel,
   EuiSpacer,
@@ -46,8 +47,6 @@ import {
   getTrailingControlColumns,
 } from './column_data';
 
-const defaultPanelWidth = 500;
-
 interface Props {
   jobConfig: DataFrameAnalyticsConfig;
   jobStatus?: DATA_FRAME_TASK_STATE;
@@ -104,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)
@@ -168,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);
@@ -310,158 +290,135 @@ 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>
-          <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>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlexItem>
-        {error !== null && (
-          <EuiFlexItem grow={false}>
-            <ErrorCallout error={error} />
+              </span>
+            </EuiTitle>
           </EuiFlexItem>
-        )}
-        {error === null && (
-          <Fragment>
+          {jobStatus !== undefined && (
             <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',
-                      {
-                        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>
+              <span>{getTaskStateBadge(jobStatus)}</span>
             </EuiFlexItem>
-            {docsCount !== null && (
+          )}
+          <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`}
+            >
+              {i18n.translate(
+                'xpack.ml.dataframe.analytics.classificationExploration.classificationDocsLink',
+                {
+                  defaultMessage: 'Classification evaluation docs ',
+                }
+              )}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        </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}>
-                <EuiText size="xs" color="subdued">
-                  <FormattedMessage
-                    id="xpack.ml.dataframe.analytics.classificationExploration.generalizationDocsCount"
-                    defaultMessage="{docsCount, plural, one {# doc} other {# docs}} evaluated"
-                    values={{ docsCount }}
-                  />
-                </EuiText>
+                <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>
-            )}
-            {/* BEGIN TABLE ELEMENTS */}
-            <EuiFlexItem grow={false}>
-              <EuiFlexGroup gutterSize="s" style={{ paddingLeft: '5%', paddingRight: '5%' }}>
-                <EuiFlexItem grow={false}>
-                  <EuiFormRow
-                    className="mlDataFrameAnalyticsClassification__actualLabel"
-                    helpText={i18n.translate(
-                      'xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixActualLabel',
+            </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: 'Actual label',
+                        defaultMessage: 'Classification confusion matrix',
                       }
                     )}
-                  >
-                    <Fragment />
-                  </EuiFormRow>
-                </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>
-                        </EuiFlexItem>
-                        <EuiFlexItem grow={false} style={{ width: '90%' }}>
-                          <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>
+                    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
+                    }
+                  />
+                </>
+              )}
+            </div>
+          </div>
+        </Fragment>
+      )}
+      {/* END TABLE ELEMENTS */}
     </EuiPanel>
   );
 };