From 4c9f9aa3f9fd76d1a8987fff8bf916aab1c08744 Mon Sep 17 00:00:00 2001 From: Melissa Alvarez Date: Wed, 17 Feb 2021 11:50:50 -0800 Subject: [PATCH 1/3] exploration query bar filter reflects url query state on page load --- .../exploration_query_bar.tsx | 28 +++++++++++++++++-- 1 file changed, 26 insertions(+), 2 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..1c9b745554814 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,7 +5,7 @@ * 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'; @@ -59,6 +59,31 @@ export const ExplorationQueryBar: FC = ({ const searchChangeHandler = (q: Query) => setSearchInput(q); + const regex = useMemo(() => new RegExp(`${filters?.columnId}\s?:\s?(true|false)`, 'g'), []); + + /** + * If a filter option is active in the url set the corresponding options + * button to selected mode + */ + useEffect(() => { + 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. @@ -111,7 +136,6 @@ export const ExplorationQueryBar: FC = ({ 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) { From 150ee8bdcd5199ecbec46e5ef72784bc190b8d32 Mon Sep 17 00:00:00 2001 From: Melissa Alvarez Date: Wed, 17 Feb 2021 12:27:22 -0800 Subject: [PATCH 2/3] wrap filter handler in debounce --- .../exploration_query_bar/exploration_query_bar.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 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 1c9b745554814..f49ee6b72c9ed 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 @@ -9,6 +9,7 @@ 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 { @@ -132,7 +133,7 @@ export const ExplorationQueryBar: FC = ({ }); }; - 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}`; @@ -164,7 +165,7 @@ export const ExplorationQueryBar: FC = ({ setSearchInput(newSearchInput); searchSubmitHandler(newSearchInput, true); - }; + }, 200); return ( = ({ onChange={(optionId: string) => { const newIdToSelectedMap = { [optionId]: !idToSelectedMap[optionId] }; setIdToSelectedMap(newIdToSelectedMap); - handleFilterUpdate(optionId, newIdToSelectedMap); + debouncedHandleFilterUpdate(optionId, newIdToSelectedMap); }} /> From a349738dc5dddfb51907e5d04aa22126df55ff9e Mon Sep 17 00:00:00 2001 From: Melissa Alvarez Date: Fri, 19 Feb 2021 09:34:40 -0800 Subject: [PATCH 3/3] add dep to memoized regex. update comment --- .../exploration_query_bar/exploration_query_bar.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 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 f49ee6b72c9ed..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 @@ -60,13 +60,15 @@ export const ExplorationQueryBar: FC = ({ const searchChangeHandler = (q: Query) => setSearchInput(q); - const regex = useMemo(() => new RegExp(`${filters?.columnId}\s?:\s?(true|false)`, 'g'), []); + const regex = useMemo(() => new RegExp(`${filters?.columnId}\s?:\s?(true|false)`, 'g'), [ + filters?.columnId, + ]); /** - * If a filter option is active in the url set the corresponding options - * button to selected mode + * 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(() => { + useEffect(function updateIdToSelectedMap() { if (filters !== undefined) { const match: string[] | null = query.query.match(regex); let filterKeyInEffect: string | undefined;