Revert to default pageSize after OOM happens. (y-scope#32)

davemarco · Jan 8, 2024 · 310a7f0 · 310a7f0
1 parent d523ba5
commit 310a7f0
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 18 deletions.
diff --git a/src/App.js b/src/App.js
@@ -4,6 +4,7 @@ import config from "./config.json";
 import {DropFile} from "./DropFile/DropFile";
 import {THEME_STATES} from "./ThemeContext/THEME_STATES";
 import {ThemeContext} from "./ThemeContext/ThemeContext";
+import LOCAL_STORAGE_KEYS from "./Viewer/services/LOCAL_STORAGE_KEYS";
 import VerbatimURLParams from "./Viewer/services/VerbatimURLParams";
 import {Viewer} from "./Viewer/Viewer";
 
@@ -32,13 +33,13 @@ export function App () {
 
     useEffect(() => {
         console.debug("Version:", config.version);
-        const lsTheme = localStorage.getItem("ui-theme");
+        const lsTheme = localStorage.getItem(LOCAL_STORAGE_KEYS.UI_THEME);
         switchTheme(THEME_STATES.LIGHT === lsTheme ?THEME_STATES.LIGHT :THEME_STATES.DARK);
         init();
     }, []);
 
     const switchTheme = (theme) => {
-        localStorage.setItem("ui-theme", theme);
+        localStorage.setItem(LOCAL_STORAGE_KEYS.UI_THEME, theme);
         document.getElementById("app").setAttribute("data-theme", theme);
         setTheme(theme);
     };

diff --git a/src/ThemeContext/README.md b/src/ThemeContext/README.md
@@ -28,7 +28,7 @@ const App = () => {
     const [appMode, setAppMode] = useState();
 
     const switchTheme = (theme) => {
-        localStorage.setItem("ui-theme", theme);
+        localStorage.setItem(LOCAL_STORAGE_KEYS.UI_THEME, theme);
         document.getElementById("app").setAttribute("data-theme", theme);
         setTheme(theme);
     };
@@ -40,7 +40,7 @@ const App = () => {
 
     useEffect(() => {
         console.debug("Version:", config.version);
-        const lsTheme = localStorage.getItem("ui-theme");
+        const lsTheme = localStorage.getItem(LOCAL_STORAGE_KEYS.UI_THEME);
         switchTheme(lsTheme === THEME_STATES.LIGHT?THEME_STATES.LIGHT:THEME_STATES.DARK);
         setAppMode(APP_STATE.FILE_PROMPT);
     }, []);

diff --git a/src/Viewer/README.md b/src/Viewer/README.md
@@ -43,13 +43,13 @@ const App = () => {
 
     useEffect(() => {
         console.debug("Version:", config.version);
-        const lsTheme = localStorage.getItem("ui-theme");
+        const lsTheme = localStorage.getItem(LOCAL_STORAGE_KEYS.UI_THEME);
         switchTheme(THEME_STATES.LIGHT === lsTheme ?THEME_STATES.LIGHT :THEME_STATES.DARK);
         init();
     }, []);
 
     const switchTheme = (theme) => {
-        localStorage.setItem("ui-theme", theme);
+        localStorage.setItem(LOCAL_STORAGE_KEYS.UI_THEME, theme);
         document.getElementById("app").setAttribute("data-theme", theme);
         setTheme(theme);
     };

diff --git a/src/Viewer/Viewer.js b/src/Viewer/Viewer.js
@@ -11,6 +11,7 @@ import MonacoInstance from "./components/Monaco/MonacoInstance";
 import {StatusBar} from "./components/StatusBar/StatusBar";
 import CLP_WORKER_PROTOCOL from "./services/CLP_WORKER_PROTOCOL";
 import FourByteClpIrStreamReader from "./services/decoder/FourByteClpIrStreamReader";
+import LOCAL_STORAGE_KEYS from "./services/LOCAL_STORAGE_KEYS";
 import MessageLogger from "./services/MessageLogger";
 import STATE_CHANGE_TYPE from "./services/STATE_CHANGE_TYPE";
 import {isNumeric, modifyFileMetadata, modifyPage} from "./services/utils";
@@ -52,7 +53,7 @@ export function Viewer ({fileInfo, prettifyLog, logEventNumber, timestamp}) {
     const [statusMessageLogs, setStatusMessageLogs] = useState([]);
 
     // Log States
-    const lsPageSize = localStorage.getItem("pageSize");
+    const lsPageSize = localStorage.getItem(LOCAL_STORAGE_KEYS.PAGE_SIZE);
     const [logFileState, setLogFileState] = useState({
         pageSize: lsPageSize ? Number(lsPageSize) : 10000,
         pages: null,
@@ -231,6 +232,23 @@ export function Viewer ({fileInfo, prettifyLog, logEventNumber, timestamp}) {
         modifyFileMetadata(fileMetadata, logFileState.logEventIdx);
     }, [fileMetadata]);
 
+    /**
+     * Unsets 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 unsetCachedPageSize = () => {
+        localStorage.removeItem(LOCAL_STORAGE_KEYS.PAGE_SIZE);
+    };
+
+    /**
+     * Restores the cached page size that was unset in
+     * {@link unsetCachedPageSize}.
+     */
+    const restoreCachedPageSize = useCallback(() => {
+        localStorage.setItem(LOCAL_STORAGE_KEYS.PAGE_SIZE, logFileState.pageSize.toString());
+    }, [logFileState]);
+
     // Fires when hash is changed in the window.
     window.onhashchange = () => {
         const urlHashParams = new VerbatimURLParams(window.location.hash, "#");
@@ -273,8 +291,10 @@ export function Viewer ({fileInfo, prettifyLog, logEventNumber, timestamp}) {
                         <MonacoInstance
                             logData={logData}
                             loadingLogs={loadingLogs}
-                            changeStateCallback={changeState}
-                            logFileState={logFileState}/>
+                            logFileState={logFileState}
+                            onStateChange={changeState}
+                            beforeMount={unsetCachedPageSize}
+                            onMount={restoreCachedPageSize}/>
                     </div>
 
                     <StatusBar

diff --git a/src/Viewer/components/MenuBar/MenuBar.js b/src/Viewer/components/MenuBar/MenuBar.js
@@ -7,6 +7,7 @@ import {ChevronDoubleLeft, ChevronDoubleRight, ChevronLeft, ChevronRight,
 
 import {THEME_STATES} from "../../../ThemeContext/THEME_STATES";
 import {ThemeContext} from "../../../ThemeContext/ThemeContext";
+import LOCAL_STORAGE_KEYS from "../../services/LOCAL_STORAGE_KEYS";
 import MODIFY_PAGE_ACTION from "../../services/MODIFY_PAGE_ACTION";
 import STATE_CHANGE_TYPE from "../../services/STATE_CHANGE_TYPE";
 import {EditableInput} from "./EditableInput/EditableInput";
@@ -109,7 +110,7 @@ export function MenuBar ({
         e.preventDefault();
         handleCloseSettings();
         changeStateCallback(STATE_CHANGE_TYPE.pageSize, {pageSize: eventsPerPage});
-        localStorage.setItem("pageSize", String(eventsPerPage));
+        localStorage.setItem(LOCAL_STORAGE_KEYS.PAGE_SIZE, String(eventsPerPage));
     };
 
     const closeModal = () => {

diff --git a/src/Viewer/components/Monaco/MonacoInstance.js b/src/Viewer/components/Monaco/MonacoInstance.js
@@ -51,29 +51,53 @@ MonacoInstance.propTypes = {
     logFileState: PropTypes.object,
     loadingLogs: PropTypes.bool,
     logData: PropTypes.string,
-    changeStateCallback: PropTypes.func,
+    onStateChange: PropTypes.func,
+    beforeMount: PropTypes.func,
+    onMount: PropTypes.func,
 };
 
 /**
  * Callback used to change the parent component's state
- * @callback ChangeStateCallback
+ * @callback StateChangeCallback
  * @param {string} type The type of state change ({@link STATE_CHANGE_TYPE})
  * @param {object} args Arguments used to update the state
  */
 
+/**
+ * Callback that gets called BEFORE the Monaco Editor is mounted
+ * @callback BeforeMountCallback
+ * @param {object} monaco
+ */
+
+/**
+ * Callback that gets called AFTER the Monaco Editor is mounted
+ * @callback MountCallback
+ * @param {object} editor
+ * @param {object} monaco
+ */
+
 /**
  * Contains the monaco editor used to display the log data. When user
  * interacts with editor, the callback is used to update the selected
  * log event.
  *
  * @param {object} logFileState Current state of the log file
  * @param {boolean} loadingLogs Indicates if loading is in progress
- * @param {ChangeStateCallback} changeStateCallback
  * @param {string} logData Decoded log data to display
+ * @param {StateChangeCallback} onStateChange
+ * @param {BeforeMountCallback} beforeMount
+ * @param {MountCallback} onMount
  * @return {JSX.Element}
  * @constructor
  */
-function MonacoInstance ({logFileState, changeStateCallback, loadingLogs, logData}) {
+function MonacoInstance ({
+    logFileState,
+    loadingLogs,
+    logData,
+    onStateChange,
+    beforeMount,
+    onMount,
+}) {
     const {theme} = useContext(ThemeContext);
     const editorRef = useRef(null);
     const monacoRef = useRef(null);
@@ -90,6 +114,8 @@ function MonacoInstance ({logFileState, changeStateCallback, loadingLogs, logDat
      * @param {object} monaco
      */
     function handleEditorWillMount (monaco) {
+        beforeMount(monaco);
+
         monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true);
         monaco.editor.defineTheme("customLogLanguageDark", themes.dark);
         monaco.editor.defineTheme("customLogLanguageLight", themes.light);
@@ -137,13 +163,15 @@ function MonacoInstance ({logFileState, changeStateCallback, loadingLogs, logDat
                     clearTimeout(timeoutRef.current);
                 }
                 timeoutRef.current = setTimeout(() => {
-                    changeStateCallback(STATE_CHANGE_TYPE.lineNumber, {
+                    onStateChange(STATE_CHANGE_TYPE.lineNumber, {
                         lineNumber: e.position.lineNumber,
                         columnNumber: e.position.column,
                     });
                 }, 50);
             }
         });
+
+        onMount(editor, monaco);
     };
 
     useEffect(() => {
@@ -157,7 +185,7 @@ function MonacoInstance ({logFileState, changeStateCallback, loadingLogs, logDat
                     ],
                     run: () => {
                         if (!loadingLogs) {
-                            changeStateCallback(shortcut.action, shortcut.actionArgs);
+                            onStateChange(shortcut.action, shortcut.actionArgs);
                         }
                     },
                 });
@@ -170,7 +198,7 @@ function MonacoInstance ({logFileState, changeStateCallback, loadingLogs, logDat
                 ],
                 run: () => {
                     if (!loadingLogs) {
-                        changeStateCallback( STATE_CHANGE_TYPE.lineNumber, {
+                        onStateChange( STATE_CHANGE_TYPE.lineNumber, {
                             lineNumber: 1,
                             columnNumber: 1,
                         });
@@ -185,7 +213,7 @@ function MonacoInstance ({logFileState, changeStateCallback, loadingLogs, logDat
                 ],
                 run: (editor) => {
                     if (!loadingLogs) {
-                        changeStateCallback( STATE_CHANGE_TYPE.lineNumber, {
+                        onStateChange( STATE_CHANGE_TYPE.lineNumber, {
                             lineNumber: editor.getModel().getLineCount(),
                             columnNumber: 1,
                         });

diff --git a/src/Viewer/services/LOCAL_STORAGE_KEYS.js b/src/Viewer/services/LOCAL_STORAGE_KEYS.js
@@ -0,0 +1,6 @@
+const LOCAL_STORAGE_KEYS = Object.freeze({
+    UI_THEME: "uiTheme",
+    PAGE_SIZE: "pageSize",
+});
+
+export default LOCAL_STORAGE_KEYS;