new-log-viewer: Implement MenuBar and StatusBar with JoyUI components; add JoyUI custom app theme.

new-log-viewer/package.json

@@ -22,6 +22,10 @@
   },
   "homepage": "https://github.com/y-scope/yscope-log-viewer#readme",
   "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.1.0",
+    "@mui/joy": "^5.0.0-beta.48",
     "axios": "^1.7.2",
     "clp-ffi-js": "^0.1.0",
     "dayjs": "^1.11.11",

new-log-viewer/src/App.tsx

@@ -10,13 +10,11 @@ import UrlContextProvider from "./contexts/UrlContextProvider";
  */
 const App = () => {
     return (
-        <>
-            <UrlContextProvider>
-                <StateContextProvider>
-                    <Layout/>
-                </StateContextProvider>
-            </UrlContextProvider>
-        </>
+        <UrlContextProvider>
+            <StateContextProvider>
+                <Layout/>
+            </StateContextProvider>
+        </UrlContextProvider>
     );
 };
 

new-log-viewer/src/components/DropFileContainer/index.css

@@ -1,6 +1,4 @@
 .drop-file-container {
-    width: 100%;
-    height: 100%;
     position: relative;
 }
 

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

@@ -0,0 +1,3 @@
+.editor {
+    height: calc(100vh - var(--ylv-menu-bar-height) - var(--ylv-status-bar-height));
+}

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

@@ -16,7 +16,11 @@ import {
 import {Nullable} from "../../typings/common";
 import {CONFIG_KEY} from "../../typings/config";
 import {BeginLineNumToLogEventNumMap} from "../../typings/worker";
-import {EDITOR_ACTIONS} from "../../utils/actions";
+import {
+    ACTION_NAME,
+    EDITOR_ACTIONS,
+    handleAction,
+} from "../../utils/actions";
 import {
     CONFIG_DEFAULT,
     getConfig,
@@ -27,22 +31,18 @@ import {
     getMapValueWithNearestLessThanOrEqualKey,
 } from "../../utils/data";
 import MonacoInstance from "./MonacoInstance";
-import {CustomActionCallback} from "./MonacoInstance/typings";
+import {goToPositionAndCenter} from "./MonacoInstance/utils";
 
+import "./index.css";
 
-interface EditorProps {
-    onCustomAction: CustomActionCallback,
-}
 
 /**
  * Renders a read-only editor for viewing logs.
  *
- * @param props
- * @param props.onCustomAction
  * @return
  */
-const Editor = ({onCustomAction}: EditorProps) => {
-    const {logData, beginLineNumToLogEventNum} = useContext(StateContext);
+const Editor = () => {
+    const {beginLineNumToLogEventNum, logData, numEvents} = useContext(StateContext);
     const {logEventNum} = useContext(UrlContext);
 
     const [lineNum, setLineNum] = useState<number>(1);
@@ -51,8 +51,40 @@ const Editor = ({onCustomAction}: EditorProps) => {
     );
     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);
+                break;
+            case ACTION_NAME.PAGE_TOP:
+                goToPositionAndCenter(editor, {lineNumber: 1, column: 1});
+                break;
+            case ACTION_NAME.PAGE_BOTTOM: {
+                const lineCount = editor.getModel()?.getLineCount();
+                if ("undefined" === typeof lineCount) {
+                    break;
+                }
+                goToPositionAndCenter(editor, {lineNumber: lineCount, column: 1});
+                break;
+            }
+            default:
+                break;
+        }
+    }, []);
+
     /**
      * Sets `editorRef` and configures callbacks for mouse down detection.
      */
@@ -123,9 +155,19 @@ const Editor = ({onCustomAction}: EditorProps) => {
         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 || true === isMouseDownRef.current) {
+        if (null === editorRef.current || isMouseDownRef.current) {
             // Don't update the line number if the user is actively selecting text.
             return;
         }
@@ -144,15 +186,17 @@ const Editor = ({onCustomAction}: EditorProps) => {
     ]);
 
     return (
-        <MonacoInstance
-            actions={EDITOR_ACTIONS}
-            beforeTextUpdate={resetCachedPageSize}
-            lineNum={lineNum}
-            text={logData}
-            onCursorExplicitPosChange={handleCursorExplicitPosChange}
-            onCustomAction={onCustomAction}
-            onMount={handleMount}
-            onTextUpdate={restoreCachedPageSize}/>
+        <div className={"editor"}>
+            <MonacoInstance
+                actions={EDITOR_ACTIONS}
+                beforeTextUpdate={resetCachedPageSize}
+                lineNum={lineNum}
+                text={logData}
+                onCursorExplicitPosChange={handleCursorExplicitPosChange}
+                onCustomAction={handleEditorCustomAction}
+                onMount={handleMount}
+                onTextUpdate={restoreCachedPageSize}/>
+        </div>
     );
 };