From 957c006074652f3f2c6a59a1fef1864cf7e41457 Mon Sep 17 00:00:00 2001 From: Pete Harverson Date: Mon, 6 Dec 2021 16:34:55 +0000 Subject: [PATCH] [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 <42973632+kibanamachine@users.noreply.github.com> --- .../components/data_grid/column_chart.scss | 5 --- .../components/data_grid/data_grid.scss | 15 ++++++--- .../components/data_grid/data_grid.tsx | 10 +----- .../outlier_detection_creation.ts | 4 +-- .../regression_creation.ts | 4 +-- .../apps/transform/creation_index_pattern.ts | 10 +++--- .../transform/creation_runtime_mappings.ts | 4 +-- .../functional/services/canvas_element.ts | 31 +++++++++---------- 8 files changed, 37 insertions(+), 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 index 756804a0e6aa0..551734bc2fcdc 100644 --- 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 index b445c82b35ff9..f9cc09ef8c425 100644 --- 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 index 5240dbb1ec474..a77f43e68daef 100644 --- 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 = 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 = memo(
{ + 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 index 384d6fa43cac8..7ce3fcdc51e1b 100644 --- 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 index 66d0ba0ec6e36..d2a9554f3c6d6 100644 --- 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 index 49211deaa2c42..735efec4a3c66 100644 --- 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 index 30baeb9022833..bbcfe91b54a7d 100644 --- 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 index 6167c8fab45f8..61bfe23950ee2 100644 --- 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) ); }