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

Author: davemarco

new-log-viewer/src/components/Editor/MonacoInstance/actions.ts

@@ -1,7 +1,7 @@
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
 
 import {Nullable} from "../../../typings/common";
-import {ActionType} from "../../../utils/actions";
+import {EditorAction} from "../../../utils/actions";
 import {clamp} from "../../../utils/math";
 import type {
     CursorExplicitPosChangeCallback,
@@ -152,7 +152,7 @@ const setupMobileZoom = (
  */
 const setupCustomActions = (
     editor: monaco.editor.IStandaloneCodeEditor,
-    actions: ActionType[],
+    actions: EditorAction[],
     onCustomAction: CustomActionCallback
 ) => {
     actions.forEach(({actionName, label, keyBindings}) => {

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

@@ -5,7 +5,7 @@ import {
 
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
 
-import {ActionType} from "../../../utils/actions";
+import {EditorAction} from "../../../utils/actions";
 import {
     BeforeMountCallback,
     BeforeTextUpdateCallback,
@@ -23,7 +23,7 @@ import "./index.css";
 
 
 interface MonacoEditorProps {
-    actions: ActionType[],
+    actions: EditorAction[],
     lineNum: number,
     text: string,
     themeName: "dark" | "light",

new-log-viewer/src/components/Editor/MonacoInstance/utils.ts

@@ -1,6 +1,6 @@
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
 
-import {ActionType} from "../../../utils/actions";
+import {EditorAction} from "../../../utils/actions";
 import {
     setupCursorExplicitPosChangeCallback,
     setupCustomActions,
@@ -40,7 +40,7 @@ const goToPositionAndCenter = (
  */
 const createMonacoEditor = (
     editorContainer: HTMLDivElement,
-    actions: ActionType[],
+    actions: EditorAction[],
     handlers: CustomMonacoEditorHandlers
 ): monaco.editor.IStandaloneCodeEditor => {
     setupCustomLogLanguage();

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

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

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

@@ -6,11 +6,7 @@ import SkipNext from "@mui/icons-material/SkipNext";
 import SkipPrevious from "@mui/icons-material/SkipPrevious";
 
 import {StateContext} from "../../contexts/StateContextProvider";
-import {UrlContext} from "../../contexts/UrlContextProvider";
-import {
-    ACTION_NAME,
-    handleAction,
-} from "../../utils/actions";
+import {ACTION_NAME} from "../../utils/actions";
 import PageNumInput from "./PageNumInput";
 import SmallIconButton from "./SmallIconButton";
 
@@ -21,16 +17,19 @@ import SmallIconButton from "./SmallIconButton";
  * @return
  */
 const NavigationBar = () => {
-    const {numEvents} = useContext(StateContext);
-    const {logEventNum} = useContext(UrlContext);
+    const {loadPageByAction} = useContext(StateContext);
 
     const handleNavButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-        if (null === logEventNum) {
-            return;
-        }
-        const {actionName} = event.currentTarget.dataset as { actionName: ACTION_NAME };
-        if (Object.values(ACTION_NAME).includes(actionName)) {
-            handleAction(actionName, logEventNum, numEvents);
+        const {actionName} = event.currentTarget.dataset;
+
+        // Ensure `actionName` is a valid navigation action code with no args.
+        if (
+            actionName === ACTION_NAME.FIRST_PAGE ||
+            actionName === ACTION_NAME.PREV_PAGE ||
+            actionName === ACTION_NAME.NEXT_PAGE ||
+            actionName === ACTION_NAME.LAST_PAGE
+        ) {
+            loadPageByAction({code: actionName, args: null});
         }
     };
 

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

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