[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 <[email protected]>
elastic · Feb 22, 2021 · b7f33b1 · b7f33b1
1 parent 1c3515f
commit b7f33b1
Showing 1 changed file with 32 additions and 5 deletions.
diff --git a/...cs/pages/analytics_exploration/components/exploration_query_bar/exploration_query_bar.tsx b/...cs/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>