From 3a93d9737f0a395bc45d1c5ce5db00852da7436e Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Mon, 12 Apr 2021 15:10:20 -0400
Subject: [PATCH] [ML] Data Frame Analytics: Fix scatterplot matrix boilerplate
 visibility with no fields selected. (#96590) (#96840)

Fixes the problem where deselecting all fields for the scatterplot would also hide the UI to do the actual selection. Now, when all fields are removed from the combo box, the UI stays visible, just the scatterplot itself will be hidden.

Co-authored-by: Walter Rafelsberger <walter@elastic.co>
---
 .../scatterplot_matrix.test.tsx               | 87 +++++++++++++++++++
 .../scatterplot_matrix/scatterplot_matrix.tsx |  4 +-
 2 files changed, 89 insertions(+), 2 deletions(-)
 create mode 100644 x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.test.tsx

diff --git a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.test.tsx b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.test.tsx
new file mode 100644
index 0000000000000..10deaa1c2d489
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.test.tsx
@@ -0,0 +1,87 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render, waitFor, screen } from '@testing-library/react';
+
+import { IntlProvider } from 'react-intl';
+
+import euiThemeLight from '@elastic/eui/dist/eui_theme_light.json';
+
+import { ScatterplotMatrix } from './scatterplot_matrix';
+
+const mockEsSearch = jest.fn((body) => ({
+  hits: { hits: [{ fields: { x: [1], y: [2] } }, { fields: { x: [2], y: [3] } }] },
+}));
+jest.mock('../../contexts/kibana', () => ({
+  useMlApiContext: () => ({
+    esSearch: mockEsSearch,
+  }),
+}));
+
+const mockEuiTheme = euiThemeLight;
+jest.mock('../color_range_legend', () => ({
+  useCurrentEuiTheme: () => ({
+    euiTheme: mockEuiTheme,
+  }),
+}));
+
+// Mocking VegaChart to avoid a jest/canvas related error
+jest.mock('../vega_chart', () => ({
+  VegaChart: () => <div data-test-subj="mlVegaChart" />,
+}));
+
+describe('Data Frame Analytics: <ScatterplotMatrix />', () => {
+  it('renders the scatterplot matrix wrapper with options but not the chart itself', async () => {
+    // prepare
+    render(
+      <IntlProvider locale="en">
+        <ScatterplotMatrix
+          {...{
+            fields: [],
+            index: 'the-index-name',
+          }}
+        />
+      </IntlProvider>
+    );
+
+    // assert
+    await waitFor(() => {
+      expect(mockEsSearch).toHaveBeenCalledTimes(0);
+      // should hide the loading indicator and render the wrapping options boilerplate
+      expect(screen.queryByTestId('mlScatterplotMatrix loaded')).toBeInTheDocument();
+      // should not render the scatterplot matrix itself because there's no data items.
+      expect(screen.queryByTestId('mlVegaChart')).not.toBeInTheDocument();
+    });
+  });
+
+  it('renders the scatterplot matrix wrapper with options and the chart itself', async () => {
+    // prepare
+    render(
+      <IntlProvider locale="en">
+        <ScatterplotMatrix
+          {...{
+            fields: ['x', 'y'],
+            index: 'the-index-name',
+          }}
+        />
+      </IntlProvider>
+    );
+
+    // assert
+    await waitFor(() => {
+      expect(mockEsSearch).toHaveBeenCalledWith({
+        body: { _source: false, fields: ['x', 'y'], from: 0, query: undefined, size: 1000 },
+        index: 'the-index-name',
+      });
+      // should hide the loading indicator and render the wrapping options boilerplate
+      expect(screen.queryByTestId('mlScatterplotMatrix loaded')).toBeInTheDocument();
+      // should render the scatterplot matrix.
+      expect(screen.queryByTestId('mlVegaChart')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx
index 540fa65bf6c18..b83965b52befc 100644
--- a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx
+++ b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx
@@ -108,7 +108,7 @@ export const ScatterplotMatrix: FC<ScatterplotMatrixProps> = ({
   // are sized according to outlier_score
   const [dynamicSize, setDynamicSize] = useState<boolean>(false);
 
-  // used to give the use the option to customize the fields used for the matrix axes
+  // used to give the user the option to customize the fields used for the matrix axes
   const [fields, setFields] = useState<string[]>([]);
 
   useEffect(() => {
@@ -165,7 +165,7 @@ export const ScatterplotMatrix: FC<ScatterplotMatrixProps> = ({
 
   useEffect(() => {
     if (fields.length === 0) {
-      setSplom(undefined);
+      setSplom({ columns: [], items: [], messages: [] });
       setIsLoading(false);
       return;
     }