[ML] Anomaly Explorer: if filter includes wildcard ensure matching sw…

…imlanes are not masked (#65384) (#66078)

* if wildcard search no mask for matching swimlanes

* update swimlane proptypes

* add helper function

* add tests for helper function

x-pack/plugins/ml/public/application/explorer/__mocks__/mock_viewby_swimlane.json

@@ -0,0 +1,33 @@
+{
+  "laneLabels": [
+    "View by"
+  ],
+  "points": [
+    {
+      "laneLabel": "test-1",
+      "time": 1486425600,
+      "value": 0
+    },
+    {
+      "laneLabel": "test-2",
+      "time": 1486440000,
+      "value": 0.01107053
+    },
+    {
+      "laneLabel": "other-3",
+      "time": 1486454400,
+      "value": 0.1870243
+    },
+    {
+      "laneLabel": "other-4",
+      "time": 1486468800,
+      "value": 0.5947769
+    },
+    {
+      "laneLabel": "other-5",
+      "time": 1486483200,
+      "value": 0
+    }
+  ],
+  "interval": 14400
+}

x-pack/plugins/ml/public/application/explorer/explorer.js

@@ -81,6 +81,7 @@ import { AnomaliesTable } from '../components/anomalies_table/anomalies_table';
 import { ResizeChecker } from '../../../../../../src/plugins/kibana_utils/public';
 import { getTimefilter, getToastNotifications } from '../util/dependency_cache';
 import { MlTooltipComponent } from '../components/chart_tooltip';
+import { hasMatchingPoints } from './has_matching_points';
 
 function mapSwimlaneOptionsToEuiOptions(options) {
   return options.map(option => ({
@@ -284,6 +285,7 @@ export class Explorer extends React.Component {
       annotationsData,
       chartsData,
       filterActive,
+      filteredFields,
       filterPlaceHolder,
       indexPattern,
       influencers,
@@ -418,6 +420,7 @@ export class Explorer extends React.Component {
                     <ExplorerSwimlane
                       chartWidth={swimlaneContainerWidth}
                       filterActive={filterActive}
+                      filteredFields={filteredFields}
                       maskAll={maskAll}
                       timeBuckets={this.timeBuckets}
                       swimlaneCellClick={this.swimlaneCellClick}
@@ -499,7 +502,13 @@ export class Explorer extends React.Component {
                           <ExplorerSwimlane
                             chartWidth={swimlaneContainerWidth}
                             filterActive={filterActive}
-                            maskAll={maskAll}
+                            maskAll={
+                              maskAll &&
+                              !hasMatchingPoints({
+                                filteredFields,
+                                swimlaneData: viewBySwimlaneData,
+                              })
+                            }
                             timeBuckets={this.timeBuckets}
                             swimlaneCellClick={this.swimlaneCellClick}
                             swimlaneData={viewBySwimlaneData}

x-pack/plugins/ml/public/application/explorer/explorer_swimlane.tsx

@@ -633,7 +633,7 @@ export class ExplorerSwimlane extends React.Component<ExplorerSwimlaneProps> {
       if (selectedCellTimes.length > 0) {
         this.highlightOverall(selectedCellTimes);
       }
-      this.maskIrrelevantSwimlanes(!!maskAll);
+      this.maskIrrelevantSwimlanes(Boolean(maskAll));
     } else {
       this.clearSelection();
     }

x-pack/plugins/ml/public/application/explorer/has_matching_points.test.ts

@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import mockViewBySwimlaneData from './__mocks__/mock_viewby_swimlane.json';
+import { hasMatchingPoints } from './has_matching_points';
+
+const filteredFieldsMatch = ['test@kuery-wildcard@'];
+const filteredFieldsNoMatch = ['no-match@kuery-wildcard@', 'nonexistant'];
+
+describe('hasMatchingPoints', () => {
+  test('is true', () => {
+    expect(
+      hasMatchingPoints({
+        filteredFields: filteredFieldsMatch,
+        swimlaneData: mockViewBySwimlaneData,
+      })
+    ).toBe(true);
+  });
+
+  test('is false', () => {
+    expect(
+      hasMatchingPoints({
+        filteredFields: filteredFieldsNoMatch,
+        swimlaneData: mockViewBySwimlaneData,
+      })
+    ).toBe(false);
+  });
+});

x-pack/plugins/ml/public/application/explorer/has_matching_points.ts

@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { ExplorerState } from './reducers';
+import { OverallSwimlaneData, SwimlaneData } from './explorer_utils';
+
+interface HasMatchingPointsParams {
+  filteredFields?: ExplorerState['filteredFields'];
+  swimlaneData: SwimlaneData | OverallSwimlaneData;
+}
+
+export const hasMatchingPoints = ({
+  filteredFields = [],
+  swimlaneData,
+}: HasMatchingPointsParams): boolean => {
+  // If filtered fields includes a wildcard search maskAll only if there are no points matching the pattern
+  const wildCardField = filteredFields.find(field => /\@kuery-wildcard\@$/.test(field));
+  const substring =
+    wildCardField !== undefined ? wildCardField.replace(/\@kuery-wildcard\@$/, '') : null;
+
+  return (
+    substring !== null &&
+    swimlaneData.points.some(point => {
+      return point.laneLabel.includes(substring);
+    })
+  );
+};