[ML] Fixes data grid column actions button when histogram charts are …

…visible (#120202) * [ML] Fixes data grid column actions button when histogram charts are visible * [ML] Adjust histogram color tolerance values * [ML] Remove test tag * [ML] Stabilize canvas element test by rounding color values * [ML] Adjust color tolerance values * [ML] Further color tolerance adjustments * [ML] Adjust more color tolerance expected values * [ML] More color stat adjustments Co-authored-by: Kibana Machine <[email protected]>
elastic · Dec 6, 2021 · 957c006 · 957c006
1 parent 90b4897
commit 957c006
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 46 deletions.
diff --git a/x-pack/plugins/ml/public/application/components/data_grid/column_chart.scss b/x-pack/plugins/ml/public/application/components/data_grid/column_chart.scss
@@ -25,8 +25,3 @@
   min-width: $euiButtonMinWidth;
   td { text-align: center }
 }
-
-/* Override to align column header to bottom of cell when no chart is available */
-.mlDataGrid .euiDataGridHeaderCell__content {
-  margin-top: auto;
-}
diff --git a/x-pack/plugins/ml/public/application/components/data_grid/data_grid.scss b/x-pack/plugins/ml/public/application/components/data_grid/data_grid.scss
@@ -1,11 +1,18 @@
 .mlDataGrid {
+
   .euiDataGridRowCell--boolean {
     text-transform: none;
   }
 
-  // Override to align the sorting arrow at the bottom when histogram charts are enabled
-  .euiDataGridHeaderCell .euiDataGridHeaderCell__sortingArrow {
-    margin-top: auto;
-    margin-bottom: 0;
+  // Overrides to align the sorting arrow, actions icon and the column header when no chart is available,
+  // to the bottom of the cell when histogram charts are enabled.
+  // Note that overrides have to be used as currently it is not possible to add a custom class name
+  // for the EuiDataGridHeaderCell - see https://github.com/elastic/eui/issues/5106
+  .euiDataGridHeaderCell {
+    .euiDataGridHeaderCell__sortingArrow,
+    .euiDataGridHeaderCell__icon,
+    .euiPopover {
+      margin-top: auto;
+    }
   }
 }
diff --git a/x-pack/plugins/ml/public/application/components/data_grid/data_grid.tsx b/x-pack/plugins/ml/public/application/components/data_grid/data_grid.tsx
@@ -114,14 +114,6 @@ export const DataGrid: FC<Props> = memo(
     //   };
     // };
 
-    // If the charts are visible, hide the column actions icon.
-    const columnsWithChartsActionized = columnsWithCharts.map((d) => {
-      if (chartsVisible === true) {
-        d.actions = false;
-      }
-      return d;
-    });
-
     const popOverContent = useMemo(() => {
       return analysisType === ANALYSIS_CONFIG_TYPE.REGRESSION ||
         analysisType === ANALYSIS_CONFIG_TYPE.CLASSIFICATION ||
@@ -341,7 +333,7 @@ export const DataGrid: FC<Props> = memo(
             <div className="mlDataGrid" ref={mutationRef}>
               <EuiDataGrid
                 aria-label={isWithHeader(props) ? props.title : ''}
-                columns={columnsWithChartsActionized.map((c) => {
+                columns={columnsWithCharts.map((c) => {
                   c.initialWidth = 165;
                   return c;
                 })}

diff --git a/x-pack/test/functional/apps/ml/data_frame_analytics/outlier_detection_creation.ts b/x-pack/test/functional/apps/ml/data_frame_analytics/outlier_detection_creation.ts
@@ -63,13 +63,13 @@ export default function ({ getService }: FtrProviderContext) {
             // markers
             { color: '#52B398', percentage: 15 },
             // grey boilerplate
-            { color: '#6A717D', percentage: 33 },
+            { color: '#6A717D', percentage: 13 },
           ],
           scatterplotMatrixColorStatsResults: [
             // red markers
             { color: '#D98071', percentage: 1 },
             // tick/grid/axis, grey markers
-            { color: '#6A717D', percentage: 33 },
+            { color: '#6A717D', percentage: 12 },
             { color: '#D3DAE6', percentage: 8 },
             { color: '#98A1B3', percentage: 12 },
             // anti-aliasing

diff --git a/x-pack/test/functional/apps/ml/data_frame_analytics/regression_creation.ts b/x-pack/test/functional/apps/ml/data_frame_analytics/regression_creation.ts
@@ -53,8 +53,8 @@ export default function ({ getService }: FtrProviderContext) {
             { color: '#61AFA3', percentage: 2 },
             { color: '#D1E5E0', percentage: 2 },
             // tick/grid/axis
-            { color: '#6A717D', percentage: 10 },
-            { color: '#F5F7FA', percentage: 10 },
+            { color: '#6A717D', percentage: 5 },
+            { color: '#F5F7FA', percentage: 5 },
             { color: '#D3DAE6', percentage: 3 },
           ],
           runtimeFieldsEditorContent: ['{', '  "uppercase_stab": {', '    "type": "keyword",'],

diff --git a/x-pack/test/functional/apps/transform/creation_index_pattern.ts b/x-pack/test/functional/apps/transform/creation_index_pattern.ts
@@ -181,7 +181,7 @@ export default function ({ getService }: FtrProviderContext) {
               legend: 'top 20 of 46 categories',
               colorStats: [
                 { color: '#000000', percentage: 60 },
-                { color: '#54B399', percentage: 35 },
+                { color: '#54B399', percentage: 37 },
               ],
             },
             {
@@ -190,7 +190,7 @@ export default function ({ getService }: FtrProviderContext) {
               legend: 'top 20 of 3321 categories',
               colorStats: [
                 { color: '#000000', percentage: 25 },
-                { color: '#54B399', percentage: 67 },
+                { color: '#54B399', percentage: 75 },
               ],
             },
             {
@@ -207,7 +207,7 @@ export default function ({ getService }: FtrProviderContext) {
               id: 'customer_id',
               legend: 'top 20 of 46 categories',
               colorStats: [
-                { color: '#54B399', percentage: 35 },
+                { color: '#54B399', percentage: 37 },
                 { color: '#000000', percentage: 60 },
               ],
             },
@@ -216,8 +216,8 @@ export default function ({ getService }: FtrProviderContext) {
               id: 'customer_last_name',
               legend: 'top 20 of 183 categories',
               colorStats: [
-                { color: '#000000', percentage: 25 },
-                { color: '#54B399', percentage: 70 },
+                { color: '#000000', percentage: 23 },
+                { color: '#54B399', percentage: 77 },
               ],
             },
             {

diff --git a/x-pack/test/functional/apps/transform/creation_runtime_mappings.ts b/x-pack/test/functional/apps/transform/creation_runtime_mappings.ts
@@ -69,7 +69,7 @@ export default function ({ getService }: FtrProviderContext) {
         legend: '19 categories',
         colorStats: [
           { color: '#000000', percentage: 49 },
-          { color: '#54B399', percentage: 41 },
+          { color: '#54B399', percentage: 50 },
         ],
       },
       {
@@ -87,7 +87,7 @@ export default function ({ getService }: FtrProviderContext) {
         legend: '19 categories',
         colorStats: [
           { color: '#000000', percentage: 49 },
-          { color: '#54B399', percentage: 41 },
+          { color: '#54B399', percentage: 50 },
         ],
       },
       {

diff --git a/x-pack/test/functional/services/canvas_element.ts b/x-pack/test/functional/services/canvas_element.ts
@@ -7,6 +7,8 @@
 
 import { rgb, nest } from 'd3';
 
+import { FtrProviderContext } from '../ftr_provider_context';
+
 interface ColorStat {
   color: string;
   percentage: number;
@@ -16,7 +18,9 @@ interface ColorStat {
 
 export type CanvasElementColorStats = ColorStat[];
 
-import { FtrProviderContext } from '../ftr_provider_context';
+function getRoundedChannel(value: number, tolerance: number): number {
+  return Math.round(value / tolerance) * tolerance;
+}
 
 export async function CanvasElementProvider({ getService }: FtrProviderContext) {
   const { driver } = await getService('__webdriver__').init();
@@ -87,9 +91,9 @@ export async function CanvasElementProvider({ getService }: FtrProviderContext)
       const colors: string[] = [];
       for (let i = 0; i < imageData.length; i += 4) {
         // uses d3's `rgb` method create a color object, `toString()` returns the hex value
-        const r = imageData[i];
-        const g = imageData[i + 1];
-        const b = imageData[i + 2];
+        const r = getRoundedChannel(imageData[i], channelTolerance);
+        const g = getRoundedChannel(imageData[i + 1], channelTolerance);
+        const b = getRoundedChannel(imageData[i + 2], channelTolerance);
         const color = rgb(r, g, b).toString().toUpperCase();
         if (exclude === undefined || !exclude.includes(color)) colors.push(color);
       }
@@ -196,20 +200,13 @@ export async function CanvasElementProvider({ getService }: FtrProviderContext)
       const actualRGB = rgb(actualColor);
       const expectedRGB = rgb(expectedColor);
 
-      const lowerR = expectedRGB.r - toleranceRange / 2;
-      const upperR = expectedRGB.r + toleranceRange / 2;
-      const lowerG = expectedRGB.g - toleranceRange / 2;
-      const upperG = expectedRGB.g + toleranceRange / 2;
-      const lowerB = expectedRGB.b - toleranceRange / 2;
-      const upperB = expectedRGB.b + toleranceRange / 2;
-
       return (
-        lowerR <= actualRGB.r &&
-        upperR >= actualRGB.r &&
-        lowerG <= actualRGB.g &&
-        upperG >= actualRGB.g &&
-        lowerB <= actualRGB.b &&
-        upperB >= actualRGB.b
+        getRoundedChannel(expectedRGB.r, toleranceRange) ===
+          getRoundedChannel(actualRGB.r, toleranceRange) &&
+        getRoundedChannel(expectedRGB.g, toleranceRange) ===
+          getRoundedChannel(actualRGB.g, toleranceRange) &&
+        getRoundedChannel(expectedRGB.b, toleranceRange) ===
+          getRoundedChannel(actualRGB.b, toleranceRange)
       );
     }