[7.12] [ML] Data Frame Analytics: Stabilize canvas element functional tests.

x-pack/plugins/ml/public/application/_hacks.scss

@@ -1,6 +1,6 @@
 .tab-datavisualizer_index_select,
 .tab-timeseriesexplorer,
-.tab-explorer, {
+.tab-explorer {
   // Make all page background white until More of the pages use EuiPage to wrap in panel-like components
   background-color: $euiColorEmptyShade;
 }
@@ -22,3 +22,12 @@
 .clear, .clearfix {
   clear: both;
 }
+
+// Helper class for functional tests to disable anti-aliasing for canvas elements
+.mlDisableAntiAliasing {
+  -webkit-font-smoothing : none;
+
+  * canvas {
+    image-rendering: pixelated;
+  }
+}

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

@@ -267,7 +267,7 @@ export const ScatterplotMatrix: FC<ScatterplotMatrixProps> = ({
       {splom === undefined || vegaSpec === undefined ? (
         <VegaChartLoading />
       ) : (
-        <div data-test-subj="mlScatterplotMatrix">
+        <div data-test-subj={`mlScatterplotMatrix ${isLoading ? 'loading' : 'loaded'}`}>
           <EuiFlexGroup>
             <EuiFlexItem>
               <EuiFormRow
@@ -316,6 +316,7 @@ export const ScatterplotMatrix: FC<ScatterplotMatrixProps> = ({
                 fullWidth
               >
                 <EuiSelect
+                  data-test-subj="mlScatterplotMatrixSampleSizeSelect"
                   compressed
                   options={sampleSizeOptions}
                   value={fetchSize}
@@ -340,6 +341,7 @@ export const ScatterplotMatrix: FC<ScatterplotMatrixProps> = ({
                 fullWidth
               >
                 <EuiSwitch
+                  data-test-subj="mlScatterplotMatrixRandomizeQuerySwitch"
                   name="mlScatterplotMatrixRandomizeQuery"
                   label={randomizeQuery ? TOGGLE_ON : TOGGLE_OFF}
                   checked={randomizeQuery}

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/configuration_step/configuration_step_form.tsx

@@ -120,14 +120,6 @@ export const ConfigurationStepForm: FC<CreateAnalyticsStepProps> = ({
     language: SEARCH_QUERY_LANGUAGE.KUERY,
   });
 
-  const scatterplotFieldOptions = useMemo(
-    () =>
-      includesTableItems
-        .filter((d) => d.feature_type === 'numerical' && d.is_included)
-        .map((d) => d.name),
-    [includesTableItems]
-  );
-
   const toastNotifications = getToastNotifications();
 
   const setJobConfigQuery: ExplorationQueryBarProps['setSearchQuery'] = (update) => {
@@ -341,16 +333,37 @@ export const ConfigurationStepForm: FC<CreateAnalyticsStepProps> = ({
     [currentIndexPattern.fields]
   );
 
+  const scatterplotMatrixProps = useMemo(
+    () => ({
+      color: isJobTypeWithDepVar ? dependentVariable : undefined,
+      fields: includesTableItems
+        .filter((d) => d.feature_type === 'numerical' && d.is_included)
+        .map((d) => d.name),
+      index: currentIndexPattern.title,
+      legendType: getScatterplotMatrixLegendType(jobType),
+      searchQuery: jobConfigQuery,
+    }),
+    [
+      currentIndexPattern.title,
+      dependentVariable,
+      includesTableItems,
+      isJobTypeWithDepVar,
+      jobConfigQuery,
+      jobType,
+    ]
+  );
+
   // Show the Scatterplot Matrix only if
   // - There's more than one suitable field available
   // - The job type is outlier detection, or
   // - The job type is regression or classification and the dependent variable has been set
-  const showScatterplotMatrix =
-    (jobType === ANALYSIS_CONFIG_TYPE.OUTLIER_DETECTION ||
-      ((jobType === ANALYSIS_CONFIG_TYPE.REGRESSION ||
-        jobType === ANALYSIS_CONFIG_TYPE.CLASSIFICATION) &&
-        !dependentVariableEmpty)) &&
-    scatterplotFieldOptions.length > 1;
+  const showScatterplotMatrix = useMemo(
+    () =>
+      (jobType === ANALYSIS_CONFIG_TYPE.OUTLIER_DETECTION ||
+        (isJobTypeWithDepVar && !dependentVariableEmpty)) &&
+      scatterplotMatrixProps.fields.length > 1,
+    [dependentVariableEmpty, jobType, scatterplotMatrixProps.fields.length]
+  );
 
   // Don't render until `savedSearchQuery` has been initialized.
   // `undefined` means uninitialized, `null` means initialized but not used.
@@ -550,18 +563,7 @@ export const ConfigurationStepForm: FC<CreateAnalyticsStepProps> = ({
             paddingSize="m"
             data-test-subj="mlAnalyticsCreateJobWizardScatterplotMatrixPanel"
           >
-            <ScatterplotMatrix
-              fields={scatterplotFieldOptions}
-              index={currentIndexPattern.title}
-              color={
-                jobType === ANALYSIS_CONFIG_TYPE.REGRESSION ||
-                jobType === ANALYSIS_CONFIG_TYPE.CLASSIFICATION
-                  ? dependentVariable
-                  : undefined
-              }
-              legendType={getScatterplotMatrixLegendType(jobType)}
-              searchQuery={jobConfigQuery}
-            />
+            <ScatterplotMatrix {...scatterplotMatrixProps} />
           </EuiPanel>
           <EuiSpacer />
         </>

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/get_roc_curve_chart_vega_lite_spec.tsx

@@ -53,6 +53,7 @@ export const getRocCurveChartVegaLiteSpec = (
 
   return {
     $schema: 'https://vega.github.io/schema/vega-lite/v4.8.1.json',
+    background: 'transparent',
     // Left padding of 45px to align the left axis of the chart with the confusion matrix above.
     padding: { left: 45, top: 0, right: 0, bottom: 0 },
     config: {

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';
 
-  // Failing: See 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');
@@ -43,24 +42,19 @@ export default function ({ getService }: FtrProviderContext) {
         createIndexPattern: true,
         expected: {
           rocCurveColorState: [
-            // background
-            { key: '#FFFFFF', value: 93 },
             // tick/grid/axis
-            { key: '#98A2B3', value: 1 },
-            { key: '#DDDDDD', value: 3 },
+            { color: '#DDDDDD', percentage: 50 },
             // line
-            { key: '#6092C0', value: 1 },
+            { color: '#98A2B3', percentage: 30 },
           ],
           scatterplotMatrixColorStats: [
-            // background
-            { key: '#000000', value: 94 },
+            // marker colors
+            { color: '#7FC6B3', percentage: 1 },
+            { color: '#88ADD0', percentage: 0.03 },
             // tick/grid/axis
-            { key: '#DDDDDD', value: 1 },
-            { key: '#D3DAE6', value: 1 },
-            { key: '#F5F7FA', value: 1 },
-            // scatterplot circles
-            { key: '#6A717D', value: 1 },
-            { key: '#54B39A', value: 1 },
+            { color: '#DDDDDD', percentage: 8 },
+            { color: '#D3DAE6', percentage: 8 },
+            { color: '#F5F7FA', percentage: 15 },
           ],
           row: {
             type: 'classification',
@@ -83,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(
@@ -111,9 +109,18 @@ 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.dataFrameAnalyticsCanvasElement.assertCanvasElement(
-            'mlAnalyticsCreateJobWizardScatterplotMatrixFormRow',
+          await ml.dataFrameAnalyticsCreation.assertScatterplotMatrix(
             testData.expected.scatterplotMatrixColorStats
           );
 
@@ -231,18 +238,39 @@ 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.dataFrameAnalyticsCanvasElement.assertCanvasElement(
-            'mlDFAnalyticsClassificationExplorationRocCurveChart',
-            testData.expected.rocCurveColorState
-          );
           await ml.dataFrameAnalyticsResults.assertClassificationTablePanelExists();
           await ml.dataFrameAnalyticsResults.assertResultsTableExists();
           await ml.dataFrameAnalyticsResults.assertResultsTableTrainingFiltersExist();
           await ml.dataFrameAnalyticsResults.assertResultsTableNotEmpty();
-          await ml.dataFrameAnalyticsCanvasElement.assertCanvasElement(
-            'mlDFExpandableSection-splom',
+
+          await ml.testExecution.logTestStep('displays the ROC curve chart');
+          await ml.commonUI.assertColorsInCanvasElement(
+            'mlDFAnalyticsClassificationExplorationRocCurveChart',
+            testData.expected.rocCurveColorState,
+            ['#000000'],
+            undefined,
+            undefined,
+            // increased tolerance for ROC curve chart up from 10 to 20
+            // since the returned colors vary quite a bit on each run.
+            20
+          );
+
+          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

@@ -50,26 +50,21 @@ export default function ({ getService }: FtrProviderContext) {
             { chartAvailable: true, id: 'Exterior2nd', legend: '3 categories' },
             { chartAvailable: true, id: 'Fireplaces', legend: '0 - 3' },
           ],
-          scatterplotMatrixColorStatsWizard: [
-            // background
-            { key: '#000000', value: 91 },
-            // tick/grid/axis
-            { key: '#6A717D', value: 2 },
-            { key: '#F5F7FA', value: 2 },
-            { key: '#D3DAE6', value: 1 },
-            // scatterplot circles
-            { key: '#54B399', value: 1 },
-            { key: '#54B39A', value: 1 },
+          scatterplotMatrixColorsWizard: [
+            // markers
+            { color: '#52B398', percentage: 15 },
+            // grey boilerplate
+            { color: '#6A717D', percentage: 33 },
           ],
           scatterplotMatrixColorStatsResults: [
-            // background
-            { key: '#000000', value: 91 },
+            // red markers
+            { color: '#D98071', percentage: 1 },
             // tick/grid/axis, grey markers
-            // the red outlier color is not above the 1% threshold.
-            { key: '#6A717D', value: 2 },
-            { key: '#98A2B3', value: 1 },
-            { key: '#F5F7FA', value: 2 },
-            { key: '#D3DAE6', value: 1 },
+            { color: '#6A717D', percentage: 33 },
+            { color: '#D3DAE6', percentage: 8 },
+            { color: '#98A1B3', percentage: 12 },
+            // anti-aliasing
+            { color: '#F5F7FA', percentage: 30 },
           ],
           row: {
             type: 'outlier_detection',
@@ -93,6 +88,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(
@@ -127,10 +126,19 @@ 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.dataFrameAnalyticsCanvasElement.assertCanvasElement(
-            'mlAnalyticsCreateJobWizardScatterplotMatrixFormRow',
-            testData.expected.scatterplotMatrixColorStatsWizard
+          await ml.dataFrameAnalyticsCreation.assertScatterplotMatrix(
+            testData.expected.scatterplotMatrixColorsWizard
           );
 
           await ml.testExecution.logTestStep('continues to the additional options step');
@@ -250,10 +258,23 @@ export default function ({ getService }: FtrProviderContext) {
           await ml.dataFrameAnalyticsResults.assertResultsTableExists();
           await ml.dataFrameAnalyticsResults.assertResultsTableNotEmpty();
           await ml.dataFrameAnalyticsResults.assertFeatureInfluenceCellNotEmpty();
-          await ml.dataFrameAnalyticsCanvasElement.assertCanvasElement(
-            'mlDFExpandableSection-splom',
+
+          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 () => {