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

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 f9a9460a7dad0..4ccb01c5deae7 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
@@ -99,7 +99,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(() => {
@@ -156,7 +156,7 @@ export const ScatterplotMatrix: FC<ScatterplotMatrixProps> = ({
 
   useEffect(() => {
     if (fields.length === 0) {
-      setSplom(undefined);
+      setSplom({ columns: [], items: [], messages: [] });
       setIsLoading(false);
       return;
     }