From a1c24222612e4ee3be1475d1d91114c3a0c67395 Mon Sep 17 00:00:00 2001
From: Quynh Nguyen <43350163+qn895@users.noreply.github.com>
Date: Tue, 12 Jan 2021 12:57:21 -0600
Subject: [PATCH] [ML] Fix inconsistent padding for long top_values in Data
 Visualizer & hover color of expanded row (#87937)

---
 .../examples_list/examples_list.tsx             |  3 +--
 .../field_data_card/top_values/_top_values.scss |  7 +++++--
 .../field_data_card/top_values/top_values.tsx   |  2 +-
 .../datavisualizer/stats_datagrid/_index.scss   | 17 +++++++++++++----
 .../field_data_expanded_row/_index.scss         |  1 +
 .../_number_content.scss                        |  5 +++++
 .../field_data_expanded_row/number_content.tsx  |  4 ++--
 7 files changed, 28 insertions(+), 11 deletions(-)
 create mode 100644 x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/components/field_data_expanded_row/_index.scss
 create mode 100644 x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/components/field_data_expanded_row/_number_content.scss

diff --git a/x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/examples_list/examples_list.tsx b/x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/examples_list/examples_list.tsx
index cbb1ceb16c7a..5591e6f9b541 100644
--- a/x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/examples_list/examples_list.tsx
+++ b/x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/examples_list/examples_list.tsx
@@ -6,7 +6,7 @@
 
 import React, { FC } from 'react';
 
-import { EuiListGroup, EuiListGroupItem, EuiSpacer } from '@elastic/eui';
+import { EuiListGroup, EuiListGroupItem } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 import { ExpandedRowFieldHeader } from '../../../../stats_datagrid/components/expanded_row_field_header';
@@ -46,7 +46,6 @@ export const ExamplesList: FC<Props> = ({ examples }) => {
           }}
         />
       </ExpandedRowFieldHeader>
-      <EuiSpacer size="s" />
       <EuiListGroup showToolTips={true} maxWidth={'s'} gutterSize={'none'} flush={true}>
         {examplesContent}
       </EuiListGroup>
diff --git a/x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/top_values/_top_values.scss b/x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/top_values/_top_values.scss
index 81fd70e7b921..75ee6aef1b7e 100644
--- a/x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/top_values/_top_values.scss
+++ b/x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/top_values/_top_values.scss
@@ -1,6 +1,9 @@
+.mlFieldDataTopValuesContainer {
+  padding-top: $euiSizeXS;
+}
 
 .mlTopValuesValueLabelContainer {
-  padding-right: $euiSizeM;
+  margin-right: $euiSizeM;
   &.mlTopValuesValueLabelContainer--small {
     width:70px;
   }
@@ -11,6 +14,6 @@
 }
 
 .mlTopValuesPercentLabelContainer {
-  padding-left: $euiSizeM;
+  margin-left: $euiSizeM;
   width:70px;
 }
diff --git a/x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/top_values/top_values.tsx b/x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/top_values/top_values.tsx
index e2e947aed5c2..bd83aaa1f614 100644
--- a/x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/top_values/top_values.tsx
+++ b/x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/top_values/top_values.tsx
@@ -46,7 +46,7 @@ export const TopValues: FC<Props> = ({ stats, fieldFormat, barColor, compressed
   } = stats;
   const progressBarMax = isTopValuesSampled === true ? topValuesSampleSize : count;
   return (
-    <div data-test-subj="mlFieldDataTopValues">
+    <div data-test-subj="mlFieldDataTopValues" className={'mlFieldDataTopValuesContainer'}>
       {Array.isArray(topValues) &&
         topValues.map((value: any) => (
           <EuiFlexGroup gutterSize="xs" alignItems="center" key={value.key}>
diff --git a/x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/_index.scss b/x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/_index.scss
index 1e8b19f79fa9..64545c886a11 100644
--- a/x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/_index.scss
+++ b/x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/_index.scss
@@ -1,3 +1,5 @@
+@import "components/field_data_expanded_row/number_content";
+
 .mlDataVisualizerFieldExpandedRow {
   padding-left: $euiSize * 4;
   width: 100%;
@@ -7,7 +9,9 @@
     text-align: left;
     color: $euiColorDarkShade;
     font-weight: bold;
+    padding-bottom: $euiSizeS;
   }
+
   .mlFieldDataCard__codeContent {
     @include euiCodeFont;
   }
@@ -16,22 +20,27 @@
 .mlDataVisualizer {
   .euiTableRow > .euiTableRowCell {
     border-bottom: 0px;
-    border-top: 1px solid $euiColorLightShade;
+    border-top: $euiBorderThin;
 
   }
   .euiTableRow-isExpandedRow {
 
     .euiTableRowCell{
-      background-color: transparent !important;
+      background-color: $euiColorEmptyShade !important;
       border-top: 0px;
-      border-bottom: 1px solid $euiColorLightShade;
-
+      border-bottom: $euiBorderThin;
+      &:hover {
+        background-color: $euiColorEmptyShade !important;
+      }
     }
   }
   .mlDataVisualizerSummaryTable {
     .euiTableRow > .euiTableRowCell{
       border-bottom: 0px;
     }
+    .euiTableHeaderCell {
+      display: none;
+    }
   }
 }
 
diff --git a/x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/components/field_data_expanded_row/_index.scss b/x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/components/field_data_expanded_row/_index.scss
new file mode 100644
index 000000000000..54fa24604f8f
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/components/field_data_expanded_row/_index.scss
@@ -0,0 +1 @@
+@import "number_content";
diff --git a/x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/components/field_data_expanded_row/_number_content.scss b/x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/components/field_data_expanded_row/_number_content.scss
new file mode 100644
index 000000000000..4b1da4b41404
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/components/field_data_expanded_row/_number_content.scss
@@ -0,0 +1,5 @@
+.mlMetricDistributionChartContainer {
+  padding-top: $euiSizeXS;
+  width: 100%;
+}
+
diff --git a/x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/components/field_data_expanded_row/number_content.tsx b/x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/components/field_data_expanded_row/number_content.tsx
index f3ea3ba1b7ac..c3ba6d23f6ba 100644
--- a/x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/components/field_data_expanded_row/number_content.tsx
+++ b/x-pack/plugins/ml/public/application/datavisualizer/stats_datagrid/components/field_data_expanded_row/number_content.tsx
@@ -129,7 +129,7 @@ export const NumberContent: FC<FieldDataCardProps> = ({ config }) => {
       )}
       {distribution && (
         <EuiFlexItem data-test-subj={'mlMetricDistribution'}>
-          <EuiFlexItem>
+          <EuiFlexItem grow={false}>
             <ExpandedRowFieldHeader>
               <FormattedMessage
                 id="xpack.ml.fieldDataCardExpandedRow.numberContent.distributionTitle"
@@ -138,7 +138,7 @@ export const NumberContent: FC<FieldDataCardProps> = ({ config }) => {
             </ExpandedRowFieldHeader>
           </EuiFlexItem>
 
-          <EuiFlexItem style={{ width: '100%' }}>
+          <EuiFlexItem className={'mlMetricDistributionChartContainer'}>
             <MetricDistributionChart
               width={METRIC_DISTRIBUTION_CHART_WIDTH}
               height={METRIC_DISTRIBUTION_CHART_HEIGHT}