feat(settings): Reload file instead of the whole app when applying settings. (#185)

Author: junhaoliao

src/components/Editor/index.tsx

@@ -39,20 +39,6 @@ import {goToPositionAndCenter} from "./MonacoInstance/utils";
 import "./index.css";
 
 
-/**
- * Resets the cached page size in case it causes a client OOM. If it doesn't, the saved value
- * will be restored when {@link restoreCachedPageSize} is called.
- */
-const resetCachedPageSize = () => {
-    const error = setConfig(
-        {key: CONFIG_KEY.PAGE_SIZE, value: CONFIG_DEFAULT[CONFIG_KEY.PAGE_SIZE]}
-    );
-
-    if (null !== error) {
-        console.error(`Unexpected error returned by setConfig(): ${error}`);
-    }
-};
-
 /**
  * Renders a read-only editor for viewing logs.
  *
@@ -114,6 +100,23 @@ const Editor = () => {
         });
     }, []);
 
+    /**
+     * Backs up the current page size and resets the cached page size in case it causes a client
+     * OOM. If it doesn't, the saved value will be restored when {@link restoreCachedPageSize} is
+     * called.
+     */
+    const resetCachedPageSize = useCallback(() => {
+        pageSizeRef.current = getConfig(CONFIG_KEY.PAGE_SIZE);
+
+        const error = setConfig(
+            {key: CONFIG_KEY.PAGE_SIZE, value: CONFIG_DEFAULT[CONFIG_KEY.PAGE_SIZE]}
+        );
+
+        if (null !== error) {
+            console.error(`Unexpected error returned by setConfig(): ${error}`);
+        }
+    }, []);
+
     /**
      * Restores the cached page size that was unset in {@link resetCachedPageSize};
      */

src/components/modals/SettingsModal/SettingsDialog.tsx

@@ -18,21 +18,28 @@ import {
 } from "@mui/joy";
 
 import {NotificationContext} from "../../../contexts/NotificationContextProvider";
+import {StateContext} from "../../../contexts/StateContextProvider";
 import {Nullable} from "../../../typings/common";
 import {
     CONFIG_KEY,
     LOCAL_STORAGE_KEY,
 } from "../../../typings/config";
 import {LOG_LEVEL} from "../../../typings/logs";
 import {DO_NOT_TIMEOUT_VALUE} from "../../../typings/notifications";
+import {ACTION_NAME} from "../../../utils/actions";
 import {
     getConfig,
     setConfig,
 } from "../../../utils/config";
 import ThemeSwitchFormField from "./ThemeSwitchFormField";
 
 
-const CONFIG_FORM_FIELDS = [
+/**
+ * Gets form fields information for user input of configuration values.
+ *
+ * @return A list of form fields information.
+ */
+const getConfigFormFields = () => [
     {
         helperText: (
             <span>
@@ -96,6 +103,7 @@ const handleConfigFormReset = (ev: React.FormEvent) => {
  */
 const SettingsDialog = forwardRef<HTMLFormElement>((_, ref) => {
     const {postPopUp} = useContext(NotificationContext);
+    const {loadPageByAction, setIsSettingsModalOpen} = useContext(StateContext);
 
     const handleConfigFormSubmit = useCallback((ev: React.FormEvent) => {
         ev.preventDefault();
@@ -125,9 +133,14 @@ const SettingsDialog = forwardRef<HTMLFormElement>((_, ref) => {
                 title: "Unable to apply config.",
             });
         } else {
-            window.location.reload();
+            loadPageByAction({code: ACTION_NAME.RELOAD, args: null});
+            setIsSettingsModalOpen(false);
         }
-    }, [postPopUp]);
+    }, [
+        loadPageByAction,
+        postPopUp,
+        setIsSettingsModalOpen,
+    ]);
 
     return (
         <form
@@ -145,7 +158,7 @@ const SettingsDialog = forwardRef<HTMLFormElement>((_, ref) => {
                 </DialogTitle>
                 <DialogContent>
                     <ThemeSwitchFormField/>
-                    {CONFIG_FORM_FIELDS.map((field, index) => (
+                    {getConfigFormFields().map((field, index) => (
                         <FormControl
                             className={"config-form-control"}
                             key={index}
@@ -168,7 +181,7 @@ const SettingsDialog = forwardRef<HTMLFormElement>((_, ref) => {
                         color={"primary"}
                         type={"submit"}
                     >
-                        Apply & Reload
+                        Apply
                     </Button>
                     <Button
                         color={"neutral"}

src/contexts/StateContextProvider.tsx

@@ -268,6 +268,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     // Refs
     const beginLineNumToLogEventNumRef =
             useRef<BeginLineNumToLogEventNumMap>(STATE_DEFAULT.beginLineNumToLogEventNum);
+    const fileSrcRef = useRef<Nullable<FileSrcType>>(null);
     const logEventNumRef = useRef(logEventNum);
     const logExportManagerRef = useRef<null | LogExportManager>(null);
     const mainWorkerRef = useRef<null | Worker>(null);
@@ -406,6 +407,9 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         setOnDiskFileSizeInBytes(STATE_DEFAULT.onDiskFileSizeInBytes);
         setExportProgress(STATE_DEFAULT.exportProgress);
 
+        // Cache `fileSrc` for reloads.
+        fileSrcRef.current = fileSrc;
+
         if ("string" !== typeof fileSrc) {
             updateWindowUrlSearchParams({[SEARCH_PARAM_NAMES.FILE_PATH]: null});
         }
@@ -433,6 +437,19 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
             return;
         }
 
+        if (navAction.code === ACTION_NAME.RELOAD) {
+            if (null === fileSrcRef.current || null === logEventNumRef.current) {
+                throw new Error(`Unexpected fileSrc=${JSON.stringify(fileSrcRef.current)
+                }, logEventNum=${logEventNumRef.current} when reloading.`);
+            }
+            loadFile(fileSrcRef.current, {
+                code: CURSOR_CODE.EVENT_NUM,
+                args: {eventNum: logEventNumRef.current},
+            });
+
+            return;
+        }
+
         const cursor = getPageNumCursor(navAction, pageNumRef.current, numPagesRef.current);
         if (null === cursor) {
             console.error(`Error with nav action ${navAction.code}.`);
@@ -442,7 +459,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
 
         setUiState(UI_STATE.FAST_LOADING);
         loadPageByCursor(mainWorkerRef.current, cursor);
-    }, []);
+    }, [loadFile]);
 
     const filterLogs = useCallback((filter: LogLevelFilter) => {
         if (null === mainWorkerRef.current) {

src/utils/actions.ts

@@ -11,6 +11,7 @@ enum ACTION_NAME {
     LAST_PAGE = "lastPage",
     PAGE_TOP = "pageTop",
     PAGE_BOTTOM = "pageBottom",
+    RELOAD = "reload",
 }
 
 interface EditorAction {
@@ -69,6 +70,7 @@ type NavigationActionsMap = {
     [ACTION_NAME.PREV_PAGE]: null;
     [ACTION_NAME.NEXT_PAGE]: null;
     [ACTION_NAME.LAST_PAGE]: null;
+    [ACTION_NAME.RELOAD]: null;
 };
 
 type NavigationAction = {