feat(MenuBar): Add timestamp query input for jumping to log events by UTC timestamp (resolves #118).

src/components/MenuBar/TimestampQueryContainer.css

@@ -0,0 +1,3 @@
+.timestamp-query-container {
+    display: flex;
+}

src/components/MenuBar/TimestampQueryContainer.tsx

@@ -0,0 +1,61 @@
+import {
+    useCallback,
+    useState,
+} from "react";
+
+import {
+    Box,
+    Divider,
+} from "@mui/joy";
+
+import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
+
+import useUiStore from "../../stores/uiStore";
+import {UI_ELEMENT} from "../../typings/states";
+import {isDisabled} from "../../utils/states";
+import MenuBarIconButton from "./MenuBarIconButton";
+import TimestampQueryInput from "./TimestampQueryInput";
+
+import "./TimestampQueryContainer.css";
+
+
+/**
+ * Wraps the timestamp query input and toggles its visibility using a calendar button.
+ *
+ * @return
+ */
+const TimestampQueryContainer = () => {
+    const [isInputVisible, setIsInputVisible] = useState(false);
+    const uiState = useUiStore((state) => state.uiState);
+
+    const handleInputVisibilityToggle = useCallback(() => {
+        setIsInputVisible((prev) => !prev);
+    }, []);
+
+    return (
+        <Box className={"timestamp-query-container"}>
+            {false === isInputVisible && (
+                <>
+                    <Divider orientation={"vertical"}/>
+                    <MenuBarIconButton
+                        disabled={isDisabled(uiState, UI_ELEMENT.NAVIGATION_BAR)}
+                        tooltipTitle={"Search by timestamp"}
+                        onClick={handleInputVisibilityToggle}
+                    >
+                        <CalendarTodayIcon/>
+                    </MenuBarIconButton>
+                    <Divider orientation={"vertical"}/>
+                </>
+            )}
+            <div
+                className={`timestamp-query-input-wrapper ${isInputVisible ?
+                    "expanded" :
+                    ""}`}
+            >
+                <TimestampQueryInput onInputCollapse={handleInputVisibilityToggle}/>
+            </div>
+        </Box>
+    );
+};
+
+export default TimestampQueryContainer;

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);
+}

src/components/MenuBar/TimestampQueryInput.tsx

@@ -0,0 +1,87 @@
+import React, {useCallback} from "react";
+
+import {
+    Box,
+    Input,
+    Tooltip,
+} from "@mui/joy";
+
+import CollapseIcon from "@mui/icons-material/KeyboardDoubleArrowRight";
+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";
+import {updateViewHashParams} from "../../utils/url/urlHash";
+import MenuBarIconButton from "./MenuBarIconButton";
+
+import "./TimestampQueryInput.css";
+
+
+interface TimestampQueryInputProps {
+    onInputCollapse: () => void;
+}
+
+/**
+ * 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.onInputCollapse
+ * @return
+ */
+const TimestampQueryInput = ({onInputCollapse}: TimestampQueryInputProps) => {
+    const uiState = useUiStore((state) => state.uiState);
+    const dateTimeString = useViewStore((state) => state.dateTimeString);
+
+    const handleTimestampQuery = useCallback(() => {
+        const timestamp = new Date(`${dateTimeString}Z`).getTime();
+        updateWindowUrlHashParams({timestamp: timestamp});
+        updateViewHashParams();
+    }, [dateTimeString]);
+
+    const handleKeyboardEnterPress = useCallback((ev: React.KeyboardEvent<HTMLInputElement>) => {
+        if ("Enter" === ev.key) {
+            handleTimestampQuery();
+        }
+    }, [handleTimestampQuery]);
+
+    const handleDateTimeInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        const {setDateTimeString} = useViewStore.getState();
+        setDateTimeString(e.currentTarget.value);
+    }, []);
+
+    return (
+        <Box className={"timestamp-query-input"}>
+            <Tooltip title={"Jump to the nearest log event at / before this UTC time"}>
+                <Input
+                    disabled={isDisabled(uiState, UI_ELEMENT.NAVIGATION_BAR)}
+                    size={"sm"}
+                    sx={{height: "100%"}}
+                    title={"Timestamp to seek to in UTC"}
+                    type={"datetime-local"}
+                    value={dateTimeString}
+                    endDecorator={
+                        <MenuBarIconButton
+                            onClick={handleTimestampQuery}
+                        >
+                            <SearchIcon/>
+                        </MenuBarIconButton>
+                    }
+                    startDecorator={
+                        <MenuBarIconButton
+                            onClick={onInputCollapse}
+                        >
+                            <CollapseIcon/>
+                        </MenuBarIconButton>
+                    }
+                    onChange={handleDateTimeInputChange}
+                    onKeyDown={handleKeyboardEnterPress}/>
+            </Tooltip>
+        </Box>
+    );
+};
+
+export default TimestampQueryInput;

src/components/MenuBar/index.css

@@ -47,3 +47,13 @@
     z-index: var(--ylv-loading-progress-z-index);
     margin-bottom: -2px;
 }
+
+.timestamp-query-input-wrapper {
+    overflow: hidden;
+    max-width: 0;
+    transition: max-width 0.3s ease;
+}
+
+.timestamp-query-input-wrapper.expanded {
+    max-width: 320px;
+}

src/components/MenuBar/index.tsx

@@ -21,6 +21,7 @@ import {isDisabled} from "../../utils/states";
 import ExportLogsButton from "./ExportLogsButton";
 import MenuBarIconButton from "./MenuBarIconButton";
 import NavigationBar from "./NavigationBar";
+import TimestampQueryContainer from "./TimestampQueryContainer";
 
 import "./index.css";
 
@@ -86,7 +87,8 @@ const MenuBar = () => {
                     </Typography>
                 </Box>
 
-                <Divider orientation={"vertical"}/>
+                <TimestampQueryContainer/>
+
                 <NavigationBar/>
                 <Divider orientation={"vertical"}/>
 

src/stores/viewStore/createViewEventSlice.ts

@@ -9,6 +9,8 @@ import {
 
 const VIEW_EVENT_DEFAULT: ViewEventValues = {
     logEventNum: 0,
+    dateTimeString: new Date().toISOString()
+        .slice(0, -1),
 };
 
 /**
@@ -24,6 +26,9 @@ const createViewEventSlice: StateCreator<
     setLogEventNum: (logEventNum: number) => {
         set({logEventNum});
     },
+    setDateTimeString: (dateTimeString: string) => {
+        set({dateTimeString});
+    },
 });
 
 export {VIEW_EVENT_DEFAULT};

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;

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<CursorType> => {
@@ -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},