[ML] Data Frame Analytics: Fix color assertion with risk of percentage being rounded to 0.

x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx

@@ -331,6 +331,7 @@ export const ScatterplotMatrix: FC<ScatterplotMatrixProps> = ({
                 fullWidth
               >
                 <EuiSelect
+                  data-test-subj="mlScatterplotMatrixSampleSizeSelect"
                   compressed
                   options={sampleSizeOptions}
                   value={fetchSize}
@@ -355,6 +356,7 @@ export const ScatterplotMatrix: FC<ScatterplotMatrixProps> = ({
                 fullWidth
               >
                 <EuiSwitch
+                  data-test-subj="mlScatterplotMatrixRandomizeQuerySwitch"
                   name="mlScatterplotMatrixRandomizeQuery"
                   label={randomizeQuery ? TOGGLE_ON : TOGGLE_OFF}
                   checked={randomizeQuery}

x-pack/test/functional/apps/ml/data_frame_analytics/classification_creation.ts

@@ -12,8 +12,7 @@ export default function ({ getService }: FtrProviderContext) {
   const ml = getService('ml');
   const editedDescription = 'Edited description';
 
-  // FLAKY: https://github.com/elastic/kibana/issues/91450
-  describe.skip('classification creation', function () {
+  describe('classification creation', function () {
     before(async () => {
       await esArchiver.loadIfNeeded('ml/bm_classification');
       await ml.testResources.createIndexPatternIfNeeded('ft_bank_marketing', '@timestamp');
@@ -44,18 +43,18 @@ export default function ({ getService }: FtrProviderContext) {
         expected: {
           rocCurveColorState: [
             // tick/grid/axis
-            { key: '#DDDDDD', value: 50 },
+            { color: '#DDDDDD', percentage: 50 },
             // line
-            { key: '#98A2B3', value: 30 },
+            { color: '#98A2B3', percentage: 30 },
           ],
           scatterplotMatrixColorStats: [
             // marker colors
-            { key: '#7FC6B3', value: 1 },
-            { key: '#88ADD0', value: 0.03 },
+            { color: '#7FC6B3', percentage: 1 },
+            { color: '#88ADD0', percentage: 0.03 },
             // tick/grid/axis
-            { key: '#DDDDDD', value: 8 },
-            { key: '#D3DAE6', value: 8 },
-            { key: '#F5F7FA', value: 20 },
+            { color: '#DDDDDD', percentage: 8 },
+            { color: '#D3DAE6', percentage: 8 },
+            { color: '#F5F7FA', percentage: 15 },
           ],
           row: {
             type: 'classification',
@@ -78,6 +77,10 @@ export default function ({ getService }: FtrProviderContext) {
           await ml.navigation.navigateToDataFrameAnalytics();
 
           await ml.testExecution.logTestStep('loads the source selection modal');
+
+          // Disable anti-aliasing to stabilize canvas image rendering assertions
+          await ml.commonUI.disableAntiAliasing();
+
           await ml.dataFrameAnalytics.startAnalyticsCreation();
 
           await ml.testExecution.logTestStep(
@@ -106,6 +109,16 @@ export default function ({ getService }: FtrProviderContext) {
           await ml.testExecution.logTestStep('displays the include fields selection');
           await ml.dataFrameAnalyticsCreation.assertIncludeFieldsSelectionExists();
 
+          await ml.testExecution.logTestStep(
+            'sets the sample size to 10000 for the scatterplot matrix'
+          );
+          await ml.dataFrameAnalyticsCreation.setScatterplotMatrixSampleSizeSelectValue('10000');
+
+          await ml.testExecution.logTestStep(
+            'sets the randomize query switch to true for the scatterplot matrix'
+          );
+          await ml.dataFrameAnalyticsCreation.setScatterplotMatrixRandomizeQueryCheckState(true);
+
           await ml.testExecution.logTestStep('displays the scatterplot matrix');
           await ml.dataFrameAnalyticsCreation.assertScatterplotMatrix(
             testData.expected.scatterplotMatrixColorStats
@@ -237,6 +250,12 @@ export default function ({ getService }: FtrProviderContext) {
           await ml.testExecution.logTestStep('displays the results view for created job');
           await ml.dataFrameAnalyticsTable.openResultsView(testData.jobId);
           await ml.dataFrameAnalyticsResults.assertClassificationEvaluatePanelElementsExists();
+          await ml.dataFrameAnalyticsResults.assertClassificationTablePanelExists();
+          await ml.dataFrameAnalyticsResults.assertResultsTableExists();
+          await ml.dataFrameAnalyticsResults.assertResultsTableTrainingFiltersExist();
+          await ml.dataFrameAnalyticsResults.assertResultsTableNotEmpty();
+
+          await ml.testExecution.logTestStep('displays the ROC curve chart');
           await ml.commonUI.assertColorsInCanvasElement(
             'mlDFAnalyticsClassificationExplorationRocCurveChart',
             testData.expected.rocCurveColorState,
@@ -247,13 +266,23 @@ export default function ({ getService }: FtrProviderContext) {
             // since the returned colors vary quite a bit on each run.
             20
           );
-          await ml.dataFrameAnalyticsResults.assertClassificationTablePanelExists();
-          await ml.dataFrameAnalyticsResults.assertResultsTableExists();
-          await ml.dataFrameAnalyticsResults.assertResultsTableTrainingFiltersExist();
-          await ml.dataFrameAnalyticsResults.assertResultsTableNotEmpty();
+
+          await ml.testExecution.logTestStep(
+            'sets the sample size to 10000 for the scatterplot matrix'
+          );
+          await ml.dataFrameAnalyticsResults.setScatterplotMatrixSampleSizeSelectValue('10000');
+
+          await ml.testExecution.logTestStep(
+            'sets the randomize query switch to true for the scatterplot matrix'
+          );
+          await ml.dataFrameAnalyticsResults.setScatterplotMatrixRandomizeQueryCheckState(true);
+
+          await ml.testExecution.logTestStep('displays the scatterplot matrix');
           await ml.dataFrameAnalyticsResults.assertScatterplotMatrix(
             testData.expected.scatterplotMatrixColorStats
           );
+
+          await ml.commonUI.resetAntiAliasing();
         });
 
         it('displays the analytics job in the map view', async () => {

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

@@ -52,19 +52,19 @@ export default function ({ getService }: FtrProviderContext) {
           ],
           scatterplotMatrixColorsWizard: [
             // markers
-            { key: '#52B398', value: 25 },
+            { color: '#52B398', percentage: 15 },
             // grey boilerplate
-            { key: '#6A717D', value: 30 },
+            { color: '#6A717D', percentage: 33 },
           ],
           scatterplotMatrixColorStatsResults: [
             // red markers
-            { key: '#D98071', value: 1 },
+            { color: '#D98071', percentage: 1 },
             // tick/grid/axis, grey markers
-            { key: '#6A717D', value: 30 },
-            { key: '#D3DAE6', value: 8 },
-            { key: '#98A1B3', value: 25 },
+            { color: '#6A717D', percentage: 33 },
+            { color: '#D3DAE6', percentage: 8 },
+            { color: '#98A1B3', percentage: 12 },
             // anti-aliasing
-            { key: '#F5F7FA', value: 27 },
+            { color: '#F5F7FA', percentage: 30 },
           ],
           row: {
             type: 'outlier_detection',
@@ -126,6 +126,16 @@ export default function ({ getService }: FtrProviderContext) {
           await ml.testExecution.logTestStep('displays the include fields selection');
           await ml.dataFrameAnalyticsCreation.assertIncludeFieldsSelectionExists();
 
+          await ml.testExecution.logTestStep(
+            'sets the sample size to 10000 for the scatterplot matrix'
+          );
+          await ml.dataFrameAnalyticsCreation.setScatterplotMatrixSampleSizeSelectValue('10000');
+
+          await ml.testExecution.logTestStep(
+            'sets the randomize query switch to true for the scatterplot matrix'
+          );
+          await ml.dataFrameAnalyticsCreation.setScatterplotMatrixRandomizeQueryCheckState(true);
+
           await ml.testExecution.logTestStep('displays the scatterplot matrix');
           await ml.dataFrameAnalyticsCreation.assertScatterplotMatrix(
             testData.expected.scatterplotMatrixColorsWizard
@@ -255,9 +265,23 @@ export default function ({ getService }: FtrProviderContext) {
           await ml.dataFrameAnalyticsResults.assertResultsTableExists();
           await ml.dataFrameAnalyticsResults.assertResultsTableNotEmpty();
           await ml.dataFrameAnalyticsResults.assertFeatureInfluenceCellNotEmpty();
+
+          await ml.testExecution.logTestStep(
+            'sets the sample size to 10000 for the scatterplot matrix'
+          );
+          await ml.dataFrameAnalyticsResults.setScatterplotMatrixSampleSizeSelectValue('10000');
+
+          await ml.testExecution.logTestStep(
+            'sets the randomize query switch to true for the scatterplot matrix'
+          );
+          await ml.dataFrameAnalyticsResults.setScatterplotMatrixRandomizeQueryCheckState(true);
+
+          await ml.testExecution.logTestStep('displays the scatterplot matrix');
           await ml.dataFrameAnalyticsResults.assertScatterplotMatrix(
             testData.expected.scatterplotMatrixColorStatsResults
           );
+
+          await ml.commonUI.resetAntiAliasing();
         });
 
         it('displays the analytics job in the map view', async () => {

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

@@ -42,12 +42,12 @@ export default function ({ getService }: FtrProviderContext) {
         expected: {
           scatterplotMatrixColorStats: [
             // some marker colors of the continuous color scale
-            { key: '#61AFA3', value: 2 },
-            { key: '#D1E5E0', value: 2 },
+            { color: '#61AFA3', percentage: 2 },
+            { color: '#D1E5E0', percentage: 2 },
             // tick/grid/axis
-            { key: '#6A717D', value: 10 },
-            { key: '#F5F7FA', value: 12 },
-            { key: '#D3DAE6', value: 3 },
+            { color: '#6A717D', percentage: 10 },
+            { color: '#F5F7FA', percentage: 10 },
+            { color: '#D3DAE6', percentage: 3 },
           ],
           row: {
             type: 'regression',
@@ -71,6 +71,10 @@ export default function ({ getService }: FtrProviderContext) {
           await ml.navigation.navigateToDataFrameAnalytics();
 
           await ml.testExecution.logTestStep('loads the source selection modal');
+
+          // Disable anti-aliasing to stabilize canvas image rendering assertions
+          await ml.commonUI.disableAntiAliasing();
+
           await ml.dataFrameAnalytics.startAnalyticsCreation();
 
           await ml.testExecution.logTestStep(
@@ -99,6 +103,16 @@ export default function ({ getService }: FtrProviderContext) {
           await ml.testExecution.logTestStep('displays the include fields selection');
           await ml.dataFrameAnalyticsCreation.assertIncludeFieldsSelectionExists();
 
+          await ml.testExecution.logTestStep(
+            'sets the sample size to 10000 for the scatterplot matrix'
+          );
+          await ml.dataFrameAnalyticsCreation.setScatterplotMatrixSampleSizeSelectValue('10000');
+
+          await ml.testExecution.logTestStep(
+            'sets the randomize query switch to true for the scatterplot matrix'
+          );
+          await ml.dataFrameAnalyticsCreation.setScatterplotMatrixRandomizeQueryCheckState(true);
+
           await ml.testExecution.logTestStep('displays the scatterplot matrix');
           await ml.dataFrameAnalyticsCreation.assertScatterplotMatrix(
             testData.expected.scatterplotMatrixColorStats
@@ -229,9 +243,23 @@ export default function ({ getService }: FtrProviderContext) {
           await ml.dataFrameAnalyticsResults.assertResultsTableExists();
           await ml.dataFrameAnalyticsResults.assertResultsTableTrainingFiltersExist();
           await ml.dataFrameAnalyticsResults.assertResultsTableNotEmpty();
+
+          await ml.testExecution.logTestStep(
+            'sets the sample size to 10000 for the scatterplot matrix'
+          );
+          await ml.dataFrameAnalyticsResults.setScatterplotMatrixSampleSizeSelectValue('10000');
+
+          await ml.testExecution.logTestStep(
+            'sets the randomize query switch to true for the scatterplot matrix'
+          );
+          await ml.dataFrameAnalyticsResults.setScatterplotMatrixRandomizeQueryCheckState(true);
+
+          await ml.testExecution.logTestStep('displays the scatterplot matrix');
           await ml.dataFrameAnalyticsResults.assertScatterplotMatrix(
             testData.expected.scatterplotMatrixColorStats
           );
+
+          await ml.commonUI.resetAntiAliasing();
         });
 
         it('displays the analytics job in the map view', async () => {

x-pack/test/functional/apps/transform/creation_index_pattern.ts

@@ -161,8 +161,8 @@ export default function ({ getService }: FtrProviderContext) {
               id: 'currency',
               legend: '1 category',
               colorStats: [
-                { key: '#000000', value: 10 },
-                { key: '#54B399', value: 90 },
+                { color: '#000000', percentage: 10 },
+                { color: '#54B399', percentage: 90 },
               ],
             },
             {
@@ -177,17 +177,17 @@ export default function ({ getService }: FtrProviderContext) {
               id: 'customer_gender',
               legend: '2 categories',
               colorStats: [
-                { key: '#000000', value: 15 },
-                { key: '#54B399', value: 85 },
+                { color: '#000000', percentage: 15 },
+                { color: '#54B399', percentage: 85 },
               ],
             },
             {
               chartAvailable: true,
               id: 'customer_id',
               legend: 'top 20 of 46 categories',
               colorStats: [
-                { key: '#54B399', value: 35 },
-                { key: '#000000', value: 60 },
+                { color: '#54B399', percentage: 35 },
+                { color: '#000000', percentage: 60 },
               ],
             },
             { chartAvailable: false, id: 'customer_last_name', legend: 'Chart not supported.' },
@@ -196,17 +196,17 @@ export default function ({ getService }: FtrProviderContext) {
               id: 'customer_phone',
               legend: '1 category',
               colorStats: [
-                { key: '#000000', value: 10 },
-                { key: '#54B399', value: 90 },
+                { color: '#000000', percentage: 10 },
+                { color: '#54B399', percentage: 90 },
               ],
             },
             {
               chartAvailable: true,
               id: 'day_of_week',
               legend: '7 categories',
               colorStats: [
-                { key: '#000000', value: 20 },
-                { key: '#54B399', value: 75 },
+                { color: '#000000', percentage: 20 },
+                { color: '#54B399', percentage: 75 },
               ],
             },
           ],

x-pack/test/functional/apps/transform/creation_runtime_mappings.ts

@@ -8,6 +8,9 @@
 import { TRANSFORM_STATE } from '../../../../plugins/transform/common/constants';
 
 import { FtrProviderContext } from '../../ftr_provider_context';
+
+import type { HistogramCharts } from '../../services/transform/wizard';
+
 import {
   GroupByEntry,
   isLatestTransformTestData,
@@ -44,22 +47,22 @@ export default function ({ getService }: FtrProviderContext) {
     });
 
     // Only testing that histogram charts are available for runtime fields here
-    const histogramCharts = [
+    const histogramCharts: HistogramCharts = [
       {
         chartAvailable: true,
         id: 'rt_airline_lower',
         legend: '19 categories',
         colorStats: [
-          { key: '#000000', value: 48 },
-          { key: '#54B399', value: 41 },
+          { color: '#000000', percentage: 48 },
+          { color: '#54B399', percentage: 41 },
         ],
       },
       {
         chartAvailable: true,
         id: 'rt_responsetime_x_2',
         colorStats: [
-          { key: '#54B399', value: 5 },
-          { key: '#000000', value: 95 },
+          { color: '#54B399', percentage: 5 },
+          { color: '#000000', percentage: 95 },
         ],
       },
     ];