From 4c0251c744b7281191b8d90fd419a626256f2363 Mon Sep 17 00:00:00 2001 From: Henry8192 <50559854+Henry8192@users.noreply.github.com> Date: Fri, 1 Aug 2025 14:03:54 -0400 Subject: [PATCH 01/29] use normal input date time selector as timestamp selector --- src/components/MenuBar/index.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/MenuBar/index.tsx b/src/components/MenuBar/index.tsx index 2dc4efaeb..2bbfbf5bf 100644 --- a/src/components/MenuBar/index.tsx +++ b/src/components/MenuBar/index.tsx @@ -78,6 +78,11 @@ const MenuBar = () => { + + + From a8e0ce27eed3e5a73334eded8b99fa306fad6eb3 Mon Sep 17 00:00:00 2001 From: Henry8192 <50559854+Henry8192@users.noreply.github.com> Date: Fri, 1 Aug 2025 15:08:47 -0400 Subject: [PATCH 02/29] trigger timestamp search --- src/components/MenuBar/index.css | 7 +++++++ src/components/MenuBar/index.tsx | 15 ++++++++++++++- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/components/MenuBar/index.css b/src/components/MenuBar/index.css index f9e036567..0e0f18235 100644 --- a/src/components/MenuBar/index.css +++ b/src/components/MenuBar/index.css @@ -43,6 +43,13 @@ justify-content: flex-end; } +.menu-bar-datetime-input { + box-sizing: border-box; + height: var(--ylv-menu-bar-height); + border: none; + font: inherit; +} + .menu-bar-loading-progress { z-index: var(--ylv-loading-progress-z-index); margin-bottom: -2px; diff --git a/src/components/MenuBar/index.tsx b/src/components/MenuBar/index.tsx index 2bbfbf5bf..6874e9f48 100644 --- a/src/components/MenuBar/index.tsx +++ b/src/components/MenuBar/index.tsx @@ -16,6 +16,8 @@ import {UI_ELEMENT} from "../../typings/states"; import {CURSOR_CODE} from "../../typings/worker"; import {openFile} from "../../utils/file"; import {isDisabled} from "../../utils/states"; +import {updateWindowUrlHashParams} from "../../utils/url"; +import {updateViewHashParams} from "../../utils/url/urlHash"; import ExportLogsButton from "./ExportLogsButton"; import MenuBarIconButton from "./MenuBarIconButton"; import NavigationBar from "./NavigationBar"; @@ -80,8 +82,19 @@ const MenuBar = () => { + type={"datetime-local"} + onKeyDown={(e) => { + if ("Enter" === e.key) { + const datetime = e.currentTarget.value; + if (datetime) { + const timestamp = new Date(`${datetime}Z`).getTime(); + updateWindowUrlHashParams({timestamp: timestamp}); + updateViewHashParams(); + } + } + }}/> From dab80a867da33a08f62bdc14fad5237b65ed8498 Mon Sep 17 00:00:00 2001 From: Henry8192 <50559854+Henry8192@users.noreply.github.com> Date: Sun, 3 Aug 2025 19:55:24 -0400 Subject: [PATCH 03/29] add search by timestamp button next to timestamp input --- src/components/MenuBar/index.tsx | 46 +++++++++++++++++++++++++------- 1 file changed, 37 insertions(+), 9 deletions(-) diff --git a/src/components/MenuBar/index.tsx b/src/components/MenuBar/index.tsx index 6874e9f48..bd882b659 100644 --- a/src/components/MenuBar/index.tsx +++ b/src/components/MenuBar/index.tsx @@ -9,6 +9,7 @@ import { } from "@mui/joy"; import FolderOpenIcon from "@mui/icons-material/FolderOpen"; +import SearchIcon from "@mui/icons-material/Search"; import useLogFileStore from "../../stores/logFileStore"; import useUiStore from "../../stores/uiStore"; @@ -81,20 +82,47 @@ const MenuBar = () => { - { - if ("Enter" === e.key) { - const datetime = e.currentTarget.value; + + { + if ("Enter" === e.key) { + const datetime = e.currentTarget.value; + if (datetime) { + const timestamp = new Date(`${datetime}Z`).getTime(); + updateWindowUrlHashParams({timestamp: timestamp}); + updateViewHashParams(); + } + } + }}/> + { + const input = document.getElementById( + "menu-bar-datetime-input" + ) as HTMLInputElement; + const datetime = input.value; if (datetime) { const timestamp = new Date(`${datetime}Z`).getTime(); updateWindowUrlHashParams({timestamp: timestamp}); updateViewHashParams(); } - } - }}/> + }} + > + + + From 81e884bec522a0b684590f48c56236274ef46f8e Mon Sep 17 00:00:00 2001 From: Henry8192 <50559854+Henry8192@users.noreply.github.com> Date: Mon, 4 Aug 2025 10:37:13 -0400 Subject: [PATCH 04/29] set date time picker and search by timestamp button's uiState --- src/components/MenuBar/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/MenuBar/index.tsx b/src/components/MenuBar/index.tsx index bd882b659..f1896ce19 100644 --- a/src/components/MenuBar/index.tsx +++ b/src/components/MenuBar/index.tsx @@ -90,6 +90,7 @@ const MenuBar = () => { > { } }}/> Date: Mon, 4 Aug 2025 10:46:25 -0400 Subject: [PATCH 05/29] extract TimestampSelector component out of menu bar --- src/components/MenuBar/TimestampSelector.tsx | 69 ++++++++++++++++++++ src/components/MenuBar/index.tsx | 48 +------------- 2 files changed, 71 insertions(+), 46 deletions(-) create mode 100644 src/components/MenuBar/TimestampSelector.tsx diff --git a/src/components/MenuBar/TimestampSelector.tsx b/src/components/MenuBar/TimestampSelector.tsx new file mode 100644 index 000000000..0628556c8 --- /dev/null +++ b/src/components/MenuBar/TimestampSelector.tsx @@ -0,0 +1,69 @@ +import {Box} from "@mui/joy"; + +import SearchIcon from "@mui/icons-material/Search"; + +import useUiStore from "../../stores/uiStore"; +import {UI_ELEMENT} from "../../typings/states"; +import {isDisabled} from "../../utils/states"; +import {updateWindowUrlHashParams} from "../../utils/url"; +import {updateViewHashParams} from "../../utils/url/urlHash"; +import MenuBarIconButton from "./MenuBarIconButton"; + + +/** + * renders a timestamp input field and a search icon button. + * Users can input a date and time in UTC format and either press "Enter" + * or click the search button to update the application's state and URL hash parameters. + * + * @return + */ +const TimestampSelector = () => { + const uiState = useUiStore((state) => state.uiState); + return ( + + { + if ("Enter" === e.key) { + const datetime = e.currentTarget.value; + if (datetime) { + const timestamp = new Date(`${datetime}Z`).getTime(); + updateWindowUrlHashParams({timestamp: timestamp}); + updateViewHashParams(); + } + } + }}/> + { + const input = document.getElementById( + "menu-bar-datetime-input" + ) as HTMLInputElement; + const datetime = input.value; + if (datetime) { + const timestamp = new Date(`${datetime}Z`).getTime(); + updateWindowUrlHashParams({timestamp: timestamp}); + updateViewHashParams(); + } + }} + > + + + + ); +}; + +export default TimestampSelector; diff --git a/src/components/MenuBar/index.tsx b/src/components/MenuBar/index.tsx index f1896ce19..9173a1177 100644 --- a/src/components/MenuBar/index.tsx +++ b/src/components/MenuBar/index.tsx @@ -9,7 +9,6 @@ import { } from "@mui/joy"; import FolderOpenIcon from "@mui/icons-material/FolderOpen"; -import SearchIcon from "@mui/icons-material/Search"; import useLogFileStore from "../../stores/logFileStore"; import useUiStore from "../../stores/uiStore"; @@ -17,11 +16,10 @@ import {UI_ELEMENT} from "../../typings/states"; import {CURSOR_CODE} from "../../typings/worker"; import {openFile} from "../../utils/file"; import {isDisabled} from "../../utils/states"; -import {updateWindowUrlHashParams} from "../../utils/url"; -import {updateViewHashParams} from "../../utils/url/urlHash"; import ExportLogsButton from "./ExportLogsButton"; import MenuBarIconButton from "./MenuBarIconButton"; import NavigationBar from "./NavigationBar"; +import TimestampSelector from "./TimestampSelector"; import "./index.css"; @@ -82,49 +80,7 @@ const MenuBar = () => { - - { - if ("Enter" === e.key) { - const datetime = e.currentTarget.value; - if (datetime) { - const timestamp = new Date(`${datetime}Z`).getTime(); - updateWindowUrlHashParams({timestamp: timestamp}); - updateViewHashParams(); - } - } - }}/> - { - const input = document.getElementById( - "menu-bar-datetime-input" - ) as HTMLInputElement; - const datetime = input.value; - if (datetime) { - const timestamp = new Date(`${datetime}Z`).getTime(); - updateWindowUrlHashParams({timestamp: timestamp}); - updateViewHashParams(); - } - }} - > - - - + From 83b994223b113f35e19a44b66f7309ca8f601ef6 Mon Sep 17 00:00:00 2001 From: Henry8192 <50559854+Henry8192@users.noreply.github.com> Date: Mon, 4 Aug 2025 11:12:02 -0400 Subject: [PATCH 06/29] rename TimestampSelector to TimestampQueryBox; extract & clean up css --- src/components/MenuBar/TimestampQueryBox.css | 12 ++++++++++ ...tampSelector.tsx => TimestampQueryBox.tsx} | 23 ++++++++----------- src/components/MenuBar/index.css | 7 ------ src/components/MenuBar/index.tsx | 4 ++-- 4 files changed, 23 insertions(+), 23 deletions(-) create mode 100644 src/components/MenuBar/TimestampQueryBox.css rename src/components/MenuBar/{TimestampSelector.tsx => TimestampQueryBox.tsx} (79%) diff --git a/src/components/MenuBar/TimestampQueryBox.css b/src/components/MenuBar/TimestampQueryBox.css new file mode 100644 index 000000000..c1159e9b7 --- /dev/null +++ b/src/components/MenuBar/TimestampQueryBox.css @@ -0,0 +1,12 @@ +.timestamp-query-box { + display: flex; + flex-direction: row; + align-items: center; +} + +.timestamp-query-box-input { + box-sizing: border-box; + height: var(--ylv-menu-bar-height); + border: none; + font: inherit; +} diff --git a/src/components/MenuBar/TimestampSelector.tsx b/src/components/MenuBar/TimestampQueryBox.tsx similarity index 79% rename from src/components/MenuBar/TimestampSelector.tsx rename to src/components/MenuBar/TimestampQueryBox.tsx index 0628556c8..9bf93bd6f 100644 --- a/src/components/MenuBar/TimestampSelector.tsx +++ b/src/components/MenuBar/TimestampQueryBox.tsx @@ -9,6 +9,8 @@ import {updateWindowUrlHashParams} from "../../utils/url"; import {updateViewHashParams} from "../../utils/url/urlHash"; import MenuBarIconButton from "./MenuBarIconButton"; +import "./TimestampQueryBox.css"; + /** * renders a timestamp input field and a search icon button. @@ -17,19 +19,13 @@ import MenuBarIconButton from "./MenuBarIconButton"; * * @return */ -const TimestampSelector = () => { +const TimestampQueryBox = () => { const uiState = useUiStore((state) => state.uiState); return ( - + { }}/> { - const input = document.getElementById( - "menu-bar-datetime-input" - ) as HTMLInputElement; + const input = document.getElementsByClassName( + "timestamp-query-box-input" + )[0] as HTMLInputElement; const datetime = input.value; if (datetime) { const timestamp = new Date(`${datetime}Z`).getTime(); @@ -66,4 +61,4 @@ const TimestampSelector = () => { ); }; -export default TimestampSelector; +export default TimestampQueryBox; diff --git a/src/components/MenuBar/index.css b/src/components/MenuBar/index.css index 0e0f18235..f9e036567 100644 --- a/src/components/MenuBar/index.css +++ b/src/components/MenuBar/index.css @@ -43,13 +43,6 @@ justify-content: flex-end; } -.menu-bar-datetime-input { - box-sizing: border-box; - height: var(--ylv-menu-bar-height); - border: none; - font: inherit; -} - .menu-bar-loading-progress { z-index: var(--ylv-loading-progress-z-index); margin-bottom: -2px; diff --git a/src/components/MenuBar/index.tsx b/src/components/MenuBar/index.tsx index 9173a1177..fa9443011 100644 --- a/src/components/MenuBar/index.tsx +++ b/src/components/MenuBar/index.tsx @@ -19,7 +19,7 @@ import {isDisabled} from "../../utils/states"; import ExportLogsButton from "./ExportLogsButton"; import MenuBarIconButton from "./MenuBarIconButton"; import NavigationBar from "./NavigationBar"; -import TimestampSelector from "./TimestampSelector"; +import TimestampQueryBox from "./TimestampQueryBox.tsx"; import "./index.css"; @@ -80,7 +80,7 @@ const MenuBar = () => { - + From 3679406d5b3bfea53d577a1337522fe406df0ea5 Mon Sep 17 00:00:00 2001 From: Henry8192 <50559854+Henry8192@users.noreply.github.com> Date: Mon, 4 Aug 2025 11:41:27 -0400 Subject: [PATCH 07/29] address rabbitai code review --- src/components/MenuBar/TimestampQueryBox.tsx | 34 ++++++++++++-------- src/components/MenuBar/index.tsx | 2 +- 2 files changed, 21 insertions(+), 15 deletions(-) diff --git a/src/components/MenuBar/TimestampQueryBox.tsx b/src/components/MenuBar/TimestampQueryBox.tsx index 9bf93bd6f..b69fd733f 100644 --- a/src/components/MenuBar/TimestampQueryBox.tsx +++ b/src/components/MenuBar/TimestampQueryBox.tsx @@ -12,6 +12,20 @@ import MenuBarIconButton from "./MenuBarIconButton"; import "./TimestampQueryBox.css"; +/** + * Perform timestamp query with the datetime string. + * + * @param datetime + */ +const searchByDateTime = (datetime: string) => { + if (datetime) { + const timestamp = new Date(`${datetime}Z`).getTime(); + updateWindowUrlHashParams({timestamp: timestamp}); + updateViewHashParams(); + } +}; + + /** * renders a timestamp input field and a search icon button. * Users can input a date and time in UTC format and either press "Enter" @@ -26,17 +40,13 @@ const TimestampQueryBox = () => { { if ("Enter" === e.key) { - const datetime = e.currentTarget.value; - if (datetime) { - const timestamp = new Date(`${datetime}Z`).getTime(); - updateWindowUrlHashParams({timestamp: timestamp}); - updateViewHashParams(); - } + searchByDateTime(e.currentTarget.value); } }}/> { tooltipPlacement={"bottom-start"} tooltipTitle={"Search by timestamp"} onClick={() => { - const input = document.getElementsByClassName( + const input = document.getElementById( "timestamp-query-box-input" - )[0] as HTMLInputElement; - const datetime = input.value; - if (datetime) { - const timestamp = new Date(`${datetime}Z`).getTime(); - updateWindowUrlHashParams({timestamp: timestamp}); - updateViewHashParams(); - } + ) as HTMLInputElement; + + searchByDateTime(input.value); }} > diff --git a/src/components/MenuBar/index.tsx b/src/components/MenuBar/index.tsx index fa9443011..83535737c 100644 --- a/src/components/MenuBar/index.tsx +++ b/src/components/MenuBar/index.tsx @@ -19,7 +19,7 @@ import {isDisabled} from "../../utils/states"; import ExportLogsButton from "./ExportLogsButton"; import MenuBarIconButton from "./MenuBarIconButton"; import NavigationBar from "./NavigationBar"; -import TimestampQueryBox from "./TimestampQueryBox.tsx"; +import TimestampQueryBox from "./TimestampQueryBox"; import "./index.css"; From 3756990c5d447f1ddb7412e96cbb249f4dcb79f3 Mon Sep 17 00:00:00 2001 From: Henry8192 <50559854+Henry8192@users.noreply.github.com> Date: Mon, 4 Aug 2025 11:43:11 -0400 Subject: [PATCH 08/29] rename --- src/components/MenuBar/TimestampQueryBox.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/MenuBar/TimestampQueryBox.tsx b/src/components/MenuBar/TimestampQueryBox.tsx index b69fd733f..55323e527 100644 --- a/src/components/MenuBar/TimestampQueryBox.tsx +++ b/src/components/MenuBar/TimestampQueryBox.tsx @@ -17,7 +17,7 @@ import "./TimestampQueryBox.css"; * * @param datetime */ -const searchByDateTime = (datetime: string) => { +const handleTimestampQuery = (datetime: string) => { if (datetime) { const timestamp = new Date(`${datetime}Z`).getTime(); updateWindowUrlHashParams({timestamp: timestamp}); @@ -46,7 +46,7 @@ const TimestampQueryBox = () => { type={"datetime-local"} onKeyDown={(e) => { if ("Enter" === e.key) { - searchByDateTime(e.currentTarget.value); + handleTimestampQuery(e.currentTarget.value); } }}/> { "timestamp-query-box-input" ) as HTMLInputElement; - searchByDateTime(input.value); + handleTimestampQuery(input.value); }} > From c3136c1eb80f0274d4de10df0032e79bc500db37 Mon Sep 17 00:00:00 2001 From: Henry8192 <50559854+Henry8192@users.noreply.github.com> Date: Mon, 4 Aug 2025 17:53:48 -0400 Subject: [PATCH 09/29] add dark theme support for TimestampQueryBox --- src/components/MenuBar/TimestampQueryBox.css | 16 ++++++++++++++++ src/components/MenuBar/TimestampQueryBox.tsx | 1 + 2 files changed, 17 insertions(+) diff --git a/src/components/MenuBar/TimestampQueryBox.css b/src/components/MenuBar/TimestampQueryBox.css index c1159e9b7..fe77db3e4 100644 --- a/src/components/MenuBar/TimestampQueryBox.css +++ b/src/components/MenuBar/TimestampQueryBox.css @@ -1,3 +1,15 @@ +:root { + --input-bg: #fff; + --input-color: #222; +} + +@media (prefers-color-scheme: dark) { + :root { + --input-bg: #222; + --input-color: #fff; + } +} + .timestamp-query-box { display: flex; flex-direction: row; @@ -8,5 +20,9 @@ box-sizing: border-box; height: var(--ylv-menu-bar-height); border: none; + font: inherit; + color: var(--input-color); + + background-color: var(--input-bg); } diff --git a/src/components/MenuBar/TimestampQueryBox.tsx b/src/components/MenuBar/TimestampQueryBox.tsx index 55323e527..102cabbc7 100644 --- a/src/components/MenuBar/TimestampQueryBox.tsx +++ b/src/components/MenuBar/TimestampQueryBox.tsx @@ -38,6 +38,7 @@ const TimestampQueryBox = () => { return ( Date: Tue, 5 Aug 2025 12:54:21 -0400 Subject: [PATCH 10/29] implement toggle functionality for TimestampQueryBox in menu bar --- src/components/MenuBar/TimestampQueryBox.tsx | 1 - src/components/MenuBar/index.css | 14 +++++++++ src/components/MenuBar/index.tsx | 32 +++++++++++++++++--- 3 files changed, 42 insertions(+), 5 deletions(-) diff --git a/src/components/MenuBar/TimestampQueryBox.tsx b/src/components/MenuBar/TimestampQueryBox.tsx index 102cabbc7..55323e527 100644 --- a/src/components/MenuBar/TimestampQueryBox.tsx +++ b/src/components/MenuBar/TimestampQueryBox.tsx @@ -38,7 +38,6 @@ const TimestampQueryBox = () => { return ( { const fileName = useLogFileStore((state) => state.fileName); const uiState = useUiStore((state) => state.uiState); + const [showTimestampQuery, setShowTimestampQuery] = useState(false); const handleOpenFile = useCallback(() => { openFile((file) => { @@ -40,6 +45,10 @@ const MenuBar = () => { }); }, []); + const toggleTimestampQuery = useCallback(() => { + setShowTimestampQuery((prev) => !prev); + }, []); + return ( <> @@ -59,8 +68,8 @@ const MenuBar = () => { > - + { - + + + + + +
+ +
+ - + + {(false === isDisabled(uiState, UI_ELEMENT.PROGRESS_BAR)) && Date: Tue, 5 Aug 2025 17:53:16 -0400 Subject: [PATCH 11/29] add default time for timestamp-query-box-input, adjust max-width to 320px; add collapse icon and center text; disable the timestamp query calendar icon by default --- src/components/MenuBar/TimestampQueryBox.css | 1 + src/components/MenuBar/TimestampQueryBox.tsx | 3 +++ src/components/MenuBar/index.css | 2 +- src/components/MenuBar/index.tsx | 6 +++++- 4 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/MenuBar/TimestampQueryBox.css b/src/components/MenuBar/TimestampQueryBox.css index fe77db3e4..e09eb81f3 100644 --- a/src/components/MenuBar/TimestampQueryBox.css +++ b/src/components/MenuBar/TimestampQueryBox.css @@ -23,6 +23,7 @@ font: inherit; color: var(--input-color); + text-align: center; background-color: var(--input-bg); } diff --git a/src/components/MenuBar/TimestampQueryBox.tsx b/src/components/MenuBar/TimestampQueryBox.tsx index 55323e527..2b89e48bf 100644 --- a/src/components/MenuBar/TimestampQueryBox.tsx +++ b/src/components/MenuBar/TimestampQueryBox.tsx @@ -19,6 +19,7 @@ import "./TimestampQueryBox.css"; */ const handleTimestampQuery = (datetime: string) => { if (datetime) { + console.error(datetime); const timestamp = new Date(`${datetime}Z`).getTime(); updateWindowUrlHashParams({timestamp: timestamp}); updateViewHashParams(); @@ -44,6 +45,8 @@ const TimestampQueryBox = () => { step={"0.1"} title={"Input date and time in UTC"} type={"datetime-local"} + defaultValue={new Date().toISOString() + .slice(0, -1)} onKeyDown={(e) => { if ("Enter" === e.key) { handleTimestampQuery(e.currentTarget.value); diff --git a/src/components/MenuBar/index.css b/src/components/MenuBar/index.css index dc95a9332..a328660b6 100644 --- a/src/components/MenuBar/index.css +++ b/src/components/MenuBar/index.css @@ -59,5 +59,5 @@ } .timestamp-query-wrapper.expanded { - max-width: 300px; + max-width: 320px; } diff --git a/src/components/MenuBar/index.tsx b/src/components/MenuBar/index.tsx index d8a7b0e29..7a236afa4 100644 --- a/src/components/MenuBar/index.tsx +++ b/src/components/MenuBar/index.tsx @@ -13,6 +13,7 @@ import { import CalendarTodayIcon from "@mui/icons-material/CalendarToday"; import FolderOpenIcon from "@mui/icons-material/FolderOpen"; +import CollapseIcon from "@mui/icons-material/KeyboardDoubleArrowRight"; import useLogFileStore from "../../stores/logFileStore"; import useUiStore from "../../stores/uiStore"; @@ -91,9 +92,12 @@ const MenuBar = () => { - + {showTimestampQuery ? + : + }
Date: Tue, 5 Aug 2025 18:01:33 -0400 Subject: [PATCH 12/29] delete debug output Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- src/components/MenuBar/TimestampQueryBox.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/MenuBar/TimestampQueryBox.tsx b/src/components/MenuBar/TimestampQueryBox.tsx index 2b89e48bf..1f2e10c5f 100644 --- a/src/components/MenuBar/TimestampQueryBox.tsx +++ b/src/components/MenuBar/TimestampQueryBox.tsx @@ -19,7 +19,6 @@ import "./TimestampQueryBox.css"; */ const handleTimestampQuery = (datetime: string) => { if (datetime) { - console.error(datetime); const timestamp = new Date(`${datetime}Z`).getTime(); updateWindowUrlHashParams({timestamp: timestamp}); updateViewHashParams(); From 839dc9ae76e40b16e4060098bf986afbe265d0b5 Mon Sep 17 00:00:00 2001 From: Henry8192 <50559854+Henry8192@users.noreply.github.com> Date: Wed, 6 Aug 2025 17:10:15 -0400 Subject: [PATCH 13/29] added button descriptions --- src/components/MenuBar/TimestampQueryBox.tsx | 6 +++--- src/components/MenuBar/index.tsx | 9 +++++++-- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/components/MenuBar/TimestampQueryBox.tsx b/src/components/MenuBar/TimestampQueryBox.tsx index 1f2e10c5f..3ab3e28c7 100644 --- a/src/components/MenuBar/TimestampQueryBox.tsx +++ b/src/components/MenuBar/TimestampQueryBox.tsx @@ -42,7 +42,7 @@ const TimestampQueryBox = () => { disabled={isDisabled(uiState, UI_ELEMENT.NAVIGATION_BAR)} id={"timestamp-query-box-input"} step={"0.1"} - title={"Input date and time in UTC"} + title={"Timestamp to seek to in UTC"} type={"datetime-local"} defaultValue={new Date().toISOString() .slice(0, -1)} @@ -54,10 +54,10 @@ const TimestampQueryBox = () => { { const input = document.getElementById( - "timestamp-query-box-input" + "timestamp-query-box-input", ) as HTMLInputElement; handleTimestampQuery(input.value); diff --git a/src/components/MenuBar/index.tsx b/src/components/MenuBar/index.tsx index 7a236afa4..26503783e 100644 --- a/src/components/MenuBar/index.tsx +++ b/src/components/MenuBar/index.tsx @@ -93,6 +93,10 @@ const MenuBar = () => { {showTimestampQuery ? @@ -116,11 +120,12 @@ const MenuBar = () => { - {(false === isDisabled(uiState, UI_ELEMENT.PROGRESS_BAR)) && + {false === isDisabled(uiState, UI_ELEMENT.PROGRESS_BAR) && ( } + thickness={2}/> + )} ); }; From 45a8accef38089ec2fd292b50d78bdc124f0857e Mon Sep 17 00:00:00 2001 From: Henry8192 <50559854+Henry8192@users.noreply.github.com> Date: Thu, 7 Aug 2025 17:31:42 -0400 Subject: [PATCH 14/29] track joyUI theme instead of system theme --- src/components/MenuBar/TimestampQueryBox.css | 23 ++++++++------------ src/components/MenuBar/TimestampQueryBox.tsx | 11 ++++++++-- 2 files changed, 18 insertions(+), 16 deletions(-) diff --git a/src/components/MenuBar/TimestampQueryBox.css b/src/components/MenuBar/TimestampQueryBox.css index e09eb81f3..ab46547c5 100644 --- a/src/components/MenuBar/TimestampQueryBox.css +++ b/src/components/MenuBar/TimestampQueryBox.css @@ -1,15 +1,3 @@ -:root { - --input-bg: #fff; - --input-color: #222; -} - -@media (prefers-color-scheme: dark) { - :root { - --input-bg: #222; - --input-color: #fff; - } -} - .timestamp-query-box { display: flex; flex-direction: row; @@ -22,8 +10,15 @@ border: none; font: inherit; - color: var(--input-color); text-align: center; +} + +.timestamp-query-box-input.light { + color: #222; + background-color: #fff; +} - background-color: var(--input-bg); +.timestamp-query-box-input.dark { + color: #fff; + background-color: #222; } diff --git a/src/components/MenuBar/TimestampQueryBox.tsx b/src/components/MenuBar/TimestampQueryBox.tsx index 3ab3e28c7..5236b7876 100644 --- a/src/components/MenuBar/TimestampQueryBox.tsx +++ b/src/components/MenuBar/TimestampQueryBox.tsx @@ -1,8 +1,12 @@ -import {Box} from "@mui/joy"; +import { + Box, + useColorScheme, +} from "@mui/joy"; import SearchIcon from "@mui/icons-material/Search"; import useUiStore from "../../stores/uiStore"; +import {THEME_NAME} from "../../typings/config"; import {UI_ELEMENT} from "../../typings/states"; import {isDisabled} from "../../utils/states"; import {updateWindowUrlHashParams} from "../../utils/url"; @@ -35,15 +39,18 @@ const handleTimestampQuery = (datetime: string) => { */ const TimestampQueryBox = () => { const uiState = useUiStore((state) => state.uiState); + const {mode, systemMode} = useColorScheme(); return ( { From 02d1589b6da8970a313f6ceb3dc9a424e8c5432b Mon Sep 17 00:00:00 2001 From: Henry8192 <50559854+Henry8192@users.noreply.github.com> Date: Thu, 28 Aug 2025 14:48:39 -0400 Subject: [PATCH 15/29] address part of the suggestions --- src/components/MenuBar/TimestampQueryBox.css | 3 ++- src/components/MenuBar/TimestampQueryBox.tsx | 2 +- src/components/MenuBar/index.tsx | 8 +++----- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/MenuBar/TimestampQueryBox.css b/src/components/MenuBar/TimestampQueryBox.css index ab46547c5..417ef9d33 100644 --- a/src/components/MenuBar/TimestampQueryBox.css +++ b/src/components/MenuBar/TimestampQueryBox.css @@ -2,11 +2,12 @@ display: flex; flex-direction: row; align-items: center; + height: var(--ylv-menu-bar-height); } .timestamp-query-box-input { box-sizing: border-box; - height: var(--ylv-menu-bar-height); + height: 100%; border: none; font: inherit; diff --git a/src/components/MenuBar/TimestampQueryBox.tsx b/src/components/MenuBar/TimestampQueryBox.tsx index 5236b7876..68934d5ca 100644 --- a/src/components/MenuBar/TimestampQueryBox.tsx +++ b/src/components/MenuBar/TimestampQueryBox.tsx @@ -31,7 +31,7 @@ const handleTimestampQuery = (datetime: string) => { /** - * renders a timestamp input field and a search icon button. + * Renders a timestamp input field and a search icon button. * Users can input a date and time in UTC format and either press "Enter" * or click the search button to update the application's state and URL hash parameters. * diff --git a/src/components/MenuBar/index.tsx b/src/components/MenuBar/index.tsx index 59317ef86..3bae6b938 100644 --- a/src/components/MenuBar/index.tsx +++ b/src/components/MenuBar/index.tsx @@ -121,17 +121,15 @@ const MenuBar = () => { - + - - {false === isDisabled(uiState, UI_ELEMENT.PROGRESS_BAR) && ( + {(false === isDisabled(uiState, UI_ELEMENT.PROGRESS_BAR)) && - )} + thickness={2}/>} ); }; From 40f8378c46e2823c2f86452d4e210e918a7ea5f1 Mon Sep 17 00:00:00 2001 From: Henry8192 <50559854+Henry8192@users.noreply.github.com> Date: Thu, 28 Aug 2025 16:33:41 -0400 Subject: [PATCH 16/29] extract TimestampQueryBoxContainer; Use JoyUI Input instead of HTML input --- src/components/MenuBar/TimestampQueryBox.css | 10 ---- src/components/MenuBar/TimestampQueryBox.tsx | 10 +--- .../MenuBar/TimestampQueryBoxContainer.css | 3 + .../MenuBar/TimestampQueryBoxContainer.tsx | 59 +++++++++++++++++++ src/components/MenuBar/index.css | 4 -- src/components/MenuBar/index.tsx | 37 +----------- 6 files changed, 67 insertions(+), 56 deletions(-) create mode 100644 src/components/MenuBar/TimestampQueryBoxContainer.css create mode 100644 src/components/MenuBar/TimestampQueryBoxContainer.tsx diff --git a/src/components/MenuBar/TimestampQueryBox.css b/src/components/MenuBar/TimestampQueryBox.css index 417ef9d33..26cffee99 100644 --- a/src/components/MenuBar/TimestampQueryBox.css +++ b/src/components/MenuBar/TimestampQueryBox.css @@ -13,13 +13,3 @@ font: inherit; text-align: center; } - -.timestamp-query-box-input.light { - color: #222; - background-color: #fff; -} - -.timestamp-query-box-input.dark { - color: #fff; - background-color: #222; -} diff --git a/src/components/MenuBar/TimestampQueryBox.tsx b/src/components/MenuBar/TimestampQueryBox.tsx index 68934d5ca..eb7823041 100644 --- a/src/components/MenuBar/TimestampQueryBox.tsx +++ b/src/components/MenuBar/TimestampQueryBox.tsx @@ -1,12 +1,11 @@ import { Box, - useColorScheme, + Input, } from "@mui/joy"; import SearchIcon from "@mui/icons-material/Search"; import useUiStore from "../../stores/uiStore"; -import {THEME_NAME} from "../../typings/config"; import {UI_ELEMENT} from "../../typings/states"; import {isDisabled} from "../../utils/states"; import {updateWindowUrlHashParams} from "../../utils/url"; @@ -39,18 +38,13 @@ const handleTimestampQuery = (datetime: string) => { */ const TimestampQueryBox = () => { const uiState = useUiStore((state) => state.uiState); - const {mode, systemMode} = useColorScheme(); return ( - { diff --git a/src/components/MenuBar/TimestampQueryBoxContainer.css b/src/components/MenuBar/TimestampQueryBoxContainer.css new file mode 100644 index 000000000..37d030506 --- /dev/null +++ b/src/components/MenuBar/TimestampQueryBoxContainer.css @@ -0,0 +1,3 @@ +.timestamp-query-box-container { + display: flex; +} diff --git a/src/components/MenuBar/TimestampQueryBoxContainer.tsx b/src/components/MenuBar/TimestampQueryBoxContainer.tsx new file mode 100644 index 000000000..c7538c743 --- /dev/null +++ b/src/components/MenuBar/TimestampQueryBoxContainer.tsx @@ -0,0 +1,59 @@ +import { + useCallback, + useState, +} from "react"; + +import {Box} from "@mui/joy"; + +import CalendarTodayIcon from "@mui/icons-material/CalendarToday"; +import CollapseIcon from "@mui/icons-material/KeyboardDoubleArrowRight"; + +import useUiStore from "../../stores/uiStore"; +import {UI_ELEMENT} from "../../typings/states"; +import {isDisabled} from "../../utils/states"; +import MenuBarIconButton from "./MenuBarIconButton"; +import TimestampQueryBox from "./TimestampQueryBox"; + +import "./TimestampQueryBoxContainer.css"; + + +/** + * Wraps TimestampQueryBox with a toggle button. + * It includes a toggle button to show or hide the Timestamp Query Box and manages its state. + * + * @return The rendered component. + */ +const TimestampQueryBoxContainer = () => { + const [showTimestampQuery, setShowTimestampQuery] = useState(false); + const uiState = useUiStore((state) => state.uiState); + + const toggleTimestampQuery = useCallback(() => { + setShowTimestampQuery((prev) => !prev); + }, []); + + return ( + + + {showTimestampQuery ? + : + } + + +
+ +
+ + ); +}; + +export default TimestampQueryBoxContainer; diff --git a/src/components/MenuBar/index.css b/src/components/MenuBar/index.css index a328660b6..ee672db05 100644 --- a/src/components/MenuBar/index.css +++ b/src/components/MenuBar/index.css @@ -48,10 +48,6 @@ margin-bottom: -2px; } -.menu-bar-calendar-container { - display: flex; -} - .timestamp-query-wrapper { overflow: hidden; max-width: 0; diff --git a/src/components/MenuBar/index.tsx b/src/components/MenuBar/index.tsx index 3bae6b938..92146e6fe 100644 --- a/src/components/MenuBar/index.tsx +++ b/src/components/MenuBar/index.tsx @@ -1,7 +1,4 @@ -import { - useCallback, - useState, -} from "react"; +import {useCallback} from "react"; import { Box, @@ -11,9 +8,7 @@ import { Typography, } from "@mui/joy"; -import CalendarTodayIcon from "@mui/icons-material/CalendarToday"; import FolderOpenIcon from "@mui/icons-material/FolderOpen"; -import CollapseIcon from "@mui/icons-material/KeyboardDoubleArrowRight"; import useLogFileStore from "../../stores/logFileStore"; import {handleErrorWithNotification} from "../../stores/notificationStore"; @@ -26,7 +21,7 @@ import {isDisabled} from "../../utils/states"; import ExportLogsButton from "./ExportLogsButton"; import MenuBarIconButton from "./MenuBarIconButton"; import NavigationBar from "./NavigationBar"; -import TimestampQueryBox from "./TimestampQueryBox"; +import TimestampQueryBoxContainer from "./TimestampQueryBoxContainer"; import "./index.css"; @@ -39,7 +34,6 @@ import "./index.css"; const MenuBar = () => { const fileName = useLogFileStore((state) => state.fileName); const uiState = useUiStore((state) => state.uiState); - const [showTimestampQuery, setShowTimestampQuery] = useState(false); const handleOpenFile = useCallback(() => { openFile((file) => { @@ -52,10 +46,6 @@ const MenuBar = () => { }); }, []); - const toggleTimestampQuery = useCallback(() => { - setShowTimestampQuery((prev) => !prev); - }, []); - return ( <> @@ -96,28 +86,7 @@ const MenuBar = () => { - - - {showTimestampQuery ? - : - } - - -
- -
- + From 7ed2a41d355962951645e618f90bb9955aef3745 Mon Sep 17 00:00:00 2001 From: Henry8192 <50559854+Henry8192@users.noreply.github.com> Date: Fri, 29 Aug 2025 12:54:56 -0400 Subject: [PATCH 17/29] address code review suggestions --- src/components/MenuBar/TimestampQueryBox.tsx | 52 ++++++++++++-------- 1 file changed, 31 insertions(+), 21 deletions(-) diff --git a/src/components/MenuBar/TimestampQueryBox.tsx b/src/components/MenuBar/TimestampQueryBox.tsx index eb7823041..9bdc7fa3e 100644 --- a/src/components/MenuBar/TimestampQueryBox.tsx +++ b/src/components/MenuBar/TimestampQueryBox.tsx @@ -1,6 +1,9 @@ +import {useCallback} from "react"; + import { Box, Input, + Tooltip, } from "@mui/joy"; import SearchIcon from "@mui/icons-material/Search"; @@ -29,6 +32,9 @@ const handleTimestampQuery = (datetime: string) => { }; +const currentUtcTime = new Date().toISOString() + .slice(0, -1); + /** * Renders a timestamp input field and a search icon button. * Users can input a date and time in UTC format and either press "Enter" @@ -38,31 +44,35 @@ const handleTimestampQuery = (datetime: string) => { */ const TimestampQueryBox = () => { const uiState = useUiStore((state) => state.uiState); + const seekTimestamp = useCallback(() => { + return () => { + const input = document.getElementById( + "timestamp-query-box-input", + ) as HTMLInputElement; + + handleTimestampQuery(input.value); + }; + }, []); + return ( - { - if ("Enter" === e.key) { - handleTimestampQuery(e.currentTarget.value); - } - }}/> + + { + if ("Enter" === e.key) { + handleTimestampQuery(e.currentTarget.value); + } + }}/> + { - const input = document.getElementById( - "timestamp-query-box-input", - ) as HTMLInputElement; - - handleTimestampQuery(input.value); - }} + tooltipTitle={"Search by timestamp"} + onClick={seekTimestamp} > From b1087478f29c00d97d84ef55fe52424035eec08d Mon Sep 17 00:00:00 2001 From: Henry8192 <50559854+Henry8192@users.noreply.github.com> Date: Sat, 30 Aug 2025 11:09:36 -0400 Subject: [PATCH 18/29] rename function to searchByTimestamp & fix function return --- src/components/MenuBar/TimestampQueryBox.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/MenuBar/TimestampQueryBox.tsx b/src/components/MenuBar/TimestampQueryBox.tsx index 9bdc7fa3e..fcccdeb62 100644 --- a/src/components/MenuBar/TimestampQueryBox.tsx +++ b/src/components/MenuBar/TimestampQueryBox.tsx @@ -44,14 +44,12 @@ const currentUtcTime = new Date().toISOString() */ const TimestampQueryBox = () => { const uiState = useUiStore((state) => state.uiState); - const seekTimestamp = useCallback(() => { - return () => { - const input = document.getElementById( - "timestamp-query-box-input", - ) as HTMLInputElement; + const searchByTimestamp = useCallback(() => { + const input = document.getElementById( + "timestamp-query-box-input", + ) as HTMLInputElement; - handleTimestampQuery(input.value); - }; + handleTimestampQuery(input.value); }, []); return ( @@ -72,7 +70,7 @@ const TimestampQueryBox = () => { From fab2be30fd89861668098fced12328426afcac66 Mon Sep 17 00:00:00 2001 From: Henry8192 <50559854+Henry8192@users.noreply.github.com> Date: Sun, 31 Aug 2025 20:11:36 -0400 Subject: [PATCH 19/29] extract handleKeyboardEnterPress out of onKeyDown --- src/components/MenuBar/TimestampQueryBox.tsx | 22 +++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/components/MenuBar/TimestampQueryBox.tsx b/src/components/MenuBar/TimestampQueryBox.tsx index fcccdeb62..78ed9d51a 100644 --- a/src/components/MenuBar/TimestampQueryBox.tsx +++ b/src/components/MenuBar/TimestampQueryBox.tsx @@ -18,6 +18,9 @@ import MenuBarIconButton from "./MenuBarIconButton"; import "./TimestampQueryBox.css"; +const currentUtcTime = new Date().toISOString() + .slice(0, -1); + /** * Perform timestamp query with the datetime string. * @@ -31,9 +34,16 @@ const handleTimestampQuery = (datetime: string) => { } }; - -const currentUtcTime = new Date().toISOString() - .slice(0, -1); +/** + * Handle "Enter" key press event to trigger timestamp query. + * + * @param e Keyboard event + */ +const handleKeyboardEnterPress = (e: React.KeyboardEvent) => { + if ("Enter" === e.key) { + handleTimestampQuery(e.currentTarget.value); + } +}; /** * Renders a timestamp input field and a search icon button. @@ -61,11 +71,7 @@ const TimestampQueryBox = () => { id={"timestamp-query-box-input"} title={"Timestamp to seek to in UTC"} type={"datetime-local"} - onKeyDown={(e) => { - if ("Enter" === e.key) { - handleTimestampQuery(e.currentTarget.value); - } - }}/> + onKeyDown={handleKeyboardEnterPress}/> Date: Tue, 2 Sep 2025 09:21:11 -0400 Subject: [PATCH 20/29] use Zustand to sync url timestamp and TimestampQueryBox --- src/components/MenuBar/TimestampQueryBox.tsx | 12 ++++++++---- src/stores/viewStore/createViewEventSlice.ts | 7 +++++++ src/stores/viewStore/types.ts | 2 ++ src/utils/url/urlHash.ts | 16 ++++++++++++++++ 4 files changed, 33 insertions(+), 4 deletions(-) diff --git a/src/components/MenuBar/TimestampQueryBox.tsx b/src/components/MenuBar/TimestampQueryBox.tsx index 78ed9d51a..9444317a1 100644 --- a/src/components/MenuBar/TimestampQueryBox.tsx +++ b/src/components/MenuBar/TimestampQueryBox.tsx @@ -9,6 +9,7 @@ import { import SearchIcon from "@mui/icons-material/Search"; import useUiStore from "../../stores/uiStore"; +import useViewStore from "../../stores/viewStore"; import {UI_ELEMENT} from "../../typings/states"; import {isDisabled} from "../../utils/states"; import {updateWindowUrlHashParams} from "../../utils/url"; @@ -18,9 +19,6 @@ import MenuBarIconButton from "./MenuBarIconButton"; import "./TimestampQueryBox.css"; -const currentUtcTime = new Date().toISOString() - .slice(0, -1); - /** * Perform timestamp query with the datetime string. * @@ -54,6 +52,7 @@ const handleKeyboardEnterPress = (e: React.KeyboardEvent) => { */ const TimestampQueryBox = () => { const uiState = useUiStore((state) => state.uiState); + const dateTimeString = useViewStore((state) => state.dateTimeString); const searchByTimestamp = useCallback(() => { const input = document.getElementById( "timestamp-query-box-input", @@ -61,16 +60,21 @@ const TimestampQueryBox = () => { handleTimestampQuery(input.value); }, []); + const handleChange = useCallback((e: React.ChangeEvent) => { + const {setDateTimeString} = useViewStore.getState(); + setDateTimeString(e.currentTarget.value); + }, []); return ( { set({logEventNum}); }, + setDateTimeString: (dateTimeString: string) => { + set({dateTimeString}); + }, }); export {VIEW_EVENT_DEFAULT}; diff --git a/src/stores/viewStore/types.ts b/src/stores/viewStore/types.ts index f670e0627..1b492226f 100644 --- a/src/stores/viewStore/types.ts +++ b/src/stores/viewStore/types.ts @@ -24,10 +24,12 @@ type ViewPageSlice = ViewPageValues & ViewPageActions; interface ViewEventValues { logEventNum: number; + dateTimeString: string; } interface ViewEventActions { setLogEventNum: (newLogEventNum: number) => void; + setDateTimeString: (newDateTimeString: string) => void; } type ViewEventSlice = ViewEventValues & ViewEventActions; diff --git a/src/utils/url/urlHash.ts b/src/utils/url/urlHash.ts index 6e4de920d..81476baa3 100644 --- a/src/utils/url/urlHash.ts +++ b/src/utils/url/urlHash.ts @@ -17,6 +17,19 @@ import { } from "./index"; +/** + * Converts a timestamp to an ISO 8601 date-time string (without the 'Z' suffix) + * + * @param timestamp + */ +const updateDateTimeString = (timestamp: number) => { + const dateTimeString = new Date(timestamp).toISOString() + .slice(0, -1); + + const {setDateTimeString} = useViewStore.getState(); + setDateTimeString(dateTimeString); +}; + /** * Determines the cursor for navigating log events based on URL hash parameters. * @@ -26,6 +39,7 @@ import { * @param params.timestamp The timestamp from the URL hash. * @return `CursorType` object if a navigation action is needed, or `null` if no action is required. */ +// eslint-disable-next-line max-statements const getCursorFromHashParams = ({isPrettified, logEventNum, timestamp}: { isPrettified: boolean; logEventNum: number; timestamp: number; }): Nullable => { @@ -56,6 +70,8 @@ const getCursorFromHashParams = ({isPrettified, logEventNum, timestamp}: { } if (timestamp !== URL_HASH_PARAMS_DEFAULT.timestamp) { + updateDateTimeString(timestamp); + return { code: CURSOR_CODE.TIMESTAMP, args: {timestamp: timestamp}, From ca797e2edd971fcd0f01152ea140c2d86c168d33 Mon Sep 17 00:00:00 2001 From: Henry8192 <50559854+Henry8192@users.noreply.github.com> Date: Tue, 2 Sep 2025 10:20:47 -0400 Subject: [PATCH 21/29] change description --- src/components/MenuBar/TimestampQueryBoxContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MenuBar/TimestampQueryBoxContainer.tsx b/src/components/MenuBar/TimestampQueryBoxContainer.tsx index c7538c743..7bd484e82 100644 --- a/src/components/MenuBar/TimestampQueryBoxContainer.tsx +++ b/src/components/MenuBar/TimestampQueryBoxContainer.tsx @@ -37,7 +37,7 @@ const TimestampQueryBoxContainer = () => { disabled={isDisabled(uiState, UI_ELEMENT.NAVIGATION_BAR)} tooltipTitle={showTimestampQuery ? "Collapse" : - "Seek to timestamp"} + "Search by timestamp"} onClick={toggleTimestampQuery} > {showTimestampQuery ? From 4778414d31d4e4eff4adc1710b933fe67c5bea4b Mon Sep 17 00:00:00 2001 From: Henry8192 <50559854+Henry8192@users.noreply.github.com> Date: Tue, 2 Sep 2025 18:36:23 -0400 Subject: [PATCH 22/29] address code review changes --- src/components/MenuBar/TimestampQueryBox.css | 15 ----- .../MenuBar/TimestampQueryBoxContainer.css | 3 - .../MenuBar/TimestampQueryInput.css | 6 ++ ...mpQueryBox.tsx => TimestampQueryInput.tsx} | 55 ++++++------------- .../MenuBar/TimestampQueryInputContainer.css | 3 + ...r.tsx => TimestampQueryInputContainer.tsx} | 19 +++---- src/components/MenuBar/index.css | 4 +- src/components/MenuBar/index.tsx | 4 +- src/stores/viewStore/createViewEventSlice.ts | 6 +- 9 files changed, 42 insertions(+), 73 deletions(-) delete mode 100644 src/components/MenuBar/TimestampQueryBox.css delete mode 100644 src/components/MenuBar/TimestampQueryBoxContainer.css create mode 100644 src/components/MenuBar/TimestampQueryInput.css rename src/components/MenuBar/{TimestampQueryBox.tsx => TimestampQueryInput.tsx} (63%) create mode 100644 src/components/MenuBar/TimestampQueryInputContainer.css rename src/components/MenuBar/{TimestampQueryBoxContainer.tsx => TimestampQueryInputContainer.tsx} (70%) diff --git a/src/components/MenuBar/TimestampQueryBox.css b/src/components/MenuBar/TimestampQueryBox.css deleted file mode 100644 index 26cffee99..000000000 --- a/src/components/MenuBar/TimestampQueryBox.css +++ /dev/null @@ -1,15 +0,0 @@ -.timestamp-query-box { - display: flex; - flex-direction: row; - align-items: center; - height: var(--ylv-menu-bar-height); -} - -.timestamp-query-box-input { - box-sizing: border-box; - height: 100%; - border: none; - - font: inherit; - text-align: center; -} diff --git a/src/components/MenuBar/TimestampQueryBoxContainer.css b/src/components/MenuBar/TimestampQueryBoxContainer.css deleted file mode 100644 index 37d030506..000000000 --- a/src/components/MenuBar/TimestampQueryBoxContainer.css +++ /dev/null @@ -1,3 +0,0 @@ -.timestamp-query-box-container { - display: flex; -} diff --git a/src/components/MenuBar/TimestampQueryInput.css b/src/components/MenuBar/TimestampQueryInput.css new file mode 100644 index 000000000..b7d1a173a --- /dev/null +++ b/src/components/MenuBar/TimestampQueryInput.css @@ -0,0 +1,6 @@ +.timestamp-query-input { + display: flex; + flex-direction: row; + align-items: center; + height: var(--ylv-menu-bar-height); +} diff --git a/src/components/MenuBar/TimestampQueryBox.tsx b/src/components/MenuBar/TimestampQueryInput.tsx similarity index 63% rename from src/components/MenuBar/TimestampQueryBox.tsx rename to src/components/MenuBar/TimestampQueryInput.tsx index 9444317a1..0815e66f6 100644 --- a/src/components/MenuBar/TimestampQueryBox.tsx +++ b/src/components/MenuBar/TimestampQueryInput.tsx @@ -16,33 +16,9 @@ import {updateWindowUrlHashParams} from "../../utils/url"; import {updateViewHashParams} from "../../utils/url/urlHash"; import MenuBarIconButton from "./MenuBarIconButton"; -import "./TimestampQueryBox.css"; +import "./TimestampQueryInput.css"; -/** - * Perform timestamp query with the datetime string. - * - * @param datetime - */ -const handleTimestampQuery = (datetime: string) => { - if (datetime) { - const timestamp = new Date(`${datetime}Z`).getTime(); - updateWindowUrlHashParams({timestamp: timestamp}); - updateViewHashParams(); - } -}; - -/** - * Handle "Enter" key press event to trigger timestamp query. - * - * @param e Keyboard event - */ -const handleKeyboardEnterPress = (e: React.KeyboardEvent) => { - if ("Enter" === e.key) { - handleTimestampQuery(e.currentTarget.value); - } -}; - /** * Renders a timestamp input field and a search icon button. * Users can input a date and time in UTC format and either press "Enter" @@ -50,27 +26,32 @@ const handleKeyboardEnterPress = (e: React.KeyboardEvent) => { * * @return */ -const TimestampQueryBox = () => { +const TimestampQueryInput = () => { const uiState = useUiStore((state) => state.uiState); const dateTimeString = useViewStore((state) => state.dateTimeString); - const searchByTimestamp = useCallback(() => { - const input = document.getElementById( - "timestamp-query-box-input", - ) as HTMLInputElement; - handleTimestampQuery(input.value); - }, []); + const handleTimestampQuery = useCallback(() => { + const timestamp = new Date(`${dateTimeString}Z`).getTime(); + updateWindowUrlHashParams({timestamp: timestamp}); + updateViewHashParams(); + }, [dateTimeString]); + + const handleKeyboardEnterPress = useCallback((e: React.KeyboardEvent) => { + if ("Enter" === e.key) { + handleTimestampQuery(); + } + }, [handleTimestampQuery]); + const handleChange = useCallback((e: React.ChangeEvent) => { const {setDateTimeString} = useViewStore.getState(); setDateTimeString(e.currentTarget.value); }, []); return ( - - + + { @@ -88,4 +69,4 @@ const TimestampQueryBox = () => { ); }; -export default TimestampQueryBox; +export default TimestampQueryInput; diff --git a/src/components/MenuBar/TimestampQueryInputContainer.css b/src/components/MenuBar/TimestampQueryInputContainer.css new file mode 100644 index 000000000..3c80c8587 --- /dev/null +++ b/src/components/MenuBar/TimestampQueryInputContainer.css @@ -0,0 +1,3 @@ +.timestamp-query-input-container { + display: flex; +} diff --git a/src/components/MenuBar/TimestampQueryBoxContainer.tsx b/src/components/MenuBar/TimestampQueryInputContainer.tsx similarity index 70% rename from src/components/MenuBar/TimestampQueryBoxContainer.tsx rename to src/components/MenuBar/TimestampQueryInputContainer.tsx index 7bd484e82..464903085 100644 --- a/src/components/MenuBar/TimestampQueryBoxContainer.tsx +++ b/src/components/MenuBar/TimestampQueryInputContainer.tsx @@ -12,18 +12,17 @@ import useUiStore from "../../stores/uiStore"; import {UI_ELEMENT} from "../../typings/states"; import {isDisabled} from "../../utils/states"; import MenuBarIconButton from "./MenuBarIconButton"; -import TimestampQueryBox from "./TimestampQueryBox"; +import TimestampQueryInput from "./TimestampQueryInput.tsx"; -import "./TimestampQueryBoxContainer.css"; +import "./TimestampQueryInputContainer.css"; /** - * Wraps TimestampQueryBox with a toggle button. - * It includes a toggle button to show or hide the Timestamp Query Box and manages its state. + * Wraps TimestampQueryInput with a toggle button, which shows or hides the TimestampQueryInput. * - * @return The rendered component. + * @return */ -const TimestampQueryBoxContainer = () => { +const TimestampQueryInputContainer = () => { const [showTimestampQuery, setShowTimestampQuery] = useState(false); const uiState = useUiStore((state) => state.uiState); @@ -32,7 +31,7 @@ const TimestampQueryBoxContainer = () => { }, []); return ( - + {
- +
); }; -export default TimestampQueryBoxContainer; +export default TimestampQueryInputContainer; diff --git a/src/components/MenuBar/index.css b/src/components/MenuBar/index.css index ee672db05..1f5fe6bac 100644 --- a/src/components/MenuBar/index.css +++ b/src/components/MenuBar/index.css @@ -48,12 +48,12 @@ margin-bottom: -2px; } -.timestamp-query-wrapper { +.timestamp-query-input-wrapper { overflow: hidden; max-width: 0; transition: max-width 0.3s ease; } -.timestamp-query-wrapper.expanded { +.timestamp-query-input-wrapper.expanded { max-width: 320px; } diff --git a/src/components/MenuBar/index.tsx b/src/components/MenuBar/index.tsx index 92146e6fe..28f32c988 100644 --- a/src/components/MenuBar/index.tsx +++ b/src/components/MenuBar/index.tsx @@ -21,7 +21,7 @@ import {isDisabled} from "../../utils/states"; import ExportLogsButton from "./ExportLogsButton"; import MenuBarIconButton from "./MenuBarIconButton"; import NavigationBar from "./NavigationBar"; -import TimestampQueryBoxContainer from "./TimestampQueryBoxContainer"; +import TimestampQueryInputContainer from "./TimestampQueryInputContainer.tsx"; import "./index.css"; @@ -86,7 +86,7 @@ const MenuBar = () => { - + diff --git a/src/stores/viewStore/createViewEventSlice.ts b/src/stores/viewStore/createViewEventSlice.ts index 57712c25f..72fda9ec7 100644 --- a/src/stores/viewStore/createViewEventSlice.ts +++ b/src/stores/viewStore/createViewEventSlice.ts @@ -7,12 +7,10 @@ import { } from "./types"; -const currentUtcTime = new Date().toISOString() - .slice(0, -1); - const VIEW_EVENT_DEFAULT: ViewEventValues = { logEventNum: 0, - dateTimeString: currentUtcTime, + dateTimeString: new Date().toISOString() + .slice(0, -1), }; /** From 47b2d42d49672f968053f15b8185a736c2df4338 Mon Sep 17 00:00:00 2001 From: Henry8192 <50559854+Henry8192@users.noreply.github.com> Date: Tue, 2 Sep 2025 18:58:11 -0400 Subject: [PATCH 23/29] Fix TimestampQueryInput overflow --- src/components/MenuBar/TimestampQueryInput.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/MenuBar/TimestampQueryInput.tsx b/src/components/MenuBar/TimestampQueryInput.tsx index 0815e66f6..9e2cfffd2 100644 --- a/src/components/MenuBar/TimestampQueryInput.tsx +++ b/src/components/MenuBar/TimestampQueryInput.tsx @@ -52,6 +52,7 @@ const TimestampQueryInput = () => { Date: Tue, 2 Sep 2025 22:16:27 -0400 Subject: [PATCH 24/29] rename `TimestampQueryInputContainer` to `TimestampQueryContainer`; revert a divider --- src/components/MenuBar/TimestampQueryContainer.css | 3 +++ ...yInputContainer.tsx => TimestampQueryContainer.tsx} | 10 +++++----- .../MenuBar/TimestampQueryInputContainer.css | 3 --- src/components/MenuBar/index.tsx | 6 +++--- 4 files changed, 11 insertions(+), 11 deletions(-) create mode 100644 src/components/MenuBar/TimestampQueryContainer.css rename src/components/MenuBar/{TimestampQueryInputContainer.tsx => TimestampQueryContainer.tsx} (85%) delete mode 100644 src/components/MenuBar/TimestampQueryInputContainer.css diff --git a/src/components/MenuBar/TimestampQueryContainer.css b/src/components/MenuBar/TimestampQueryContainer.css new file mode 100644 index 000000000..b828f8a20 --- /dev/null +++ b/src/components/MenuBar/TimestampQueryContainer.css @@ -0,0 +1,3 @@ +.timestamp-query-container { + display: flex; +} diff --git a/src/components/MenuBar/TimestampQueryInputContainer.tsx b/src/components/MenuBar/TimestampQueryContainer.tsx similarity index 85% rename from src/components/MenuBar/TimestampQueryInputContainer.tsx rename to src/components/MenuBar/TimestampQueryContainer.tsx index 464903085..acf618b5e 100644 --- a/src/components/MenuBar/TimestampQueryInputContainer.tsx +++ b/src/components/MenuBar/TimestampQueryContainer.tsx @@ -12,9 +12,9 @@ import useUiStore from "../../stores/uiStore"; import {UI_ELEMENT} from "../../typings/states"; import {isDisabled} from "../../utils/states"; import MenuBarIconButton from "./MenuBarIconButton"; -import TimestampQueryInput from "./TimestampQueryInput.tsx"; +import TimestampQueryInput from "./TimestampQueryInput"; -import "./TimestampQueryInputContainer.css"; +import "./TimestampQueryContainer.css"; /** @@ -22,7 +22,7 @@ import "./TimestampQueryInputContainer.css"; * * @return */ -const TimestampQueryInputContainer = () => { +const TimestampQueryContainer = () => { const [showTimestampQuery, setShowTimestampQuery] = useState(false); const uiState = useUiStore((state) => state.uiState); @@ -31,7 +31,7 @@ const TimestampQueryInputContainer = () => { }, []); return ( - + { ); }; -export default TimestampQueryInputContainer; +export default TimestampQueryContainer; diff --git a/src/components/MenuBar/TimestampQueryInputContainer.css b/src/components/MenuBar/TimestampQueryInputContainer.css deleted file mode 100644 index 3c80c8587..000000000 --- a/src/components/MenuBar/TimestampQueryInputContainer.css +++ /dev/null @@ -1,3 +0,0 @@ -.timestamp-query-input-container { - display: flex; -} diff --git a/src/components/MenuBar/index.tsx b/src/components/MenuBar/index.tsx index 28f32c988..5ba0ea30a 100644 --- a/src/components/MenuBar/index.tsx +++ b/src/components/MenuBar/index.tsx @@ -21,7 +21,7 @@ import {isDisabled} from "../../utils/states"; import ExportLogsButton from "./ExportLogsButton"; import MenuBarIconButton from "./MenuBarIconButton"; import NavigationBar from "./NavigationBar"; -import TimestampQueryInputContainer from "./TimestampQueryInputContainer.tsx"; +import TimestampQueryContainer from "./TimestampQueryContainer"; import "./index.css"; @@ -65,8 +65,8 @@ const MenuBar = () => { > - + { - + From f598929334fc3f0716df3b32a4da91d27f49a68f Mon Sep 17 00:00:00 2001 From: Henry8192 <50559854+Henry8192@users.noreply.github.com> Date: Tue, 2 Sep 2025 22:35:28 -0400 Subject: [PATCH 25/29] Move search button inside `Input` as endDecorator; rename onChange function to handleDateTimeInputChange --- .../MenuBar/TimestampQueryInput.tsx | 23 +++++++++++-------- src/components/MenuBar/index.tsx | 1 - 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/components/MenuBar/TimestampQueryInput.tsx b/src/components/MenuBar/TimestampQueryInput.tsx index 9e2cfffd2..d7f945f3f 100644 --- a/src/components/MenuBar/TimestampQueryInput.tsx +++ b/src/components/MenuBar/TimestampQueryInput.tsx @@ -1,4 +1,4 @@ -import {useCallback} from "react"; +import React, {useCallback} from "react"; import { Box, @@ -42,7 +42,7 @@ const TimestampQueryInput = () => { } }, [handleTimestampQuery]); - const handleChange = useCallback((e: React.ChangeEvent) => { + const handleDateTimeInputChange = useCallback((e: React.ChangeEvent) => { const {setDateTimeString} = useViewStore.getState(); setDateTimeString(e.currentTarget.value); }, []); @@ -56,16 +56,19 @@ const TimestampQueryInput = () => { title={"Timestamp to seek to in UTC"} type={"datetime-local"} value={dateTimeString} - onChange={handleChange} + endDecorator={ + + + + } + onChange={handleDateTimeInputChange} onKeyDown={handleKeyboardEnterPress}/> - - - + ); }; diff --git a/src/components/MenuBar/index.tsx b/src/components/MenuBar/index.tsx index 5ba0ea30a..a9b47d598 100644 --- a/src/components/MenuBar/index.tsx +++ b/src/components/MenuBar/index.tsx @@ -88,7 +88,6 @@ const MenuBar = () => { - From 905686f4b8ef77771b982c48492d58fdec05adc3 Mon Sep 17 00:00:00 2001 From: Henry8192 <50559854+Henry8192@users.noreply.github.com> Date: Thu, 4 Sep 2025 11:03:45 -0400 Subject: [PATCH 26/29] move collapse button inside TimestampQueryInput startDecorator --- .../MenuBar/TimestampQueryContainer.tsx | 24 ++++++------- .../MenuBar/TimestampQueryInput.tsx | 34 +++++++++++++++---- 2 files changed, 37 insertions(+), 21 deletions(-) diff --git a/src/components/MenuBar/TimestampQueryContainer.tsx b/src/components/MenuBar/TimestampQueryContainer.tsx index acf618b5e..acd09011c 100644 --- a/src/components/MenuBar/TimestampQueryContainer.tsx +++ b/src/components/MenuBar/TimestampQueryContainer.tsx @@ -6,7 +6,6 @@ import { import {Box} from "@mui/joy"; import CalendarTodayIcon from "@mui/icons-material/CalendarToday"; -import CollapseIcon from "@mui/icons-material/KeyboardDoubleArrowRight"; import useUiStore from "../../stores/uiStore"; import {UI_ELEMENT} from "../../typings/states"; @@ -32,24 +31,21 @@ const TimestampQueryContainer = () => { return ( - - {showTimestampQuery ? - : - } - - + {false === showTimestampQuery && ( + + + + )}
- +
); diff --git a/src/components/MenuBar/TimestampQueryInput.tsx b/src/components/MenuBar/TimestampQueryInput.tsx index d7f945f3f..50d242b94 100644 --- a/src/components/MenuBar/TimestampQueryInput.tsx +++ b/src/components/MenuBar/TimestampQueryInput.tsx @@ -6,6 +6,7 @@ import { Tooltip, } from "@mui/joy"; +import CollapseIcon from "@mui/icons-material/KeyboardDoubleArrowRight"; import SearchIcon from "@mui/icons-material/Search"; import useUiStore from "../../stores/uiStore"; @@ -19,14 +20,20 @@ import MenuBarIconButton from "./MenuBarIconButton"; import "./TimestampQueryInput.css"; +interface TimestampQueryInputProps { + setShowTimestampQuery: React.Dispatch>; +} + /** * Renders a timestamp input field and a search icon button. * Users can input a date and time in UTC format and either press "Enter" * or click the search button to update the application's state and URL hash parameters. * + * @param root0 + * @param root0.setShowTimestampQuery * @return */ -const TimestampQueryInput = () => { +const TimestampQueryInput = ({setShowTimestampQuery}: TimestampQueryInputProps) => { const uiState = useUiStore((state) => state.uiState); const dateTimeString = useViewStore((state) => state.dateTimeString); @@ -36,17 +43,24 @@ const TimestampQueryInput = () => { updateViewHashParams(); }, [dateTimeString]); - const handleKeyboardEnterPress = useCallback((e: React.KeyboardEvent) => { - if ("Enter" === e.key) { - handleTimestampQuery(); - } - }, [handleTimestampQuery]); + const handleKeyboardEnterPress = useCallback( + (e: React.KeyboardEvent) => { + if ("Enter" === e.key) { + handleTimestampQuery(); + } + }, + [handleTimestampQuery], + ); const handleDateTimeInputChange = useCallback((e: React.ChangeEvent) => { const {setDateTimeString} = useViewStore.getState(); setDateTimeString(e.currentTarget.value); }, []); + const collapseTimestampQueryInput = useCallback(() => { + setShowTimestampQuery(false); + }, [setShowTimestampQuery]); + return ( @@ -65,10 +79,16 @@ const TimestampQueryInput = () => { } + startDecorator={ + + + + } onChange={handleDateTimeInputChange} onKeyDown={handleKeyboardEnterPress}/> - ); }; From e62ba63c79bedc396efdf92ca6dd79003fdb19a1 Mon Sep 17 00:00:00 2001 From: Henry8192 <50559854+Henry8192@users.noreply.github.com> Date: Thu, 4 Sep 2025 11:04:30 -0400 Subject: [PATCH 27/29] edit comment --- src/components/MenuBar/TimestampQueryInput.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MenuBar/TimestampQueryInput.tsx b/src/components/MenuBar/TimestampQueryInput.tsx index 50d242b94..33782a4f5 100644 --- a/src/components/MenuBar/TimestampQueryInput.tsx +++ b/src/components/MenuBar/TimestampQueryInput.tsx @@ -29,8 +29,8 @@ interface TimestampQueryInputProps { * Users can input a date and time in UTC format and either press "Enter" * or click the search button to update the application's state and URL hash parameters. * - * @param root0 - * @param root0.setShowTimestampQuery + * @param props + * @param props.setShowTimestampQuery * @return */ const TimestampQueryInput = ({setShowTimestampQuery}: TimestampQueryInputProps) => { From 2c993df74f98a5afdc266c0ba4953e5bbbd5e27b Mon Sep 17 00:00:00 2001 From: Henry8192 <50559854+Henry8192@users.noreply.github.com> Date: Thu, 4 Sep 2025 13:50:15 -0400 Subject: [PATCH 28/29] Address `TimestampQueryInput` overflow issue; remove dividers when `TimestampQueryInput` is expanded; however, startDecorator & endDecorator icons are overflowed. --- .../MenuBar/TimestampQueryContainer.tsx | 23 ++++++++++++------- .../MenuBar/TimestampQueryInput.tsx | 3 +-- src/components/MenuBar/index.tsx | 1 - 3 files changed, 16 insertions(+), 11 deletions(-) diff --git a/src/components/MenuBar/TimestampQueryContainer.tsx b/src/components/MenuBar/TimestampQueryContainer.tsx index acd09011c..1eb061383 100644 --- a/src/components/MenuBar/TimestampQueryContainer.tsx +++ b/src/components/MenuBar/TimestampQueryContainer.tsx @@ -3,7 +3,10 @@ import { useState, } from "react"; -import {Box} from "@mui/joy"; +import { + Box, + Divider, +} from "@mui/joy"; import CalendarTodayIcon from "@mui/icons-material/CalendarToday"; @@ -32,13 +35,17 @@ const TimestampQueryContainer = () => { return ( {false === showTimestampQuery && ( - - - + <> + + + + + + )}
diff --git a/src/components/MenuBar/index.tsx b/src/components/MenuBar/index.tsx index 40563f5d0..dd03d1172 100644 --- a/src/components/MenuBar/index.tsx +++ b/src/components/MenuBar/index.tsx @@ -87,7 +87,6 @@ const MenuBar = () => { - From abfda183e714763b9f8acfb78de4d7a6dfd0fe6a Mon Sep 17 00:00:00 2001 From: Henry8192 <50559854+Henry8192@users.noreply.github.com> Date: Fri, 12 Sep 2025 14:47:37 -0400 Subject: [PATCH 29/29] Apply suggestions from code review Co-authored-by: Junhao Liao --- .../MenuBar/TimestampQueryContainer.tsx | 16 +++++----- .../MenuBar/TimestampQueryInput.tsx | 32 +++++++------------ 2 files changed, 20 insertions(+), 28 deletions(-) diff --git a/src/components/MenuBar/TimestampQueryContainer.tsx b/src/components/MenuBar/TimestampQueryContainer.tsx index 1eb061383..9194e7cb3 100644 --- a/src/components/MenuBar/TimestampQueryContainer.tsx +++ b/src/components/MenuBar/TimestampQueryContainer.tsx @@ -20,27 +20,27 @@ import "./TimestampQueryContainer.css"; /** - * Wraps TimestampQueryInput with a toggle button, which shows or hides the TimestampQueryInput. + * Wraps the timestamp query input and toggles its visibility using a calendar button. * * @return */ const TimestampQueryContainer = () => { - const [showTimestampQuery, setShowTimestampQuery] = useState(false); + const [isInputVisible, setIsInputVisible] = useState(false); const uiState = useUiStore((state) => state.uiState); - const toggleTimestampQuery = useCallback(() => { - setShowTimestampQuery((prev) => !prev); + const handleInputVisibilityToggle = useCallback(() => { + setIsInputVisible((prev) => !prev); }, []); return ( - {false === showTimestampQuery && ( + {false === isInputVisible && ( <> @@ -48,11 +48,11 @@ const TimestampQueryContainer = () => { )}
- +
); diff --git a/src/components/MenuBar/TimestampQueryInput.tsx b/src/components/MenuBar/TimestampQueryInput.tsx index 29ec9d93d..51d71a279 100644 --- a/src/components/MenuBar/TimestampQueryInput.tsx +++ b/src/components/MenuBar/TimestampQueryInput.tsx @@ -21,19 +21,18 @@ import "./TimestampQueryInput.css"; interface TimestampQueryInputProps { - setShowTimestampQuery: React.Dispatch>; + onInputCollapse: () => void; } /** - * Renders a timestamp input field and a search icon button. - * Users can input a date and time in UTC format and either press "Enter" - * or click the search button to update the application's state and URL hash parameters. + * Renders an input allowing the user to jump to the nearest log event at or before a specified UTC + * datetime. Collapses the input when requested. * * @param props - * @param props.setShowTimestampQuery + * @param props.onInputCollapse * @return */ -const TimestampQueryInput = ({setShowTimestampQuery}: TimestampQueryInputProps) => { +const TimestampQueryInput = ({onInputCollapse}: TimestampQueryInputProps) => { const uiState = useUiStore((state) => state.uiState); const dateTimeString = useViewStore((state) => state.dateTimeString); @@ -43,27 +42,20 @@ const TimestampQueryInput = ({setShowTimestampQuery}: TimestampQueryInputProps) updateViewHashParams(); }, [dateTimeString]); - const handleKeyboardEnterPress = useCallback( - (e: React.KeyboardEvent) => { - if ("Enter" === e.key) { - handleTimestampQuery(); - } - }, - [handleTimestampQuery], - ); + const handleKeyboardEnterPress = useCallback((ev: React.KeyboardEvent) => { + if ("Enter" === ev.key) { + handleTimestampQuery(); + } + }, [handleTimestampQuery]); const handleDateTimeInputChange = useCallback((e: React.ChangeEvent) => { const {setDateTimeString} = useViewStore.getState(); setDateTimeString(e.currentTarget.value); }, []); - const collapseTimestampQueryInput = useCallback(() => { - setShowTimestampQuery(false); - }, [setShowTimestampQuery]); - return ( - +