Merge branch 'main' into autokey

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @y-scope/maintainers

src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ToggleIconButton.tsx

@@ -0,0 +1,46 @@
+import {
+    IconButton,
+    IconButtonProps,
+    Tooltip,
+} from "@mui/joy";
+
+
+interface ToggleIconButtonProps extends IconButtonProps {
+    children: React.ReactNode;
+    isChecked: boolean;
+    tooltipTitle: string;
+}
+
+/**
+ * An icon button that can visually show icon pressed status.
+ *
+ * @param props
+ * @param props.children
+ * @param props.isChecked
+ * @param props.tooltipTitle
+ * @param props.rest
+ * @return
+ */
+const ToggleIconButton = ({
+    children,
+    isChecked,
+    tooltipTitle,
+    ...rest
+}: ToggleIconButtonProps) => {
+    return (
+        <Tooltip
+            title={tooltipTitle}
+        >
+            <span>
+                <IconButton
+                    aria-pressed={isChecked}
+                    {...rest}
+                >
+                    {children}
+                </IconButton>
+            </span>
+        </Tooltip>
+    );
+};
+
+export default ToggleIconButton;

src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css

@@ -17,6 +17,11 @@
 }
 
 .query-option-button {
+    width: 1.5rem !important;
+    min-width: 0 !important;
+    height: 1.5rem !important;
+    min-height: 0 !important;
+
     font-family: Inter, sans-serif !important;
 }
 

src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx

@@ -6,11 +6,9 @@ import React, {
 import {
     AccordionGroup,
     Box,
-    IconButton,
     LinearProgress,
+    Stack,
     Textarea,
-    ToggleButtonGroup,
-    Tooltip,
 } from "@mui/joy";
 
 import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
@@ -30,33 +28,11 @@ import {isDisabled} from "../../../../../utils/states";
 import CustomTabPanel from "../CustomTabPanel";
 import PanelTitleButton from "../PanelTitleButton";
 import ResultsGroup from "./ResultsGroup";
+import ToggleIconButton from "./ToggleIconButton";
 
 import "./index.css";
 
 
-enum QUERY_OPTION {
-    IS_CASE_SENSITIVE = "isCaseSensitive",
-    IS_REGEX = "isRegex",
-}
-
-/**
- * Determines if the query is case-sensitive based on the provided query options.
- *
- * @param queryOptions
- * @return True if the query is case-sensitive.
- */
-const getIsCaseSensitive =
-    (queryOptions: QUERY_OPTION[]) => queryOptions.includes(QUERY_OPTION.IS_CASE_SENSITIVE);
-
-/**
- * Determines if the query is a regular expression based on the provided query options.
- *
- * @param queryOptions
- * @return True if the query is a regular expression.
- */
-const getIsRegex =
-    (queryOptions: QUERY_OPTION[]) => queryOptions.includes(QUERY_OPTION.IS_REGEX);
-
 /**
  * Displays a panel for submitting queries and viewing query results.
  *
@@ -65,17 +41,18 @@ const getIsRegex =
 const SearchTabPanel = () => {
     const {queryProgress, queryResults, startQuery, uiState} = useContext(StateContext);
     const [isAllExpanded, setIsAllExpanded] = useState<boolean>(true);
-    const [queryOptions, setQueryOptions] = useState<QUERY_OPTION[]>([]);
     const [queryString, setQueryString] = useState<string>("");
+    const [isCaseSensitive, setIsCaseSensitive] = useState<boolean>(false);
+    const [isRegex, setIsRegex] = useState<boolean>(false);
 
     const handleCollapseAllButtonClick = () => {
         setIsAllExpanded((v) => !v);
     };
 
     const handleQuerySubmit = (newArgs: Partial<QueryArgs>) => {
         startQuery({
-            isCaseSensitive: getIsCaseSensitive(queryOptions),
-            isRegex: getIsRegex(queryOptions),
+            isCaseSensitive: isCaseSensitive,
+            isRegex: isRegex,
             queryString: queryString,
             ...newArgs,
         });
@@ -86,15 +63,14 @@ const SearchTabPanel = () => {
         handleQuerySubmit({queryString: ev.target.value});
     };
 
-    const handleQueryOptionsChange = (
-        _: React.MouseEvent<HTMLElement>,
-        newOptions: QUERY_OPTION[]
-    ) => {
-        setQueryOptions(newOptions);
-        handleQuerySubmit({
-            isCaseSensitive: getIsCaseSensitive(newOptions),
-            isRegex: getIsRegex(newOptions),
-        });
+    const handleCaseSensitivityButtonClick = () => {
+        handleQuerySubmit({isCaseSensitive: !isCaseSensitive});
+        setIsCaseSensitive(!isCaseSensitive);
+    };
+
+    const handleRegexButtonClick = () => {
+        handleQuerySubmit({isRegex: !isRegex});
+        setIsRegex(!isRegex);
     };
 
     const isQueryInputBoxDisabled = isDisabled(uiState, UI_ELEMENT.QUERY_INPUT_BOX);
@@ -124,36 +100,34 @@ const SearchTabPanel = () => {
                         placeholder={"Search"}
                         size={"sm"}
                         endDecorator={
-                            <ToggleButtonGroup
-                                disabled={isQueryInputBoxDisabled}
-                                size={"sm"}
+                            <Stack
+                                direction={"row"}
                                 spacing={0.25}
-                                value={queryOptions}
-                                variant={"plain"}
-                                onChange={handleQueryOptionsChange}
                             >
-                                <Tooltip title={"Match case"}>
-                                    <span>
-                                        <IconButton
-                                            className={"query-option-button"}
-                                            value={QUERY_OPTION.IS_CASE_SENSITIVE}
-                                        >
-                                            Aa
-                                        </IconButton>
-                                    </span>
-                                </Tooltip>
-
-                                <Tooltip title={"Use regular expression"}>
-                                    <span>
-                                        <IconButton
-                                            className={"query-option-button"}
-                                            value={QUERY_OPTION.IS_REGEX}
-                                        >
-                                            .*
-                                        </IconButton>
-                                    </span>
-                                </Tooltip>
-                            </ToggleButtonGroup>
+                                <ToggleIconButton
+                                    className={"query-option-button"}
+                                    disabled={isQueryInputBoxDisabled}
+                                    isChecked={isCaseSensitive}
+                                    size={"sm"}
+                                    tooltipTitle={"Match case"}
+                                    variant={"plain"}
+                                    onClick={handleCaseSensitivityButtonClick}
+                                >
+                                    Aa
+                                </ToggleIconButton>
+
+                                <ToggleIconButton
+                                    className={"query-option-button"}
+                                    disabled={isQueryInputBoxDisabled}
+                                    isChecked={isRegex}
+                                    size={"sm"}
+                                    tooltipTitle={"Use regular expression"}
+                                    variant={"plain"}
+                                    onClick={handleRegexButtonClick}
+                                >
+                                    .*
+                                </ToggleIconButton>
+                            </Stack>
                         }
                         slotProps={{
                             textarea: {

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 = {