[ML] Data Frame Analytics: Fix scatterplot matrix boilerplate visibil…

…ity 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 <[email protected]>

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();
+    });
+  });
+});

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