feat(URL): Share link with search parameters

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

@@ -1,5 +1,7 @@
 import React, {
     useContext,
+    useEffect,
+    useRef,
     useState,
 } from "react";
 
@@ -11,19 +13,30 @@ import {
     Textarea,
 } from "@mui/joy";
 
+import ShareIcon from "@mui/icons-material/Share";
 import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
 import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
 
 import {StateContext} from "../../../../../contexts/StateContextProvider";
+import {
+    copyPermalinkToClipboard,
+    updateWindowUrlHashParams,
+    URL_HASH_PARAMS_DEFAULT,
+    UrlContext,
+} from "../../../../../contexts/UrlContextProvider";
 import {
     QUERY_PROGRESS_VALUE_MAX,
     QueryArgs,
 } from "../../../../../typings/query";
-import {UI_ELEMENT} from "../../../../../typings/states";
+import {
+    UI_ELEMENT,
+    UI_STATE,
+} from "../../../../../typings/states";
 import {
     TAB_DISPLAY_NAMES,
     TAB_NAME,
 } from "../../../../../typings/tab";
+import {HASH_PARAM_NAMES} from "../../../../../typings/url";
 import {isDisabled} from "../../../../../utils/states";
 import CustomTabPanel from "../CustomTabPanel";
 import PanelTitleButton from "../PanelTitleButton";
@@ -38,21 +51,77 @@ import "./index.css";
  *
  * @return
  */
+// eslint-disable-next-line max-lines-per-function
 const SearchTabPanel = () => {
     const {queryProgress, queryResults, startQuery, uiState} = useContext(StateContext);
+    const {
+        queryString: urlQueryString,
+        queryIsCaseSensitive: urlQueryIsCaseSensitive,
+        queryIsRegex: urlQueryIsRegex,
+    } = useContext(UrlContext);
     const [isAllExpanded, setIsAllExpanded] = useState<boolean>(true);
     const [queryString, setQueryString] = useState<string>("");
-    const [isCaseSensitive, setIsCaseSensitive] = useState<boolean>(false);
-    const [isRegex, setIsRegex] = useState<boolean>(false);
+    const [queryIsCaseSensitive, setQueryIsCaseSensitive] = useState<boolean>(false);
+    const [queryIsRegex, setQueryIsRegex] = useState<boolean>(false);
+
+    const queryIsCaseSensitiveRef = useRef(false);
+    const queryIsRegexRef = useRef(false);
+
+    useEffect(() => {
+        queryIsCaseSensitiveRef.current = urlQueryIsCaseSensitive ?? false;
+    }, [urlQueryIsCaseSensitive]);
+
+    useEffect(() => {
+        queryIsRegexRef.current = urlQueryIsRegex ?? false;
+    }, [urlQueryIsRegex]);
+
+    useEffect(() => {
+        if (uiState === UI_STATE.FILE_LOADING) {
+            setQueryString("");
+            setQueryIsCaseSensitive(false);
+            setQueryIsRegex(false);
+        } else if (uiState === UI_STATE.READY) {
+            if (null !== urlQueryString) {
+                setQueryString(urlQueryString);
+                setQueryIsCaseSensitive(queryIsCaseSensitiveRef.current);
+                setQueryIsRegex(queryIsRegexRef.current);
+
+                startQuery({
+                    queryIsCaseSensitive: queryIsCaseSensitiveRef.current,
+                    queryIsRegex: queryIsRegexRef.current,
+                    queryString: urlQueryString,
+                });
+
+                updateWindowUrlHashParams({
+                    [HASH_PARAM_NAMES.QUERY_STRING]: URL_HASH_PARAMS_DEFAULT.queryString,
+                    [HASH_PARAM_NAMES.QUERY_IS_CASE_SENSITIVE]:
+                        URL_HASH_PARAMS_DEFAULT.queryIsCaseSensitive,
+                    [HASH_PARAM_NAMES.QUERY_IS_REGEX]: URL_HASH_PARAMS_DEFAULT.queryIsRegex,
+                });
+            }
+        }
+    }, [
+        startQuery,
+        uiState,
+        urlQueryString,
+    ]);
 
     const handleCollapseAllButtonClick = () => {
         setIsAllExpanded((v) => !v);
     };
+    const handleShareButtonClick = () => {
+        copyPermalinkToClipboard({}, {
+            logEventNum: null,
+            queryString: queryString,
+            queryIsCaseSensitive: queryIsCaseSensitive,
+            queryIsRegex: queryIsRegex,
+        });
+    };
 
     const handleQuerySubmit = (newArgs: Partial<QueryArgs>) => {
         startQuery({
-            isCaseSensitive: isCaseSensitive,
-            isRegex: isRegex,
+            queryIsCaseSensitive: queryIsCaseSensitive,
+            queryIsRegex: queryIsRegex,
             queryString: queryString,
             ...newArgs,
         });
@@ -64,13 +133,13 @@ const SearchTabPanel = () => {
     };
 
     const handleCaseSensitivityButtonClick = () => {
-        handleQuerySubmit({isCaseSensitive: !isCaseSensitive});
-        setIsCaseSensitive(!isCaseSensitive);
+        handleQuerySubmit({queryIsCaseSensitive: !queryIsCaseSensitive});
+        setQueryIsCaseSensitive(!queryIsCaseSensitive);
     };
 
     const handleRegexButtonClick = () => {
-        handleQuerySubmit({isRegex: !isRegex});
-        setIsRegex(!isRegex);
+        handleQuerySubmit({queryIsRegex: !queryIsRegex});
+        setQueryIsRegex(!queryIsRegex);
     };
 
     const isQueryInputBoxDisabled = isDisabled(uiState, UI_ELEMENT.QUERY_INPUT_BOX);
@@ -80,16 +149,24 @@ const SearchTabPanel = () => {
             tabName={TAB_NAME.SEARCH}
             title={TAB_DISPLAY_NAMES[TAB_NAME.SEARCH]}
             titleButtons={
-                <PanelTitleButton
-                    title={isAllExpanded ?
-                        "Collapse all" :
-                        "Expand all"}
-                    onClick={handleCollapseAllButtonClick}
-                >
-                    {isAllExpanded ?
-                        <UnfoldLessIcon/> :
-                        <UnfoldMoreIcon/>}
-                </PanelTitleButton>
+                <>
+                    <PanelTitleButton
+                        title={isAllExpanded ?
+                            "Collapse all" :
+                            "Expand all"}
+                        onClick={handleCollapseAllButtonClick}
+                    >
+                        {isAllExpanded ?
+                            <UnfoldLessIcon/> :
+                            <UnfoldMoreIcon/>}
+                    </PanelTitleButton>
+                    <PanelTitleButton
+                        title={"Copy URL with search parameters"}
+                        onClick={handleShareButtonClick}
+                    >
+                        <ShareIcon/>
+                    </PanelTitleButton>
+                </>
             }
         >
             <Box className={"search-tab-container"}>
@@ -99,6 +176,7 @@ const SearchTabPanel = () => {
                         maxRows={7}
                         placeholder={"Search"}
                         size={"sm"}
+                        value={queryString}
                         endDecorator={
                             <Stack
                                 direction={"row"}
@@ -107,7 +185,7 @@ const SearchTabPanel = () => {
                                 <ToggleIconButton
                                     className={"query-option-button"}
                                     disabled={isQueryInputBoxDisabled}
-                                    isChecked={isCaseSensitive}
+                                    isChecked={queryIsCaseSensitive}
                                     size={"sm"}
                                     tooltipTitle={"Match case"}
                                     variant={"plain"}
@@ -119,7 +197,7 @@ const SearchTabPanel = () => {
                                 <ToggleIconButton
                                     className={"query-option-button"}
                                     disabled={isQueryInputBoxDisabled}
-                                    isChecked={isRegex}
+                                    isChecked={queryIsRegex}
                                     size={"sm"}
                                     tooltipTitle={"Use regular expression"}
                                     variant={"plain"}

src/contexts/StateContextProvider.tsx

@@ -1,4 +1,4 @@
-/* eslint max-lines: ["error", 600] */
+/* eslint max-lines: ["error", 650] */
 import React, {
     createContext,
     useCallback,
@@ -247,14 +247,17 @@ const updateUrlIfEventOnPage = (
 // eslint-disable-next-line max-lines-per-function, max-statements
 const StateContextProvider = ({children}: StateContextProviderProps) => {
     const {postPopUp} = useContext(NotificationContext);
-    const {filePath, logEventNum} = useContext(UrlContext);
+    const {
+        filePath,
+        logEventNum,
+    } = useContext(UrlContext);
 
     // States
     const [exportProgress, setExportProgress] =
         useState<Nullable<number>>(STATE_DEFAULT.exportProgress);
+    const [fileName, setFileName] = useState<string>(STATE_DEFAULT.fileName);
     const [isSettingsModalOpen, setIsSettingsModalOpen] =
         useState<boolean>(STATE_DEFAULT.isSettingsModalOpen);
-    const [fileName, setFileName] = useState<string>(STATE_DEFAULT.fileName);
     const [logData, setLogData] = useState<string>(STATE_DEFAULT.logData);
     const [numEvents, setNumEvents] = useState<number>(STATE_DEFAULT.numEvents);
     const [numPages, setNumPages] = useState<number>(STATE_DEFAULT.numPages);
@@ -276,6 +279,20 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     const pageNumRef = useRef<number>(pageNum);
     const uiStateRef = useRef<UI_STATE>(uiState);
 
+    const startQuery = useCallback((queryArgs: {
+        queryString: string;
+        queryIsCaseSensitive: boolean;
+        queryIsRegex: boolean;
+    }) => {
+        setQueryResults(STATE_DEFAULT.queryResults);
+        if (null === mainWorkerRef.current) {
+            console.error("Unexpected null mainWorkerRef.current");
+
+            return;
+        }
+        workerPostReq(mainWorkerRef.current, WORKER_REQ_CODE.START_QUERY, queryArgs);
+    }, []);
+
     const handleMainWorkerResp = useCallback((ev: MessageEvent<MainWorkerRespMessage>) => {
         const {code, args} = ev.data;
         console.log(`[MainWorker -> Renderer] code=${code}`);
@@ -368,16 +385,6 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         }
     }, [postPopUp]);
 
-    const startQuery = useCallback((queryArgs: QueryArgs) => {
-        setQueryResults(STATE_DEFAULT.queryResults);
-        if (null === mainWorkerRef.current) {
-            console.error("Unexpected null mainWorkerRef.current");
-
-            return;
-        }
-        workerPostReq(mainWorkerRef.current, WORKER_REQ_CODE.START_QUERY, queryArgs);
-    }, []);
-
     const exportLogs = useCallback(() => {
         if (null === mainWorkerRef.current) {
             console.error("Unexpected null mainWorkerRef.current");
@@ -406,6 +413,8 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         setLogData("Loading...");
         setOnDiskFileSizeInBytes(STATE_DEFAULT.onDiskFileSizeInBytes);
         setExportProgress(STATE_DEFAULT.exportProgress);
+        setQueryResults(STATE_DEFAULT.queryResults);
+        setQueryProgress(QUERY_PROGRESS_VALUE_MIN);
 
         // Cache `fileSrc` for reloads.
         fileSrcRef.current = fileSrc;

src/contexts/UrlContextProvider.tsx

@@ -31,6 +31,9 @@ const URL_SEARCH_PARAMS_DEFAULT = Object.freeze({
  */
 const URL_HASH_PARAMS_DEFAULT = Object.freeze({
     [HASH_PARAM_NAMES.LOG_EVENT_NUM]: null,
+    [HASH_PARAM_NAMES.QUERY_IS_CASE_SENSITIVE]: false,
+    [HASH_PARAM_NAMES.QUERY_IS_REGEX]: false,
+    [HASH_PARAM_NAMES.QUERY_STRING]: null,
 });
 
 /**
@@ -101,7 +104,7 @@ const getUpdatedSearchParams = (updates: UrlSearchParamUpdatesType) => {
 const getUpdatedHashParams = (updates: UrlHashParamUpdatesType) => {
     const newHashParams = new URLSearchParams(window.location.hash.substring(1));
     for (const [key, value] of Object.entries(updates)) {
-        if (null === value) {
+        if (null === value || false === value) {
             newHashParams.delete(key);
         } else {
             newHashParams.set(key, String(value));
@@ -181,6 +184,10 @@ const getWindowUrlSearchParams = () => {
     );
     const urlSearchParams = new URLSearchParams(window.location.search.substring(1));
 
+    urlSearchParams.forEach((value, key) => {
+        searchParams[key as keyof UrlSearchParams] = value;
+    });
+
     if (urlSearchParams.has(SEARCH_PARAM_NAMES.FILE_PATH)) {
         // Split the search string and take everything after as `filePath` value.
         // This ensures any parameters following `filePath=` are incorporated into the `filePath`.
@@ -211,6 +218,21 @@ const getWindowUrlHashParams = () => {
             null :
             parsed;
     }
+    const queryString = hashParams.get(HASH_PARAM_NAMES.QUERY_STRING);
+    if (null !== queryString) {
+        urlHashParams[HASH_PARAM_NAMES.QUERY_STRING] = queryString;
+    }
+
+    const isCaseSensitive = hashParams.get(HASH_PARAM_NAMES.QUERY_IS_CASE_SENSITIVE);
+    if (null !== isCaseSensitive) {
+        urlHashParams[HASH_PARAM_NAMES.QUERY_IS_CASE_SENSITIVE] =
+            "true" === isCaseSensitive.toLowerCase();
+    }
+
+    const isRegex = hashParams.get(HASH_PARAM_NAMES.QUERY_IS_REGEX);
+    if (null !== isRegex) {
+        urlHashParams[HASH_PARAM_NAMES.QUERY_IS_REGEX] = "true" === isRegex.toLowerCase();
+    }
 
     return urlHashParams;
 };

src/services/LogFileManager/index.ts

@@ -291,28 +291,28 @@ class LogFileManager {
      *
      * @param queryArgs
      * @param queryArgs.queryString
-     * @param queryArgs.isRegex
-     * @param queryArgs.isCaseSensitive
+     * @param queryArgs.queryIsRegex
+     * @param queryArgs.queryIsCaseSensitive
      * @throws {SyntaxError} if the query regex string is invalid.
      */
-    startQuery ({queryString, isRegex, isCaseSensitive}: QueryArgs): void {
+    startQuery ({queryString, queryIsRegex, queryIsCaseSensitive}: QueryArgs): void {
+        // If the query string is empty, or there are no logs, return
+        if ("" === queryString || 0 === this.#numEvents) {
+            return;
+        }
+
         this.#queryId++;
         this.#queryCount = 0;
 
         // Send an empty query result with 0 progress to the render to init the results variable
         // because there could be results sent by previous task before `startQuery()` runs.
         this.#onQueryResults(0, new Map());
 
-        // If the query string is empty, or there are no logs, return
-        if ("" === queryString || 0 === this.#numEvents) {
-            return;
-        }
-
         // Construct query RegExp
-        const regexPattern = isRegex ?
+        const regexPattern = queryIsRegex ?
             queryString :
             queryString.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-        const regexFlags = isCaseSensitive ?
+        const regexFlags = queryIsCaseSensitive ?
             "" :
             "i";
 

src/typings/query.ts

@@ -1,7 +1,7 @@
 interface QueryArgs {
     queryString: string;
-    isCaseSensitive: boolean;
-    isRegex: boolean;
+    queryIsCaseSensitive: boolean;
+    queryIsRegex: boolean;
 }
 
 type TextRange = [number, number];

src/typings/url.ts

@@ -7,14 +7,21 @@ enum SEARCH_PARAM_NAMES {
 
 enum HASH_PARAM_NAMES {
     LOG_EVENT_NUM = "logEventNum",
+    QUERY_IS_CASE_SENSITIVE = "queryIsCaseSensitive",
+    QUERY_IS_REGEX = "queryIsRegex",
+    QUERY_STRING = "queryString",
 }
 
 interface UrlSearchParams {
     [SEARCH_PARAM_NAMES.FILE_PATH]: string;
+
 }
 
 interface UrlHashParams {
-    logEventNum: number;
+    [HASH_PARAM_NAMES.LOG_EVENT_NUM]: number;
+    [HASH_PARAM_NAMES.QUERY_IS_CASE_SENSITIVE]: boolean;
+    [HASH_PARAM_NAMES.QUERY_IS_REGEX]: boolean;
+    [HASH_PARAM_NAMES.QUERY_STRING]: string;
 }
 
 type UrlSearchParamUpdatesType = {