Separate the concern of numEvents & numFilteredEvents to correct page…

… switching in the renderer.

new-log-viewer/src/components/Layout.tsx

@@ -181,6 +181,7 @@ const Layout = () => {
     const {
         fileName,
         numEvents,
+        numFilteredEvents,
         pageNum,
 
         changeLogLevelFilter,
@@ -191,7 +192,7 @@ const Layout = () => {
     const [selectedLogLevels, setSelectedLogLevels] =
         useState<number[]>(LOG_LEVEL_NAMES_LIST as number[]);
     const logEventNumRef = useRef<Nullable<number>>(logEventNum);
-    const numEventsRef = useRef<Nullable<number>>(numEvents);
+    const numFilteredEventsRef = useRef<Nullable<number>>(numFilteredEvents);
 
     const handleCopyLinkButtonClick = () => {
         copyPermalinkToClipboard({}, {logEventNum: numEvents});
@@ -243,7 +244,7 @@ const Layout = () => {
                 }
                 break;
             case ACTION_NAME.LAST_PAGE:
-                updateWindowUrlHashParams({logEventNum: numEventsRef.current});
+                updateWindowUrlHashParams({logEventNum: numFilteredEventsRef.current});
                 break;
             case ACTION_NAME.PAGE_TOP:
                 goToPositionAndCenter(editor, {lineNumber: 1, column: 1});
@@ -265,10 +266,10 @@ const Layout = () => {
         logEventNumRef.current = logEventNum;
     }, [logEventNum]);
 
-    // Synchronize `numEventsRef` with `numEvents`.
+    // Synchronize `numFilteredEventsRef` with `numFilteredEvents`.
     useEffect(() => {
-        numEventsRef.current = numEvents;
-    }, [numEvents]);
+        numFilteredEventsRef.current = numFilteredEvents;
+    }, [numFilteredEvents]);
 
     return (
         <>
@@ -282,8 +283,9 @@ const Layout = () => {
                             1 :
                             logEventNum}
                         onChange={handleLogEventNumInputChange}/>
-                    {" "}
-                    |
+                    {" / "}
+                    {numFilteredEvents}
+                    {"  | "}
                     PageNum -
                     {" "}
                     {pageNum}

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

@@ -40,6 +40,7 @@ interface StateContextType {
     fileName: string,
     logData: string,
     logLevelFilter: LogLevelFilter,
+    numFilteredEvents: number,
     numEvents: number,
     numPages: number,
     pageNum: Nullable<number>,
@@ -57,6 +58,7 @@ const STATE_DEFAULT: Readonly<StateContextType> = Object.freeze({
     fileName: "",
     logData: "Loading...",
     logLevelFilter: null,
+    numFilteredEvents: 0,
     numEvents: 0,
     numPages: 0,
     pageNum: 0,
@@ -137,6 +139,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     const [fileName, setFileName] = useState<string>(STATE_DEFAULT.fileName);
     const [logData, setLogData] = useState<string>(STATE_DEFAULT.logData);
     const [numEvents, setNumEvents] = useState<number>(STATE_DEFAULT.numEvents);
+    const [numFilteredEvents, setNumFilteredEvents] = useState<number>(STATE_DEFAULT.numFilteredEvents);
     const beginLineNumToLogEventNumRef =
         useRef<BeginLineNumToLogEventNumMap>(STATE_DEFAULT.beginLineNumToLogEventNum);
     const logEventNumRef = useRef(logEventNum);
@@ -154,18 +157,21 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 setFileName(args.fileName);
                 setNumEvents(args.numEvents);
                 break;
+            case WORKER_RESP_CODE.NOTIFICATION:
+                // eslint-disable-next-line no-warning-comments
+                // TODO: notifications should be shown in the UI when the NotificationProvider
+                //  is added
+                console.error(args.logLevel, args.message);
+                break;
             case WORKER_RESP_CODE.PAGE_DATA: {
                 setLogData(args.logs);
                 beginLineNumToLogEventNumRef.current = args.beginLineNumToLogEventNum;
                 const lastLogEventNum = getLastLogEventNum(args.beginLineNumToLogEventNum);
                 updateLogEventNumInUrl(lastLogEventNum, logEventNumRef.current);
                 break;
             }
-            case WORKER_RESP_CODE.NOTIFICATION:
-                // eslint-disable-next-line no-warning-comments
-                // TODO: notifications should be shown in the UI when the NotificationProvider
-                //  is added
-                console.error(args.logLevel, args.message);
+            case WORKER_RESP_CODE.VIEW_INFO:
+                setNumFilteredEvents(args.numFilteredEvents);
                 break;
             default:
                 console.error(`Unexpected ev.data: ${JSON.stringify(ev.data)}`);
@@ -215,12 +221,12 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
 
     // On `numEvents` update, recalculate `numPagesRef`.
     useEffect(() => {
-        if (STATE_DEFAULT.numEvents === numEvents) {
+        if (STATE_DEFAULT.numFilteredEvents === numFilteredEvents) {
             return;
         }
 
-        numPagesRef.current = getChunkNum(numEvents, getConfig(CONFIG_KEY.PAGE_SIZE));
-    }, [numEvents]);
+        numPagesRef.current = getChunkNum(numFilteredEvents, getConfig(CONFIG_KEY.PAGE_SIZE));
+    }, [numFilteredEvents]);
 
     // On `logEventNum` update, clamp it then switch page if necessary or simply update the URL.
     useEffect(() => {
@@ -238,7 +244,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         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);
+                updateLogEventNumInUrl(numFilteredEvents, 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
@@ -255,7 +261,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
 
         pageNumRef.current = newPageNum;
     }, [
-        numEvents,
+        numFilteredEvents,
         logEventNum,
     ]);
 
@@ -290,6 +296,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 fileName: fileName,
                 logData: logData,
                 logLevelFilter: logLevelFilterRef.current,
+                numFilteredEvents: numFilteredEvents,
                 numEvents: numEvents,
                 numPages: numPagesRef.current,
                 pageNum: pageNumRef.current,

new-log-viewer/src/services/LogFileManager.ts

@@ -97,6 +97,10 @@ class LogFileManager {
         return this.#numEvents;
     }
 
+    get numFilteredEvents () {
+        return this.#numFilteredEvents;
+    }
+
     /**
      * Creates a new LogFileManager.
      *

new-log-viewer/src/services/MainWorker.ts

@@ -52,6 +52,9 @@ onmessage = async (ev: MessageEvent<MainWorkerReqMessage>) => {
                     fileName: LOG_FILE_MANAGER.fileName,
                     numEvents: LOG_FILE_MANAGER.numEvents,
                 });
+                postResp(WORKER_RESP_CODE.VIEW_INFO, {
+                    numFilteredEvents: LOG_FILE_MANAGER.numFilteredEvents,
+                });
                 postResp(
                     WORKER_RESP_CODE.PAGE_DATA,
                     LOG_FILE_MANAGER.loadPage(args.cursor)
@@ -64,6 +67,9 @@ onmessage = async (ev: MessageEvent<MainWorkerReqMessage>) => {
                 }
                 if ("undefined" !== typeof args.decoderOptions) {
                     LOG_FILE_MANAGER.setDecoderOptions(args.decoderOptions);
+                    postResp(WORKER_RESP_CODE.VIEW_INFO, {
+                        numFilteredEvents: LOG_FILE_MANAGER.numFilteredEvents,
+                    });
                 }
                 postResp(
                     WORKER_RESP_CODE.PAGE_DATA,

new-log-viewer/src/typings/worker.ts

@@ -43,9 +43,10 @@ enum WORKER_REQ_CODE {
 }
 
 enum WORKER_RESP_CODE {
-    LOG_FILE_INFO = "fileInfo",
-    PAGE_DATA = "pageData",
+    LOG_FILE_INFO = "logFileInfo",
     NOTIFICATION = "notification",
+    PAGE_DATA = "pageData",
+    VIEW_INFO = "viewInfo",
 }
 
 type WorkerReqMap = {
@@ -66,15 +67,18 @@ type WorkerRespMap = {
         fileName: string,
         numEvents: number,
     },
+    [WORKER_RESP_CODE.NOTIFICATION]: {
+        logLevel: LOG_LEVEL,
+        message: string,
+    },
     [WORKER_RESP_CODE.PAGE_DATA]: {
         logs: string,
         beginLineNumToLogEventNum: BeginLineNumToLogEventNumMap,
-        cursorLineNum: number
-    },
-    [WORKER_RESP_CODE.NOTIFICATION]: {
-        logLevel: LOG_LEVEL,
-        message: string
+        cursorLineNum: number,
     },
+    [WORKER_RESP_CODE.VIEW_INFO]: {
+        numFilteredEvents: number,
+    }
 };
 
 type WorkerReq<T extends WORKER_REQ_CODE> = T extends keyof WorkerReqMap ?