From 7ef495887e6aec389d8932cfc926fed7ebb3fdbe Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 2 Jul 2025 19:41:44 +0000 Subject: [PATCH 1/6] latest --- .../SearchButton/SubmitButton.tsx | 8 ++++++-- .../SearchResultsTimeline/index.tsx | 19 +++++++++---------- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton.tsx index face250639..06fb0627d6 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton.tsx @@ -19,7 +19,11 @@ import styles from "./index.module.css"; * @return */ const SubmitButton = () => { - const {searchUiState, timeRange, queryString, updateTimelineConfig} = useSearchStore(); + const searchUiState = useSearchStore((state) => state.searchUiState); + const timeRange = useSearchStore((state) => state.timeRange); + const queryString = useSearchStore((state) => state.queryString); + const updateTimelineConfig = useSearchStore((state) => state.updateTimelineConfig); + const queryIsCaseSensitive = useSearchStore((state) => state.queryIsCaseSensitive); /** * Submits search query. @@ -30,7 +34,7 @@ const SubmitButton = () => { updateTimelineConfig(newTimelineConfig); handleQuerySubmit({ - ignoreCase: false, + ignoreCase: queryIsCaseSensitive, queryString: queryString, timeRangeBucketSizeMillis: newTimelineConfig.bucketDuration.asMilliseconds(), timestampBegin: timeRange[0].valueOf(), diff --git a/components/webui/client/src/pages/SearchPage/SearchResults/SearchResultsTimeline/index.tsx b/components/webui/client/src/pages/SearchPage/SearchResults/SearchResultsTimeline/index.tsx index fa49b4f128..bb9f2ad290 100644 --- a/components/webui/client/src/pages/SearchPage/SearchResults/SearchResultsTimeline/index.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchResults/SearchResultsTimeline/index.tsx @@ -19,15 +19,14 @@ import {computeTimelineConfig} from "./utils"; * @return */ const SearchResultsTimeline = () => { - const { - queryString, - updateTimeRange, - updateTimeRangeOption, - timelineConfig, - searchUiState, - updateTimelineConfig, - updateNumSearchResultsTimeline, - } = useSearchStore(); + const queryString = useSearchStore((state) => state.queryString); + const updateTimeRange = useSearchStore((state) => state.updateTimeRange); + const updateTimeRangeOption = useSearchStore((state) => state.updateTimeRangeOption); + const timelineConfig = useSearchStore((state) => state.timelineConfig); + const searchUiState = useSearchStore((state) => state.searchUiState); + const updateTimelineConfig = useSearchStore((state) => state.updateTimelineConfig); + const updateNumSearchResultsTimeline = useSearchStore((state) => state.updateNumSearchResultsTimeline); + const queryIsCaseSensitive = useSearchStore((state) => state.queryIsCaseSensitive); const aggregationResults = useAggregationResults(); @@ -57,7 +56,7 @@ const SearchResultsTimeline = () => { } handleQuerySubmit({ - ignoreCase: false, + ignoreCase: queryIsCaseSensitive, queryString: queryString, timeRangeBucketSizeMillis: newTimelineConfig.bucketDuration.asMilliseconds(), timestampBegin: newTimeRange[0].valueOf(), From 705da65ea6ccd2675788651142313b85fe8f64ae Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 2 Jul 2025 19:44:11 +0000 Subject: [PATCH 2/6] lint --- .../SearchPage/SearchResults/SearchResultsTimeline/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/webui/client/src/pages/SearchPage/SearchResults/SearchResultsTimeline/index.tsx b/components/webui/client/src/pages/SearchPage/SearchResults/SearchResultsTimeline/index.tsx index bb9f2ad290..822663d612 100644 --- a/components/webui/client/src/pages/SearchPage/SearchResults/SearchResultsTimeline/index.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchResults/SearchResultsTimeline/index.tsx @@ -25,7 +25,9 @@ const SearchResultsTimeline = () => { const timelineConfig = useSearchStore((state) => state.timelineConfig); const searchUiState = useSearchStore((state) => state.searchUiState); const updateTimelineConfig = useSearchStore((state) => state.updateTimelineConfig); - const updateNumSearchResultsTimeline = useSearchStore((state) => state.updateNumSearchResultsTimeline); + const updateNumSearchResultsTimeline = useSearchStore( + (state) => state.updateNumSearchResultsTimeline + ); const queryIsCaseSensitive = useSearchStore((state) => state.queryIsCaseSensitive); const aggregationResults = useAggregationResults(); From 562e309dee5c7a51ffe919b922ffbfe22a141016 Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 2 Jul 2025 20:03:54 +0000 Subject: [PATCH 3/6] latest --- .../SearchPage/SearchControls/SearchButton/SubmitButton.tsx | 2 +- .../SearchPage/SearchResults/SearchResultsTimeline/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton.tsx index 06fb0627d6..0294af3dea 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton.tsx @@ -34,7 +34,7 @@ const SubmitButton = () => { updateTimelineConfig(newTimelineConfig); handleQuerySubmit({ - ignoreCase: queryIsCaseSensitive, + ignoreCase: false === queryIsCaseSensitive, queryString: queryString, timeRangeBucketSizeMillis: newTimelineConfig.bucketDuration.asMilliseconds(), timestampBegin: timeRange[0].valueOf(), diff --git a/components/webui/client/src/pages/SearchPage/SearchResults/SearchResultsTimeline/index.tsx b/components/webui/client/src/pages/SearchPage/SearchResults/SearchResultsTimeline/index.tsx index 822663d612..3256263850 100644 --- a/components/webui/client/src/pages/SearchPage/SearchResults/SearchResultsTimeline/index.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchResults/SearchResultsTimeline/index.tsx @@ -58,7 +58,7 @@ const SearchResultsTimeline = () => { } handleQuerySubmit({ - ignoreCase: queryIsCaseSensitive, + ignoreCase: false === queryIsCaseSensitive, queryString: queryString, timeRangeBucketSizeMillis: newTimelineConfig.bucketDuration.asMilliseconds(), timestampBegin: newTimeRange[0].valueOf(), From 59db13dd3187e30807a7e8e10219c880e12d3e33 Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 2 Jul 2025 20:28:00 +0000 Subject: [PATCH 4/6] latest --- .../SearchPage/SearchControls/QueryInput/index.tsx | 12 +++++------- .../SearchControls/SearchButton/SubmitButton.tsx | 1 + 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/QueryInput/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/QueryInput/index.tsx index a9d69a8e4f..d652c8d301 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/QueryInput/index.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/QueryInput/index.tsx @@ -21,13 +21,11 @@ import { * @return */ const QueryInput = () => { - const { - queryString, - queryIsCaseSensitive, - updateQueryString, - updateQueryIsCaseSensitive, - searchUiState, - } = useSearchStore(); + const queryString = useSearchStore((state) => state.queryString); + const queryIsCaseSensitive = useSearchStore((state) => state.queryIsCaseSensitive); + const updateQueryString = useSearchStore((state) => state.updateQueryString); + const updateQueryIsCaseSensitive = useSearchStore((state) => state.updateQueryIsCaseSensitive); + const searchUiState = useSearchStore((state) => state.searchUiState); const [pseudoProgress, setPseudoProgress] = useState>(null); const intervalIdRef = useRef(0); diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton.tsx index 0294af3dea..58062231ab 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton.tsx @@ -41,6 +41,7 @@ const SubmitButton = () => { timestampEnd: timeRange[1].valueOf(), }); }, [queryString, + queryIsCaseSensitive, updateTimelineConfig, timeRange]); From f48dfb4b6a6204c46b2d0a11345868d40486a218 Mon Sep 17 00:00:00 2001 From: Marco Date: Thu, 3 Jul 2025 18:47:46 +0000 Subject: [PATCH 5/6] review --- .../SearchControls/QueryInput/index.tsx | 24 +++++++++------ .../SearchButton/SubmitButton.tsx | 5 ++-- .../SearchResultsTimeline/index.tsx | 30 +++++++++++-------- 3 files changed, 35 insertions(+), 24 deletions(-) diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/QueryInput/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/QueryInput/index.tsx index d652c8d301..45092c1486 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/QueryInput/index.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/QueryInput/index.tsx @@ -1,4 +1,6 @@ import { + ChangeEvent, + useCallback, useEffect, useRef, useState, @@ -21,10 +23,8 @@ import { * @return */ const QueryInput = () => { - const queryString = useSearchStore((state) => state.queryString); const queryIsCaseSensitive = useSearchStore((state) => state.queryIsCaseSensitive); - const updateQueryString = useSearchStore((state) => state.updateQueryString); - const updateQueryIsCaseSensitive = useSearchStore((state) => state.updateQueryIsCaseSensitive); + const queryString = useSearchStore((state) => state.queryString); const searchUiState = useSearchStore((state) => state.searchUiState); const [pseudoProgress, setPseudoProgress] = useState>(null); const intervalIdRef = useRef(0); @@ -57,6 +57,16 @@ const QueryInput = () => { clearInterval(intervalIdRef.current); }, []); + const handleCaseSensitiveChange = useCallback((newValue: boolean) => { + const {updateQueryIsCaseSensitive} = useSearchStore.getState(); + updateQueryIsCaseSensitive(newValue); + }, []); + + const handleChange = useCallback((ev: ChangeEvent) => { + const {updateQueryString} = useSearchStore.getState(); + updateQueryString(ev.target.value); + }, []); + return ( { searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING || searchUiState === SEARCH_UI_STATE.QUERYING } - onCaseSensitiveChange={(newValue) => { - updateQueryIsCaseSensitive(newValue); - }} - onChange={(e) => { - updateQueryString(e.target.value); - }}/> + onCaseSensitiveChange={handleCaseSensitiveChange} + onChange={handleChange}/> ); }; diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton.tsx index 58062231ab..9714937cd0 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton.tsx @@ -20,10 +20,9 @@ import styles from "./index.module.css"; */ const SubmitButton = () => { const searchUiState = useSearchStore((state) => state.searchUiState); - const timeRange = useSearchStore((state) => state.timeRange); const queryString = useSearchStore((state) => state.queryString); - const updateTimelineConfig = useSearchStore((state) => state.updateTimelineConfig); const queryIsCaseSensitive = useSearchStore((state) => state.queryIsCaseSensitive); + const timeRange = useSearchStore((state) => state.timeRange); /** * Submits search query. @@ -31,6 +30,7 @@ const SubmitButton = () => { const handleSubmitButtonClick = useCallback(() => { // Update timeline to match range picker selection. const newTimelineConfig = computeTimelineConfig(timeRange); + const {updateTimelineConfig} = useSearchStore.getState(); updateTimelineConfig(newTimelineConfig); handleQuerySubmit({ @@ -42,7 +42,6 @@ const SubmitButton = () => { }); }, [queryString, queryIsCaseSensitive, - updateTimelineConfig, timeRange]); const isQueryStringEmpty = queryString === SEARCH_STATE_DEFAULT.queryString; diff --git a/components/webui/client/src/pages/SearchPage/SearchResults/SearchResultsTimeline/index.tsx b/components/webui/client/src/pages/SearchPage/SearchResults/SearchResultsTimeline/index.tsx index 3256263850..542f099cac 100644 --- a/components/webui/client/src/pages/SearchPage/SearchResults/SearchResultsTimeline/index.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchResults/SearchResultsTimeline/index.tsx @@ -1,4 +1,7 @@ -import {useEffect} from "react"; +import { + useCallback, + useEffect, +} from "react"; import {Card} from "antd"; import {Dayjs} from "dayjs"; @@ -19,16 +22,10 @@ import {computeTimelineConfig} from "./utils"; * @return */ const SearchResultsTimeline = () => { + const queryIsCaseSensitive = useSearchStore((state) => state.queryIsCaseSensitive); const queryString = useSearchStore((state) => state.queryString); - const updateTimeRange = useSearchStore((state) => state.updateTimeRange); - const updateTimeRangeOption = useSearchStore((state) => state.updateTimeRangeOption); - const timelineConfig = useSearchStore((state) => state.timelineConfig); const searchUiState = useSearchStore((state) => state.searchUiState); - const updateTimelineConfig = useSearchStore((state) => state.updateTimelineConfig); - const updateNumSearchResultsTimeline = useSearchStore( - (state) => state.updateNumSearchResultsTimeline - ); - const queryIsCaseSensitive = useSearchStore((state) => state.queryIsCaseSensitive); + const timelineConfig = useSearchStore((state) => state.timelineConfig); const aggregationResults = useAggregationResults(); @@ -38,14 +35,20 @@ const SearchResultsTimeline = () => { 0 ) ?? 0; + const { + updateNumSearchResultsTimeline, + } = useSearchStore.getState(); + updateNumSearchResultsTimeline(numSearchResultsTimeline); }, [ aggregationResults, - updateNumSearchResultsTimeline, ]); - const handleTimelineZoom = (newTimeRange: [Dayjs, Dayjs]) => { + const handleTimelineZoom = useCallback((newTimeRange: [Dayjs, Dayjs]) => { const newTimelineConfig: TimelineConfig = computeTimelineConfig(newTimeRange); + const { + updateTimeRange, updateTimeRangeOption, updateTimelineConfig, + } = useSearchStore.getState(); // Update range picker selection to match zoomed range. updateTimeRange(newTimeRange); @@ -64,7 +67,10 @@ const SearchResultsTimeline = () => { timestampBegin: newTimeRange[0].valueOf(), timestampEnd: newTimeRange[1].valueOf(), }); - }; + }, [ + queryIsCaseSensitive, + queryString, + ]); return ( From 671a9433ed29afc939b56d6807754875dca08eb1 Mon Sep 17 00:00:00 2001 From: Marco Date: Thu, 3 Jul 2025 18:51:29 +0000 Subject: [PATCH 6/6] status --- .../SearchControls/QueryInput/index.tsx | 20 ++++++------- .../SearchResultsTimeline/index.tsx | 30 +++++++++---------- 2 files changed, 25 insertions(+), 25 deletions(-) diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/QueryInput/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/QueryInput/index.tsx index 45092c1486..7d2b3770b5 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/QueryInput/index.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/QueryInput/index.tsx @@ -29,6 +29,16 @@ const QueryInput = () => { const [pseudoProgress, setPseudoProgress] = useState>(null); const intervalIdRef = useRef(0); + const handleCaseSensitiveChange = useCallback((newValue: boolean) => { + const {updateQueryIsCaseSensitive} = useSearchStore.getState(); + updateQueryIsCaseSensitive(newValue); + }, []); + + const handleChange = useCallback((ev: ChangeEvent) => { + const {updateQueryString} = useSearchStore.getState(); + updateQueryString(ev.target.value); + }, []); + useEffect(() => { if (searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING) { if (0 !== intervalIdRef.current) { @@ -57,16 +67,6 @@ const QueryInput = () => { clearInterval(intervalIdRef.current); }, []); - const handleCaseSensitiveChange = useCallback((newValue: boolean) => { - const {updateQueryIsCaseSensitive} = useSearchStore.getState(); - updateQueryIsCaseSensitive(newValue); - }, []); - - const handleChange = useCallback((ev: ChangeEvent) => { - const {updateQueryString} = useSearchStore.getState(); - updateQueryString(ev.target.value); - }, []); - return ( { const aggregationResults = useAggregationResults(); - useEffect(() => { - const numSearchResultsTimeline = aggregationResults?.reduce( - (acc, curr) => acc + curr.count, - 0 - ) ?? 0; - - const { - updateNumSearchResultsTimeline, - } = useSearchStore.getState(); - - updateNumSearchResultsTimeline(numSearchResultsTimeline); - }, [ - aggregationResults, - ]); - const handleTimelineZoom = useCallback((newTimeRange: [Dayjs, Dayjs]) => { const newTimelineConfig: TimelineConfig = computeTimelineConfig(newTimeRange); const { @@ -72,6 +57,21 @@ const SearchResultsTimeline = () => { queryString, ]); + useEffect(() => { + const numSearchResultsTimeline = aggregationResults?.reduce( + (acc, curr) => acc + curr.count, + 0 + ) ?? 0; + + const { + updateNumSearchResultsTimeline, + } = useSearchStore.getState(); + + updateNumSearchResultsTimeline(numSearchResultsTimeline); + }, [ + aggregationResults, + ]); + return (