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

src/contexts/StateContextProvider.tsx

@@ -243,7 +243,7 @@
 // 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 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>) => {
@@ -453,15 +454,28 @@
         setUiState(UI_STATE.FAST_LOADING);
         workerPostReq(mainWorkerRef.current, WORKER_REQ_CODE.SET_FILTER, {
             cursor: {code: CURSOR_CODE.EVENT_NUM, args: {eventNum: logEventNumRef.current ?? 1}},
             logLevelFilter: filter,
         });
     }, []);
 
     // Synchronize `logEventNumRef` with `logEventNum`.
+    // FIXME: is this necessary? Can we integrate it with the [numEvents, logEventNum] useEffect?
     useEffect(() => {
         logEventNumRef.current = logEventNum;
     }, [logEventNum]);
 
+    useEffect(() => {
+        timestampRef.current = timestamp;
+
+        if (null !== mainWorkerRef.current && null !== timestamp) {
+            loadPageByCursor(mainWorkerRef.current, {
+                code: CURSOR_CODE.TIMESTAMP,
+                args: {timestamp: timestamp},
+            });
+            updateWindowUrlHashParams({timestamp: null});
+        }
+    }, [timestamp]);
+
     // Synchronize `pageNumRef` with `pageNum`.
     useEffect(() => {
         pageNumRef.current = pageNum;
@@ -526,6 +540,12 @@
                 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,13 +205,18 @@ 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 checkAndSetHashParam = (hashParamName: keyof UrlHashParams) => {
+        const hashParam = hashParams.get(hashParamName);
+        if (null !== hashParam) {
+            const parsed = Number(hashParam);
+            urlHashParams[hashParamName] = Number.isNaN(parsed) ?
+                null :
+                parsed;
+        }
+    };
+
+    checkAndSetHashParam(HASH_PARAM_NAMES.LOG_EVENT_NUM);
+    checkAndSetHashParam(HASH_PARAM_NAMES.TIMESTAMP);
 
     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/MainWorker.ts

@@ -137,6 +137,14 @@ onmessage = async (ev: MessageEvent<MainWorkerReqMessage>) => {
                     args.isCaseSensitive
                 );
                 break;
+
+            /*
+            case WORKER_REQ_CODE.QUERY_TIMESTAMP:
+                if (null === LOG_FILE_MANAGER) {
+                    throw new Error("Log file manager hasn't been initialized");
+                }
+                LOG_FILE_MANAGER.getLogEventIndexByTimestamp(timestamp);
+             */
             default:
                 console.error(`Unexpected ev.data: ${JSON.stringify(ev.data)}`);
                 break;

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

@@ -122,6 +122,29 @@ class JsonlDecoder implements Decoder {
         return results;
     }
 
+    getLogEventIdxByTimestamp (timestamp: number): number {
+        let low = 0;
+        let high = this.#logEvents.length - 1;
+        let result = -1;
+
+        while (low <= high) {
+            const mid = Math.floor((low + high) / 2);
+
+            // @ts-expect-error TS2532: Object is possibly 'undefined'.
+            const midTimestamp = this.#logEvents[mid].timestamp.valueOf();
+            if (midTimestamp === timestamp) {
+                result = mid;
+                low = mid + 1;
+            } else if (midTimestamp < timestamp) {
+                low = mid + 1;
+            } else {
+                high = mid - 1;
+            }
+        }
+
+        return result;
+    }
+
     /**
      * Parses each line from the data array and buffers it internally.
      *
@@ -214,7 +237,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 +254,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,15 @@ interface Decoder {
         endIdx: number,
         useFilter: boolean
     ): Nullable<DecodeResult[]>;
+
+    /**
+     * Retrieves the last index of the log event that matches the given timestamp.
+     * If no such log event exists, returns -1.
+     *
+     * @param timestamp
+     * @return
+     */
+    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 = {