new-log-viewer: Add event cursor, refactor state context, and redesign load page methods to support discontinuous log event numbers in preparation for log level filtering.

new-log-viewer/src/components/Editor/index.tsx

@@ -24,7 +24,6 @@ import {BeginLineNumToLogEventNumMap} from "../../typings/worker";
 import {
     ACTION_NAME,
     EDITOR_ACTIONS,
-    handleAction,
 } from "../../utils/actions";
 import {
     CONFIG_DEFAULT,
@@ -63,7 +62,7 @@ const resetCachedPageSize = () => {
 const Editor = () => {
     const {mode, systemMode} = useColorScheme();
 
-    const {beginLineNumToLogEventNum, logData, numEvents} = useContext(StateContext);
+    const {beginLineNumToLogEventNum, logData, loadPageAction} = useContext(StateContext);
     const {logEventNum} = useContext(UrlContext);
 
     const [lineNum, setLineNum] = useState<number>(1);
@@ -72,23 +71,18 @@ const Editor = () => {
     );
     const editorRef = useRef<Nullable<monaco.editor.IStandaloneCodeEditor>>(null);
     const isMouseDownRef = useRef<boolean>(false);
-    const logEventNumRef = useRef<Nullable<number>>(logEventNum);
-    const numEventsRef = useRef<Nullable<number>>(numEvents);
     const pageSizeRef = useRef(getConfig(CONFIG_KEY.PAGE_SIZE));
 
     const handleEditorCustomAction = useCallback((
         editor: monaco.editor.IStandaloneCodeEditor,
         actionName: ACTION_NAME
     ) => {
-        if (null === logEventNumRef.current || null === numEventsRef.current) {
-            return;
-        }
         switch (actionName) {
             case ACTION_NAME.FIRST_PAGE:
             case ACTION_NAME.PREV_PAGE:
             case ACTION_NAME.NEXT_PAGE:
             case ACTION_NAME.LAST_PAGE:
-                handleAction(actionName, logEventNumRef.current, numEventsRef.current);
+                loadPageAction(ACTION_NAME.LAST_PAGE);
                 break;
             case ACTION_NAME.PAGE_TOP:
                 goToPositionAndCenter(editor, {lineNumber: 1, column: 1});
@@ -104,7 +98,7 @@ const Editor = () => {
             default:
                 break;
         }
-    }, []);
+    }, [loadPageAction]);
 
     /**
      * Sets `editorRef` and configures callbacks for mouse down detection.
@@ -162,16 +156,6 @@ const Editor = () => {
         beginLineNumToLogEventNumRef.current = beginLineNumToLogEventNum;
     }, [beginLineNumToLogEventNum]);
 
-    // Synchronize `logEventNumRef` with `logEventNum`.
-    useEffect(() => {
-        logEventNumRef.current = logEventNum;
-    }, [logEventNum]);
-
-    // Synchronize `numEventsRef` with `numEvents`.
-    useEffect(() => {
-        numEventsRef.current = numEvents;
-    }, [numEvents]);
-
     // On `logEventNum` update, update line number in the editor.
     useEffect(() => {
         if (null === editorRef.current || isMouseDownRef.current) {

new-log-viewer/src/components/MenuBar/NavigationBar.tsx

@@ -6,11 +6,7 @@ import SkipNext from "@mui/icons-material/SkipNext";
 import SkipPrevious from "@mui/icons-material/SkipPrevious";
 
 import {StateContext} from "../../contexts/StateContextProvider";
-import {UrlContext} from "../../contexts/UrlContextProvider";
-import {
-    ACTION_NAME,
-    handleAction,
-} from "../../utils/actions";
+import {ACTION_NAME} from "../../utils/actions";
 import PageNumInput from "./PageNumInput";
 import SmallIconButton from "./SmallIconButton";
 
@@ -21,16 +17,12 @@ import SmallIconButton from "./SmallIconButton";
  * @return
  */
 const NavigationBar = () => {
-    const {numEvents} = useContext(StateContext);
-    const {logEventNum} = useContext(UrlContext);
+    const {loadPageAction} = useContext(StateContext);
 
     const handleNavButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-        if (null === logEventNum) {
-            return;
-        }
         const {actionName} = event.currentTarget.dataset as { actionName: ACTION_NAME };
         if (Object.values(ACTION_NAME).includes(actionName)) {
-            handleAction(actionName, logEventNum, numEvents);
+            loadPageAction(actionName);
         }
     };
 

new-log-viewer/src/components/MenuBar/PageNumInput.tsx

@@ -9,6 +9,7 @@ import {Typography} from "@mui/joy";
 import Input from "@mui/joy/Input";
 
 import {StateContext} from "../../contexts/StateContextProvider";
+import {ACTION_NAME} from "../../utils/actions";
 
 import "./PageNumInput.css";
 
@@ -22,10 +23,7 @@ const PAGE_NUM_INPUT_FIT_EXTRA_WIDTH = 2;
  * @return
  */
 const PageNumInput = () => {
-    const {loadPage, numPages, pageNum} = useContext(StateContext);
-    const adjustedPageNum = (null === pageNum) ?
-        0 :
-        pageNum;
+    const {loadPageAction, numPages, pageNum} = useContext(StateContext);
 
     const [isEditing, setIsEditing] = useState<boolean>(false);
     const inputRef = useRef<HTMLInputElement>(null);
@@ -38,7 +36,7 @@ const PageNumInput = () => {
             return;
         }
 
-        loadPage(Number(inputRef.current.value));
+        loadPageAction(ACTION_NAME.SPECIFIC_PAGE, Number(inputRef.current.value));
         setIsEditing(false);
     };
 
@@ -68,9 +66,9 @@ const PageNumInput = () => {
         if (null === inputRef.current) {
             return;
         }
-        inputRef.current.value = adjustedPageNum.toString();
+        inputRef.current.value = pageNum.toString();
         adjustInputWidth();
-    }, [adjustedPageNum]);
+    }, [pageNum]);
 
     return (
         <form

new-log-viewer/src/contexts/StateContextProvider.tsx

@@ -22,14 +22,15 @@ import {
     WORKER_RESP_CODE,
     WorkerReq,
 } from "../typings/worker";
+import {
+    ACTION_NAME,
+    getPageNumCursorArgs,
+} from "../utils/actions";
 import {
     EXPORT_LOGS_CHUNK_SIZE,
     getConfig,
 } from "../utils/config";
-import {
-    clamp,
-    getChunkNum,
-} from "../utils/math";
+import {getChunkNum} from "../utils/math";
 import {
     updateWindowUrlHashParams,
     updateWindowUrlSearchParams,
@@ -46,11 +47,11 @@ interface StateContextType {
     logData: string,
     numEvents: number,
     numPages: number,
-    pageNum: Nullable<number>,
+    pageNum: number,
 
     exportLogs: () => void,
     loadFile: (fileSrc: FileSrcType, cursor: CursorType) => void,
-    loadPage: (newPageNum: number) => void,
+    loadPageAction: (action: ACTION_NAME, specificPageNum?: Nullable<number>) => void,
 }
 const StateContext = createContext<StateContextType>({} as StateContextType);
 
@@ -68,50 +69,13 @@ const STATE_DEFAULT: Readonly<StateContextType> = Object.freeze({
 
     exportLogs: () => null,
     loadFile: () => null,
-    loadPage: () => null,
+    loadPageAction: () => null,
 });
 
 interface StateContextProviderProps {
     children: React.ReactNode
 }
 
-/**
- * Updates the log event number in the current window's URL hash parameters.
- *
- * @param lastLogEventNum The last log event number value.
- * @param inputLogEventNum The log event number to set.  If `null`, the hash parameter log event
- * number will be set to `lastLogEventNum`. If it's outside the range `[1, lastLogEventNum]`, the
- * hash parameter log event number will be clamped to that range.
- */
-const updateLogEventNumInUrl = (
-    lastLogEventNum: number,
-    inputLogEventNum: Nullable<number>
-) => {
-    const newLogEventNum = (null === inputLogEventNum) ?
-        lastLogEventNum :
-        clamp(inputLogEventNum, 1, lastLogEventNum);
-
-    updateWindowUrlHashParams({
-        logEventNum: newLogEventNum,
-    });
-};
-
-/**
- * Gets the last log event number from a map of begin line numbers to log event numbers.
- *
- * @param beginLineNumToLogEventNum
- * @return The last log event number.
- */
-const getLastLogEventNum = (beginLineNumToLogEventNum: BeginLineNumToLogEventNumMap) => {
-    const allLogEventNums = Array.from(beginLineNumToLogEventNum.values());
-    let lastLogEventNum = allLogEventNums.at(-1);
-    if ("undefined" === typeof lastLogEventNum) {
-        lastLogEventNum = 1;
-    }
-
-    return lastLogEventNum;
-};
-
 /**
  * Sends a post message to a worker with the given code and arguments. This wrapper around
  * `worker.postMessage()` ensures type safety for both the request code and its corresponding
@@ -137,7 +101,7 @@ const workerPostReq = <T extends WORKER_REQ_CODE>(
  * @param props.children
  * @return
  */
-// eslint-disable-next-line max-lines-per-function
+// eslint-disable-next-line max-lines-per-function, max-statements
 const StateContextProvider = ({children}: StateContextProviderProps) => {
     const {filePath, logEventNum} = useContext(UrlContext);
 
@@ -153,10 +117,11 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     // Refs
     const logEventNumRef = useRef(logEventNum);
     const numPagesRef = useRef<number>(STATE_DEFAULT.numPages);
-    const pageNumRef = useRef<Nullable<number>>(STATE_DEFAULT.pageNum);
+    const pageNumRef = useRef<number>(STATE_DEFAULT.pageNum);
     const logExportManagerRef = useRef<null|LogExportManager>(null);
     const mainWorkerRef = useRef<null|Worker>(null);
 
+    // eslint-disable-next-line max-lines-per-function
     const handleMainWorkerResp = useCallback((ev: MessageEvent<MainWorkerRespMessage>) => {
         const {code, args} = ev.data;
         console.log(`[MainWorker -> Renderer] code=${code}`);
@@ -179,9 +144,14 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 break;
             case WORKER_RESP_CODE.PAGE_DATA: {
                 setLogData(args.logs);
+                pageNumRef.current = args.pageNum;
                 beginLineNumToLogEventNumRef.current = args.beginLineNumToLogEventNum;
-                const lastLogEventNum = getLastLogEventNum(args.beginLineNumToLogEventNum);
-                updateLogEventNumInUrl(lastLogEventNum, logEventNumRef.current);
+
+                // Assume page data always provides a valid log event num. i.e. non null or
+                // outside range.
+                updateWindowUrlHashParams({
+                    logEventNum: args.logEventNum,
+                });
                 break;
             }
             default:
@@ -240,17 +210,45 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         handleMainWorkerResp,
     ]);
 
-    const loadPage = (newPageNum: number) => {
+    const loadPage = useCallback((
+        cursor: CursorType,
+    ) => {
         if (null === mainWorkerRef.current) {
             console.error("Unexpected null mainWorkerRef.current");
 
             return;
         }
+
         workerPostReq(mainWorkerRef.current, WORKER_REQ_CODE.LOAD_PAGE, {
-            cursor: {code: CURSOR_CODE.PAGE_NUM, args: {pageNum: newPageNum}},
+            cursor: cursor,
             decoderOptions: getConfig(CONFIG_KEY.DECODER_OPTIONS),
         });
-    };
+    }, []);
+
+    const loadPageAction = useCallback((
+        action: ACTION_NAME,
+        specificPageNum: Nullable<number> = null
+    ) => {
+        const [newPageNum, anchor] = getPageNumCursorArgs(
+            action,
+            specificPageNum,
+            pageNumRef.current,
+            numPagesRef.current
+        );
+
+        if (null === newPageNum || null === anchor) {
+            console.error(`Error with page action ${action}.`);
+
+            return;
+        }
+
+        const cursor: CursorType = {
+            code: CURSOR_CODE.PAGE_NUM,
+            args: {pageNum: newPageNum, logEventAnchor: anchor},
+        };
+
+        loadPage(cursor);
+    }, [loadPage]);
 
     // Synchronize `logEventNumRef` with `logEventNum`.
     useEffect(() => {
@@ -272,29 +270,24 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
             return;
         }
 
-        const newPageNum = clamp(
-            getChunkNum(logEventNum, getConfig(CONFIG_KEY.PAGE_SIZE)),
-            1,
-            numPagesRef.current
-        );
+        const logEventNumsOnPage: number [] =
+            Array.from(beginLineNumToLogEventNumRef.current.values());
 
-        // Request a page switch only if it's not the initial page load.
-        if (STATE_DEFAULT.pageNum !== pageNumRef.current) {
-            if (newPageNum === pageNumRef.current) {
-                // Don't need to switch pages so just update `logEventNum` in the URL.
-                updateLogEventNumInUrl(numEvents, logEventNumRef.current);
-            } else {
-                // NOTE: We don't need to call `updateLogEventNumInUrl()` since it's called when
-                // handling the `WORKER_RESP_CODE.PAGE_DATA` response (the response to
-                // `WORKER_REQ_CODE.LOAD_PAGE` requests) .
-                loadPage(newPageNum);
-            }
+        // Do nothing if log event is on the current page. There is no need to update it, since
+        // it was the URL change that triggered this useEffect.
+        if (logEventNumsOnPage.includes(logEventNum)) {
+            return;
         }
 
-        pageNumRef.current = newPageNum;
+        const cursor: CursorType = {
+            code: CURSOR_CODE.EVENT_NUM,
+            args: {logEventNum: logEventNum},
+        };
+
+        loadPage(cursor);
     }, [
-        numEvents,
         logEventNum,
+        loadPage,
     ]);
 
     // On `filePath` update, load file.
@@ -305,15 +298,8 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
 
         let cursor: CursorType = {code: CURSOR_CODE.LAST_EVENT, args: null};
         if (URL_HASH_PARAMS_DEFAULT.logEventNum !== logEventNumRef.current) {
-            // Set which page to load since the user specified a specific `logEventNum`.
-            // NOTE: Since we don't know how many pages the log file contains, we only clamp the
-            // minimum of the page number.
-            const newPageNum = Math.max(
-                getChunkNum(logEventNumRef.current, getConfig(CONFIG_KEY.PAGE_SIZE)),
-                1
-            );
-
-            cursor = {code: CURSOR_CODE.PAGE_NUM, args: {pageNum: newPageNum}};
+            cursor = {code: CURSOR_CODE.EVENT_NUM,
+                args: {logEventNum: logEventNumRef.current}};
         }
         loadFile(filePath, cursor);
     }, [
@@ -334,14 +320,16 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
 
                 exportLogs: exportLogs,
                 loadFile: loadFile,
-                loadPage: loadPage,
+                loadPageAction: loadPageAction,
             }}
         >
             {children}
         </StateContext.Provider>
     );
 };
 
-
 export default StateContextProvider;
-export {StateContext};
+export {
+    STATE_DEFAULT,
+    StateContext,
+};