github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[ML] Fixes data grid column actions button when histogram charts are visible (#120202)

Browse source 
* [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>
This commit is contained in:
Pete Harverson 2021-12-06 16:34:55 +00:00 • committed by GitHub
parent 90b489776e
commit 957c006074
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 37 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

5
x-pack/plugins/ml/public/application/components/data_grid/column_chart.scss
View file

@ -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;
}

15
x-pack/plugins/ml/public/application/components/data_grid/data_grid.scss
View file

@ -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;
}
}
}

10
x-pack/plugins/ml/public/application/components/data_grid/data_grid.tsx
View file

@ -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;
})}

4
x-pack/test/functional/apps/ml/data_frame_analytics/outlier_detection_creation.ts
View file

@ -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

4
x-pack/test/functional/apps/ml/data_frame_analytics/regression_creation.ts
View file

@ -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",'],

10
x-pack/test/functional/apps/transform/creation_index_pattern.ts
View file

@ -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 },
],
},
{

4
x-pack/test/functional/apps/transform/creation_runtime_mappings.ts
View file

@ -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 },
],
},
{

31
x-pack/test/functional/services/canvas_element.ts
View file

@ -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)
);
}