From b7f33b1748c1c3c799b86ee75d5904fb38f52078 Mon Sep 17 00:00:00 2001
From: Melissa Alvarez <melissa.alvarez@elastic.co>
Date: Mon, 22 Feb 2021 10:41:58 -0500
Subject: [PATCH] [ML] Data Frame Analytics exploration page: filters
 improvements (#91748)

* exploration query bar filter reflects url query state on page load

* wrap filter handler in debounce

* add dep to memoized regex. update comment

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../exploration_query_bar.tsx                 | 37 ++++++++++++++++---
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_query_bar/exploration_query_bar.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_query_bar/exploration_query_bar.tsx
index b079fc154713e..dd451958e2646 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_query_bar/exploration_query_bar.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_query_bar/exploration_query_bar.tsx
@@ -5,10 +5,11 @@
  * 2.0.
  */
 
-import React, { FC, useEffect, useState } from 'react';
+import React, { FC, useEffect, useMemo, useState } from 'react';
 import { EuiButtonGroup, EuiCode, EuiFlexGroup, EuiFlexItem, EuiInputPopover } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
+import { debounce } from 'lodash';
 import { Dictionary } from '../../../../../../../common/types/common';
 import { IIndexPattern } from '../../../../../../../../../../src/plugins/data/common/index_patterns';
 import {
@@ -59,6 +60,33 @@ export const ExplorationQueryBar: FC<ExplorationQueryBarProps> = ({
 
   const searchChangeHandler = (q: Query) => setSearchInput(q);
 
+  const regex = useMemo(() => new RegExp(`${filters?.columnId}\s?:\s?(true|false)`, 'g'), [
+    filters?.columnId,
+  ]);
+
+  /**
+   * Restoring state from the URL once on load. If a filter option is active
+   * in the url set the corresponding options button to selected mode.
+   */
+  useEffect(function updateIdToSelectedMap() {
+    if (filters !== undefined) {
+      const match: string[] | null = query.query.match(regex);
+      let filterKeyInEffect: string | undefined;
+
+      if (match !== null && match[0].includes('true')) {
+        // set { training: true }
+        filterKeyInEffect = Object.keys(filters.key).find((i) => filters.key[i] === true);
+      } else if (match !== null && match[0].includes('false')) {
+        // set { testing: true }
+        filterKeyInEffect = Object.keys(filters.key).find((i) => filters.key[i] === false);
+      }
+
+      if (filterKeyInEffect) {
+        setIdToSelectedMap({ [filterKeyInEffect]: true });
+      }
+    }
+  }, []);
+
   /**
    * Component is responsible for parsing the query string,
    * hence it should sync submitted query string.
@@ -107,11 +135,10 @@ export const ExplorationQueryBar: FC<ExplorationQueryBarProps> = ({
     });
   };
 
-  const handleFilterUpdate = (optionId: string, currentIdToSelectedMap: any) => {
+  const debouncedHandleFilterUpdate = debounce((optionId: string, currentIdToSelectedMap: any) => {
     let newQuery = '';
     const filterValue = filters?.key[optionId];
     const filterQueryString = `${filters?.columnId}:${filterValue}`;
-    const regex = new RegExp(`${filters?.columnId}\s?:\s?(true|false)`, 'g');
 
     // Toggling selected optionId to 'off' - remove column id query from filter
     if (currentIdToSelectedMap[optionId] === false) {
@@ -140,7 +167,7 @@ export const ExplorationQueryBar: FC<ExplorationQueryBarProps> = ({
 
     setSearchInput(newSearchInput);
     searchSubmitHandler(newSearchInput, true);
-  };
+  }, 200);
 
   return (
     <EuiInputPopover
@@ -189,7 +216,7 @@ export const ExplorationQueryBar: FC<ExplorationQueryBarProps> = ({
                 onChange={(optionId: string) => {
                   const newIdToSelectedMap = { [optionId]: !idToSelectedMap[optionId] };
                   setIdToSelectedMap(newIdToSelectedMap);
-                  handleFilterUpdate(optionId, newIdToSelectedMap);
+                  debouncedHandleFilterUpdate(optionId, newIdToSelectedMap);
                 }}
               />
             </EuiFlexItem>