From 9c7ad681e946535ea55ba9fb3e2fe6204ec1f2d4 Mon Sep 17 00:00:00 2001
From: Junhao Liao <jliao8@ext.uber.com>
Date: Thu, 3 Oct 2024 10:10:54 +0800
Subject: [PATCH 01/38] Add load state for UI components.

---
 .../components/DropFileContainer/index.css    |  5 +++
 .../components/DropFileContainer/index.tsx    | 19 ++++++++---
 .../components/MenuBar/ExportLogsButton.tsx   |  8 ++---
 .../src/components/MenuBar/NavigationBar.tsx  | 34 ++++++++++++-------
 .../src/components/MenuBar/PageNumInput.tsx   |  4 ++-
 .../src/components/MenuBar/index.tsx          | 23 +++++++++++--
 .../src/components/StatusBar/index.tsx        |  4 ++-
 .../src/contexts/StateContextProvider.tsx     | 15 ++++++++
 new-log-viewer/src/typings/worker.ts          |  7 ++++
 9 files changed, 92 insertions(+), 27 deletions(-)

diff --git a/new-log-viewer/src/components/DropFileContainer/index.css b/new-log-viewer/src/components/DropFileContainer/index.css
index 6d6ca94b..2199af1f 100644
--- a/new-log-viewer/src/components/DropFileContainer/index.css
+++ b/new-log-viewer/src/components/DropFileContainer/index.css
@@ -22,6 +22,11 @@
     background-color: rgb(2 88 168 / 20%);
 }
 
+.hover-mask-loading {
+    cursor: progress;
+    background-color: rgba(168, 2, 2, 0.2);
+}
+
 .hover-message {
     z-index: var(--ylv-drop-file-container-hover-message-z-index);
 
diff --git a/new-log-viewer/src/components/DropFileContainer/index.tsx b/new-log-viewer/src/components/DropFileContainer/index.tsx
index a355c9e8..06c8c398 100644
--- a/new-log-viewer/src/components/DropFileContainer/index.tsx
+++ b/new-log-viewer/src/components/DropFileContainer/index.tsx
@@ -4,7 +4,10 @@ import React, {
 } from "react";
 
 import {StateContext} from "../../contexts/StateContextProvider";
-import {CURSOR_CODE} from "../../typings/worker";
+import {
+    CURSOR_CODE,
+    LOAD_STATE,
+} from "../../typings/worker";
 
 import "./index.css";
 
@@ -21,7 +24,7 @@ interface DropFileContextProviderProps {
  * @return
  */
 const DropFileContainer = ({children}: DropFileContextProviderProps) => {
-    const {loadFile} = useContext(StateContext);
+    const {loadFile, loadState} = useContext(StateContext);
     const [isFileHovering, setIsFileHovering] = useState(false);
 
     const handleDrag = (ev: React.DragEvent<HTMLDivElement>) => {
@@ -52,7 +55,9 @@ const DropFileContainer = ({children}: DropFileContextProviderProps) => {
         ev.stopPropagation();
 
         setIsFileHovering(false);
-
+        if (loadState === LOAD_STATE.LOADING) {
+            return;
+        }
         const [file] = ev.dataTransfer.files;
         if ("undefined" === typeof file) {
             console.warn("No file dropped.");
@@ -77,14 +82,18 @@ const DropFileContainer = ({children}: DropFileContextProviderProps) => {
                 {children}
                 {isFileHovering && (
                     <div
-                        className={"hover-mask"}
+                        className={`hover-mask${loadState === LOAD_STATE.LOADING ?
+                            " hover-mask-loading" :
+                            ""}`}
                         onDrop={handleDrop}
                     >
                         <div
                             className={"hover-message"}
                             onDrop={handleDrop}
                         >
-                            Drop file to view
+                            {loadState === LOAD_STATE.LOADING ?
+                                "Loading in progress" :
+                                "Drop file to view"}
                         </div>
                     </div>
                 )}
diff --git a/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx b/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx
index 5d998e8d..60bb3833 100644
--- a/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx
+++ b/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx
@@ -12,6 +12,7 @@ import {
     EXPORT_LOG_PROGRESS_VALUE_MAX,
     EXPORT_LOG_PROGRESS_VALUE_MIN,
 } from "../../services/LogExportManager";
+import {LOAD_STATE} from "../../typings/worker";
 import SmallIconButton from "./SmallIconButton";
 
 
@@ -21,16 +22,13 @@ import SmallIconButton from "./SmallIconButton";
  * @return
  */
 const ExportLogsButton = () => {
-    const {exportLogs, exportProgress, fileName} = useContext(StateContext);
+    const {exportLogs, exportProgress, loadState} = useContext(StateContext);
 
     return (
         <SmallIconButton
             disabled={
-                // eslint-disable-next-line no-warning-comments
-                // TODO: Replace `"" === fileName` with a more specific context variable that
-                // indicates whether the file has been loaded.
                 (null !== exportProgress && EXPORT_LOG_PROGRESS_VALUE_MAX !== exportProgress) ||
-                    "" === fileName
+                loadState === LOAD_STATE.UNOPENED || loadState === LOAD_STATE.LOADING
             }
             onClick={exportLogs}
         >
diff --git a/new-log-viewer/src/components/MenuBar/NavigationBar.tsx b/new-log-viewer/src/components/MenuBar/NavigationBar.tsx
index da050839..10671c20 100644
--- a/new-log-viewer/src/components/MenuBar/NavigationBar.tsx
+++ b/new-log-viewer/src/components/MenuBar/NavigationBar.tsx
@@ -1,14 +1,19 @@
 import React, {useContext} from "react";
 
+import {
+    ButtonGroup,
+    IconButton,
+} from "@mui/joy";
+
 import NavigateBefore from "@mui/icons-material/NavigateBefore";
 import NavigateNext from "@mui/icons-material/NavigateNext";
 import SkipNext from "@mui/icons-material/SkipNext";
 import SkipPrevious from "@mui/icons-material/SkipPrevious";
 
 import {StateContext} from "../../contexts/StateContextProvider";
+import {LOAD_STATE} from "../../typings/worker";
 import {ACTION_NAME} from "../../utils/actions";
 import PageNumInput from "./PageNumInput";
-import SmallIconButton from "./SmallIconButton";
 
 
 /**
@@ -17,7 +22,7 @@ import SmallIconButton from "./SmallIconButton";
  * @return
  */
 const NavigationBar = () => {
-    const {loadPageByAction} = useContext(StateContext);
+    const {loadState, loadPageByAction} = useContext(StateContext);
 
     const handleNavButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
         const {actionName} = event.currentTarget.dataset;
@@ -34,35 +39,40 @@ const NavigationBar = () => {
     };
 
     return (
-        <>
-            <SmallIconButton
+        <ButtonGroup
+            disabled={loadState !== LOAD_STATE.READY}
+            size={"sm"}
+            spacing={0.01}
+            variant={"plain"}
+        >
+            <IconButton
                 data-action-name={ACTION_NAME.FIRST_PAGE}
                 onClick={handleNavButtonClick}
             >
                 <SkipPrevious/>
-            </SmallIconButton>
-            <SmallIconButton
+            </IconButton>
+            <IconButton
                 data-action-name={ACTION_NAME.PREV_PAGE}
                 onClick={handleNavButtonClick}
             >
                 <NavigateBefore/>
-            </SmallIconButton>
+            </IconButton>
 
             <PageNumInput/>
 
-            <SmallIconButton
+            <IconButton
                 data-action-name={ACTION_NAME.NEXT_PAGE}
                 onClick={handleNavButtonClick}
             >
                 <NavigateNext/>
-            </SmallIconButton>
-            <SmallIconButton
+            </IconButton>
+            <IconButton
                 data-action-name={ACTION_NAME.LAST_PAGE}
                 onClick={handleNavButtonClick}
             >
                 <SkipNext/>
-            </SmallIconButton>
-        </>
+            </IconButton>
+        </ButtonGroup>
     );
 };
 
diff --git a/new-log-viewer/src/components/MenuBar/PageNumInput.tsx b/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
index cf37059a..f4f37194 100644
--- a/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
+++ b/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 {LOAD_STATE} from "../../typings/worker";
 import {ACTION_NAME} from "../../utils/actions";
 
 import "./PageNumInput.css";
@@ -23,7 +24,7 @@ const PAGE_NUM_INPUT_FIT_EXTRA_WIDTH = 2;
  * @return
  */
 const PageNumInput = () => {
-    const {loadPageByAction, numPages, pageNum} = useContext(StateContext);
+    const {loadState, loadPageByAction, numPages, pageNum} = useContext(StateContext);
 
     const [isEditing, setIsEditing] = useState<boolean>(false);
     const inputRef = useRef<HTMLInputElement>(null);
@@ -79,6 +80,7 @@ const PageNumInput = () => {
         >
             <Input
                 className={"page-num-input"}
+                disabled={loadState !== LOAD_STATE.READY}
                 size={"sm"}
                 slotProps={{input: {ref: inputRef}}}
                 type={"number"}
diff --git a/new-log-viewer/src/components/MenuBar/index.tsx b/new-log-viewer/src/components/MenuBar/index.tsx
index e2a21487..06994c92 100644
--- a/new-log-viewer/src/components/MenuBar/index.tsx
+++ b/new-log-viewer/src/components/MenuBar/index.tsx
@@ -5,6 +5,7 @@ import {
 
 import {
     Divider,
+    LinearProgress,
     Sheet,
     Stack,
     Typography,
@@ -15,7 +16,10 @@ import FileOpenIcon from "@mui/icons-material/FileOpen";
 import SettingsIcon from "@mui/icons-material/Settings";
 
 import {StateContext} from "../../contexts/StateContextProvider";
-import {CURSOR_CODE} from "../../typings/worker";
+import {
+    CURSOR_CODE,
+    LOAD_STATE,
+} from "../../typings/worker";
 import {openFile} from "../../utils/file";
 import SettingsModal from "../modals/SettingsModal";
 import ExportLogsButton from "./ExportLogsButton";
@@ -31,7 +35,7 @@ import "./index.css";
  * @return
  */
 const MenuBar = () => {
-    const {fileName, loadFile} = useContext(StateContext);
+    const {fileName, loadState, loadFile} = useContext(StateContext);
 
     const [isSettingsModalOpen, setIsSettingsModalOpen] = useState<boolean>(false);
 
@@ -68,17 +72,30 @@ const MenuBar = () => {
                 <Divider orientation={"vertical"}/>
                 <NavigationBar/>
                 <Divider orientation={"vertical"}/>
-                <SmallIconButton onClick={handleOpenFileButtonClick}>
+                <SmallIconButton
+                    disabled={loadState === LOAD_STATE.LOADING}
+                    onClick={handleOpenFileButtonClick}
+                >
                     <FileOpenIcon/>
                 </SmallIconButton>
                 <Divider orientation={"vertical"}/>
                 <SmallIconButton
+                    disabled={loadState === LOAD_STATE.LOADING}
                     onClick={handleSettingsModalOpen}
                 >
                     <SettingsIcon/>
                 </SmallIconButton>
                 <ExportLogsButton/>
             </Sheet>
+            {loadState === LOAD_STATE.LOADING &&
+                <LinearProgress
+                    size={"sm"}
+                    sx={{
+                        "marginBottom": "-2px",
+                        "--LinearProgress-thickness": "2px",
+                        "--LinearProgress-progressThickness": "2px",
+                        "zIndex": 10,
+                    }}/>}
             <SettingsModal
                 isOpen={isSettingsModalOpen}
                 onClose={handleSettingsModalClose}/>
diff --git a/new-log-viewer/src/components/StatusBar/index.tsx b/new-log-viewer/src/components/StatusBar/index.tsx
index 1d8598f2..9e9acede 100644
--- a/new-log-viewer/src/components/StatusBar/index.tsx
+++ b/new-log-viewer/src/components/StatusBar/index.tsx
@@ -9,6 +9,7 @@ import {
     copyPermalinkToClipboard,
     UrlContext,
 } from "../../contexts/UrlContextProvider";
+import {LOAD_STATE} from "../../typings/worker";
 
 import "./index.css";
 
@@ -26,7 +27,7 @@ const handleCopyLinkButtonClick = () => {
  * @return
  */
 const StatusBar = () => {
-    const {numEvents} = useContext(StateContext);
+    const {loadState, numEvents} = useContext(StateContext);
     const {logEventNum} = useContext(UrlContext);
 
     return (
@@ -38,6 +39,7 @@ const StatusBar = () => {
                 Status message
             </Typography>
             <Button
+                disabled={loadState === LOAD_STATE.UNOPENED}
                 size={"sm"}
                 onClick={handleCopyLinkButtonClick}
             >
diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx
index bf65ca90..d3d9a853 100644
--- a/new-log-viewer/src/contexts/StateContextProvider.tsx
+++ b/new-log-viewer/src/contexts/StateContextProvider.tsx
@@ -18,6 +18,7 @@ import {
     CursorType,
     EVENT_POSITION_ON_PAGE,
     FileSrcType,
+    LOAD_STATE,
     MainWorkerRespMessage,
     WORKER_REQ_CODE,
     WORKER_RESP_CODE,
@@ -48,6 +49,7 @@ interface StateContextType {
     beginLineNumToLogEventNum: BeginLineNumToLogEventNumMap,
     fileName: string,
     exportProgress: Nullable<number>,
+    loadState: LOAD_STATE,
     logData: string,
     numEvents: number,
     numPages: number,
@@ -66,6 +68,7 @@ const STATE_DEFAULT: Readonly<StateContextType> = Object.freeze({
     beginLineNumToLogEventNum: new Map<number, number>(),
     exportProgress: null,
     fileName: "",
+    loadState: LOAD_STATE.UNOPENED,
     logData: "Loading...",
     numEvents: 0,
     numPages: 0,
@@ -184,6 +187,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
 
     // States
     const [fileName, setFileName] = useState<string>(STATE_DEFAULT.fileName);
+    const [loadState, setLoadState] = useState<LOAD_STATE>(STATE_DEFAULT.loadState);
     const [logData, setLogData] = useState<string>(STATE_DEFAULT.logData);
     const [numEvents, setNumEvents] = useState<number>(STATE_DEFAULT.numEvents);
     const beginLineNumToLogEventNumRef =
@@ -231,6 +235,14 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 console.error(`Unexpected ev.data: ${JSON.stringify(ev.data)}`);
                 break;
         }
+
+        switch (code) {
+            case WORKER_RESP_CODE.CHUNK_DATA:
+            case WORKER_RESP_CODE.PAGE_DATA:
+                setLoadState(LOAD_STATE.READY);
+                break;
+            default: break;
+        }
     }, []);
 
     const exportLogs = useCallback(() => {
@@ -261,6 +273,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     ]);
 
     const loadFile = useCallback((fileSrc: FileSrcType, cursor: CursorType) => {
+        setLoadState(LOAD_STATE.LOADING);
         if ("string" !== typeof fileSrc) {
             updateWindowUrlSearchParams({[SEARCH_PARAM_NAMES.FILE_PATH]: null});
         }
@@ -284,6 +297,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     ]);
 
     const loadPageByAction = useCallback((navAction: NavigationAction) => {
+        setLoadState(LOAD_STATE.LOADING);
         if (null === mainWorkerRef.current) {
             console.error("Unexpected null mainWorkerRef.current");
 
@@ -378,6 +392,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 beginLineNumToLogEventNum: beginLineNumToLogEventNumRef.current,
                 exportProgress: exportProgress,
                 fileName: fileName,
+                loadState: loadState,
                 logData: logData,
                 numEvents: numEvents,
                 numPages: numPagesRef.current,
diff --git a/new-log-viewer/src/typings/worker.ts b/new-log-viewer/src/typings/worker.ts
index 27e188ee..c258219a 100644
--- a/new-log-viewer/src/typings/worker.ts
+++ b/new-log-viewer/src/typings/worker.ts
@@ -2,6 +2,12 @@ import {DecoderOptionsType} from "./decoders";
 import {LOG_LEVEL} from "./logs";
 
 
+enum LOAD_STATE {
+    UNOPENED = "unopened",
+    LOADING = "loading",
+    READY = "ready",
+}
+
 /**
  * Type of input file, which can be either a URL string or a File object.
  */
@@ -118,6 +124,7 @@ type MainWorkerRespMessage = {
 export {
     CURSOR_CODE,
     EVENT_POSITION_ON_PAGE,
+    LOAD_STATE,
     WORKER_REQ_CODE,
     WORKER_RESP_CODE,
 };

From 90de51533c342fb8d9e1f70a3a2107de0baf80d6 Mon Sep 17 00:00:00 2001
From: Junhao Liao <junhao@junhao.ca>
Date: Thu, 3 Oct 2024 13:14:12 +0800
Subject: [PATCH 02/38] Refactor loading state styling in DropFileContainer.

---
 .../src/components/DropFileContainer/index.css     |  9 ++++-----
 .../src/components/DropFileContainer/index.tsx     | 14 ++++++++------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/new-log-viewer/src/components/DropFileContainer/index.css b/new-log-viewer/src/components/DropFileContainer/index.css
index 2199af1f..b7a94574 100644
--- a/new-log-viewer/src/components/DropFileContainer/index.css
+++ b/new-log-viewer/src/components/DropFileContainer/index.css
@@ -22,11 +22,6 @@
     background-color: rgb(2 88 168 / 20%);
 }
 
-.hover-mask-loading {
-    cursor: progress;
-    background-color: rgba(168, 2, 2, 0.2);
-}
-
 .hover-message {
     z-index: var(--ylv-drop-file-container-hover-message-z-index);
 
@@ -38,3 +33,7 @@
 
     background-color: #f3f3f3;
 }
+
+.hover-message-loading {
+    background-color: #fce4e4;
+}
diff --git a/new-log-viewer/src/components/DropFileContainer/index.tsx b/new-log-viewer/src/components/DropFileContainer/index.tsx
index 06c8c398..15fdb86c 100644
--- a/new-log-viewer/src/components/DropFileContainer/index.tsx
+++ b/new-log-viewer/src/components/DropFileContainer/index.tsx
@@ -67,6 +67,8 @@ const DropFileContainer = ({children}: DropFileContextProviderProps) => {
         loadFile(file, {code: CURSOR_CODE.LAST_EVENT, args: null});
     };
 
+    const isLoading = LOAD_STATE.LOADING === loadState;
+
     return (
         <div
             className={"drop-file-container"}
@@ -82,17 +84,17 @@ const DropFileContainer = ({children}: DropFileContextProviderProps) => {
                 {children}
                 {isFileHovering && (
                     <div
-                        className={`hover-mask${loadState === LOAD_STATE.LOADING ?
-                            " hover-mask-loading" :
-                            ""}`}
+                        className={"hover-mask"}
                         onDrop={handleDrop}
                     >
                         <div
-                            className={"hover-message"}
+                            className={`hover-message ${isLoading ?
+                                "hover-message-loading" :
+                                ""}`}
                             onDrop={handleDrop}
                         >
-                            {loadState === LOAD_STATE.LOADING ?
-                                "Loading in progress" :
+                            {isLoading ?
+                                "Drop is disabled during loading" :
                                 "Drop file to view"}
                         </div>
                     </div>

From 6795933f8e527bd25f30a843101b14cc2aa21b55 Mon Sep 17 00:00:00 2001
From: Junhao Liao <junhao@junhao.ca>
Date: Thu, 3 Oct 2024 13:15:38 +0800
Subject: [PATCH 03/38] Refactor the loading state check to use a constant
 `isLoading` variable instead of repeating the comparison logic.

---
 new-log-viewer/src/components/MenuBar/index.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/new-log-viewer/src/components/MenuBar/index.tsx b/new-log-viewer/src/components/MenuBar/index.tsx
index 06994c92..ea400934 100644
--- a/new-log-viewer/src/components/MenuBar/index.tsx
+++ b/new-log-viewer/src/components/MenuBar/index.tsx
@@ -53,6 +53,8 @@ const MenuBar = () => {
         setIsSettingsModalOpen(true);
     };
 
+    const isLoading = LOAD_STATE.LOADING === loadState;
+
     return (
         <>
             <Sheet className={"menu-bar"}>
@@ -73,21 +75,21 @@ const MenuBar = () => {
                 <NavigationBar/>
                 <Divider orientation={"vertical"}/>
                 <SmallIconButton
-                    disabled={loadState === LOAD_STATE.LOADING}
+                    disabled={isLoading}
                     onClick={handleOpenFileButtonClick}
                 >
                     <FileOpenIcon/>
                 </SmallIconButton>
                 <Divider orientation={"vertical"}/>
                 <SmallIconButton
-                    disabled={loadState === LOAD_STATE.LOADING}
+                    disabled={isLoading}
                     onClick={handleSettingsModalOpen}
                 >
                     <SettingsIcon/>
                 </SmallIconButton>
                 <ExportLogsButton/>
             </Sheet>
-            {loadState === LOAD_STATE.LOADING &&
+            {isLoading &&
                 <LinearProgress
                     size={"sm"}
                     sx={{

From 59bf5921699a431b57f1843467e62adbce88b4a3 Mon Sep 17 00:00:00 2001
From: Junhao Liao <junhao@junhao.ca>
Date: Thu, 3 Oct 2024 13:18:57 +0800
Subject: [PATCH 04/38] Add docs for LOAD_STATE.

---
 new-log-viewer/src/typings/worker.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/new-log-viewer/src/typings/worker.ts b/new-log-viewer/src/typings/worker.ts
index c258219a..3fef9468 100644
--- a/new-log-viewer/src/typings/worker.ts
+++ b/new-log-viewer/src/typings/worker.ts
@@ -2,6 +2,9 @@ import {DecoderOptionsType} from "./decoders";
 import {LOG_LEVEL} from "./logs";
 
 
+/**
+ * Various states of a load process. UI elements may be enabled or disabled based on the state.
+ */
 enum LOAD_STATE {
     UNOPENED = "unopened",
     LOADING = "loading",

From 76f497f2fe42bd237b4ba379152859cb371341a5 Mon Sep 17 00:00:00 2001
From: Junhao Liao <junhao@junhao.ca>
Date: Thu, 3 Oct 2024 13:25:28 +0800
Subject: [PATCH 05/38] Complete docs for LOAD_STATE.

---
 new-log-viewer/src/typings/worker.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/new-log-viewer/src/typings/worker.ts b/new-log-viewer/src/typings/worker.ts
index 3fef9468..d413f22e 100644
--- a/new-log-viewer/src/typings/worker.ts
+++ b/new-log-viewer/src/typings/worker.ts
@@ -6,8 +6,20 @@ import {LOG_LEVEL} from "./logs";
  * Various states of a load process. UI elements may be enabled or disabled based on the state.
  */
 enum LOAD_STATE {
+
+    /**
+     * When there is no file opened in the viewer.
+     */
     UNOPENED = "unopened",
+
+    /**
+     * When a request is pending response.
+     */
     LOADING = "loading",
+
+    /**
+     * When there is no pending response from any request.
+     */
     READY = "ready",
 }
 

From b9397a8dc734ce6768ab3861a391afd89785faab Mon Sep 17 00:00:00 2001
From: Junhao Liao <junhao@junhao.ca>
Date: Thu, 3 Oct 2024 17:28:16 +0800
Subject: [PATCH 06/38] Remove unreachable code in cursor navigation function.

---
 new-log-viewer/src/contexts/StateContextProvider.tsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx
index d3d9a853..c93e7e07 100644
--- a/new-log-viewer/src/contexts/StateContextProvider.tsx
+++ b/new-log-viewer/src/contexts/StateContextProvider.tsx
@@ -113,15 +113,6 @@ const getPageNumCursor = (
     currentPageNum: number,
     numPages: number
 ): Nullable<CursorType> => {
-    if (STATE_DEFAULT.pageNum === currentPageNum) {
-        // eslint-disable-next-line no-warning-comments
-        // TODO: This shouldn't be possible, but currently, the page nav buttons remain enabled
-        // even when a file hasn't been loaded.
-        console.error("Page actions cannot be executed if the current page is not set.");
-
-        return null;
-    }
-
     let newPageNum: number;
     let position: EVENT_POSITION_ON_PAGE;
     switch (navAction.code) {

From c6027e03520278dd07c284a0d62a57134b2bf249 Mon Sep 17 00:00:00 2001
From: Junhao Liao <jliao8@ext.uber.com>
Date: Sat, 12 Oct 2024 04:10:22 +0800
Subject: [PATCH 07/38] Disable log level controls during load state.

---
 .../StatusBar/LogLevelSelect/index.tsx        | 35 ++++++++++++-------
 .../src/contexts/StateContextProvider.tsx     |  1 +
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
index a4b4c380..6b3cb1c2 100644
--- a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
+++ b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
@@ -32,6 +32,7 @@ import {
     LOG_LEVEL_NAMES,
     MAX_LOG_LEVEL,
 } from "../../../typings/logs";
+import {LOAD_STATE} from "../../../typings/worker";
 import {range} from "../../../utils/data";
 import LogLevelChip from "./LogLevelChip";
 
@@ -65,9 +66,12 @@ const LogSelectOption = ({
     onCheckboxClick,
     onOptionClick,
 }: LogSelectOptionProps) => {
+    const {loadState} = useContext(StateContext);
+
     return (
         <Option
             data-value={logLevelValue}
+            disabled={loadState === LOAD_STATE.LOADING}
             key={logLevelName}
             value={logLevelValue}
             onClick={onOptionClick}
@@ -125,17 +129,22 @@ interface ClearFiltersOptionProps {
  * @param props.onClick
  * @return
  */
-const ClearFiltersOption = ({onClick}: ClearFiltersOptionProps) => (
-    <Option
-        value={INVALID_LOG_LEVEL_VALUE}
-        onClick={onClick}
-    >
-        <ListItemDecorator>
-            <CloseIcon/>
-        </ListItemDecorator>
-        Clear filters
-    </Option>
-);
+const ClearFiltersOption = ({onClick}: ClearFiltersOptionProps) => {
+    const {loadState} = useContext(StateContext);
+
+    return (
+        <Option
+            disabled={LOAD_STATE.LOADING === loadState}
+            value={INVALID_LOG_LEVEL_VALUE}
+            onClick={onClick}
+        >
+            <ListItemDecorator>
+                <CloseIcon/>
+            </ListItemDecorator>
+            Clear filters
+        </Option>
+    );
+};
 
 /**
  * Renders a dropdown box for selecting log levels.
@@ -143,8 +152,9 @@ const ClearFiltersOption = ({onClick}: ClearFiltersOptionProps) => (
  * @return
  */
 const LogLevelSelect = () => {
+    const {loadState, setLogLevelFilter} = useContext(StateContext);
+
     const [selectedLogLevels, setSelectedLogLevels] = useState<LOG_LEVEL[]>([]);
-    const {setLogLevelFilter} = useContext(StateContext);
 
     const handleRenderValue = (selected: SelectValue<SelectOption<LOG_LEVEL>, true>) => (
         <Box className={"log-level-select-render-value-box"}>
@@ -206,6 +216,7 @@ const LogLevelSelect = () => {
     return (
         <Select
             className={"log-level-select"}
+            disabled={loadState === LOAD_STATE.LOADING}
             multiple={true}
             renderValue={handleRenderValue}
             size={"sm"}
diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx
index 4f87e431..f0b8028b 100644
--- a/new-log-viewer/src/contexts/StateContextProvider.tsx
+++ b/new-log-viewer/src/contexts/StateContextProvider.tsx
@@ -356,6 +356,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     }, []);
 
     const setLogLevelFilter = useCallback((newLogLevelFilter: LogLevelFilter) => {
+        setLoadState(LOAD_STATE.LOADING);
         if (null === mainWorkerRef.current) {
             return;
         }

From 79b5113bd931603c4764b6bfd2ca58115e4325fc Mon Sep 17 00:00:00 2001
From: Junhao Liao <jliao8@ext.uber.com>
Date: Sat, 12 Oct 2024 04:20:57 +0800
Subject: [PATCH 08/38] Prevent log level selection when log file is unopened;
 allow the log level select to expand even when no file is loaded.

---
 .../src/components/StatusBar/LogLevelSelect/index.tsx       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
index 6b3cb1c2..865fbd98 100644
--- a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
+++ b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
@@ -71,7 +71,7 @@ const LogSelectOption = ({
     return (
         <Option
             data-value={logLevelValue}
-            disabled={loadState === LOAD_STATE.LOADING}
+            disabled={LOAD_STATE.LOADING === loadState || LOAD_STATE.UNOPENED === loadState}
             key={logLevelName}
             value={logLevelValue}
             onClick={onOptionClick}
@@ -134,7 +134,7 @@ const ClearFiltersOption = ({onClick}: ClearFiltersOptionProps) => {
 
     return (
         <Option
-            disabled={LOAD_STATE.LOADING === loadState}
+            disabled={LOAD_STATE.LOADING === loadState || LOAD_STATE.UNOPENED === loadState}
             value={INVALID_LOG_LEVEL_VALUE}
             onClick={onClick}
         >
@@ -216,7 +216,6 @@ const LogLevelSelect = () => {
     return (
         <Select
             className={"log-level-select"}
-            disabled={loadState === LOAD_STATE.LOADING}
             multiple={true}
             renderValue={handleRenderValue}
             size={"sm"}
@@ -226,6 +225,7 @@ const LogLevelSelect = () => {
                 <KeyboardArrowUpIcon/> :
                 <Tooltip title={"Clear filters"}>
                     <IconButton
+                        disabled={LOAD_STATE.LOADING === loadState}
                         variant={"plain"}
                         onClick={handleSelectClearButtonClick}
                     >

From 60aadbf224998ec678a051821365aa06578c0924 Mon Sep 17 00:00:00 2001
From: Junhao Liao <jliao8@ext.uber.com>
Date: Sat, 12 Oct 2024 04:21:32 +0800
Subject: [PATCH 09/38] Do not change load state when the worker isn't created.

---
 new-log-viewer/src/contexts/StateContextProvider.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx
index f0b8028b..636cd8b2 100644
--- a/new-log-viewer/src/contexts/StateContextProvider.tsx
+++ b/new-log-viewer/src/contexts/StateContextProvider.tsx
@@ -340,12 +340,13 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     ]);
 
     const loadPageByAction = useCallback((navAction: NavigationAction) => {
-        setLoadState(LOAD_STATE.LOADING);
         if (null === mainWorkerRef.current) {
             console.error("Unexpected null mainWorkerRef.current");
 
             return;
         }
+        setLoadState(LOAD_STATE.LOADING);
+
         const cursor = getPageNumCursor(navAction, pageNumRef.current, numPagesRef.current);
         if (null === cursor) {
             console.error(`Error with nav action ${navAction.code}.`);
@@ -356,10 +357,10 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     }, []);
 
     const setLogLevelFilter = useCallback((newLogLevelFilter: LogLevelFilter) => {
-        setLoadState(LOAD_STATE.LOADING);
         if (null === mainWorkerRef.current) {
             return;
         }
+        setLoadState(LOAD_STATE.LOADING);
 
         workerPostReq(mainWorkerRef.current, WORKER_REQ_CODE.SET_FILTER, {
             cursor: {code: CURSOR_CODE.EVENT_NUM, args: {eventNum: logEventNumRef.current ?? 1}},

From 70e96dfaeb4dd155c6021673af69b1f9be74e124 Mon Sep 17 00:00:00 2001
From: Junhao Liao <jliao8@ext.uber.com>
Date: Sat, 12 Oct 2024 04:26:45 +0800
Subject: [PATCH 10/38] Refactor loading progress styles in MenuBar component.

---
 new-log-viewer/src/components/MenuBar/index.css | 10 ++++++++++
 new-log-viewer/src/components/MenuBar/index.tsx |  9 ++-------
 new-log-viewer/src/index.css                    |  1 +
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/new-log-viewer/src/components/MenuBar/index.css b/new-log-viewer/src/components/MenuBar/index.css
index 08fe4c66..71e61d35 100644
--- a/new-log-viewer/src/components/MenuBar/index.css
+++ b/new-log-viewer/src/components/MenuBar/index.css
@@ -26,3 +26,13 @@
     flex-grow: 1;
     padding-left: 10px;
 }
+
+.menu-bar-loading-progress {
+    /* stylelint-disable-next-line custom-property-pattern */
+    --LinearProgress-thickness: 2px !important;
+    /* stylelint-disable-next-line custom-property-pattern */
+    --LinearProgress-progressThickness: 2px !important;
+
+    z-index: var(--ylv-loading-progress-z-index);
+    margin-bottom: -2px;
+}
diff --git a/new-log-viewer/src/components/MenuBar/index.tsx b/new-log-viewer/src/components/MenuBar/index.tsx
index 4f65afa1..01053af7 100644
--- a/new-log-viewer/src/components/MenuBar/index.tsx
+++ b/new-log-viewer/src/components/MenuBar/index.tsx
@@ -81,13 +81,8 @@ const MenuBar = () => {
             </Sheet>
             {isLoading &&
                 <LinearProgress
-                    size={"sm"}
-                    sx={{
-                        "marginBottom": "-2px",
-                        "--LinearProgress-thickness": "2px",
-                        "--LinearProgress-progressThickness": "2px",
-                        "zIndex": 10,
-                    }}/>}
+                    className={"menu-bar-loading-progress"}
+                    size={"sm"}/>}
         </>
     );
 };
diff --git a/new-log-viewer/src/index.css b/new-log-viewer/src/index.css
index ecf9a72c..ebaf31ac 100644
--- a/new-log-viewer/src/index.css
+++ b/new-log-viewer/src/index.css
@@ -30,6 +30,7 @@ html {
     --ylv-resize-handle-z-index: 1;
     --ylv-menu-bar-z-index: 6;
     --ylv-status-bar-z-index: 6;
+    --ylv-loading-progress-z-index: 9;
     --ylv-drop-file-container-hover-mask-z-index: 10;
     --ylv-drop-file-container-hover-message-z-index: 11;
 }

From 61e35db8e1da700a352d740a7f255e74182b7a2e Mon Sep 17 00:00:00 2001
From: Dave Marco <marcovitch.david@gmail.com>
Date: Sat, 12 Oct 2024 02:00:24 +0000
Subject: [PATCH 11/38] collapse state space

---
 .../src/components/DropFileContainer/index.tsx   | 16 ----------------
 .../src/components/MenuBar/ExportLogsButton.tsx  |  2 +-
 .../src/components/MenuBar/PageNumInput.tsx      |  1 +
 new-log-viewer/src/components/MenuBar/index.tsx  |  1 -
 .../StatusBar/LogLevelSelect/index.tsx           | 12 +++++-------
 .../src/components/StatusBar/index.tsx           |  4 ++--
 .../src/contexts/StateContextProvider.tsx        |  2 --
 7 files changed, 9 insertions(+), 29 deletions(-)

diff --git a/new-log-viewer/src/components/DropFileContainer/index.tsx b/new-log-viewer/src/components/DropFileContainer/index.tsx
index 45023469..bc512ebf 100644
--- a/new-log-viewer/src/components/DropFileContainer/index.tsx
+++ b/new-log-viewer/src/components/DropFileContainer/index.tsx
@@ -6,7 +6,6 @@ import React, {
 import {StateContext} from "../../contexts/StateContextProvider";
 import {
     CURSOR_CODE,
-    LOAD_STATE,
 } from "../../typings/worker";
 
 import "./index.css";
@@ -55,9 +54,6 @@ const DropFileContainer = ({children}: DropFileContextProviderProps) => {
         ev.stopPropagation();
 
         setIsFileHovering(false);
-        if (loadState === LOAD_STATE.LOADING) {
-            return;
-        }
         const [file] = ev.dataTransfer.files;
         if ("undefined" === typeof file) {
             console.warn("No file dropped.");
@@ -67,8 +63,6 @@ const DropFileContainer = ({children}: DropFileContextProviderProps) => {
         loadFile(file, {code: CURSOR_CODE.LAST_EVENT, args: null});
     };
 
-    const isLoading = LOAD_STATE.LOADING === loadState;
-
     return (
         <div
             className={"drop-file-container"}
@@ -84,16 +78,6 @@ const DropFileContainer = ({children}: DropFileContextProviderProps) => {
                         className={"hover-mask"}
                         onDrop={handleDrop}
                     >
-                        <div
-                            className={`hover-message ${isLoading ?
-                                "hover-message-loading" :
-                                ""}`}
-                            onDrop={handleDrop}
-                        >
-                            {isLoading ?
-                                "Drop is disabled during loading" :
-                                "Drop file to view"}
-                        </div>
                     </div>
                 )}
             </div>
diff --git a/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx b/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx
index 60bb3833..d91e9c6e 100644
--- a/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx
+++ b/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx
@@ -28,7 +28,7 @@ const ExportLogsButton = () => {
         <SmallIconButton
             disabled={
                 (null !== exportProgress && EXPORT_LOG_PROGRESS_VALUE_MAX !== exportProgress) ||
-                loadState === LOAD_STATE.UNOPENED || loadState === LOAD_STATE.LOADING
+                loadState !== LOAD_STATE.READY
             }
             onClick={exportLogs}
         >
diff --git a/new-log-viewer/src/components/MenuBar/PageNumInput.tsx b/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
index f4f37194..8f4c09bf 100644
--- a/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
+++ b/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
@@ -88,6 +88,7 @@ const PageNumInput = () => {
                     <Typography
                         className={"page-num-input-num-pages-text"}
                         level={"body-md"}
+                        sx={loadState !== LOAD_STATE.READY ? { color: 'neutral.plainDisabledColor' } : {}}
                     >
                         {"/ "}
                         {numPages}
diff --git a/new-log-viewer/src/components/MenuBar/index.tsx b/new-log-viewer/src/components/MenuBar/index.tsx
index 01053af7..39965e9c 100644
--- a/new-log-viewer/src/components/MenuBar/index.tsx
+++ b/new-log-viewer/src/components/MenuBar/index.tsx
@@ -57,7 +57,6 @@ const MenuBar = () => {
                     variant={"outlined"}
                 >
                     <IconButton
-                        disabled={isLoading}
                         size={"sm"}
                         onClick={handleOpenFile}
                     >
diff --git a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
index 865fbd98..ed6efead 100644
--- a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
+++ b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
@@ -66,12 +66,9 @@ const LogSelectOption = ({
     onCheckboxClick,
     onOptionClick,
 }: LogSelectOptionProps) => {
-    const {loadState} = useContext(StateContext);
-
     return (
         <Option
             data-value={logLevelValue}
-            disabled={LOAD_STATE.LOADING === loadState || LOAD_STATE.UNOPENED === loadState}
             key={logLevelName}
             value={logLevelValue}
             onClick={onOptionClick}
@@ -130,11 +127,9 @@ interface ClearFiltersOptionProps {
  * @return
  */
 const ClearFiltersOption = ({onClick}: ClearFiltersOptionProps) => {
-    const {loadState} = useContext(StateContext);
 
     return (
         <Option
-            disabled={LOAD_STATE.LOADING === loadState || LOAD_STATE.UNOPENED === loadState}
             value={INVALID_LOG_LEVEL_VALUE}
             onClick={onClick}
         >
@@ -221,11 +216,11 @@ const LogLevelSelect = () => {
             size={"sm"}
             value={selectedLogLevels}
             variant={"soft"}
+            disabled = {LOAD_STATE.READY !== loadState}
             indicator={0 === selectedLogLevels.length ?
                 <KeyboardArrowUpIcon/> :
                 <Tooltip title={"Clear filters"}>
                     <IconButton
-                        disabled={LOAD_STATE.LOADING === loadState}
                         variant={"plain"}
                         onClick={handleSelectClearButtonClick}
                     >
@@ -233,7 +228,10 @@ const LogLevelSelect = () => {
                     </IconButton>
                 </Tooltip>}
             placeholder={
-                <Chip className={"log-level-select-render-value-box-label"}>
+                <Chip
+                    className={"log-level-select-render-value-box-label"}
+                    sx={loadState !== LOAD_STATE.READY ? { color: 'neutral.plainDisabledColor' } : {}}
+                >
                     Log Level
                 </Chip>
             }
diff --git a/new-log-viewer/src/components/StatusBar/index.tsx b/new-log-viewer/src/components/StatusBar/index.tsx
index b54e8a68..436950fd 100644
--- a/new-log-viewer/src/components/StatusBar/index.tsx
+++ b/new-log-viewer/src/components/StatusBar/index.tsx
@@ -41,11 +41,11 @@ const StatusBar = () => {
             </Typography>
             <Button
                 color={"primary"}
-                disabled={loadState === LOAD_STATE.UNOPENED}
+                disabled={loadState !== LOAD_STATE.READY}
                 size={"sm"}
                 variant={"soft"}
                 onClick={handleCopyLinkButtonClick}
-            >
+            > 
                 {"Log Event "}
                 {logEventNum}
                 {" / "}
diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx
index 636cd8b2..b3145eed 100644
--- a/new-log-viewer/src/contexts/StateContextProvider.tsx
+++ b/new-log-viewer/src/contexts/StateContextProvider.tsx
@@ -345,7 +345,6 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
 
             return;
         }
-        setLoadState(LOAD_STATE.LOADING);
 
         const cursor = getPageNumCursor(navAction, pageNumRef.current, numPagesRef.current);
         if (null === cursor) {
@@ -360,7 +359,6 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         if (null === mainWorkerRef.current) {
             return;
         }
-        setLoadState(LOAD_STATE.LOADING);
 
         workerPostReq(mainWorkerRef.current, WORKER_REQ_CODE.SET_FILTER, {
             cursor: {code: CURSOR_CODE.EVENT_NUM, args: {eventNum: logEventNumRef.current ?? 1}},

From e9b3a7c69cfae7203b7800170848fbb1534a162c Mon Sep 17 00:00:00 2001
From: Dave Marco <marcovitch.david@gmail.com>
Date: Sat, 12 Oct 2024 02:08:46 +0000
Subject: [PATCH 12/38] small cleanup

---
 .../src/components/DropFileContainer/index.tsx       | 12 ++++++++----
 new-log-viewer/src/contexts/StateContextProvider.tsx |  9 +--------
 new-log-viewer/src/typings/worker.ts                 |  4 ++--
 3 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/new-log-viewer/src/components/DropFileContainer/index.tsx b/new-log-viewer/src/components/DropFileContainer/index.tsx
index bc512ebf..bb6ba89a 100644
--- a/new-log-viewer/src/components/DropFileContainer/index.tsx
+++ b/new-log-viewer/src/components/DropFileContainer/index.tsx
@@ -4,9 +4,7 @@ import React, {
 } from "react";
 
 import {StateContext} from "../../contexts/StateContextProvider";
-import {
-    CURSOR_CODE,
-} from "../../typings/worker";
+import {CURSOR_CODE} from "../../typings/worker";
 
 import "./index.css";
 
@@ -23,7 +21,7 @@ interface DropFileContextProviderProps {
  * @return
  */
 const DropFileContainer = ({children}: DropFileContextProviderProps) => {
-    const {loadFile, loadState} = useContext(StateContext);
+    const {loadFile} = useContext(StateContext);
     const [isFileHovering, setIsFileHovering] = useState(false);
 
     const handleDrag = (ev: React.DragEvent<HTMLDivElement>) => {
@@ -78,6 +76,12 @@ const DropFileContainer = ({children}: DropFileContextProviderProps) => {
                         className={"hover-mask"}
                         onDrop={handleDrop}
                     >
+                        <div
+                            className={"hover-message"}
+                            onDrop={handleDrop}
+                        >
+                            Drop file to view
+                        </div>
                     </div>
                 )}
             </div>
diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx
index b3145eed..f1df1d4e 100644
--- a/new-log-viewer/src/contexts/StateContextProvider.tsx
+++ b/new-log-viewer/src/contexts/StateContextProvider.tsx
@@ -269,20 +269,13 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 updateWindowUrlHashParams({
                     logEventNum: args.logEventNum,
                 });
+                setLoadState(LOAD_STATE.READY);
                 break;
             }
             default:
                 console.error(`Unexpected ev.data: ${JSON.stringify(ev.data)}`);
                 break;
         }
-
-        switch (code) {
-            case WORKER_RESP_CODE.CHUNK_DATA:
-            case WORKER_RESP_CODE.PAGE_DATA:
-                setLoadState(LOAD_STATE.READY);
-                break;
-            default: break;
-        }
     }, []);
 
     const exportLogs = useCallback(() => {
diff --git a/new-log-viewer/src/typings/worker.ts b/new-log-viewer/src/typings/worker.ts
index 1b694c00..3141e38c 100644
--- a/new-log-viewer/src/typings/worker.ts
+++ b/new-log-viewer/src/typings/worker.ts
@@ -20,12 +20,12 @@ enum LOAD_STATE {
     UNOPENED = "unopened",
 
     /**
-     * When a request is pending response.
+     * When a file load request is pending response.
      */
     LOADING = "loading",
 
     /**
-     * When there is no pending response from any request.
+     * When the file is loaded from any request.
      */
     READY = "ready",
 }

From 119cde102bab1f328f196b8424f42e2b5e17b699 Mon Sep 17 00:00:00 2001
From: Dave Marco <marcovitch.david@gmail.com>
Date: Sat, 12 Oct 2024 02:12:57 +0000
Subject: [PATCH 13/38] fix lint

---
 new-log-viewer/src/components/DropFileContainer/index.tsx  | 1 +
 new-log-viewer/src/components/MenuBar/PageNumInput.tsx     | 4 +++-
 .../src/components/StatusBar/LogLevelSelect/index.tsx      | 7 ++++---
 new-log-viewer/src/components/StatusBar/index.tsx          | 2 +-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/new-log-viewer/src/components/DropFileContainer/index.tsx b/new-log-viewer/src/components/DropFileContainer/index.tsx
index bb6ba89a..f37fa6fa 100644
--- a/new-log-viewer/src/components/DropFileContainer/index.tsx
+++ b/new-log-viewer/src/components/DropFileContainer/index.tsx
@@ -52,6 +52,7 @@ const DropFileContainer = ({children}: DropFileContextProviderProps) => {
         ev.stopPropagation();
 
         setIsFileHovering(false);
+
         const [file] = ev.dataTransfer.files;
         if ("undefined" === typeof file) {
             console.warn("No file dropped.");
diff --git a/new-log-viewer/src/components/MenuBar/PageNumInput.tsx b/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
index 8f4c09bf..23470f6e 100644
--- a/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
+++ b/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
@@ -88,7 +88,9 @@ const PageNumInput = () => {
                     <Typography
                         className={"page-num-input-num-pages-text"}
                         level={"body-md"}
-                        sx={loadState !== LOAD_STATE.READY ? { color: 'neutral.plainDisabledColor' } : {}}
+                        sx={loadState !== LOAD_STATE.READY ?
+                            {color: "neutral.plainDisabledColor"} :
+                            {}}
                     >
                         {"/ "}
                         {numPages}
diff --git a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
index ed6efead..714569c9 100644
--- a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
+++ b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
@@ -127,7 +127,6 @@ interface ClearFiltersOptionProps {
  * @return
  */
 const ClearFiltersOption = ({onClick}: ClearFiltersOptionProps) => {
-
     return (
         <Option
             value={INVALID_LOG_LEVEL_VALUE}
@@ -211,12 +210,12 @@ const LogLevelSelect = () => {
     return (
         <Select
             className={"log-level-select"}
+            disabled={LOAD_STATE.READY !== loadState}
             multiple={true}
             renderValue={handleRenderValue}
             size={"sm"}
             value={selectedLogLevels}
             variant={"soft"}
-            disabled = {LOAD_STATE.READY !== loadState}
             indicator={0 === selectedLogLevels.length ?
                 <KeyboardArrowUpIcon/> :
                 <Tooltip title={"Clear filters"}>
@@ -230,7 +229,9 @@ const LogLevelSelect = () => {
             placeholder={
                 <Chip
                     className={"log-level-select-render-value-box-label"}
-                    sx={loadState !== LOAD_STATE.READY ? { color: 'neutral.plainDisabledColor' } : {}}
+                    sx={loadState !== LOAD_STATE.READY ?
+                        {color: "neutral.plainDisabledColor"} :
+                        {}}
                 >
                     Log Level
                 </Chip>
diff --git a/new-log-viewer/src/components/StatusBar/index.tsx b/new-log-viewer/src/components/StatusBar/index.tsx
index 436950fd..39b87b1a 100644
--- a/new-log-viewer/src/components/StatusBar/index.tsx
+++ b/new-log-viewer/src/components/StatusBar/index.tsx
@@ -45,7 +45,7 @@ const StatusBar = () => {
                 size={"sm"}
                 variant={"soft"}
                 onClick={handleCopyLinkButtonClick}
-            > 
+            >
                 {"Log Event "}
                 {logEventNum}
                 {" / "}

From 88f4e4cf97b7767dca8f5cb4a1bc19b2908e4f9f Mon Sep 17 00:00:00 2001
From: Dave Marco <marcovitch.david@gmail.com>
Date: Mon, 14 Oct 2024 01:08:01 +0000
Subject: [PATCH 14/38] add exporting state

---
 .../components/DropFileContainer/index.tsx    | 19 +++++++++++++++----
 .../src/components/MenuBar/index.tsx          |  3 ++-
 .../src/components/StatusBar/index.tsx        |  2 +-
 .../src/contexts/StateContextProvider.tsx     |  2 +-
 new-log-viewer/src/typings/worker.ts          |  7 ++++++-
 5 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/new-log-viewer/src/components/DropFileContainer/index.tsx b/new-log-viewer/src/components/DropFileContainer/index.tsx
index f37fa6fa..d6c19e7d 100644
--- a/new-log-viewer/src/components/DropFileContainer/index.tsx
+++ b/new-log-viewer/src/components/DropFileContainer/index.tsx
@@ -4,7 +4,10 @@ import React, {
 } from "react";
 
 import {StateContext} from "../../contexts/StateContextProvider";
-import {CURSOR_CODE} from "../../typings/worker";
+import {
+    LOAD_STATE,
+    CURSOR_CODE
+} from "../../typings/worker";
 
 import "./index.css";
 
@@ -21,8 +24,9 @@ interface DropFileContextProviderProps {
  * @return
  */
 const DropFileContainer = ({children}: DropFileContextProviderProps) => {
-    const {loadFile} = useContext(StateContext);
+    const {loadFile, loadState} = useContext(StateContext);
     const [isFileHovering, setIsFileHovering] = useState(false);
+    const isLoading = LOAD_STATE.LOADING_FILE === loadState || LOAD_STATE.EXPORTING === loadState;
 
     const handleDrag = (ev: React.DragEvent<HTMLDivElement>) => {
         ev.preventDefault();
@@ -52,6 +56,9 @@ const DropFileContainer = ({children}: DropFileContextProviderProps) => {
         ev.stopPropagation();
 
         setIsFileHovering(false);
+        if (isLoading) {
+            return;
+        }
 
         const [file] = ev.dataTransfer.files;
         if ("undefined" === typeof file) {
@@ -78,10 +85,14 @@ const DropFileContainer = ({children}: DropFileContextProviderProps) => {
                         onDrop={handleDrop}
                     >
                         <div
-                            className={"hover-message"}
+                            className={`hover-message ${isLoading ?
+                                "hover-message-loading" :
+                                ""}`}
                             onDrop={handleDrop}
                         >
-                            Drop file to view
+                            {isLoading ?
+                                "Drop is disabled during loading" :
+                                "Drop file to view"}
                         </div>
                     </div>
                 )}
diff --git a/new-log-viewer/src/components/MenuBar/index.tsx b/new-log-viewer/src/components/MenuBar/index.tsx
index 39965e9c..7084cb1a 100644
--- a/new-log-viewer/src/components/MenuBar/index.tsx
+++ b/new-log-viewer/src/components/MenuBar/index.tsx
@@ -37,7 +37,7 @@ const MenuBar = () => {
         });
     };
 
-    const isLoading = LOAD_STATE.LOADING === loadState;
+    const isLoading = LOAD_STATE.LOADING_FILE === loadState;
 
     return (
         <>
@@ -59,6 +59,7 @@ const MenuBar = () => {
                     <IconButton
                         size={"sm"}
                         onClick={handleOpenFile}
+                        disabled={loadState === LOAD_STATE.LOADING_FILE || loadState === LOAD_STATE.EXPORTING}
                     >
                         <FolderOpenIcon className={"menu-bar-open-file-icon"}/>
                     </IconButton>
diff --git a/new-log-viewer/src/components/StatusBar/index.tsx b/new-log-viewer/src/components/StatusBar/index.tsx
index 39b87b1a..3f99a062 100644
--- a/new-log-viewer/src/components/StatusBar/index.tsx
+++ b/new-log-viewer/src/components/StatusBar/index.tsx
@@ -41,7 +41,7 @@ const StatusBar = () => {
             </Typography>
             <Button
                 color={"primary"}
-                disabled={loadState !== LOAD_STATE.READY}
+                disabled={loadState === LOAD_STATE.UNOPENED || loadState !== LOAD_STATE.LOADING_FILE }
                 size={"sm"}
                 variant={"soft"}
                 onClick={handleCopyLinkButtonClick}
diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx
index f1df1d4e..7f2c514a 100644
--- a/new-log-viewer/src/contexts/StateContextProvider.tsx
+++ b/new-log-viewer/src/contexts/StateContextProvider.tsx
@@ -306,7 +306,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     ]);
 
     const loadFile = useCallback((fileSrc: FileSrcType, cursor: CursorType) => {
-        setLoadState(LOAD_STATE.LOADING);
+        setLoadState(LOAD_STATE.LOADING_FILE);
         setFileName("Loading...");
         setLogData("Loading...");
         setOnDiskFileSizeInBytes(STATE_DEFAULT.onDiskFileSizeInBytes);
diff --git a/new-log-viewer/src/typings/worker.ts b/new-log-viewer/src/typings/worker.ts
index 3141e38c..113a38ed 100644
--- a/new-log-viewer/src/typings/worker.ts
+++ b/new-log-viewer/src/typings/worker.ts
@@ -22,12 +22,17 @@ enum LOAD_STATE {
     /**
      * When a file load request is pending response.
      */
-    LOADING = "loading",
+    LOADING_FILE = "loading",
 
     /**
      * When the file is loaded from any request.
      */
     READY = "ready",
+
+    /**
+     * When the file is being exported.
+     */
+    EXPORTING = "exporting",
 }
 
 /**

From b88d5b9376a7e1a2620c213ff5186a6d4bea29e4 Mon Sep 17 00:00:00 2001
From: Dave Marco <marcovitch.david@gmail.com>
Date: Mon, 14 Oct 2024 01:23:45 +0000
Subject: [PATCH 15/38] fix stuff

---
 new-log-viewer/src/components/StatusBar/index.tsx    | 2 +-
 new-log-viewer/src/contexts/StateContextProvider.tsx | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/new-log-viewer/src/components/StatusBar/index.tsx b/new-log-viewer/src/components/StatusBar/index.tsx
index 3f99a062..c864f5bc 100644
--- a/new-log-viewer/src/components/StatusBar/index.tsx
+++ b/new-log-viewer/src/components/StatusBar/index.tsx
@@ -41,7 +41,7 @@ const StatusBar = () => {
             </Typography>
             <Button
                 color={"primary"}
-                disabled={loadState === LOAD_STATE.UNOPENED || loadState !== LOAD_STATE.LOADING_FILE }
+                disabled={loadState === LOAD_STATE.UNOPENED || loadState === LOAD_STATE.LOADING_FILE }
                 size={"sm"}
                 variant={"soft"}
                 onClick={handleCopyLinkButtonClick}
diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx
index 7f2c514a..2abc9c8e 100644
--- a/new-log-viewer/src/contexts/StateContextProvider.tsx
+++ b/new-log-viewer/src/contexts/StateContextProvider.tsx
@@ -248,6 +248,9 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 if (null !== logExportManagerRef.current) {
                     const progress = logExportManagerRef.current.appendChunk(args.logs);
                     setExportProgress(progress);
+                    if (progress === 1) {
+                        setLoadState(LOAD_STATE.READY);
+                    }
                 }
                 break;
             case WORKER_RESP_CODE.LOG_FILE_INFO:
@@ -290,6 +293,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
             return;
         }
 
+        setLoadState(LOAD_STATE.EXPORTING);
         setExportProgress(EXPORT_LOG_PROGRESS_VALUE_MIN);
         logExportManagerRef.current = new LogExportManager(
             Math.ceil(numEvents / EXPORT_LOGS_CHUNK_SIZE),

From 366815e7145deb80b7746b677f13d7ebdffd3cdf Mon Sep 17 00:00:00 2001
From: Dave Marco <marcovitch.david@gmail.com>
Date: Mon, 14 Oct 2024 01:29:01 +0000
Subject: [PATCH 16/38] fix lint

---
 new-log-viewer/src/components/DropFileContainer/index.tsx | 2 +-
 new-log-viewer/src/components/MenuBar/index.tsx           | 5 ++++-
 new-log-viewer/src/components/StatusBar/index.tsx         | 5 ++++-
 new-log-viewer/src/contexts/StateContextProvider.tsx      | 2 +-
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/new-log-viewer/src/components/DropFileContainer/index.tsx b/new-log-viewer/src/components/DropFileContainer/index.tsx
index d6c19e7d..a5eac248 100644
--- a/new-log-viewer/src/components/DropFileContainer/index.tsx
+++ b/new-log-viewer/src/components/DropFileContainer/index.tsx
@@ -5,8 +5,8 @@ import React, {
 
 import {StateContext} from "../../contexts/StateContextProvider";
 import {
+    CURSOR_CODE,
     LOAD_STATE,
-    CURSOR_CODE
 } from "../../typings/worker";
 
 import "./index.css";
diff --git a/new-log-viewer/src/components/MenuBar/index.tsx b/new-log-viewer/src/components/MenuBar/index.tsx
index 7084cb1a..224b3a0f 100644
--- a/new-log-viewer/src/components/MenuBar/index.tsx
+++ b/new-log-viewer/src/components/MenuBar/index.tsx
@@ -58,8 +58,11 @@ const MenuBar = () => {
                 >
                     <IconButton
                         size={"sm"}
+                        disabled={
+                            loadState === LOAD_STATE.LOADING_FILE ||
+                            loadState === LOAD_STATE.EXPORTING
+                        }
                         onClick={handleOpenFile}
-                        disabled={loadState === LOAD_STATE.LOADING_FILE || loadState === LOAD_STATE.EXPORTING}
                     >
                         <FolderOpenIcon className={"menu-bar-open-file-icon"}/>
                     </IconButton>
diff --git a/new-log-viewer/src/components/StatusBar/index.tsx b/new-log-viewer/src/components/StatusBar/index.tsx
index c864f5bc..af73f430 100644
--- a/new-log-viewer/src/components/StatusBar/index.tsx
+++ b/new-log-viewer/src/components/StatusBar/index.tsx
@@ -41,9 +41,12 @@ const StatusBar = () => {
             </Typography>
             <Button
                 color={"primary"}
-                disabled={loadState === LOAD_STATE.UNOPENED || loadState === LOAD_STATE.LOADING_FILE }
                 size={"sm"}
                 variant={"soft"}
+                disabled={
+                    loadState === LOAD_STATE.UNOPENED ||
+                    loadState === LOAD_STATE.LOADING_FILE
+                }
                 onClick={handleCopyLinkButtonClick}
             >
                 {"Log Event "}
diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx
index 2abc9c8e..4ec29255 100644
--- a/new-log-viewer/src/contexts/StateContextProvider.tsx
+++ b/new-log-viewer/src/contexts/StateContextProvider.tsx
@@ -248,7 +248,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 if (null !== logExportManagerRef.current) {
                     const progress = logExportManagerRef.current.appendChunk(args.logs);
                     setExportProgress(progress);
-                    if (progress === 1) {
+                    if (1 === progress) {
                         setLoadState(LOAD_STATE.READY);
                     }
                 }

From b48388aeba4a7fefe7de0ccea4966ba44adff239 Mon Sep 17 00:00:00 2001
From: Dave Marco <marcovitch.david@gmail.com>
Date: Thu, 17 Oct 2024 18:09:23 +0000
Subject: [PATCH 17/38] add grid so states can be seen in code. Docs better in
 code

---
 .../components/DropFileContainer/index.tsx    | 17 ++++++------
 .../components/MenuBar/ExportLogsButton.tsx   |  9 ++++---
 .../src/components/MenuBar/NavigationBar.tsx  |  9 ++++---
 .../src/components/MenuBar/PageNumInput.css   |  4 +++
 .../src/components/MenuBar/PageNumInput.tsx   | 18 ++++++++-----
 .../src/components/MenuBar/index.tsx          | 20 ++++++--------
 .../StatusBar/LogLevelSelect/index.css        |  4 +++
 .../StatusBar/LogLevelSelect/index.tsx        | 18 ++++++++-----
 .../src/components/StatusBar/index.tsx        | 12 ++++-----
 .../src/contexts/StateContextProvider.tsx     | 18 ++++++-------
 new-log-viewer/src/typings/worker.ts          | 27 -------------------
 11 files changed, 74 insertions(+), 82 deletions(-)

diff --git a/new-log-viewer/src/components/DropFileContainer/index.tsx b/new-log-viewer/src/components/DropFileContainer/index.tsx
index a5eac248..273a8da2 100644
--- a/new-log-viewer/src/components/DropFileContainer/index.tsx
+++ b/new-log-viewer/src/components/DropFileContainer/index.tsx
@@ -4,10 +4,11 @@ import React, {
 } from "react";
 
 import {StateContext} from "../../contexts/StateContextProvider";
+import {CURSOR_CODE} from "../../typings/worker";
 import {
-    CURSOR_CODE,
-    LOAD_STATE,
-} from "../../typings/worker";
+    isDisabled,
+    UI_ELEMENT,
+} from "../../utils/states";
 
 import "./index.css";
 
@@ -24,9 +25,9 @@ interface DropFileContextProviderProps {
  * @return
  */
 const DropFileContainer = ({children}: DropFileContextProviderProps) => {
-    const {loadFile, loadState} = useContext(StateContext);
+    const {loadFile, uiState} = useContext(StateContext);
     const [isFileHovering, setIsFileHovering] = useState(false);
-    const isLoading = LOAD_STATE.LOADING_FILE === loadState || LOAD_STATE.EXPORTING === loadState;
+    const disabled = isDisabled(uiState, UI_ELEMENT.DRAG_AND_DROP);
 
     const handleDrag = (ev: React.DragEvent<HTMLDivElement>) => {
         ev.preventDefault();
@@ -56,7 +57,7 @@ const DropFileContainer = ({children}: DropFileContextProviderProps) => {
         ev.stopPropagation();
 
         setIsFileHovering(false);
-        if (isLoading) {
+        if (disabled) {
             return;
         }
 
@@ -85,12 +86,12 @@ const DropFileContainer = ({children}: DropFileContextProviderProps) => {
                         onDrop={handleDrop}
                     >
                         <div
-                            className={`hover-message ${isLoading ?
+                            className={`hover-message ${disabled ?
                                 "hover-message-loading" :
                                 ""}`}
                             onDrop={handleDrop}
                         >
-                            {isLoading ?
+                            {disabled ?
                                 "Drop is disabled during loading" :
                                 "Drop file to view"}
                         </div>
diff --git a/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx b/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx
index d91e9c6e..5ffccbe8 100644
--- a/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx
+++ b/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx
@@ -12,7 +12,10 @@ import {
     EXPORT_LOG_PROGRESS_VALUE_MAX,
     EXPORT_LOG_PROGRESS_VALUE_MIN,
 } from "../../services/LogExportManager";
-import {LOAD_STATE} from "../../typings/worker";
+import {
+    isDisabled,
+    UI_ELEMENT,
+} from "../../utils/states";
 import SmallIconButton from "./SmallIconButton";
 
 
@@ -22,13 +25,13 @@ import SmallIconButton from "./SmallIconButton";
  * @return
  */
 const ExportLogsButton = () => {
-    const {exportLogs, exportProgress, loadState} = useContext(StateContext);
+    const {exportLogs, exportProgress, uiState} = useContext(StateContext);
 
     return (
         <SmallIconButton
             disabled={
                 (null !== exportProgress && EXPORT_LOG_PROGRESS_VALUE_MAX !== exportProgress) ||
-                loadState !== LOAD_STATE.READY
+                isDisabled(uiState, UI_ELEMENT.EXPORT_LOGS_BUTTON)
             }
             onClick={exportLogs}
         >
diff --git a/new-log-viewer/src/components/MenuBar/NavigationBar.tsx b/new-log-viewer/src/components/MenuBar/NavigationBar.tsx
index 10671c20..649ca110 100644
--- a/new-log-viewer/src/components/MenuBar/NavigationBar.tsx
+++ b/new-log-viewer/src/components/MenuBar/NavigationBar.tsx
@@ -11,8 +11,11 @@ import SkipNext from "@mui/icons-material/SkipNext";
 import SkipPrevious from "@mui/icons-material/SkipPrevious";
 
 import {StateContext} from "../../contexts/StateContextProvider";
-import {LOAD_STATE} from "../../typings/worker";
 import {ACTION_NAME} from "../../utils/actions";
+import {
+    isDisabled,
+    UI_ELEMENT,
+} from "../../utils/states";
 import PageNumInput from "./PageNumInput";
 
 
@@ -22,7 +25,7 @@ import PageNumInput from "./PageNumInput";
  * @return
  */
 const NavigationBar = () => {
-    const {loadState, loadPageByAction} = useContext(StateContext);
+    const {uiState, loadPageByAction} = useContext(StateContext);
 
     const handleNavButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
         const {actionName} = event.currentTarget.dataset;
@@ -40,7 +43,7 @@ const NavigationBar = () => {
 
     return (
         <ButtonGroup
-            disabled={loadState !== LOAD_STATE.READY}
+            disabled={isDisabled(uiState, UI_ELEMENT.NAVIGATION_BAR)}
             size={"sm"}
             spacing={0.01}
             variant={"plain"}
diff --git a/new-log-viewer/src/components/MenuBar/PageNumInput.css b/new-log-viewer/src/components/MenuBar/PageNumInput.css
index 7b7169a0..59d34cc9 100644
--- a/new-log-viewer/src/components/MenuBar/PageNumInput.css
+++ b/new-log-viewer/src/components/MenuBar/PageNumInput.css
@@ -7,3 +7,7 @@
 .page-num-input-num-pages-text {
     font-size: inherit !important;
 }
+
+.page-num-input-num-pages-text-disabled {
+    color: "neutral.plainDisabledColor";
+}
diff --git a/new-log-viewer/src/components/MenuBar/PageNumInput.tsx b/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
index 23470f6e..f2690b1f 100644
--- a/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
+++ b/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
@@ -9,8 +9,11 @@ import {Typography} from "@mui/joy";
 import Input from "@mui/joy/Input";
 
 import {StateContext} from "../../contexts/StateContextProvider";
-import {LOAD_STATE} from "../../typings/worker";
 import {ACTION_NAME} from "../../utils/actions";
+import {
+    isDisabled,
+    UI_ELEMENT,
+} from "../../utils/states";
 
 import "./PageNumInput.css";
 
@@ -24,11 +27,13 @@ const PAGE_NUM_INPUT_FIT_EXTRA_WIDTH = 2;
  * @return
  */
 const PageNumInput = () => {
-    const {loadState, loadPageByAction, numPages, pageNum} = useContext(StateContext);
+    const {uiState, loadPageByAction, numPages, pageNum} = useContext(StateContext);
 
     const [isEditing, setIsEditing] = useState<boolean>(false);
     const inputRef = useRef<HTMLInputElement>(null);
 
+    const disabled = isDisabled(uiState, UI_ELEMENT.DRAG_AND_DROP);
+
     const handleSubmit = (ev?: React.FormEvent<HTMLFormElement>) => {
         if ("undefined" !== typeof ev) {
             ev.preventDefault();
@@ -80,17 +85,16 @@ const PageNumInput = () => {
         >
             <Input
                 className={"page-num-input"}
-                disabled={loadState !== LOAD_STATE.READY}
+                disabled={disabled}
                 size={"sm"}
                 slotProps={{input: {ref: inputRef}}}
                 type={"number"}
                 endDecorator={
                     <Typography
-                        className={"page-num-input-num-pages-text"}
                         level={"body-md"}
-                        sx={loadState !== LOAD_STATE.READY ?
-                            {color: "neutral.plainDisabledColor"} :
-                            {}}
+                        className={`page-num-input-num-pages-text ${disabled ?
+                            "page-num-input-num-pages-text-disabled" :
+                            ""}`}
                     >
                         {"/ "}
                         {numPages}
diff --git a/new-log-viewer/src/components/MenuBar/index.tsx b/new-log-viewer/src/components/MenuBar/index.tsx
index 224b3a0f..6a25fc3e 100644
--- a/new-log-viewer/src/components/MenuBar/index.tsx
+++ b/new-log-viewer/src/components/MenuBar/index.tsx
@@ -12,11 +12,12 @@ import {
 import FolderOpenIcon from "@mui/icons-material/FolderOpen";
 
 import {StateContext} from "../../contexts/StateContextProvider";
-import {
-    CURSOR_CODE,
-    LOAD_STATE,
-} from "../../typings/worker";
+import {CURSOR_CODE} from "../../typings/worker";
 import {openFile} from "../../utils/file";
+import {
+    isDisabled,
+    UI_ELEMENT,
+} from "../../utils/states";
 import ExportLogsButton from "./ExportLogsButton";
 import NavigationBar from "./NavigationBar";
 
@@ -29,7 +30,7 @@ import "./index.css";
  * @return
  */
 const MenuBar = () => {
-    const {fileName, loadState, loadFile} = useContext(StateContext);
+    const {fileName, uiState, loadFile} = useContext(StateContext);
 
     const handleOpenFile = () => {
         openFile((file) => {
@@ -37,8 +38,6 @@ const MenuBar = () => {
         });
     };
 
-    const isLoading = LOAD_STATE.LOADING_FILE === loadState;
-
     return (
         <>
             <Sheet className={"menu-bar"}>
@@ -57,11 +56,8 @@ const MenuBar = () => {
                     variant={"outlined"}
                 >
                     <IconButton
+                        disabled={isDisabled(uiState, UI_ELEMENT.OPEN_FILE_BUTTON)}
                         size={"sm"}
-                        disabled={
-                            loadState === LOAD_STATE.LOADING_FILE ||
-                            loadState === LOAD_STATE.EXPORTING
-                        }
                         onClick={handleOpenFile}
                     >
                         <FolderOpenIcon className={"menu-bar-open-file-icon"}/>
@@ -82,7 +78,7 @@ const MenuBar = () => {
 
                 <ExportLogsButton/>
             </Sheet>
-            {isLoading &&
+            {(false === isDisabled(uiState, UI_ELEMENT.PROGRESS_BAR)) &&
                 <LinearProgress
                     className={"menu-bar-loading-progress"}
                     size={"sm"}/>}
diff --git a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.css b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.css
index 2db444f2..d3022232 100644
--- a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.css
+++ b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.css
@@ -15,6 +15,10 @@
     background-color: initial !important;
 }
 
+.log-level-select-render-value-box-label-disabled {
+    color: "neutral.plainDisabledColor";
+}
+
 .log-level-select-listbox {
     /* Disallow width auto-resizing with the `Select` button. */
     max-width: 0;
diff --git a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
index 714569c9..67c7c426 100644
--- a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
+++ b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
@@ -32,8 +32,11 @@ import {
     LOG_LEVEL_NAMES,
     MAX_LOG_LEVEL,
 } from "../../../typings/logs";
-import {LOAD_STATE} from "../../../typings/worker";
 import {range} from "../../../utils/data";
+import {
+    isDisabled,
+    UI_ELEMENT,
+} from "../../../utils/states";
 import LogLevelChip from "./LogLevelChip";
 
 import "./index.css";
@@ -146,10 +149,12 @@ const ClearFiltersOption = ({onClick}: ClearFiltersOptionProps) => {
  * @return
  */
 const LogLevelSelect = () => {
-    const {loadState, setLogLevelFilter} = useContext(StateContext);
+    const {uiState, setLogLevelFilter} = useContext(StateContext);
 
     const [selectedLogLevels, setSelectedLogLevels] = useState<LOG_LEVEL[]>([]);
 
+    const disabled = isDisabled(uiState, UI_ELEMENT.LOG_LEVEL_FILTER);
+
     const handleRenderValue = (selected: SelectValue<SelectOption<LOG_LEVEL>, true>) => (
         <Box className={"log-level-select-render-value-box"}>
             <Chip className={"log-level-select-render-value-box-label"}>
@@ -210,7 +215,7 @@ const LogLevelSelect = () => {
     return (
         <Select
             className={"log-level-select"}
-            disabled={LOAD_STATE.READY !== loadState}
+            disabled={disabled}
             multiple={true}
             renderValue={handleRenderValue}
             size={"sm"}
@@ -228,10 +233,9 @@ const LogLevelSelect = () => {
                 </Tooltip>}
             placeholder={
                 <Chip
-                    className={"log-level-select-render-value-box-label"}
-                    sx={loadState !== LOAD_STATE.READY ?
-                        {color: "neutral.plainDisabledColor"} :
-                        {}}
+                    className={`log-level-select-render-value-box-label ${disabled ?
+                        "log-level-select-render-value-box-label-disabled" :
+                        ""}`}
                 >
                     Log Level
                 </Chip>
diff --git a/new-log-viewer/src/components/StatusBar/index.tsx b/new-log-viewer/src/components/StatusBar/index.tsx
index af73f430..75d7141a 100644
--- a/new-log-viewer/src/components/StatusBar/index.tsx
+++ b/new-log-viewer/src/components/StatusBar/index.tsx
@@ -9,7 +9,10 @@ import {
     copyPermalinkToClipboard,
     UrlContext,
 } from "../../contexts/UrlContextProvider";
-import {LOAD_STATE} from "../../typings/worker";
+import {
+    isDisabled,
+    UI_ELEMENT,
+} from "../../utils/states";
 import LogLevelSelect from "./LogLevelSelect";
 
 import "./index.css";
@@ -28,7 +31,7 @@ const handleCopyLinkButtonClick = () => {
  * @return
  */
 const StatusBar = () => {
-    const {loadState, numEvents} = useContext(StateContext);
+    const {uiState, numEvents} = useContext(StateContext);
     const {logEventNum} = useContext(UrlContext);
 
     return (
@@ -41,12 +44,9 @@ const StatusBar = () => {
             </Typography>
             <Button
                 color={"primary"}
+                disabled={isDisabled(uiState, UI_ELEMENT.LOG_EVENT_NUM_DISPLAY)}
                 size={"sm"}
                 variant={"soft"}
-                disabled={
-                    loadState === LOAD_STATE.UNOPENED ||
-                    loadState === LOAD_STATE.LOADING_FILE
-                }
                 onClick={handleCopyLinkButtonClick}
             >
                 {"Log Event "}
diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx
index 4ec29255..6c69d452 100644
--- a/new-log-viewer/src/contexts/StateContextProvider.tsx
+++ b/new-log-viewer/src/contexts/StateContextProvider.tsx
@@ -19,7 +19,6 @@ import {
     CursorType,
     EVENT_POSITION_ON_PAGE,
     FileSrcType,
-    LOAD_STATE,
     MainWorkerRespMessage,
     WORKER_REQ_CODE,
     WORKER_RESP_CODE,
@@ -38,6 +37,7 @@ import {
     isWithinBounds,
 } from "../utils/data";
 import {clamp} from "../utils/math";
+import {UI_STATE} from "../utils/states";
 import {
     updateWindowUrlHashParams,
     updateWindowUrlSearchParams,
@@ -51,7 +51,7 @@ interface StateContextType {
     beginLineNumToLogEventNum: BeginLineNumToLogEventNumMap,
     fileName: string,
     exportProgress: Nullable<number>,
-    loadState: LOAD_STATE,
+    uiState: UI_STATE,
     logData: string,
     numEvents: number,
     numPages: number,
@@ -72,12 +72,12 @@ const STATE_DEFAULT: Readonly<StateContextType> = Object.freeze({
     beginLineNumToLogEventNum: new Map<number, number>(),
     exportProgress: null,
     fileName: "",
-    loadState: LOAD_STATE.UNOPENED,
     logData: "No file is open.",
     numEvents: 0,
     numPages: 0,
     onDiskFileSizeInBytes: 0,
     pageNum: 0,
+    uiState: UI_STATE.UNOPENED,
 
     exportLogs: () => null,
     loadFile: () => null,
@@ -221,7 +221,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
 
     // States
     const [fileName, setFileName] = useState<string>(STATE_DEFAULT.fileName);
-    const [loadState, setLoadState] = useState<LOAD_STATE>(STATE_DEFAULT.loadState);
+    const [uiState, setUiState] = useState<UI_STATE>(STATE_DEFAULT.uiState);
     const [logData, setLogData] = useState<string>(STATE_DEFAULT.logData);
     const [numEvents, setNumEvents] = useState<number>(STATE_DEFAULT.numEvents);
     const [numPages, setNumPages] = useState<number>(STATE_DEFAULT.numPages);
@@ -249,7 +249,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                     const progress = logExportManagerRef.current.appendChunk(args.logs);
                     setExportProgress(progress);
                     if (1 === progress) {
-                        setLoadState(LOAD_STATE.READY);
+                        setUiState(UI_STATE.READY);
                     }
                 }
                 break;
@@ -272,7 +272,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 updateWindowUrlHashParams({
                     logEventNum: args.logEventNum,
                 });
-                setLoadState(LOAD_STATE.READY);
+                setUiState(UI_STATE.READY);
                 break;
             }
             default:
@@ -293,7 +293,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
             return;
         }
 
-        setLoadState(LOAD_STATE.EXPORTING);
+        setUiState(UI_STATE.SLOW_LOADING);
         setExportProgress(EXPORT_LOG_PROGRESS_VALUE_MIN);
         logExportManagerRef.current = new LogExportManager(
             Math.ceil(numEvents / EXPORT_LOGS_CHUNK_SIZE),
@@ -310,7 +310,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     ]);
 
     const loadFile = useCallback((fileSrc: FileSrcType, cursor: CursorType) => {
-        setLoadState(LOAD_STATE.LOADING_FILE);
+        setUiState(UI_STATE.FILE_LOADING);
         setFileName("Loading...");
         setLogData("Loading...");
         setOnDiskFileSizeInBytes(STATE_DEFAULT.onDiskFileSizeInBytes);
@@ -434,12 +434,12 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 beginLineNumToLogEventNum: beginLineNumToLogEventNumRef.current,
                 exportProgress: exportProgress,
                 fileName: fileName,
-                loadState: loadState,
                 logData: logData,
                 numEvents: numEvents,
                 numPages: numPages,
                 onDiskFileSizeInBytes: onDiskFileSizeInBytes,
                 pageNum: pageNum,
+                uiState: uiState,
 
                 exportLogs: exportLogs,
                 loadFile: loadFile,
diff --git a/new-log-viewer/src/typings/worker.ts b/new-log-viewer/src/typings/worker.ts
index 113a38ed..9ceeea4c 100644
--- a/new-log-viewer/src/typings/worker.ts
+++ b/new-log-viewer/src/typings/worker.ts
@@ -9,32 +9,6 @@ import {
 } from "./logs";
 
 
-/**
- * Various states of a load process. UI elements may be enabled or disabled based on the state.
- */
-enum LOAD_STATE {
-
-    /**
-     * When there is no file opened in the viewer.
-     */
-    UNOPENED = "unopened",
-
-    /**
-     * When a file load request is pending response.
-     */
-    LOADING_FILE = "loading",
-
-    /**
-     * When the file is loaded from any request.
-     */
-    READY = "ready",
-
-    /**
-     * When the file is being exported.
-     */
-    EXPORTING = "exporting",
-}
-
 /**
  * Type of input file, which can be either a URL string or a File object.
  */
@@ -180,7 +154,6 @@ export {
     CURSOR_CODE,
     EMPTY_PAGE_RESP,
     EVENT_POSITION_ON_PAGE,
-    LOAD_STATE,
     WORKER_REQ_CODE,
     WORKER_RESP_CODE,
 };

From 95692a902a42c43062b10aaf9a71122ccdcd5a79 Mon Sep 17 00:00:00 2001
From: Dave Marco <marcovitch.david@gmail.com>
Date: Thu, 17 Oct 2024 18:30:17 +0000
Subject: [PATCH 18/38] small changes

---
 .../components/DropFileContainer/index.css    |   2 +-
 .../components/DropFileContainer/index.tsx    |   2 +-
 .../src/components/MenuBar/PageNumInput.tsx   |   2 +-
 .../src/components/MenuBar/index.tsx          |   2 +-
 .../StatusBar/LogLevelSelect/index.tsx        |   2 -
 .../src/contexts/StateContextProvider.tsx     |  12 +-
 new-log-viewer/src/utils/states.ts            | 109 ++++++++++++++++++
 7 files changed, 118 insertions(+), 13 deletions(-)
 create mode 100644 new-log-viewer/src/utils/states.ts

diff --git a/new-log-viewer/src/components/DropFileContainer/index.css b/new-log-viewer/src/components/DropFileContainer/index.css
index 02ddb63c..34a2d94e 100644
--- a/new-log-viewer/src/components/DropFileContainer/index.css
+++ b/new-log-viewer/src/components/DropFileContainer/index.css
@@ -29,6 +29,6 @@
     background-color: #f3f3f3;
 }
 
-.hover-message-loading {
+.hover-message-disabled {
     background-color: #fce4e4;
 }
diff --git a/new-log-viewer/src/components/DropFileContainer/index.tsx b/new-log-viewer/src/components/DropFileContainer/index.tsx
index 273a8da2..c2eb2627 100644
--- a/new-log-viewer/src/components/DropFileContainer/index.tsx
+++ b/new-log-viewer/src/components/DropFileContainer/index.tsx
@@ -87,7 +87,7 @@ const DropFileContainer = ({children}: DropFileContextProviderProps) => {
                     >
                         <div
                             className={`hover-message ${disabled ?
-                                "hover-message-loading" :
+                                "hover-message-disabled" :
                                 ""}`}
                             onDrop={handleDrop}
                         >
diff --git a/new-log-viewer/src/components/MenuBar/PageNumInput.tsx b/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
index f2690b1f..383aa203 100644
--- a/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
+++ b/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
@@ -32,7 +32,7 @@ const PageNumInput = () => {
     const [isEditing, setIsEditing] = useState<boolean>(false);
     const inputRef = useRef<HTMLInputElement>(null);
 
-    const disabled = isDisabled(uiState, UI_ELEMENT.DRAG_AND_DROP);
+    const disabled = isDisabled(uiState, UI_ELEMENT.NAVIGATION_BAR);
 
     const handleSubmit = (ev?: React.FormEvent<HTMLFormElement>) => {
         if ("undefined" !== typeof ev) {
diff --git a/new-log-viewer/src/components/MenuBar/index.tsx b/new-log-viewer/src/components/MenuBar/index.tsx
index 6a25fc3e..ea64275c 100644
--- a/new-log-viewer/src/components/MenuBar/index.tsx
+++ b/new-log-viewer/src/components/MenuBar/index.tsx
@@ -30,7 +30,7 @@ import "./index.css";
  * @return
  */
 const MenuBar = () => {
-    const {fileName, uiState, loadFile} = useContext(StateContext);
+    const {fileName, loadFile, uiState} = useContext(StateContext);
 
     const handleOpenFile = () => {
         openFile((file) => {
diff --git a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
index 67c7c426..fcfe3f08 100644
--- a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
+++ b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
@@ -150,9 +150,7 @@ const ClearFiltersOption = ({onClick}: ClearFiltersOptionProps) => {
  */
 const LogLevelSelect = () => {
     const {uiState, setLogLevelFilter} = useContext(StateContext);
-
     const [selectedLogLevels, setSelectedLogLevels] = useState<LOG_LEVEL[]>([]);
-
     const disabled = isDisabled(uiState, UI_ELEMENT.LOG_LEVEL_FILTER);
 
     const handleRenderValue = (selected: SelectValue<SelectOption<LOG_LEVEL>, true>) => (
diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx
index 6c69d452..32d3d3d3 100644
--- a/new-log-viewer/src/contexts/StateContextProvider.tsx
+++ b/new-log-viewer/src/contexts/StateContextProvider.tsx
@@ -8,7 +8,10 @@ import React, {
     useState,
 } from "react";
 
-import LogExportManager, {EXPORT_LOG_PROGRESS_VALUE_MIN} from "../services/LogExportManager";
+import LogExportManager, {
+    EXPORT_LOG_PROGRESS_VALUE_MAX,
+    EXPORT_LOG_PROGRESS_VALUE_MIN,
+} from "../services/LogExportManager";
 import {Nullable} from "../typings/common";
 import {CONFIG_KEY} from "../typings/config";
 import {LogLevelFilter} from "../typings/logs";
@@ -248,7 +251,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 if (null !== logExportManagerRef.current) {
                     const progress = logExportManagerRef.current.appendChunk(args.logs);
                     setExportProgress(progress);
-                    if (1 === progress) {
+                    if (EXPORT_LOG_PROGRESS_VALUE_MAX === progress) {
                         setUiState(UI_STATE.READY);
                     }
                 }
@@ -287,11 +290,6 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
 
             return;
         }
-        if (STATE_DEFAULT.numEvents === numEvents && STATE_DEFAULT.fileName === fileName) {
-            console.error("numEvents and fileName not initialized yet");
-
-            return;
-        }
 
         setUiState(UI_STATE.SLOW_LOADING);
         setExportProgress(EXPORT_LOG_PROGRESS_VALUE_MIN);
diff --git a/new-log-viewer/src/utils/states.ts b/new-log-viewer/src/utils/states.ts
new file mode 100644
index 00000000..6201c81a
--- /dev/null
+++ b/new-log-viewer/src/utils/states.ts
@@ -0,0 +1,109 @@
+/**
+ * Various states of the UI. UI components may be enabled or disabled based on the state.
+ */
+enum UI_STATE {
+
+    /**
+     * When there is no file opened in the viewer.
+     */
+    UNOPENED,
+
+    /**
+     * When a file load request is pending response.
+     */
+    FILE_LOADING,
+
+    /**
+     * When a slow request is pending pending response.
+     */
+    SLOW_LOADING,
+
+    /**
+     * When the file is loaded.
+     */
+    READY,
+}
+
+/**
+ * Stateful elements in the UI.
+ */
+enum UI_ELEMENT {
+    PROGRESS_BAR,
+    NAVIGATION_BAR,
+    OPEN_FILE_BUTTON,
+    LOG_LEVEL_FILTER,
+    EXPORT_LOGS_BUTTON,
+    LOG_EVENT_NUM_DISPLAY,
+    DRAG_AND_DROP,
+}
+
+type StateRowType = [boolean, boolean, boolean, boolean, boolean, boolean, boolean];
+type uiStateGridType = readonly [
+    StateRowType,
+    StateRowType,
+    StateRowType,
+    StateRowType,
+];
+
+/**
+ * Grid describing whether a `UI_ELEMENT` is enabled or disabled for every `UI_STATE`. Each
+ * `UI_STATE` has its own row with a boolean for each `UI_ELEMENT`. States and elements are
+ * listed in the order of their corresponding enum.
+ */
+const uiStateGrid: uiStateGridType = Object.freeze(
+    [
+        [
+            false,
+            false,
+            true,
+            false,
+            false,
+            false,
+            true,
+        ],
+        [
+            true,
+            false,
+            false,
+            false,
+            false,
+            false,
+            false,
+        ],
+        [
+            false,
+            false,
+            false,
+            false,
+            false,
+            true,
+            false,
+        ],
+        [
+            false,
+            true,
+            true,
+            true,
+            true,
+            true,
+            true,
+        ],
+    ]
+);
+
+/**
+ * Whether a UI element is disabled based on provided state.
+ *
+ * @param state
+ * @param UiComponent
+ * @return `true` if the element is disabled, `false` otherwise.
+ */
+const isDisabled = (state: UI_STATE, UiComponent: UI_ELEMENT): boolean => {
+    return uiStateGrid[state][UiComponent];
+};
+
+export {
+    isDisabled,
+    UI_ELEMENT,
+    UI_STATE,
+};

From 6845397496082fdbc517ed98e695d4767dd86a5a Mon Sep 17 00:00:00 2001
From: Dave Marco <marcovitch.david@gmail.com>
Date: Thu, 17 Oct 2024 18:59:25 +0000
Subject: [PATCH 19/38] small changes

---
 new-log-viewer/src/components/MenuBar/PageNumInput.css         | 3 ++-
 new-log-viewer/src/components/MenuBar/PageNumInput.tsx         | 1 +
 .../src/components/StatusBar/LogLevelSelect/index.css          | 3 ++-
 new-log-viewer/src/utils/states.ts                             | 2 +-
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/new-log-viewer/src/components/MenuBar/PageNumInput.css b/new-log-viewer/src/components/MenuBar/PageNumInput.css
index 59d34cc9..8a3d21da 100644
--- a/new-log-viewer/src/components/MenuBar/PageNumInput.css
+++ b/new-log-viewer/src/components/MenuBar/PageNumInput.css
@@ -8,6 +8,7 @@
     font-size: inherit !important;
 }
 
+/* stylelint-disable-next-line custom-property-pattern */
 .page-num-input-num-pages-text-disabled {
-    color: "neutral.plainDisabledColor";
+    color: var(--joy-palette-neutral-plainDisabledColor) !important;
 }
diff --git a/new-log-viewer/src/components/MenuBar/PageNumInput.tsx b/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
index 383aa203..4f046e6d 100644
--- a/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
+++ b/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
@@ -92,6 +92,7 @@ const PageNumInput = () => {
                 endDecorator={
                     <Typography
                         level={"body-md"}
+
                         className={`page-num-input-num-pages-text ${disabled ?
                             "page-num-input-num-pages-text-disabled" :
                             ""}`}
diff --git a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.css b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.css
index d3022232..8fb5739e 100644
--- a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.css
+++ b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.css
@@ -15,8 +15,9 @@
     background-color: initial !important;
 }
 
+/* stylelint-disable-next-line custom-property-pattern */
 .log-level-select-render-value-box-label-disabled {
-    color: "neutral.plainDisabledColor";
+    color: var(--joy-palette-neutral-plainDisabledColor) !important;
 }
 
 .log-level-select-listbox {
diff --git a/new-log-viewer/src/utils/states.ts b/new-log-viewer/src/utils/states.ts
index 6201c81a..946455d8 100644
--- a/new-log-viewer/src/utils/states.ts
+++ b/new-log-viewer/src/utils/states.ts
@@ -99,7 +99,7 @@ const uiStateGrid: uiStateGridType = Object.freeze(
  * @return `true` if the element is disabled, `false` otherwise.
  */
 const isDisabled = (state: UI_STATE, UiComponent: UI_ELEMENT): boolean => {
-    return uiStateGrid[state][UiComponent];
+    return false === uiStateGrid[state][UiComponent];
 };
 
 export {

From e15aab327b849a6ed45d0a3207bc8ff16242bc04 Mon Sep 17 00:00:00 2001
From: Dave Marco <marcovitch.david@gmail.com>
Date: Thu, 17 Oct 2024 19:01:38 +0000
Subject: [PATCH 20/38] fix lint

---
 new-log-viewer/src/components/MenuBar/PageNumInput.css          | 2 +-
 .../src/components/StatusBar/LogLevelSelect/index.css           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/new-log-viewer/src/components/MenuBar/PageNumInput.css b/new-log-viewer/src/components/MenuBar/PageNumInput.css
index 8a3d21da..e855e7ba 100644
--- a/new-log-viewer/src/components/MenuBar/PageNumInput.css
+++ b/new-log-viewer/src/components/MenuBar/PageNumInput.css
@@ -8,7 +8,7 @@
     font-size: inherit !important;
 }
 
-/* stylelint-disable-next-line custom-property-pattern */
 .page-num-input-num-pages-text-disabled {
+    /* stylelint-disable-next-line custom-property-pattern */
     color: var(--joy-palette-neutral-plainDisabledColor) !important;
 }
diff --git a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.css b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.css
index 8fb5739e..bf96eb16 100644
--- a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.css
+++ b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.css
@@ -15,8 +15,8 @@
     background-color: initial !important;
 }
 
-/* stylelint-disable-next-line custom-property-pattern */
 .log-level-select-render-value-box-label-disabled {
+    /* stylelint-disable-next-line custom-property-pattern */
     color: var(--joy-palette-neutral-plainDisabledColor) !important;
 }
 

From 0504ddf22e0af61f257214396b654fb28a14eb86 Mon Sep 17 00:00:00 2001
From: Dave Marco <marcovitch.david@gmail.com>
Date: Thu, 17 Oct 2024 19:17:25 +0000
Subject: [PATCH 21/38] make fancier

---
 new-log-viewer/src/utils/states.ts | 97 +++++++++++++++---------------
 1 file changed, 48 insertions(+), 49 deletions(-)

diff --git a/new-log-viewer/src/utils/states.ts b/new-log-viewer/src/utils/states.ts
index 946455d8..a1401f0e 100644
--- a/new-log-viewer/src/utils/states.ts
+++ b/new-log-viewer/src/utils/states.ts
@@ -37,59 +37,58 @@ enum UI_ELEMENT {
     DRAG_AND_DROP,
 }
 
-type StateRowType = [boolean, boolean, boolean, boolean, boolean, boolean, boolean];
-type uiStateGridType = readonly [
-    StateRowType,
-    StateRowType,
-    StateRowType,
-    StateRowType,
-];
+type uiElementRow = {
+    [key in UI_ELEMENT]: boolean;
+};
+
+type uiStateGrid = {
+    [key in UI_STATE]: uiElementRow;
+};
 
 /**
  * Grid describing whether a `UI_ELEMENT` is enabled or disabled for every `UI_STATE`. Each
- * `UI_STATE` has its own row with a boolean for each `UI_ELEMENT`. States and elements are
- * listed in the order of their corresponding enum.
+ * `UI_STATE` has its own row with a boolean for each `UI_ELEMENT`. Boolean is `true` if the
+ * element is enabled, or `false` if disabled.
  */
-const uiStateGrid: uiStateGridType = Object.freeze(
-    [
-        [
-            false,
-            false,
-            true,
-            false,
-            false,
-            false,
-            true,
-        ],
-        [
-            true,
-            false,
-            false,
-            false,
-            false,
-            false,
-            false,
-        ],
-        [
-            false,
-            false,
-            false,
-            false,
-            false,
-            true,
-            false,
-        ],
-        [
-            false,
-            true,
-            true,
-            true,
-            true,
-            true,
-            true,
-        ],
-    ]
-);
+const uiStateGrid: uiStateGrid = Object.freeze({
+    [UI_STATE.UNOPENED]: {
+        [UI_ELEMENT.PROGRESS_BAR]: false,
+        [UI_ELEMENT.NAVIGATION_BAR]: false,
+        [UI_ELEMENT.OPEN_FILE_BUTTON]: true,
+        [UI_ELEMENT.LOG_LEVEL_FILTER]: false,
+        [UI_ELEMENT.EXPORT_LOGS_BUTTON]: false,
+        [UI_ELEMENT.LOG_EVENT_NUM_DISPLAY]: false,
+        [UI_ELEMENT.DRAG_AND_DROP]: true,
+    },
+    [UI_STATE.FILE_LOADING]: {
+        [UI_ELEMENT.PROGRESS_BAR]: true,
+        [UI_ELEMENT.NAVIGATION_BAR]: false,
+        [UI_ELEMENT.OPEN_FILE_BUTTON]: false,
+        [UI_ELEMENT.LOG_LEVEL_FILTER]: false,
+        [UI_ELEMENT.EXPORT_LOGS_BUTTON]: false,
+        [UI_ELEMENT.LOG_EVENT_NUM_DISPLAY]: false,
+        [UI_ELEMENT.DRAG_AND_DROP]: false,
+    },
+    [UI_STATE.SLOW_LOADING]: {
+        [UI_ELEMENT.PROGRESS_BAR]: false,
+        [UI_ELEMENT.NAVIGATION_BAR]: false,
+        [UI_ELEMENT.OPEN_FILE_BUTTON]: false,
+        [UI_ELEMENT.LOG_LEVEL_FILTER]: false,
+        [UI_ELEMENT.EXPORT_LOGS_BUTTON]: false,
+        [UI_ELEMENT.LOG_EVENT_NUM_DISPLAY]: true,
+        [UI_ELEMENT.DRAG_AND_DROP]: false,
+    },
+    [UI_STATE.READY]: {
+        [UI_ELEMENT.PROGRESS_BAR]: false,
+        [UI_ELEMENT.NAVIGATION_BAR]: true,
+        [UI_ELEMENT.OPEN_FILE_BUTTON]: true,
+        [UI_ELEMENT.LOG_LEVEL_FILTER]: true,
+        [UI_ELEMENT.EXPORT_LOGS_BUTTON]: true,
+        [UI_ELEMENT.LOG_EVENT_NUM_DISPLAY]: true,
+        [UI_ELEMENT.DRAG_AND_DROP]: true,
+    },
+});
+
 
 /**
  * Whether a UI element is disabled based on provided state.

From 9fe231ba72544ca910d6023629c368c3e4ceb833 Mon Sep 17 00:00:00 2001
From: Dave Marco <marcovitch.david@gmail.com>
Date: Thu, 17 Oct 2024 19:21:22 +0000
Subject: [PATCH 22/38] small change

---
 new-log-viewer/src/utils/states.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/new-log-viewer/src/utils/states.ts b/new-log-viewer/src/utils/states.ts
index a1401f0e..b3a34ae8 100644
--- a/new-log-viewer/src/utils/states.ts
+++ b/new-log-viewer/src/utils/states.ts
@@ -93,12 +93,12 @@ const uiStateGrid: uiStateGrid = Object.freeze({
 /**
  * Whether a UI element is disabled based on provided state.
  *
- * @param state
- * @param UiComponent
+ * @param uiState
+ * @param uiElement
  * @return `true` if the element is disabled, `false` otherwise.
  */
-const isDisabled = (state: UI_STATE, UiComponent: UI_ELEMENT): boolean => {
-    return false === uiStateGrid[state][UiComponent];
+const isDisabled = (uiState: UI_STATE, uiElement: UI_ELEMENT): boolean => {
+    return false === uiStateGrid[uiState][uiElement];
 };
 
 export {

From 7b807495930f119287ec757d5a565e53138f3f80 Mon Sep 17 00:00:00 2001
From: Dave Marco <marcovitch.david@gmail.com>
Date: Fri, 18 Oct 2024 02:54:44 +0000
Subject: [PATCH 23/38] junhao disable pointer request

---
 .../components/MenuBar/ExportLogsButton.tsx   |  2 ++
 .../src/components/MenuBar/NavigationBar.tsx  |  2 ++
 .../src/components/MenuBar/PageNumInput.tsx   |  3 +-
 .../StatusBar/LogLevelSelect/index.tsx        |  7 ++++-
 .../src/contexts/StateContextProvider.tsx     | 20 +++++++++++--
 new-log-viewer/src/index.css                  |  4 +++
 new-log-viewer/src/utils/states.ts            | 29 ++++++++++++++++++-
 7 files changed, 61 insertions(+), 6 deletions(-)

diff --git a/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx b/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx
index 5ffccbe8..6086a73d 100644
--- a/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx
+++ b/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx
@@ -13,6 +13,7 @@ import {
     EXPORT_LOG_PROGRESS_VALUE_MIN,
 } from "../../services/LogExportManager";
 import {
+    ignoreClicksIfFastLoading,
     isDisabled,
     UI_ELEMENT,
 } from "../../utils/states";
@@ -29,6 +30,7 @@ const ExportLogsButton = () => {
 
     return (
         <SmallIconButton
+            className={ignoreClicksIfFastLoading(uiState)}
             disabled={
                 (null !== exportProgress && EXPORT_LOG_PROGRESS_VALUE_MAX !== exportProgress) ||
                 isDisabled(uiState, UI_ELEMENT.EXPORT_LOGS_BUTTON)
diff --git a/new-log-viewer/src/components/MenuBar/NavigationBar.tsx b/new-log-viewer/src/components/MenuBar/NavigationBar.tsx
index 649ca110..6cd4a829 100644
--- a/new-log-viewer/src/components/MenuBar/NavigationBar.tsx
+++ b/new-log-viewer/src/components/MenuBar/NavigationBar.tsx
@@ -13,6 +13,7 @@ import SkipPrevious from "@mui/icons-material/SkipPrevious";
 import {StateContext} from "../../contexts/StateContextProvider";
 import {ACTION_NAME} from "../../utils/actions";
 import {
+    ignoreClicksIfFastLoading,
     isDisabled,
     UI_ELEMENT,
 } from "../../utils/states";
@@ -43,6 +44,7 @@ const NavigationBar = () => {
 
     return (
         <ButtonGroup
+            className={ignoreClicksIfFastLoading(uiState)}
             disabled={isDisabled(uiState, UI_ELEMENT.NAVIGATION_BAR)}
             size={"sm"}
             spacing={0.01}
diff --git a/new-log-viewer/src/components/MenuBar/PageNumInput.tsx b/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
index 4f046e6d..09afa286 100644
--- a/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
+++ b/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
@@ -11,6 +11,7 @@ import Input from "@mui/joy/Input";
 import {StateContext} from "../../contexts/StateContextProvider";
 import {ACTION_NAME} from "../../utils/actions";
 import {
+    ignoreClicksIfFastLoading,
     isDisabled,
     UI_ELEMENT,
 } from "../../utils/states";
@@ -84,7 +85,7 @@ const PageNumInput = () => {
             onSubmit={handleSubmit}
         >
             <Input
-                className={"page-num-input"}
+                className={`page-num-input ${ignoreClicksIfFastLoading(uiState)}`}
                 disabled={disabled}
                 size={"sm"}
                 slotProps={{input: {ref: inputRef}}}
diff --git a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
index fcfe3f08..a7fc26d8 100644
--- a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
+++ b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
@@ -34,6 +34,7 @@ import {
 } from "../../../typings/logs";
 import {range} from "../../../utils/data";
 import {
+    ignoreClicksIfFastLoading,
     isDisabled,
     UI_ELEMENT,
 } from "../../../utils/states";
@@ -69,8 +70,10 @@ const LogSelectOption = ({
     onCheckboxClick,
     onOptionClick,
 }: LogSelectOptionProps) => {
+    const {uiState} = useContext(StateContext);
     return (
         <Option
+            className={ignoreClicksIfFastLoading(uiState)}
             data-value={logLevelValue}
             key={logLevelName}
             value={logLevelValue}
@@ -130,8 +133,10 @@ interface ClearFiltersOptionProps {
  * @return
  */
 const ClearFiltersOption = ({onClick}: ClearFiltersOptionProps) => {
+    const {uiState} = useContext(StateContext);
     return (
         <Option
+            className={ignoreClicksIfFastLoading(uiState)}
             value={INVALID_LOG_LEVEL_VALUE}
             onClick={onClick}
         >
@@ -212,7 +217,7 @@ const LogLevelSelect = () => {
 
     return (
         <Select
-            className={"log-level-select"}
+            className={`log-level-select ${ignoreClicksIfFastLoading(uiState)}`}
             disabled={disabled}
             multiple={true}
             renderValue={handleRenderValue}
diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx
index 32d3d3d3..67bbcee7 100644
--- a/new-log-viewer/src/contexts/StateContextProvider.tsx
+++ b/new-log-viewer/src/contexts/StateContextProvider.tsx
@@ -240,6 +240,8 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     const logEventNumRef = useRef(logEventNum);
     const numPagesRef = useRef<number>(numPages);
     const pageNumRef = useRef<number>(pageNum);
+    const uiStateRef = useRef<number>(uiState);
+    const prevUiStateRef = useRef<number>(uiState);
     const logExportManagerRef = useRef<null|LogExportManager>(null);
     const mainWorkerRef = useRef<null|Worker>(null);
 
@@ -266,6 +268,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 // TODO: notifications should be shown in the UI when the NotificationProvider
                 //  is added
                 console.error(args.logLevel, args.message);
+                setUiState(prevUiStateRef.current);
                 break;
             case WORKER_RESP_CODE.PAGE_DATA: {
                 setLogData(args.logs);
@@ -290,7 +293,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
 
             return;
         }
-
+        prevUiStateRef.current = uiStateRef.current;
         setUiState(UI_STATE.SLOW_LOADING);
         setExportProgress(EXPORT_LOG_PROGRESS_VALUE_MIN);
         logExportManagerRef.current = new LogExportManager(
@@ -308,6 +311,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     ]);
 
     const loadFile = useCallback((fileSrc: FileSrcType, cursor: CursorType) => {
+        prevUiStateRef.current = uiStateRef.current;
         setUiState(UI_STATE.FILE_LOADING);
         setFileName("Loading...");
         setLogData("Loading...");
@@ -347,6 +351,8 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
 
             return;
         }
+        prevUiStateRef.current = uiStateRef.current;
+        setUiState(UI_STATE.FAST_LOADING);
         loadPageByCursor(mainWorkerRef.current, cursor);
     }, []);
 
@@ -354,7 +360,8 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         if (null === mainWorkerRef.current) {
             return;
         }
-
+        prevUiStateRef.current = uiStateRef.current;
+        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: newLogLevelFilter,
@@ -366,7 +373,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         logEventNumRef.current = logEventNum;
     }, [logEventNum]);
 
-    // Synchronize `pageNumRef` with `numPages`.
+    // Synchronize `pageNumRef` with `pageNum`.
     useEffect(() => {
         pageNumRef.current = pageNum;
     }, [pageNum]);
@@ -376,6 +383,11 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         numPagesRef.current = numPages;
     }, [numPages]);
 
+    // Synchronize `uiStateRef` with `uiState`.
+    useEffect(() => {
+        uiStateRef.current = uiState;
+    }, [uiState]);
+
     // On `logEventNum` update, clamp it then switch page if necessary or simply update the URL.
     useEffect(() => {
         if (null === mainWorkerRef.current) {
@@ -401,6 +413,8 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
             args: {eventNum: logEventNum},
         };
 
+        prevUiStateRef.current = uiStateRef.current;
+        setUiState(UI_STATE.FAST_LOADING);
         loadPageByCursor(mainWorkerRef.current, cursor);
     }, [
         numEvents,
diff --git a/new-log-viewer/src/index.css b/new-log-viewer/src/index.css
index ebaf31ac..7420740a 100644
--- a/new-log-viewer/src/index.css
+++ b/new-log-viewer/src/index.css
@@ -34,3 +34,7 @@ html {
     --ylv-drop-file-container-hover-mask-z-index: 10;
     --ylv-drop-file-container-hover-message-z-index: 11;
 }
+
+.disable-pointer-events {
+    pointer-events: none !important;
+}
\ No newline at end of file
diff --git a/new-log-viewer/src/utils/states.ts b/new-log-viewer/src/utils/states.ts
index b3a34ae8..1559fe03 100644
--- a/new-log-viewer/src/utils/states.ts
+++ b/new-log-viewer/src/utils/states.ts
@@ -14,7 +14,12 @@ enum UI_STATE {
     FILE_LOADING,
 
     /**
-     * When a slow request is pending pending response.
+     * When a fast request is pending response.
+     */
+    FAST_LOADING,
+
+    /**
+     * When a slow request is pending response.
      */
     SLOW_LOADING,
 
@@ -69,6 +74,15 @@ const uiStateGrid: uiStateGrid = Object.freeze({
         [UI_ELEMENT.LOG_EVENT_NUM_DISPLAY]: false,
         [UI_ELEMENT.DRAG_AND_DROP]: false,
     },
+    [UI_STATE.FAST_LOADING]: {
+        [UI_ELEMENT.PROGRESS_BAR]: false,
+        [UI_ELEMENT.NAVIGATION_BAR]: true,
+        [UI_ELEMENT.OPEN_FILE_BUTTON]: true,
+        [UI_ELEMENT.LOG_LEVEL_FILTER]: true,
+        [UI_ELEMENT.EXPORT_LOGS_BUTTON]: true,
+        [UI_ELEMENT.LOG_EVENT_NUM_DISPLAY]: true,
+        [UI_ELEMENT.DRAG_AND_DROP]: false,
+    },
     [UI_STATE.SLOW_LOADING]: {
         [UI_ELEMENT.PROGRESS_BAR]: false,
         [UI_ELEMENT.NAVIGATION_BAR]: false,
@@ -101,7 +115,20 @@ const isDisabled = (uiState: UI_STATE, uiElement: UI_ELEMENT): boolean => {
     return false === uiStateGrid[uiState][uiElement];
 };
 
+/**
+ * Returns a css class that ignores pointer events if in fast loading state.
+ *
+ * @param uiState
+ * @return The class name or an empty string.
+ */
+const ignoreClicksIfFastLoading = (uiState: UI_STATE): string => {
+    return (uiState === UI_STATE.FAST_LOADING ?
+        "disable-pointer-events" :
+        "");
+};
+
 export {
+    ignoreClicksIfFastLoading,
     isDisabled,
     UI_ELEMENT,
     UI_STATE,

From aaef52c666b056e3ce0ac683f3950b6605ffa49e Mon Sep 17 00:00:00 2001
From: davemarco <83603688+davemarco@users.noreply.github.com>
Date: Fri, 18 Oct 2024 11:02:03 -0400
Subject: [PATCH 24/38] Update new-log-viewer/src/utils/states.ts

Co-authored-by: Junhao Liao <junhao@junhao.ca>
---
 new-log-viewer/src/utils/states.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/new-log-viewer/src/utils/states.ts b/new-log-viewer/src/utils/states.ts
index 1559fe03..0bac34b7 100644
--- a/new-log-viewer/src/utils/states.ts
+++ b/new-log-viewer/src/utils/states.ts
@@ -111,9 +111,9 @@ const uiStateGrid: uiStateGrid = Object.freeze({
  * @param uiElement
  * @return `true` if the element is disabled, `false` otherwise.
  */
-const isDisabled = (uiState: UI_STATE, uiElement: UI_ELEMENT): boolean => {
-    return false === uiStateGrid[uiState][uiElement];
-};
+const isDisabled = (uiState: UI_STATE, uiElement: UI_ELEMENT): boolean => (
+    false === uiStateGrid[uiState][uiElement]
+);
 
 /**
  * Returns a css class that ignores pointer events if in fast loading state.

From 16c73a930ef5c17cb76f557d792fc9abc492a43e Mon Sep 17 00:00:00 2001
From: davemarco <83603688+davemarco@users.noreply.github.com>
Date: Fri, 18 Oct 2024 11:02:18 -0400
Subject: [PATCH 25/38] Update new-log-viewer/src/utils/states.ts

Co-authored-by: Junhao Liao <junhao@junhao.ca>
---
 new-log-viewer/src/utils/states.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/new-log-viewer/src/utils/states.ts b/new-log-viewer/src/utils/states.ts
index 0bac34b7..94256b98 100644
--- a/new-log-viewer/src/utils/states.ts
+++ b/new-log-viewer/src/utils/states.ts
@@ -121,11 +121,11 @@ const isDisabled = (uiState: UI_STATE, uiElement: UI_ELEMENT): boolean => (
  * @param uiState
  * @return The class name or an empty string.
  */
-const ignoreClicksIfFastLoading = (uiState: UI_STATE): string => {
-    return (uiState === UI_STATE.FAST_LOADING ?
+const ignoreClicksIfFastLoading = (uiState: UI_STATE): string => (
+    uiState === UI_STATE.FAST_LOADING ?
         "disable-pointer-events" :
-        "");
-};
+        ""
+);
 
 export {
     ignoreClicksIfFastLoading,

From aa1edd72303f1c191b99b0cd392f7ce358f014c3 Mon Sep 17 00:00:00 2001
From: davemarco <83603688+davemarco@users.noreply.github.com>
Date: Fri, 18 Oct 2024 11:02:31 -0400
Subject: [PATCH 26/38] Update
 new-log-viewer/src/components/MenuBar/PageNumInput.tsx

Co-authored-by: Junhao Liao <junhao@junhao.ca>
---
 new-log-viewer/src/components/MenuBar/PageNumInput.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/new-log-viewer/src/components/MenuBar/PageNumInput.tsx b/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
index 09afa286..2c5cdeb2 100644
--- a/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
+++ b/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
@@ -93,7 +93,6 @@ const PageNumInput = () => {
                 endDecorator={
                     <Typography
                         level={"body-md"}
-
                         className={`page-num-input-num-pages-text ${disabled ?
                             "page-num-input-num-pages-text-disabled" :
                             ""}`}

From 43a2cee291857fe25f506d3da673d86ab8ac1ef6 Mon Sep 17 00:00:00 2001
From: davemarco <83603688+davemarco@users.noreply.github.com>
Date: Fri, 18 Oct 2024 11:05:16 -0400
Subject: [PATCH 27/38] Update new-log-viewer/src/index.css

Co-authored-by: Junhao Liao <junhao@junhao.ca>
---
 new-log-viewer/src/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/new-log-viewer/src/index.css b/new-log-viewer/src/index.css
index 7420740a..0f630d45 100644
--- a/new-log-viewer/src/index.css
+++ b/new-log-viewer/src/index.css
@@ -37,4 +37,4 @@ html {
 
 .disable-pointer-events {
     pointer-events: none !important;
-}
\ No newline at end of file
+}

From 6393cf390a2767a6b5b13675a9c3dfe4fd771e71 Mon Sep 17 00:00:00 2001
From: Dave Marco <marcovitch.david@gmail.com>
Date: Fri, 18 Oct 2024 16:01:54 +0000
Subject: [PATCH 28/38] junhao review + remove non neccesary pointer events
 class

---
 .../src/components/MenuBar/ExportLogsButton.tsx           | 4 ++--
 new-log-viewer/src/components/MenuBar/NavigationBar.tsx   | 4 ++--
 new-log-viewer/src/components/MenuBar/PageNumInput.tsx    | 6 +++---
 .../src/components/StatusBar/LogLevelSelect/index.tsx     | 8 ++------
 new-log-viewer/src/index.css                              | 2 +-
 new-log-viewer/src/utils/states.ts                        | 6 +++---
 6 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx b/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx
index 6086a73d..199aa00c 100644
--- a/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx
+++ b/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx
@@ -13,7 +13,7 @@ import {
     EXPORT_LOG_PROGRESS_VALUE_MIN,
 } from "../../services/LogExportManager";
 import {
-    ignoreClicksIfFastLoading,
+    ignorePointerIfFastLoading,
     isDisabled,
     UI_ELEMENT,
 } from "../../utils/states";
@@ -30,7 +30,7 @@ const ExportLogsButton = () => {
 
     return (
         <SmallIconButton
-            className={ignoreClicksIfFastLoading(uiState)}
+            className={ignorePointerIfFastLoading(uiState)}
             disabled={
                 (null !== exportProgress && EXPORT_LOG_PROGRESS_VALUE_MAX !== exportProgress) ||
                 isDisabled(uiState, UI_ELEMENT.EXPORT_LOGS_BUTTON)
diff --git a/new-log-viewer/src/components/MenuBar/NavigationBar.tsx b/new-log-viewer/src/components/MenuBar/NavigationBar.tsx
index 6cd4a829..fb4d98cb 100644
--- a/new-log-viewer/src/components/MenuBar/NavigationBar.tsx
+++ b/new-log-viewer/src/components/MenuBar/NavigationBar.tsx
@@ -13,7 +13,7 @@ import SkipPrevious from "@mui/icons-material/SkipPrevious";
 import {StateContext} from "../../contexts/StateContextProvider";
 import {ACTION_NAME} from "../../utils/actions";
 import {
-    ignoreClicksIfFastLoading,
+    ignorePointerIfFastLoading,
     isDisabled,
     UI_ELEMENT,
 } from "../../utils/states";
@@ -44,7 +44,7 @@ const NavigationBar = () => {
 
     return (
         <ButtonGroup
-            className={ignoreClicksIfFastLoading(uiState)}
+            className={ignorePointerIfFastLoading(uiState)}
             disabled={isDisabled(uiState, UI_ELEMENT.NAVIGATION_BAR)}
             size={"sm"}
             spacing={0.01}
diff --git a/new-log-viewer/src/components/MenuBar/PageNumInput.tsx b/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
index 09afa286..1311b381 100644
--- a/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
+++ b/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
@@ -11,7 +11,7 @@ import Input from "@mui/joy/Input";
 import {StateContext} from "../../contexts/StateContextProvider";
 import {ACTION_NAME} from "../../utils/actions";
 import {
-    ignoreClicksIfFastLoading,
+    ignorePointerIfFastLoading,
     isDisabled,
     UI_ELEMENT,
 } from "../../utils/states";
@@ -28,7 +28,7 @@ const PAGE_NUM_INPUT_FIT_EXTRA_WIDTH = 2;
  * @return
  */
 const PageNumInput = () => {
-    const {uiState, loadPageByAction, numPages, pageNum} = useContext(StateContext);
+    const {loadPageByAction, numPages, pageNum, uiState} = useContext(StateContext);
 
     const [isEditing, setIsEditing] = useState<boolean>(false);
     const inputRef = useRef<HTMLInputElement>(null);
@@ -85,7 +85,7 @@ const PageNumInput = () => {
             onSubmit={handleSubmit}
         >
             <Input
-                className={`page-num-input ${ignoreClicksIfFastLoading(uiState)}`}
+                className={`page-num-input ${ignorePointerIfFastLoading(uiState)}`}
                 disabled={disabled}
                 size={"sm"}
                 slotProps={{input: {ref: inputRef}}}
diff --git a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
index a7fc26d8..b17a4eea 100644
--- a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
+++ b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
@@ -34,7 +34,7 @@ import {
 } from "../../../typings/logs";
 import {range} from "../../../utils/data";
 import {
-    ignoreClicksIfFastLoading,
+    ignorePointerIfFastLoading,
     isDisabled,
     UI_ELEMENT,
 } from "../../../utils/states";
@@ -70,10 +70,8 @@ const LogSelectOption = ({
     onCheckboxClick,
     onOptionClick,
 }: LogSelectOptionProps) => {
-    const {uiState} = useContext(StateContext);
     return (
         <Option
-            className={ignoreClicksIfFastLoading(uiState)}
             data-value={logLevelValue}
             key={logLevelName}
             value={logLevelValue}
@@ -133,10 +131,8 @@ interface ClearFiltersOptionProps {
  * @return
  */
 const ClearFiltersOption = ({onClick}: ClearFiltersOptionProps) => {
-    const {uiState} = useContext(StateContext);
     return (
         <Option
-            className={ignoreClicksIfFastLoading(uiState)}
             value={INVALID_LOG_LEVEL_VALUE}
             onClick={onClick}
         >
@@ -217,7 +213,7 @@ const LogLevelSelect = () => {
 
     return (
         <Select
-            className={`log-level-select ${ignoreClicksIfFastLoading(uiState)}`}
+            className={`log-level-select ${ignorePointerIfFastLoading(uiState)}`}
             disabled={disabled}
             multiple={true}
             renderValue={handleRenderValue}
diff --git a/new-log-viewer/src/index.css b/new-log-viewer/src/index.css
index 7420740a..0f630d45 100644
--- a/new-log-viewer/src/index.css
+++ b/new-log-viewer/src/index.css
@@ -37,4 +37,4 @@ html {
 
 .disable-pointer-events {
     pointer-events: none !important;
-}
\ No newline at end of file
+}
diff --git a/new-log-viewer/src/utils/states.ts b/new-log-viewer/src/utils/states.ts
index 1559fe03..db0a9604 100644
--- a/new-log-viewer/src/utils/states.ts
+++ b/new-log-viewer/src/utils/states.ts
@@ -119,16 +119,16 @@ const isDisabled = (uiState: UI_STATE, uiElement: UI_ELEMENT): boolean => {
  * Returns a css class that ignores pointer events if in fast loading state.
  *
  * @param uiState
- * @return The class name or an empty string.
+ * @return Ignore pointer class name or an empty string.
  */
-const ignoreClicksIfFastLoading = (uiState: UI_STATE): string => {
+const ignorePointerIfFastLoading = (uiState: UI_STATE): string => {
     return (uiState === UI_STATE.FAST_LOADING ?
         "disable-pointer-events" :
         "");
 };
 
 export {
-    ignoreClicksIfFastLoading,
+    ignorePointerIfFastLoading,
     isDisabled,
     UI_ELEMENT,
     UI_STATE,

From 6b51a48b5607b1def24fcdb0d52264c7e8c46ec8 Mon Sep 17 00:00:00 2001
From: Junhao Liao <junhao@junhao.ca>
Date: Fri, 18 Oct 2024 20:48:53 -0400
Subject: [PATCH 29/38] Refactor the LinearProgress component in MenuBar to use
 the 'thickness' prop directly instead of custom CSS properties.

---
 new-log-viewer/src/components/MenuBar/index.css | 5 -----
 new-log-viewer/src/components/MenuBar/index.tsx | 3 ++-
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/new-log-viewer/src/components/MenuBar/index.css b/new-log-viewer/src/components/MenuBar/index.css
index 71e61d35..516addf4 100644
--- a/new-log-viewer/src/components/MenuBar/index.css
+++ b/new-log-viewer/src/components/MenuBar/index.css
@@ -28,11 +28,6 @@
 }
 
 .menu-bar-loading-progress {
-    /* stylelint-disable-next-line custom-property-pattern */
-    --LinearProgress-thickness: 2px !important;
-    /* stylelint-disable-next-line custom-property-pattern */
-    --LinearProgress-progressThickness: 2px !important;
-
     z-index: var(--ylv-loading-progress-z-index);
     margin-bottom: -2px;
 }
diff --git a/new-log-viewer/src/components/MenuBar/index.tsx b/new-log-viewer/src/components/MenuBar/index.tsx
index ea64275c..e77554ca 100644
--- a/new-log-viewer/src/components/MenuBar/index.tsx
+++ b/new-log-viewer/src/components/MenuBar/index.tsx
@@ -81,7 +81,8 @@ const MenuBar = () => {
             {(false === isDisabled(uiState, UI_ELEMENT.PROGRESS_BAR)) &&
                 <LinearProgress
                     className={"menu-bar-loading-progress"}
-                    size={"sm"}/>}
+                    size={"sm"}
+                    thickness={2}/>}
         </>
     );
 };

From 49eeefa37749eef14d22b481fe8b9d5a4d38e8d4 Mon Sep 17 00:00:00 2001
From: davemarco <83603688+davemarco@users.noreply.github.com>
Date: Mon, 21 Oct 2024 10:11:00 -0400
Subject: [PATCH 30/38] Update new-log-viewer/src/utils/states.ts

---
 new-log-viewer/src/utils/states.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/new-log-viewer/src/utils/states.ts b/new-log-viewer/src/utils/states.ts
index 263cf892..a57546f6 100644
--- a/new-log-viewer/src/utils/states.ts
+++ b/new-log-viewer/src/utils/states.ts
@@ -14,7 +14,7 @@ enum UI_STATE {
     FILE_LOADING,
 
     /**
-     * When a fast request is pending response.
+     * When a fast request is pending response. In this state, UI elements are not visually disabled but instead ignore pointer events. Rapidly disabling/enabling UI elements is jarring to the user. 
      */
     FAST_LOADING,
 

From 4a8a1657d5078a7ee2fe87e732689dfabdd27bc2 Mon Sep 17 00:00:00 2001
From: davemarco <83603688+davemarco@users.noreply.github.com>
Date: Mon, 21 Oct 2024 10:11:09 -0400
Subject: [PATCH 31/38] Update
 new-log-viewer/src/contexts/StateContextProvider.tsx

---
 new-log-viewer/src/contexts/StateContextProvider.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx
index 6ac9b437..bbead08b 100644
--- a/new-log-viewer/src/contexts/StateContextProvider.tsx
+++ b/new-log-viewer/src/contexts/StateContextProvider.tsx
@@ -427,6 +427,10 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     // Synchronize `uiStateRef` with `uiState`.
     useEffect(() => {
         uiStateRef.current = uiState;
+        if (uiState === UI_STATE.UNOPENED) {
+            setFileName(STATE_DEFAULT.fileName);
+            setLogData(STATE_DEFAULT.logData);
+        }
     }, [uiState]);
 
     // On `logEventNum` update, clamp it then switch page if necessary or simply update the URL.

From fa7c233f8a7ea5c3ce28a632806b01f3c32dc46a Mon Sep 17 00:00:00 2001
From: Dave Marco <marcovitch.david@gmail.com>
Date: Mon, 21 Oct 2024 14:13:49 +0000
Subject: [PATCH 32/38] fix lint

---
 new-log-viewer/src/contexts/StateContextProvider.tsx | 6 +++---
 new-log-viewer/src/utils/states.ts                   | 4 +++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx
index bbead08b..72f9fc29 100644
--- a/new-log-viewer/src/contexts/StateContextProvider.tsx
+++ b/new-log-viewer/src/contexts/StateContextProvider.tsx
@@ -1,4 +1,4 @@
-/* eslint max-lines: ["error", 500] */
+/* eslint max-lines: ["error", 600] */
 import React, {
     createContext,
     useCallback,
@@ -85,8 +85,8 @@ const STATE_DEFAULT: Readonly<StateContextType> = Object.freeze({
     numPages: 0,
     onDiskFileSizeInBytes: 0,
     pageNum: 0,
-    uiState: UI_STATE.UNOPENED,
     queryResults: new Map(),
+    uiState: UI_STATE.UNOPENED,
 
     exportLogs: () => null,
     loadFile: () => null,
@@ -496,8 +496,8 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 numPages: numPages,
                 onDiskFileSizeInBytes: onDiskFileSizeInBytes,
                 pageNum: pageNum,
-                uiState: uiState,
                 queryResults: queryResults,
+                uiState: uiState,
 
                 exportLogs: exportLogs,
                 loadFile: loadFile,
diff --git a/new-log-viewer/src/utils/states.ts b/new-log-viewer/src/utils/states.ts
index a57546f6..b0812584 100644
--- a/new-log-viewer/src/utils/states.ts
+++ b/new-log-viewer/src/utils/states.ts
@@ -14,7 +14,9 @@ enum UI_STATE {
     FILE_LOADING,
 
     /**
-     * When a fast request is pending response. In this state, UI elements are not visually disabled but instead ignore pointer events. Rapidly disabling/enabling UI elements is jarring to the user. 
+     * When a fast request is pending response. In this state, UI elements are not visually
+     * disabled but instead ignore pointer events. Rapidly disabling/enabling UI elements is
+     * jarring to the user.
      */
     FAST_LOADING,
 

From c80596c04804bc558dfb4a868833c6927f7a18f9 Mon Sep 17 00:00:00 2001
From: Dave Marco <marcovitch.david@gmail.com>
Date: Mon, 21 Oct 2024 22:05:00 +0000
Subject: [PATCH 33/38] new approach based on slack

---
 .../components/DropFileContainer/index.tsx    |   6 +-
 .../components/MenuBar/ExportLogsButton.tsx   |   2 +-
 .../src/components/MenuBar/NavigationBar.tsx  |   2 +-
 .../src/components/MenuBar/PageNumInput.tsx   |   2 +-
 .../src/components/MenuBar/index.tsx          |   6 +-
 .../StatusBar/LogLevelSelect/index.tsx        |   2 +-
 .../src/components/StatusBar/index.tsx        |   6 +-
 .../src/contexts/StateContextProvider.tsx     |  27 ++--
 new-log-viewer/src/utils/states.ts            | 115 +-----------------
 9 files changed, 34 insertions(+), 134 deletions(-)

diff --git a/new-log-viewer/src/components/DropFileContainer/index.tsx b/new-log-viewer/src/components/DropFileContainer/index.tsx
index c2eb2627..373a171f 100644
--- a/new-log-viewer/src/components/DropFileContainer/index.tsx
+++ b/new-log-viewer/src/components/DropFileContainer/index.tsx
@@ -4,11 +4,9 @@ import React, {
 } from "react";
 
 import {StateContext} from "../../contexts/StateContextProvider";
+import {UI_ELEMENT} from "../../typings/states";
 import {CURSOR_CODE} from "../../typings/worker";
-import {
-    isDisabled,
-    UI_ELEMENT,
-} from "../../utils/states";
+import {isDisabled} from "../../utils/states";
 
 import "./index.css";
 
diff --git a/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx b/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx
index 199aa00c..5d9a2252 100644
--- a/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx
+++ b/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx
@@ -12,10 +12,10 @@ import {
     EXPORT_LOG_PROGRESS_VALUE_MAX,
     EXPORT_LOG_PROGRESS_VALUE_MIN,
 } from "../../services/LogExportManager";
+import {UI_ELEMENT} from "../../typings/states";
 import {
     ignorePointerIfFastLoading,
     isDisabled,
-    UI_ELEMENT,
 } from "../../utils/states";
 import SmallIconButton from "./SmallIconButton";
 
diff --git a/new-log-viewer/src/components/MenuBar/NavigationBar.tsx b/new-log-viewer/src/components/MenuBar/NavigationBar.tsx
index fb4d98cb..28b384a4 100644
--- a/new-log-viewer/src/components/MenuBar/NavigationBar.tsx
+++ b/new-log-viewer/src/components/MenuBar/NavigationBar.tsx
@@ -11,11 +11,11 @@ import SkipNext from "@mui/icons-material/SkipNext";
 import SkipPrevious from "@mui/icons-material/SkipPrevious";
 
 import {StateContext} from "../../contexts/StateContextProvider";
+import {UI_ELEMENT} from "../../typings/states";
 import {ACTION_NAME} from "../../utils/actions";
 import {
     ignorePointerIfFastLoading,
     isDisabled,
-    UI_ELEMENT,
 } from "../../utils/states";
 import PageNumInput from "./PageNumInput";
 
diff --git a/new-log-viewer/src/components/MenuBar/PageNumInput.tsx b/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
index bc56e940..050f4124 100644
--- a/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
+++ b/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
@@ -11,11 +11,11 @@ import {
 } from "@mui/joy";
 
 import {StateContext} from "../../contexts/StateContextProvider";
+import {UI_ELEMENT} from "../../typings/states";
 import {ACTION_NAME} from "../../utils/actions";
 import {
     ignorePointerIfFastLoading,
     isDisabled,
-    UI_ELEMENT,
 } from "../../utils/states";
 
 import "./PageNumInput.css";
diff --git a/new-log-viewer/src/components/MenuBar/index.tsx b/new-log-viewer/src/components/MenuBar/index.tsx
index 4be5125f..2fc0290a 100644
--- a/new-log-viewer/src/components/MenuBar/index.tsx
+++ b/new-log-viewer/src/components/MenuBar/index.tsx
@@ -13,12 +13,10 @@ import {
 import FolderOpenIcon from "@mui/icons-material/FolderOpen";
 
 import {StateContext} from "../../contexts/StateContextProvider";
+import {UI_ELEMENT} from "../../typings/states";
 import {CURSOR_CODE} from "../../typings/worker";
 import {openFile} from "../../utils/file";
-import {
-    isDisabled,
-    UI_ELEMENT,
-} from "../../utils/states";
+import {isDisabled} from "../../utils/states";
 import ExportLogsButton from "./ExportLogsButton";
 import NavigationBar from "./NavigationBar";
 
diff --git a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
index a77d43fa..116b5d6e 100644
--- a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
+++ b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
@@ -32,11 +32,11 @@ import {
     LOG_LEVEL_NAMES,
     MAX_LOG_LEVEL,
 } from "../../../typings/logs";
+import {UI_ELEMENT} from "../../../typings/states";
 import {range} from "../../../utils/data";
 import {
     ignorePointerIfFastLoading,
     isDisabled,
-    UI_ELEMENT,
 } from "../../../utils/states";
 import LogLevelChip from "./LogLevelChip";
 
diff --git a/new-log-viewer/src/components/StatusBar/index.tsx b/new-log-viewer/src/components/StatusBar/index.tsx
index 6ee7ba5a..8ddbe830 100644
--- a/new-log-viewer/src/components/StatusBar/index.tsx
+++ b/new-log-viewer/src/components/StatusBar/index.tsx
@@ -11,10 +11,8 @@ import {
     copyPermalinkToClipboard,
     UrlContext,
 } from "../../contexts/UrlContextProvider";
-import {
-    isDisabled,
-    UI_ELEMENT,
-} from "../../utils/states";
+import {UI_ELEMENT} from "../../typings/states";
+import {isDisabled} from "../../utils/states";
 import LogLevelSelect from "./LogLevelSelect";
 
 import "./index.css";
diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx
index 72f9fc29..99f09ff7 100644
--- a/new-log-viewer/src/contexts/StateContextProvider.tsx
+++ b/new-log-viewer/src/contexts/StateContextProvider.tsx
@@ -16,6 +16,7 @@ import {Nullable} from "../typings/common";
 import {CONFIG_KEY} from "../typings/config";
 import {LogLevelFilter} from "../typings/logs";
 import {DEFAULT_AUTO_DISMISS_TIMEOUT_MILLIS} from "../typings/notifications";
+import {UI_STATE} from "../typings/states";
 import {SEARCH_PARAM_NAMES} from "../typings/url";
 import {
     BeginLineNumToLogEventNumMap,
@@ -42,7 +43,6 @@ import {
     isWithinBounds,
 } from "../utils/data";
 import {clamp} from "../utils/math";
-import {UI_STATE} from "../utils/states";
 import {NotificationContext} from "./NotificationContextProvider";
 import {
     updateWindowUrlHashParams,
@@ -249,8 +249,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     const logEventNumRef = useRef(logEventNum);
     const numPagesRef = useRef<number>(numPages);
     const pageNumRef = useRef<number>(pageNum);
-    const uiStateRef = useRef<number>(uiState);
-    const prevUiStateRef = useRef<number>(uiState);
+    const uiStateRef = useRef<UI_STATE>(uiState);
     const logExportManagerRef = useRef<null|LogExportManager>(null);
     const mainWorkerRef = useRef<null|Worker>(null);
 
@@ -279,7 +278,21 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                     timeoutMillis: DEFAULT_AUTO_DISMISS_TIMEOUT_MILLIS,
                     title: "Action failed",
                 });
-                setUiState(prevUiStateRef.current);
+
+                switch (uiStateRef.current) {
+                    case UI_STATE.FAST_LOADING:
+                        setUiState(UI_STATE.READY);
+                        break;
+                    case UI_STATE.SLOW_LOADING:
+                        setUiState(UI_STATE.READY);
+                        break;
+                    case UI_STATE.FILE_LOADING:
+                        setUiState(UI_STATE.UNOPENED);
+                        break;
+                    default:
+                        break;
+                }
+
                 break;
             case WORKER_RESP_CODE.PAGE_DATA: {
                 setLogData(args.logs);
@@ -334,7 +347,6 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
 
             return;
         }
-        prevUiStateRef.current = uiStateRef.current;
         setUiState(UI_STATE.SLOW_LOADING);
         setExportProgress(EXPORT_LOG_PROGRESS_VALUE_MIN);
         logExportManagerRef.current = new LogExportManager(
@@ -352,7 +364,6 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     ]);
 
     const loadFile = useCallback((fileSrc: FileSrcType, cursor: CursorType) => {
-        prevUiStateRef.current = uiStateRef.current;
         setUiState(UI_STATE.FILE_LOADING);
         setFileName("Loading...");
         setLogData("Loading...");
@@ -392,7 +403,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
 
             return;
         }
-        prevUiStateRef.current = uiStateRef.current;
+
         setUiState(UI_STATE.FAST_LOADING);
         loadPageByCursor(mainWorkerRef.current, cursor);
     }, []);
@@ -401,7 +412,6 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         if (null === mainWorkerRef.current) {
             return;
         }
-        prevUiStateRef.current = uiStateRef.current;
         setUiState(UI_STATE.FAST_LOADING);
         workerPostReq(mainWorkerRef.current, WORKER_REQ_CODE.SET_FILTER, {
             cursor: {code: CURSOR_CODE.EVENT_NUM, args: {eventNum: logEventNumRef.current ?? 1}},
@@ -458,7 +468,6 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
             args: {eventNum: logEventNum},
         };
 
-        prevUiStateRef.current = uiStateRef.current;
         setUiState(UI_STATE.FAST_LOADING);
         loadPageByCursor(mainWorkerRef.current, cursor);
     }, [
diff --git a/new-log-viewer/src/utils/states.ts b/new-log-viewer/src/utils/states.ts
index b0812584..3651d16e 100644
--- a/new-log-viewer/src/utils/states.ts
+++ b/new-log-viewer/src/utils/states.ts
@@ -1,109 +1,8 @@
-/**
- * Various states of the UI. UI components may be enabled or disabled based on the state.
- */
-enum UI_STATE {
-
-    /**
-     * When there is no file opened in the viewer.
-     */
-    UNOPENED,
-
-    /**
-     * When a file load request is pending response.
-     */
-    FILE_LOADING,
-
-    /**
-     * When a fast request is pending response. In this state, UI elements are not visually
-     * disabled but instead ignore pointer events. Rapidly disabling/enabling UI elements is
-     * jarring to the user.
-     */
-    FAST_LOADING,
-
-    /**
-     * When a slow request is pending response.
-     */
-    SLOW_LOADING,
-
-    /**
-     * When the file is loaded.
-     */
-    READY,
-}
-
-/**
- * Stateful elements in the UI.
- */
-enum UI_ELEMENT {
-    PROGRESS_BAR,
-    NAVIGATION_BAR,
-    OPEN_FILE_BUTTON,
-    LOG_LEVEL_FILTER,
-    EXPORT_LOGS_BUTTON,
-    LOG_EVENT_NUM_DISPLAY,
-    DRAG_AND_DROP,
-}
-
-type uiElementRow = {
-    [key in UI_ELEMENT]: boolean;
-};
-
-type uiStateGrid = {
-    [key in UI_STATE]: uiElementRow;
-};
-
-/**
- * Grid describing whether a `UI_ELEMENT` is enabled or disabled for every `UI_STATE`. Each
- * `UI_STATE` has its own row with a boolean for each `UI_ELEMENT`. Boolean is `true` if the
- * element is enabled, or `false` if disabled.
- */
-const uiStateGrid: uiStateGrid = Object.freeze({
-    [UI_STATE.UNOPENED]: {
-        [UI_ELEMENT.PROGRESS_BAR]: false,
-        [UI_ELEMENT.NAVIGATION_BAR]: false,
-        [UI_ELEMENT.OPEN_FILE_BUTTON]: true,
-        [UI_ELEMENT.LOG_LEVEL_FILTER]: false,
-        [UI_ELEMENT.EXPORT_LOGS_BUTTON]: false,
-        [UI_ELEMENT.LOG_EVENT_NUM_DISPLAY]: false,
-        [UI_ELEMENT.DRAG_AND_DROP]: true,
-    },
-    [UI_STATE.FILE_LOADING]: {
-        [UI_ELEMENT.PROGRESS_BAR]: true,
-        [UI_ELEMENT.NAVIGATION_BAR]: false,
-        [UI_ELEMENT.OPEN_FILE_BUTTON]: false,
-        [UI_ELEMENT.LOG_LEVEL_FILTER]: false,
-        [UI_ELEMENT.EXPORT_LOGS_BUTTON]: false,
-        [UI_ELEMENT.LOG_EVENT_NUM_DISPLAY]: false,
-        [UI_ELEMENT.DRAG_AND_DROP]: false,
-    },
-    [UI_STATE.FAST_LOADING]: {
-        [UI_ELEMENT.PROGRESS_BAR]: false,
-        [UI_ELEMENT.NAVIGATION_BAR]: true,
-        [UI_ELEMENT.OPEN_FILE_BUTTON]: true,
-        [UI_ELEMENT.LOG_LEVEL_FILTER]: true,
-        [UI_ELEMENT.EXPORT_LOGS_BUTTON]: true,
-        [UI_ELEMENT.LOG_EVENT_NUM_DISPLAY]: true,
-        [UI_ELEMENT.DRAG_AND_DROP]: false,
-    },
-    [UI_STATE.SLOW_LOADING]: {
-        [UI_ELEMENT.PROGRESS_BAR]: false,
-        [UI_ELEMENT.NAVIGATION_BAR]: false,
-        [UI_ELEMENT.OPEN_FILE_BUTTON]: false,
-        [UI_ELEMENT.LOG_LEVEL_FILTER]: false,
-        [UI_ELEMENT.EXPORT_LOGS_BUTTON]: false,
-        [UI_ELEMENT.LOG_EVENT_NUM_DISPLAY]: true,
-        [UI_ELEMENT.DRAG_AND_DROP]: false,
-    },
-    [UI_STATE.READY]: {
-        [UI_ELEMENT.PROGRESS_BAR]: false,
-        [UI_ELEMENT.NAVIGATION_BAR]: true,
-        [UI_ELEMENT.OPEN_FILE_BUTTON]: true,
-        [UI_ELEMENT.LOG_LEVEL_FILTER]: true,
-        [UI_ELEMENT.EXPORT_LOGS_BUTTON]: true,
-        [UI_ELEMENT.LOG_EVENT_NUM_DISPLAY]: true,
-        [UI_ELEMENT.DRAG_AND_DROP]: true,
-    },
-});
+import {
+    UI_ELEMENT,
+    UI_STATE,
+    UI_STATE_GRID,
+} from "../typings/states";
 
 
 /**
@@ -114,7 +13,7 @@ const uiStateGrid: uiStateGrid = Object.freeze({
  * @return `true` if the element is disabled, `false` otherwise.
  */
 const isDisabled = (uiState: UI_STATE, uiElement: UI_ELEMENT): boolean => (
-    false === uiStateGrid[uiState][uiElement]
+    false === UI_STATE_GRID[uiState][uiElement]
 );
 
 /**
@@ -132,6 +31,4 @@ const ignorePointerIfFastLoading = (uiState: UI_STATE): string => (
 export {
     ignorePointerIfFastLoading,
     isDisabled,
-    UI_ELEMENT,
-    UI_STATE,
 };

From c22611dfc8aa276d868e51ec906588c68cb06718 Mon Sep 17 00:00:00 2001
From: Dave Marco <marcovitch.david@gmail.com>
Date: Mon, 21 Oct 2024 22:08:44 +0000
Subject: [PATCH 34/38] add missing file

---
 new-log-viewer/src/typings/states.ts | 112 +++++++++++++++++++++++++++
 1 file changed, 112 insertions(+)
 create mode 100644 new-log-viewer/src/typings/states.ts

diff --git a/new-log-viewer/src/typings/states.ts b/new-log-viewer/src/typings/states.ts
new file mode 100644
index 00000000..cc606f5e
--- /dev/null
+++ b/new-log-viewer/src/typings/states.ts
@@ -0,0 +1,112 @@
+/**
+ * Various states of the UI. UI components may be enabled or disabled based on the state.
+ */
+enum UI_STATE {
+
+    /**
+     * When there is no file opened in the viewer.
+     */
+    UNOPENED,
+
+    /**
+     * When a file load request is pending response.
+     */
+    FILE_LOADING,
+
+    /**
+     * When a fast request is pending response. In this state, UI elements are not visually
+     * disabled but instead ignore pointer events. Rapidly disabling/enabling UI elements is
+     * jarring to the user.
+     */
+    FAST_LOADING,
+
+    /**
+     * When a slow request is pending response.
+     */
+    SLOW_LOADING,
+
+    /**
+     * When the file is loaded.
+     */
+    READY,
+}
+
+/**
+ * Stateful elements in the UI.
+ */
+enum UI_ELEMENT {
+    PROGRESS_BAR,
+    NAVIGATION_BAR,
+    OPEN_FILE_BUTTON,
+    LOG_LEVEL_FILTER,
+    EXPORT_LOGS_BUTTON,
+    LOG_EVENT_NUM_DISPLAY,
+    DRAG_AND_DROP,
+}
+
+type UiElementRowType = {
+    [key in UI_ELEMENT]: boolean;
+};
+
+type UiStateGridType = {
+    [key in UI_STATE]: UiElementRowType;
+};
+
+/**
+ * Grid describing whether a `UI_ELEMENT` is enabled or disabled for every `UI_STATE`. Each
+ * `UI_STATE` has its own row with a boolean for each `UI_ELEMENT`. Boolean is `true` if the
+ * element is enabled, or `false` if disabled.
+ */
+const UI_STATE_GRID: UiStateGridType = Object.freeze({
+    [UI_STATE.UNOPENED]: {
+        [UI_ELEMENT.PROGRESS_BAR]: false,
+        [UI_ELEMENT.NAVIGATION_BAR]: false,
+        [UI_ELEMENT.OPEN_FILE_BUTTON]: true,
+        [UI_ELEMENT.LOG_LEVEL_FILTER]: false,
+        [UI_ELEMENT.EXPORT_LOGS_BUTTON]: false,
+        [UI_ELEMENT.LOG_EVENT_NUM_DISPLAY]: false,
+        [UI_ELEMENT.DRAG_AND_DROP]: true,
+    },
+    [UI_STATE.FILE_LOADING]: {
+        [UI_ELEMENT.PROGRESS_BAR]: true,
+        [UI_ELEMENT.NAVIGATION_BAR]: false,
+        [UI_ELEMENT.OPEN_FILE_BUTTON]: false,
+        [UI_ELEMENT.LOG_LEVEL_FILTER]: false,
+        [UI_ELEMENT.EXPORT_LOGS_BUTTON]: false,
+        [UI_ELEMENT.LOG_EVENT_NUM_DISPLAY]: false,
+        [UI_ELEMENT.DRAG_AND_DROP]: false,
+    },
+    [UI_STATE.FAST_LOADING]: {
+        [UI_ELEMENT.PROGRESS_BAR]: true,
+        [UI_ELEMENT.NAVIGATION_BAR]: true,
+        [UI_ELEMENT.OPEN_FILE_BUTTON]: true,
+        [UI_ELEMENT.LOG_LEVEL_FILTER]: true,
+        [UI_ELEMENT.EXPORT_LOGS_BUTTON]: true,
+        [UI_ELEMENT.LOG_EVENT_NUM_DISPLAY]: true,
+        [UI_ELEMENT.DRAG_AND_DROP]: false,
+    },
+    [UI_STATE.SLOW_LOADING]: {
+        [UI_ELEMENT.PROGRESS_BAR]: false,
+        [UI_ELEMENT.NAVIGATION_BAR]: false,
+        [UI_ELEMENT.OPEN_FILE_BUTTON]: false,
+        [UI_ELEMENT.LOG_LEVEL_FILTER]: false,
+        [UI_ELEMENT.EXPORT_LOGS_BUTTON]: false,
+        [UI_ELEMENT.LOG_EVENT_NUM_DISPLAY]: true,
+        [UI_ELEMENT.DRAG_AND_DROP]: false,
+    },
+    [UI_STATE.READY]: {
+        [UI_ELEMENT.PROGRESS_BAR]: false,
+        [UI_ELEMENT.NAVIGATION_BAR]: true,
+        [UI_ELEMENT.OPEN_FILE_BUTTON]: true,
+        [UI_ELEMENT.LOG_LEVEL_FILTER]: true,
+        [UI_ELEMENT.EXPORT_LOGS_BUTTON]: true,
+        [UI_ELEMENT.LOG_EVENT_NUM_DISPLAY]: true,
+        [UI_ELEMENT.DRAG_AND_DROP]: true,
+    },
+});
+
+export {
+    UI_ELEMENT,
+    UI_STATE,
+    UI_STATE_GRID,
+};

From be12a2d15221a4a71d07d5c4d1a8a995c37b96a0 Mon Sep 17 00:00:00 2001
From: davemarco <83603688+davemarco@users.noreply.github.com>
Date: Mon, 21 Oct 2024 18:28:27 -0400
Subject: [PATCH 35/38] Apply suggestions from code review

Co-authored-by: Junhao Liao <junhao@junhao.ca>
---
 new-log-viewer/src/typings/states.ts | 60 ++++++++++++++--------------
 new-log-viewer/src/utils/states.ts   |  2 +-
 2 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/new-log-viewer/src/typings/states.ts b/new-log-viewer/src/typings/states.ts
index cc606f5e..eb2b3966 100644
--- a/new-log-viewer/src/typings/states.ts
+++ b/new-log-viewer/src/typings/states.ts
@@ -35,13 +35,13 @@ enum UI_STATE {
  * Stateful elements in the UI.
  */
 enum UI_ELEMENT {
-    PROGRESS_BAR,
-    NAVIGATION_BAR,
-    OPEN_FILE_BUTTON,
-    LOG_LEVEL_FILTER,
+    DRAG_AND_DROP,
     EXPORT_LOGS_BUTTON,
     LOG_EVENT_NUM_DISPLAY,
-    DRAG_AND_DROP,
+    LOG_LEVEL_FILTER,
+    NAVIGATION_BAR,
+    OPEN_FILE_BUTTON,
+    PROGRESS_BAR,
 }
 
 type UiElementRowType = {
@@ -59,49 +59,49 @@ type UiStateGridType = {
  */
 const UI_STATE_GRID: UiStateGridType = Object.freeze({
     [UI_STATE.UNOPENED]: {
-        [UI_ELEMENT.PROGRESS_BAR]: false,
-        [UI_ELEMENT.NAVIGATION_BAR]: false,
-        [UI_ELEMENT.OPEN_FILE_BUTTON]: true,
-        [UI_ELEMENT.LOG_LEVEL_FILTER]: false,
+        [UI_ELEMENT.DRAG_AND_DROP]: true,
         [UI_ELEMENT.EXPORT_LOGS_BUTTON]: false,
         [UI_ELEMENT.LOG_EVENT_NUM_DISPLAY]: false,
-        [UI_ELEMENT.DRAG_AND_DROP]: true,
+        [UI_ELEMENT.LOG_LEVEL_FILTER]: false,
+        [UI_ELEMENT.NAVIGATION_BAR]: false,
+        [UI_ELEMENT.OPEN_FILE_BUTTON]: true,
+        [UI_ELEMENT.PROGRESS_BAR]: false,
     },
     [UI_STATE.FILE_LOADING]: {
-        [UI_ELEMENT.PROGRESS_BAR]: true,
-        [UI_ELEMENT.NAVIGATION_BAR]: false,
-        [UI_ELEMENT.OPEN_FILE_BUTTON]: false,
-        [UI_ELEMENT.LOG_LEVEL_FILTER]: false,
+        [UI_ELEMENT.DRAG_AND_DROP]: false,
         [UI_ELEMENT.EXPORT_LOGS_BUTTON]: false,
         [UI_ELEMENT.LOG_EVENT_NUM_DISPLAY]: false,
-        [UI_ELEMENT.DRAG_AND_DROP]: false,
+        [UI_ELEMENT.LOG_LEVEL_FILTER]: false,
+        [UI_ELEMENT.NAVIGATION_BAR]: false,
+        [UI_ELEMENT.OPEN_FILE_BUTTON]: false,
+        [UI_ELEMENT.PROGRESS_BAR]: true,
     },
     [UI_STATE.FAST_LOADING]: {
-        [UI_ELEMENT.PROGRESS_BAR]: true,
-        [UI_ELEMENT.NAVIGATION_BAR]: true,
-        [UI_ELEMENT.OPEN_FILE_BUTTON]: true,
-        [UI_ELEMENT.LOG_LEVEL_FILTER]: true,
+        [UI_ELEMENT.DRAG_AND_DROP]: true,
         [UI_ELEMENT.EXPORT_LOGS_BUTTON]: true,
         [UI_ELEMENT.LOG_EVENT_NUM_DISPLAY]: true,
-        [UI_ELEMENT.DRAG_AND_DROP]: false,
+        [UI_ELEMENT.LOG_LEVEL_FILTER]: true,
+        [UI_ELEMENT.NAVIGATION_BAR]: true,
+        [UI_ELEMENT.OPEN_FILE_BUTTON]: true,
+        [UI_ELEMENT.PROGRESS_BAR]: true,
     },
     [UI_STATE.SLOW_LOADING]: {
-        [UI_ELEMENT.PROGRESS_BAR]: false,
-        [UI_ELEMENT.NAVIGATION_BAR]: false,
-        [UI_ELEMENT.OPEN_FILE_BUTTON]: false,
-        [UI_ELEMENT.LOG_LEVEL_FILTER]: false,
+        [UI_ELEMENT.DRAG_AND_DROP]: false,
         [UI_ELEMENT.EXPORT_LOGS_BUTTON]: false,
         [UI_ELEMENT.LOG_EVENT_NUM_DISPLAY]: true,
-        [UI_ELEMENT.DRAG_AND_DROP]: false,
+        [UI_ELEMENT.LOG_LEVEL_FILTER]: false,
+        [UI_ELEMENT.NAVIGATION_BAR]: false,
+        [UI_ELEMENT.OPEN_FILE_BUTTON]: false,
+        [UI_ELEMENT.PROGRESS_BAR]: false,
     },
     [UI_STATE.READY]: {
-        [UI_ELEMENT.PROGRESS_BAR]: false,
-        [UI_ELEMENT.NAVIGATION_BAR]: true,
-        [UI_ELEMENT.OPEN_FILE_BUTTON]: true,
-        [UI_ELEMENT.LOG_LEVEL_FILTER]: true,
+        [UI_ELEMENT.DRAG_AND_DROP]: true,
         [UI_ELEMENT.EXPORT_LOGS_BUTTON]: true,
         [UI_ELEMENT.LOG_EVENT_NUM_DISPLAY]: true,
-        [UI_ELEMENT.DRAG_AND_DROP]: true,
+        [UI_ELEMENT.LOG_LEVEL_FILTER]: true,
+        [UI_ELEMENT.NAVIGATION_BAR]: true,
+        [UI_ELEMENT.OPEN_FILE_BUTTON]: true,
+        [UI_ELEMENT.PROGRESS_BAR]: false,
     },
 });
 
diff --git a/new-log-viewer/src/utils/states.ts b/new-log-viewer/src/utils/states.ts
index 3651d16e..f52e92f2 100644
--- a/new-log-viewer/src/utils/states.ts
+++ b/new-log-viewer/src/utils/states.ts
@@ -17,7 +17,7 @@ const isDisabled = (uiState: UI_STATE, uiElement: UI_ELEMENT): boolean => (
 );
 
 /**
- * Returns a css class that ignores pointer events if in fast loading state.
+ * Returns a CSS class that ignores pointer events if in fast loading state.
  *
  * @param uiState
  * @return Ignore pointer class name or an empty string.

From 5f1e0ad9038289656c322c95e1bf772fade39806 Mon Sep 17 00:00:00 2001
From: Dave Marco <marcovitch.david@gmail.com>
Date: Mon, 21 Oct 2024 22:37:10 +0000
Subject: [PATCH 36/38] get rid of type

---
 new-log-viewer/src/typings/states.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/new-log-viewer/src/typings/states.ts b/new-log-viewer/src/typings/states.ts
index eb2b3966..6a02064f 100644
--- a/new-log-viewer/src/typings/states.ts
+++ b/new-log-viewer/src/typings/states.ts
@@ -44,12 +44,12 @@ enum UI_ELEMENT {
     PROGRESS_BAR,
 }
 
-type UiElementRowType = {
+type UiElementRow = {
     [key in UI_ELEMENT]: boolean;
 };
 
-type UiStateGridType = {
-    [key in UI_STATE]: UiElementRowType;
+type UiStateGrid = {
+    [key in UI_STATE]: UiElementRow;
 };
 
 /**
@@ -57,7 +57,7 @@ type UiStateGridType = {
  * `UI_STATE` has its own row with a boolean for each `UI_ELEMENT`. Boolean is `true` if the
  * element is enabled, or `false` if disabled.
  */
-const UI_STATE_GRID: UiStateGridType = Object.freeze({
+const UI_STATE_GRID: UiStateGrid = Object.freeze({
     [UI_STATE.UNOPENED]: {
         [UI_ELEMENT.DRAG_AND_DROP]: true,
         [UI_ELEMENT.EXPORT_LOGS_BUTTON]: false,

From a11be54490374e531db0103e0304e88e472eafda Mon Sep 17 00:00:00 2001
From: Dave Marco <marcovitch.david@gmail.com>
Date: Mon, 21 Oct 2024 22:38:31 +0000
Subject: [PATCH 37/38] make drag and drop false

---
 new-log-viewer/src/typings/states.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/new-log-viewer/src/typings/states.ts b/new-log-viewer/src/typings/states.ts
index 6a02064f..125168fd 100644
--- a/new-log-viewer/src/typings/states.ts
+++ b/new-log-viewer/src/typings/states.ts
@@ -77,7 +77,7 @@ const UI_STATE_GRID: UiStateGrid = Object.freeze({
         [UI_ELEMENT.PROGRESS_BAR]: true,
     },
     [UI_STATE.FAST_LOADING]: {
-        [UI_ELEMENT.DRAG_AND_DROP]: true,
+        [UI_ELEMENT.DRAG_AND_DROP]: false,
         [UI_ELEMENT.EXPORT_LOGS_BUTTON]: true,
         [UI_ELEMENT.LOG_EVENT_NUM_DISPLAY]: true,
         [UI_ELEMENT.LOG_LEVEL_FILTER]: true,

From e99fd1305829895427891dc29d7b437aaac8c069 Mon Sep 17 00:00:00 2001
From: Junhao Liao <junhao@junhao.ca>
Date: Mon, 21 Oct 2024 19:19:59 -0400
Subject: [PATCH 38/38] Enable DRAG_AND_DROP during FAST_LOADING to align the
 behaviour with OPEN_FILE_BUTTON.

---
 new-log-viewer/src/typings/states.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/new-log-viewer/src/typings/states.ts b/new-log-viewer/src/typings/states.ts
index 125168fd..6a02064f 100644
--- a/new-log-viewer/src/typings/states.ts
+++ b/new-log-viewer/src/typings/states.ts
@@ -77,7 +77,7 @@ const UI_STATE_GRID: UiStateGrid = Object.freeze({
         [UI_ELEMENT.PROGRESS_BAR]: true,
     },
     [UI_STATE.FAST_LOADING]: {
-        [UI_ELEMENT.DRAG_AND_DROP]: false,
+        [UI_ELEMENT.DRAG_AND_DROP]: true,
         [UI_ELEMENT.EXPORT_LOGS_BUTTON]: true,
         [UI_ELEMENT.LOG_EVENT_NUM_DISPLAY]: true,
         [UI_ELEMENT.LOG_LEVEL_FILTER]: true,