feat(URL): Share link with search parameters

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

@@ -13,10 +13,15 @@ import {
     Tooltip,
 } 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,
+    UrlContext,
+} from "../../../../../contexts/UrlContextProvider";
 import {
     QUERY_PROGRESS_VALUE_MAX,
     QueryArgs,
@@ -62,20 +67,30 @@ const getIsRegex =
  *
  * @return
  */
+// eslint max-lines-per-function ["error", { "max": 140 }]
+// eslint-disable-next-line max-lines-per-function
 const SearchTabPanel = () => {
     const {queryProgress, queryResults, startQuery, uiState} = useContext(StateContext);
+    const {queryString: urlQueryString} = useContext(UrlContext);
     const [isAllExpanded, setIsAllExpanded] = useState<boolean>(true);
     const [queryOptions, setQueryOptions] = useState<QUERY_OPTION[]>([]);
-    const [queryString, setQueryString] = useState<string>("");
+    const [queryString, setQueryString] = useState<string>(urlQueryString ?? "");
 
     const handleCollapseAllButtonClick = () => {
         setIsAllExpanded((v) => !v);
     };
+    const handleShareButtonClick = () => {
+        copyPermalinkToClipboard({}, {
+            queryString: queryString,
+            queryIsCaseSensitive: getIsCaseSensitive(queryOptions),
+            queryIsRegex: getIsRegex(queryOptions),
+        });
+    };
 
     const handleQuerySubmit = (newArgs: Partial<QueryArgs>) => {
         startQuery({
-            isCaseSensitive: getIsCaseSensitive(queryOptions),
-            isRegex: getIsRegex(queryOptions),
+            queryIsCaseSensitive: getIsCaseSensitive(queryOptions),
+            queryIsRegex: getIsRegex(queryOptions),
             queryString: queryString,
             ...newArgs,
         });
@@ -92,8 +107,8 @@ const SearchTabPanel = () => {
     ) => {
         setQueryOptions(newOptions);
         handleQuerySubmit({
-            isCaseSensitive: getIsCaseSensitive(newOptions),
-            isRegex: getIsRegex(newOptions),
+            queryIsCaseSensitive: getIsCaseSensitive(newOptions),
+            queryIsRegex: getIsRegex(newOptions),
         });
     };
 
@@ -104,16 +119,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"}>
@@ -123,6 +146,7 @@ const SearchTabPanel = () => {
                         maxRows={7}
                         placeholder={"Search"}
                         size={"sm"}
+                        value={queryString}
                         endDecorator={
                             <ToggleButtonGroup
                                 disabled={isQueryInputBoxDisabled}

src/contexts/StateContextProvider.tsx

@@ -30,7 +30,10 @@ import {
     QueryResults,
 } from "../typings/query";
 import {UI_STATE} from "../typings/states";
-import {SEARCH_PARAM_NAMES} from "../typings/url";
+import {
+    HASH_PARAM_NAMES,
+    SEARCH_PARAM_NAMES,
+} from "../typings/url";
 import {
     BeginLineNumToLogEventNumMap,
     CURSOR_CODE,
@@ -247,14 +250,20 @@ 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,
+        queryIsCaseSensitive,
+        queryIsRegex,
+        logEventNum,
+        queryString,
+    } = 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);
@@ -275,6 +284,16 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     const pageNumRef = useRef<number>(pageNum);
     const uiStateRef = useRef<UI_STATE>(uiState);
 
+    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 handleMainWorkerResp = useCallback((ev: MessageEvent<MainWorkerRespMessage>) => {
         const {code, args} = ev.data;
         console.log(`[MainWorker -> Renderer] code=${code}`);
@@ -367,16 +386,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");
@@ -405,6 +414,8 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         setLogData("Loading...");
         setOnDiskFileSizeInBytes(STATE_DEFAULT.onDiskFileSizeInBytes);
         setExportProgress(STATE_DEFAULT.exportProgress);
+        setQueryResults(STATE_DEFAULT.queryResults);
+        setQueryProgress(QUERY_PROGRESS_VALUE_MIN);
 
         if ("string" !== typeof fileSrc) {
             updateWindowUrlSearchParams({[SEARCH_PARAM_NAMES.FILE_PATH]: null});
@@ -479,6 +490,30 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         }
     }, [uiState]);
 
+    useEffect(() => {
+        if (uiState === UI_STATE.READY) {
+            if (
+                URL_HASH_PARAMS_DEFAULT.queryString !== queryString &&
+                URL_HASH_PARAMS_DEFAULT.queryIsCaseSensitive !== queryIsCaseSensitive &&
+                URL_HASH_PARAMS_DEFAULT.queryIsRegex !== queryIsRegex
+            ) {
+                startQuery({queryString, queryIsCaseSensitive, queryIsRegex});
+            }
+            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,
+            });
+        }
+    }, [
+        queryString,
+        queryIsCaseSensitive,
+        queryIsRegex,
+        startQuery,
+        uiState,
+    ]);
+
     // On `logEventNum` update, clamp it then switch page if necessary or simply update the URL.
     useEffect(() => {
         if (null === mainWorkerRef.current) {

src/contexts/UrlContextProvider.tsx

@@ -31,6 +31,9 @@
  */
 const URL_HASH_PARAMS_DEFAULT = Object.freeze({
     [HASH_PARAM_NAMES.LOG_EVENT_NUM]: null,
+    [HASH_PARAM_NAMES.QUERY_IS_CASE_SENSITIVE]: null,
+    [HASH_PARAM_NAMES.QUERY_IS_REGEX]: null,
+    [HASH_PARAM_NAMES.QUERY_STRING]: null,
 });
 
 /**
@@ -181,6 +184,10 @@
     );
     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,14 @@
             null :
             parsed;
     }
+    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,11 +291,13 @@
      *
      * @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 {
         this.#queryId++;
         this.#queryCount = 0;
 
@@ -309,10 +311,10 @@
         }
 
         // 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 = {

src/typings/worker.ts

@@ -112,8 +112,8 @@ type WorkerReqMap = {
     };
     [WORKER_REQ_CODE.START_QUERY]: {
         queryString: string;
-        isRegex: boolean;
-        isCaseSensitive: boolean;
+        queryIsCaseSensitive: boolean;
+        queryIsRegex: boolean;
     };
 };