feat(URL): Add support to query timestamp by URL

src/contexts/StateContextProvider.tsx

@@ -243,7 +243,7 @@ const updateUrlIfEventOnPage = (
 // eslint-disable-next-line max-lines-per-function, max-statements
 const StateContextProvider = ({children}: StateContextProviderProps) => {
     const {postPopUp} = useContext(NotificationContext);
-    const {filePath, logEventNum} = useContext(UrlContext);
+    const {filePath, logEventNum, timestamp} = useContext(UrlContext);
 
     // States
     const [exportProgress, setExportProgress] =
@@ -269,6 +269,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     const mainWorkerRef = useRef<null|Worker>(null);
     const numPagesRef = useRef<number>(numPages);
     const pageNumRef = useRef<number>(pageNum);
+    const timestampRef = useRef(timestamp);
     const uiStateRef = useRef<UI_STATE>(uiState);
 
     const handleMainWorkerResp = useCallback((ev: MessageEvent<MainWorkerRespMessage>) => {
@@ -462,6 +463,11 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         logEventNumRef.current = logEventNum;
     }, [logEventNum]);
 
+    // Synchronize `timestampRef` with `timestamp`.
+    useEffect(() => {
+        timestampRef.current = timestamp;
+    }, [timestamp]);
+
     // Synchronize `pageNumRef` with `pageNum`.
     useEffect(() => {
         pageNumRef.current = pageNum;
@@ -481,13 +487,21 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         }
     }, [uiState]);
 
-    // On `logEventNum` update, clamp it then switch page if necessary or simply update the URL.
     useEffect(() => {
-        if (null === mainWorkerRef.current) {
+        if (null === mainWorkerRef.current || null === timestamp) {
             return;
         }
 
-        if (URL_HASH_PARAMS_DEFAULT.logEventNum === logEventNum) {
+        loadPageByCursor(mainWorkerRef.current, {
+            code: CURSOR_CODE.TIMESTAMP,
+            args: {timestamp: timestamp},
+        });
+        updateWindowUrlHashParams({timestamp: null});
+    }, [timestamp]);
+
+    // On `logEventNum` update, clamp it then switch page if necessary or simply update the URL.
+    useEffect(() => {
+        if (null === mainWorkerRef.current || URL_HASH_PARAMS_DEFAULT.logEventNum === logEventNum) {
             return;
         }
 
@@ -526,6 +540,12 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 args: {eventNum: logEventNumRef.current},
             };
         }
+        if (URL_HASH_PARAMS_DEFAULT.timestamp !== timestampRef.current) {
+            cursor = {
+                code: CURSOR_CODE.TIMESTAMP,
+                args: {timestamp: timestampRef.current},
+            };
+        }
         loadFile(filePath, cursor);
     }, [
         filePath,

src/contexts/UrlContextProvider.tsx

@@ -31,6 +31,7 @@ const URL_SEARCH_PARAMS_DEFAULT = Object.freeze({
  */
 const URL_HASH_PARAMS_DEFAULT = Object.freeze({
     [HASH_PARAM_NAMES.LOG_EVENT_NUM]: null,
+    [HASH_PARAM_NAMES.TIMESTAMP]: null,
 });
 
 /**
@@ -204,12 +205,17 @@ const getWindowUrlHashParams = () => {
     );
     const hashParams = new URLSearchParams(window.location.hash.substring(1));
 
-    const logEventNum = hashParams.get(HASH_PARAM_NAMES.LOG_EVENT_NUM);
-    if (null !== logEventNum) {
-        const parsed = Number(logEventNum);
-        urlHashParams[HASH_PARAM_NAMES.LOG_EVENT_NUM] = Number.isNaN(parsed) ?
-            null :
-            parsed;
+    const numberHashParamNames = [HASH_PARAM_NAMES.LOG_EVENT_NUM,
+        HASH_PARAM_NAMES.TIMESTAMP];
+
+    for (const paramName of numberHashParamNames) {
+        const hashParam = hashParams.get(paramName);
+        if (null !== hashParam) {
+            const parsed = Number(hashParam);
+            urlHashParams[paramName] = Number.isNaN(parsed) ?
+                null :
+                parsed;
+        }
     }
 
     return urlHashParams;

src/services/LogFileManager/index.ts

@@ -411,26 +411,28 @@
      */
     #getCursorData (cursor: CursorType, numActiveEvents: number): CursorData {
         const {code, args} = cursor;
-        switch (code) {
-            case CURSOR_CODE.PAGE_NUM:
-                return getPageNumCursorData(
-                    args.pageNum,
-                    args.eventPositionOnPage,
-                    numActiveEvents,
-                    this.#pageSize,
-                );
-            case CURSOR_CODE.LAST_EVENT:
-                return getLastEventCursorData(numActiveEvents, this.#pageSize);
-            case CURSOR_CODE.EVENT_NUM:
-                return getEventNumCursorData(
-                    args.eventNum,
-                    numActiveEvents,
-                    this.#pageSize,
-                    this.#decoder.getFilteredLogEventMap(),
-                );
-            default:
-                throw new Error(`Unsupported cursor type: ${code}`);
+        let eventNum: number = 0;
+        if (CURSOR_CODE.PAGE_NUM === code) {
+            return getPageNumCursorData(
+                args.pageNum,
+                args.eventPositionOnPage,
+                numActiveEvents,
+                this.#pageSize,
+            );
+        } else if (CURSOR_CODE.LAST_EVENT === code) {
+            return getLastEventCursorData(numActiveEvents, this.#pageSize);
+        } else if (CURSOR_CODE.EVENT_NUM === code) {
+            ({eventNum} = args);
+        } else {
+            eventNum = this.#decoder.getLogEventIdxByTimestamp(args.timestamp) + 1;
         }
+
+        return getEventNumCursorData(
+            eventNum,
+            numActiveEvents,
+            this.#pageSize,
+            this.#decoder.getFilteredLogEventMap(),
+        );
     }
 }
 

src/services/decoders/ClpIrDecoder.ts

@@ -77,6 +77,10 @@
         return this.#streamReader.getFilteredLogEventMap();
     }
 
+    getLogEventIdxByTimestamp (timestamp: number): number {
+        return this.#streamReader.getLogEventIdxByTimestamp(timestamp);
+    }
+
     setLogLevelFilter (logLevelFilter: LogLevelFilter): boolean {
         this.#streamReader.filterLogEvents(logLevelFilter);
 

src/services/decoders/JsonlDecoder/index.ts

@@ -25,6 +25,8 @@ import {
 } from "./utils";
 
 
+const INVALID_LOG_EVENT_IDX = -1;
+
 /**
  * A decoder for JSONL (JSON lines) files that contain log events. See `DecoderOptions` for
  * properties that are specific to log events (compared to generic JSON records).
@@ -122,6 +124,28 @@ class JsonlDecoder implements Decoder {
         return results;
     }
 
+    getLogEventIdxByTimestamp (timestamp: number): number {
+        let low = 0;
+        let high = this.#logEvents.length - 1;
+        let lastFoundLogEventIdx = INVALID_LOG_EVENT_IDX;
+
+        while (low <= high) {
+            const mid = Math.floor((low + high) / 2);
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const midTimestamp = this.#logEvents[mid]!.timestamp.valueOf();
+            if (midTimestamp === timestamp) {
+                lastFoundLogEventIdx = mid;
+                low = mid + 1;
+            } else if (midTimestamp < timestamp) {
+                low = mid + 1;
+            } else {
+                high = mid - 1;
+            }
+        }
+
+        return lastFoundLogEventIdx;
+    }
+
     /**
      * Parses each line from the data array and buffers it internally.
      *
@@ -214,7 +238,7 @@ class JsonlDecoder implements Decoder {
      * @return The decoded log event.
      */
     #decodeLogEvent = (logEventIdx: number): DecodeResult => {
-        let timestamp: number;
+        let timestamp: bigint;
         let message: string;
         let logLevel: LOG_LEVEL;
 
@@ -231,7 +255,7 @@ class JsonlDecoder implements Decoder {
             const logEvent = this.#logEvents[logEventIdx] as LogEvent;
             logLevel = logEvent.level;
             message = this.#formatter.formatLogEvent(logEvent);
-            timestamp = logEvent.timestamp.valueOf();
+            timestamp = BigInt(logEvent.timestamp.valueOf());
         }
 
         return [

src/typings/decoders.ts

@@ -98,6 +98,14 @@ interface Decoder {
         endIdx: number,
         useFilter: boolean
     ): Nullable<DecodeResult[]>;
+
+    /**
+     * Finds the index of the last log event that matches the specified timestamp.
+     *
+     * @param timestamp
+     * @return The index of the matching log event, or -1 if no match is found.
+     */
+    getLogEventIdxByTimestamp(timestamp: number): number;
 }
 
 export type {

src/typings/logs.ts

@@ -43,7 +43,7 @@ const LOG_LEVEL_VALUES = Object.freeze(
 
 const MAX_LOG_LEVEL = Math.max(...LOG_LEVEL_VALUES);
 
-const INVALID_TIMESTAMP_VALUE = 0;
+const INVALID_TIMESTAMP_VALUE = 0n;
 
 
 export type {

src/typings/url.ts

@@ -7,6 +7,7 @@ enum SEARCH_PARAM_NAMES {
 
 enum HASH_PARAM_NAMES {
     LOG_EVENT_NUM = "logEventNum",
+    TIMESTAMP = "timestamp",
 }
 
 interface UrlSearchParams {
@@ -15,6 +16,7 @@ interface UrlSearchParams {
 
 interface UrlHashParams {
     logEventNum: number,
+    timestamp: number,
 }
 
 type UrlSearchParamUpdatesType = {