From 5094abf52c389c9271daa57b2fb001bf8dbddfdf Mon Sep 17 00:00:00 2001
From: Henry8192 <50559854+Henry8192@users.noreply.github.com>
Date: Thu, 24 Oct 2024 18:00:09 -0400
Subject: [PATCH 01/24] refactor SearchTabPanel from new log viewer folder back
 to current log viewer

---
 .../Sidebar/SidebarTabs/CustomTabPanel.tsx    |  17 ++-
 .../SidebarTabs/SearchTabPanel/Result.css     |  15 +++
 .../SidebarTabs/SearchTabPanel/Result.tsx     |  61 +++++++++
 .../SearchTabPanel/ResultsGroup.css           |  21 ++++
 .../SearchTabPanel/ResultsGroup.tsx           | 107 ++++++++++++++++
 .../SidebarTabs/SearchTabPanel/index.tsx      | 119 ++++++++++++++++++
 .../Sidebar/SidebarTabs/TitleButton.css       |   4 +
 .../Sidebar/SidebarTabs/TitleButton.tsx       |  21 ++++
 .../Sidebar/SidebarTabs/index.tsx             |   4 +
 src/typings/tab.ts                            |   2 +
 10 files changed, 370 insertions(+), 1 deletion(-)
 create mode 100644 src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css
 create mode 100644 src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx
 create mode 100644 src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.css
 create mode 100644 src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
 create mode 100644 src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
 create mode 100644 src/components/CentralContainer/Sidebar/SidebarTabs/TitleButton.css
 create mode 100644 src/components/CentralContainer/Sidebar/SidebarTabs/TitleButton.tsx

diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.tsx
index 9d1ab3e7..c9809988 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 
 import {
+    ButtonGroup,
     DialogContent,
     DialogTitle,
     TabPanel,
@@ -14,6 +15,7 @@ interface CustomTabPanelProps {
     children: React.ReactNode,
     tabName: string,
     title: string,
+    titleButtons?: React.ReactNode,
 }
 
 /**
@@ -23,9 +25,15 @@ interface CustomTabPanelProps {
  * @param props.children
  * @param props.tabName
  * @param props.title
+ * @param props.titleButtons
  * @return
  */
-const CustomTabPanel = ({children, tabName, title}: CustomTabPanelProps) => {
+const CustomTabPanel = ({
+    children,
+    tabName,
+    title,
+    titleButtons,
+}: CustomTabPanelProps) => {
     return (
         <TabPanel
             className={"sidebar-tab-panel"}
@@ -38,6 +46,13 @@ const CustomTabPanel = ({children, tabName, title}: CustomTabPanelProps) => {
                 >
                     {title}
                 </Typography>
+                <ButtonGroup
+                    size={"sm"}
+                    spacing={"1px"}
+                    variant={"plain"}
+                >
+                    {titleButtons}
+                </ButtonGroup>
             </DialogTitle>
             <DialogContent>
                 {children}
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css
new file mode 100644
index 00000000..e68e46be
--- /dev/null
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css
@@ -0,0 +1,15 @@
+.result-button {
+    user-select: none;
+
+    overflow: hidden;
+    display: block !important;
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.result-text {
+    display: inline !important;
+    font-size: 0.875rem !important;
+    font-weight: 400 !important;
+}
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx
new file mode 100644
index 00000000..591bd835
--- /dev/null
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx
@@ -0,0 +1,61 @@
+import {
+    ListItemButton,
+    Typography,
+} from "@mui/joy";
+
+import "./Result.css";
+
+
+interface ResultProps {
+    message: string,
+    matchRange: [number, number]
+}
+
+/**
+ * Displays a button containing a message, which highlights a specific range of text.
+ *
+ * @param props
+ * @param props.message
+ * @param props.matchRange A two-element array indicating the start and end indices of the substring
+ * to be highlighted.
+ * @return
+ */
+const Result = ({message, matchRange}: ResultProps) => {
+    const [
+        beforeMatch,
+        match,
+        afterMatch,
+    ] = [
+        message.slice(0, matchRange[0]),
+        message.slice(...matchRange),
+        message.slice(matchRange[1]),
+    ];
+
+    return (
+        <ListItemButton className={"result-button"}>
+            <Typography
+                className={"result-text"}
+                level={"body-xs"}
+            >
+                {beforeMatch}
+            </Typography>
+            <Typography
+                className={"result-text"}
+                level={"body-xs"}
+                sx={{
+                    backgroundColor: "warning.softBg",
+                }}
+            >
+                {match}
+            </Typography>
+            <Typography
+                className={"result-text"}
+                level={"body-xs"}
+            >
+                {afterMatch}
+            </Typography>
+        </ListItemButton>
+    );
+};
+
+export default Result;
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.css b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.css
new file mode 100644
index 00000000..5244d6a1
--- /dev/null
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.css
@@ -0,0 +1,21 @@
+.results-group-title-button {
+    flex-direction: row-reverse !important;
+    gap: 2px !important;
+    padding-inline-start: 0 !important;
+}
+
+.results-group-title-container {
+    display: flex;
+    flex-grow: 1;
+}
+
+.results-group-title-text-container {
+    flex-grow: 1;
+    gap: 0.1rem;
+    align-items: center;
+}
+
+.results-group-content {
+    margin-left: 1.5px !important;
+    border-left: 1px solid var(--joy-palette-neutral-outlinedBorder, #cdd7e1);
+}
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
new file mode 100644
index 00000000..fe9e7b73
--- /dev/null
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
@@ -0,0 +1,107 @@
+import {
+    useEffect,
+    useState,
+} from "react";
+import * as React from "react";
+
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    Box,
+    Chip,
+    List,
+    Stack,
+    Typography,
+} from "@mui/joy";
+
+import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
+
+import Result from "./Result";
+
+import "./ResultsGroup.css";
+
+
+interface SearchResultOnPage {
+    logEventNum: number,
+    message: string,
+    matchRange: [number, number],
+}
+
+interface ResultsGroupProps {
+    isAllExpanded: boolean,
+    pageNum: number,
+    results: SearchResultOnPage[]
+}
+
+/**
+ *
+ * @param props
+ * @param props.isAllCollapsed
+ * @param props.pageNum
+ * @param props.results
+ * @param props.isAllExpanded
+ */
+const ResultsGroup = ({
+    isAllExpanded,
+    pageNum,
+    results,
+}: ResultsGroupProps) => {
+    const [isExpanded, setIsExpanded] = useState<boolean>(isAllExpanded);
+
+    const handleAccordionChange = (
+        _: React.SyntheticEvent,
+        newValue: boolean
+    ) => {
+        setIsExpanded(newValue);
+    };
+
+    // On `isAllExpanded` updates, sync current results group's expand status.
+    useEffect(() => {
+        setIsExpanded(isAllExpanded);
+    }, [isAllExpanded]);
+
+    return (
+        <Accordion
+            expanded={isExpanded}
+            onChange={handleAccordionChange}
+        >
+            <AccordionSummary
+                slotProps={{
+                    button: {className: "results-group-title-button"},
+                }}
+            >
+                <Box className={"results-group-title-container"}>
+                    <Stack
+                        className={"results-group-title-text-container"}
+                        direction={"row"}
+                    >
+                        <DescriptionOutlinedIcon fontSize={"inherit"}/>
+                        <Typography
+                            level={"title-sm"}
+                        >
+                            Page
+                            {" "}
+                            {pageNum}
+                        </Typography>
+                    </Stack>
+                    <Chip size={"sm"}>
+                        {results.length}
+                    </Chip>
+                </Box>
+            </AccordionSummary>
+            <AccordionDetails className={"results-group-content"}>
+                <List size={"sm"}>
+                    {results.map((r, index) => (
+                        <Result
+                            key={index}
+                            matchRange={r.matchRange}
+                            message={r.message}/>
+                    ))}
+                </List>
+            </AccordionDetails>
+        </Accordion>
+    );
+};
+
+export default ResultsGroup;
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
new file mode 100644
index 00000000..ce1cbda6
--- /dev/null
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
@@ -0,0 +1,119 @@
+import {useState} from "react";
+
+import {
+    AccordionGroup,
+    IconButton,
+    Textarea,
+    ToggleButtonGroup,
+} from "@mui/joy";
+
+import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
+import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
+
+import {
+    TAB_DISPLAY_NAMES,
+    TAB_NAME,
+} from "../../../../../typings/tab";
+import CustomTabPanel from "../CustomTabPanel";
+import TitleButton from "../TitleButton";
+import ResultsGroup from "./ResultsGroup";
+
+
+enum SEARCH_OPTION {
+    IS_CASE_SENSITIVE = "isCaseSensitive",
+    IS_REGEX = "isRegex"
+}
+
+/**
+ *
+ */
+const SAMPLE_RESULTS = Object.freeze({
+    1: [{logEventNum: 1,
+        message: "hi how are you",
+        matchRange: [0,
+            2] as [number, number]}],
+    2: [{logEventNum: 202,
+        message: "i'm a super long message that supposedly overflows in the panel width.",
+        matchRange: [4,
+            6] as [number, number]}],
+    8: [{logEventNum: 808,
+        message: "hi how are you",
+        matchRange: [4,
+            6] as [number, number]},
+    {logEventNum: 809,
+        message: "hi how are you",
+        matchRange: [4,
+            6] as [number, number]}],
+});
+
+/**
+ * Displays a panel for submitting search queries and viewing query results.
+ *
+ * @return
+ */
+const SearchTabPanel = () => {
+    const [isAllExpanded, setIsAllExpanded] = useState<boolean>(true);
+    const [searchOptions, setSearchOptions] = useState<SEARCH_OPTION[]>([]);
+
+    return (
+        <CustomTabPanel
+            tabName={TAB_NAME.SEARCH}
+            title={TAB_DISPLAY_NAMES[TAB_NAME.SEARCH]}
+            titleButtons={<>
+                <TitleButton onClick={() => { setIsAllExpanded((v) => !v); }}>
+                    {isAllExpanded ?
+                        <UnfoldLessIcon/> :
+                        <UnfoldMoreIcon/>}
+                </TitleButton>
+            </>}
+        >
+            <Textarea
+                maxRows={7}
+                placeholder={"Search"}
+                size={"sm"}
+                slotProps={{endDecorator: {sx: {marginBlockStart: 0, display: "block"}}}}
+                sx={{flexDirection: "row"}}
+                endDecorator={
+                    <>
+                        <ToggleButtonGroup
+                            size={"sm"}
+                            spacing={0.3}
+                            sx={{borderRadius: "2px"}}
+                            value={searchOptions}
+                            variant={"plain"}
+                            onChange={(_, newValue) => {
+                                setSearchOptions(newValue);
+                            }}
+                        >
+                            <IconButton
+                                sx={{fontFamily: "Inter"}}
+                                value={SEARCH_OPTION.IS_CASE_SENSITIVE}
+                            >
+                                Aa
+                            </IconButton>
+                            <IconButton
+                                sx={{fontFamily: "Inter"}}
+                                value={SEARCH_OPTION.IS_REGEX}
+                            >
+                                .*
+                            </IconButton>
+                        </ToggleButtonGroup>
+                    </>
+                }/>
+            <AccordionGroup
+                disableDivider={true}
+                size={"sm"}
+            >
+                {Object.entries(SAMPLE_RESULTS).map(([pageNum, resultsOnPage]) => (
+                    <ResultsGroup
+                        isAllExpanded={isAllExpanded}
+                        key={pageNum}
+                        pageNum={parseInt(pageNum, 10)}
+                        results={resultsOnPage}/>
+                ))}
+            </AccordionGroup>
+        </CustomTabPanel>
+    );
+};
+
+export default SearchTabPanel;
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/TitleButton.css b/src/components/CentralContainer/Sidebar/SidebarTabs/TitleButton.css
new file mode 100644
index 00000000..2bb9eb0f
--- /dev/null
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/TitleButton.css
@@ -0,0 +1,4 @@
+.sidebar-tab-title-button {
+    min-width: 0 !important;
+    min-height: 0 !important;
+}
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/TitleButton.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/TitleButton.tsx
new file mode 100644
index 00000000..117037cd
--- /dev/null
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/TitleButton.tsx
@@ -0,0 +1,21 @@
+import {
+    IconButton,
+    IconButtonProps,
+} from "@mui/joy";
+
+import "./TitleButton.css";
+
+
+/**
+ * Renders an IconButton with an additional CSS class 'sidebar-tab-title-button'.
+ *
+ * @param props
+ * @return
+ */
+const TitleButton = (props: IconButtonProps) => (
+    <IconButton
+        className={"sidebar-tab-title-button"}
+        {...props}/>
+);
+
+export default TitleButton;
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx
index 9a09a4b0..2e7a0596 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx
@@ -10,11 +10,13 @@ import {
 import SvgIcon from "@mui/material/SvgIcon";
 
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import SearchIcon from "@mui/icons-material/Search";
 import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
 
 import {TAB_NAME} from "../../../../typings/tab";
 import SettingsModal from "../../../modals/SettingsModal";
 import FileInfoTabPanel from "./FileInfoTabPanel";
+import SearchTabPanel from "./SearchTabPanel";
 import TabButton from "./TabButton";
 
 import "./index.css";
@@ -28,6 +30,7 @@ const TABS_INFO_LIST: Readonly<Array<{
     Icon: typeof SvgIcon,
 }>> = Object.freeze([
     {tabName: TAB_NAME.FILE_INFO, Icon: InfoOutlinedIcon},
+    {tabName: TAB_NAME.SEARCH, Icon: SearchIcon},
 ]);
 
 interface SidebarTabsProps {
@@ -93,6 +96,7 @@ const SidebarTabs = forwardRef<HTMLDivElement, SidebarTabsProps>((
                         onTabButtonClick={handleTabButtonClick}/>
                 </TabList>
                 <FileInfoTabPanel/>
+                <SearchTabPanel/>
             </Tabs>
             <SettingsModal
                 isOpen={isSettingsModalOpen}
diff --git a/src/typings/tab.ts b/src/typings/tab.ts
index b2e8b1bf..8f4ba857 100644
--- a/src/typings/tab.ts
+++ b/src/typings/tab.ts
@@ -1,6 +1,7 @@
 enum TAB_NAME {
     NONE = "none",
     FILE_INFO = "fileInfo",
+    SEARCH = "search",
     SETTINGS = "settings",
 }
 
@@ -10,6 +11,7 @@ enum TAB_NAME {
 const TAB_DISPLAY_NAMES: Record<TAB_NAME, string> = Object.freeze({
     [TAB_NAME.NONE]: "None",
     [TAB_NAME.FILE_INFO]: "File info",
+    [TAB_NAME.SEARCH]: "Search",
     [TAB_NAME.SETTINGS]: "Settings",
 });
 

From dcada93875144d67d47c4647af94ee27531da3bd Mon Sep 17 00:00:00 2001
From: Henry <50559854+Henry8192@users.noreply.github.com>
Date: Fri, 25 Oct 2024 03:35:53 -0400
Subject: [PATCH 02/24] Rewrite the ResultsGroup return type

---
 .../SearchTabPanel/ResultsGroup.tsx           | 98 +++++++++----------
 .../SidebarTabs/SearchTabPanel/index.tsx      | 56 ++++++-----
 2 files changed, 78 insertions(+), 76 deletions(-)

diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
index fe9e7b73..2a426e21 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
@@ -17,35 +17,26 @@ import {
 
 import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
 
+import {QueryResults} from "../../../../../typings/worker";
 import Result from "./Result";
 
 import "./ResultsGroup.css";
 
 
-interface SearchResultOnPage {
-    logEventNum: number,
-    message: string,
-    matchRange: [number, number],
-}
-
 interface ResultsGroupProps {
     isAllExpanded: boolean,
-    pageNum: number,
-    results: SearchResultOnPage[]
+    queryResults: QueryResults,
 }
 
 /**
  *
  * @param props
- * @param props.isAllCollapsed
- * @param props.pageNum
- * @param props.results
  * @param props.isAllExpanded
+ * @param props.queryResults
  */
 const ResultsGroup = ({
     isAllExpanded,
-    pageNum,
-    results,
+    queryResults,
 }: ResultsGroupProps) => {
     const [isExpanded, setIsExpanded] = useState<boolean>(isAllExpanded);
 
@@ -62,45 +53,50 @@ const ResultsGroup = ({
     }, [isAllExpanded]);
 
     return (
-        <Accordion
-            expanded={isExpanded}
-            onChange={handleAccordionChange}
-        >
-            <AccordionSummary
-                slotProps={{
-                    button: {className: "results-group-title-button"},
-                }}
-            >
-                <Box className={"results-group-title-container"}>
-                    <Stack
-                        className={"results-group-title-text-container"}
-                        direction={"row"}
+        <>
+            {Array.from(queryResults.entries()).map(([pageNum, results]) => (
+                <Accordion
+                    expanded={isExpanded}
+                    key={pageNum}
+                    onChange={handleAccordionChange}
+                >
+                    <AccordionSummary
+                        slotProps={{
+                            button: {className: "results-group-title-button"},
+                        }}
                     >
-                        <DescriptionOutlinedIcon fontSize={"inherit"}/>
-                        <Typography
-                            level={"title-sm"}
-                        >
-                            Page
-                            {" "}
-                            {pageNum}
-                        </Typography>
-                    </Stack>
-                    <Chip size={"sm"}>
-                        {results.length}
-                    </Chip>
-                </Box>
-            </AccordionSummary>
-            <AccordionDetails className={"results-group-content"}>
-                <List size={"sm"}>
-                    {results.map((r, index) => (
-                        <Result
-                            key={index}
-                            matchRange={r.matchRange}
-                            message={r.message}/>
-                    ))}
-                </List>
-            </AccordionDetails>
-        </Accordion>
+                        <Box className={"results-group-title-container"}>
+                            <Stack
+                                className={"results-group-title-text-container"}
+                                direction={"row"}
+                            >
+                                <DescriptionOutlinedIcon fontSize={"inherit"}/>
+                                <Typography
+                                    level={"title-sm"}
+                                >
+                                    Page
+                                    {" "}
+                                    {pageNum}
+                                </Typography>
+                            </Stack>
+                            <Chip size={"sm"}>
+                                {results.length}
+                            </Chip>
+                        </Box>
+                    </AccordionSummary>
+                    <AccordionDetails className={"results-group-content"}>
+                        <List size={"sm"}>
+                            {results.map((r) => (
+                                <Result
+                                    key={r.logEventNum}
+                                    matchRange={r.matchRange}
+                                    message={r.message}/>
+                            ))}
+                        </List>
+                    </AccordionDetails>
+                </Accordion>
+            ))}
+        </>
     );
 };
 
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
index ce1cbda6..66499f00 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
@@ -14,6 +14,7 @@ import {
     TAB_DISPLAY_NAMES,
     TAB_NAME,
 } from "../../../../../typings/tab";
+import {QueryResults} from "../../../../../typings/worker";
 import CustomTabPanel from "../CustomTabPanel";
 import TitleButton from "../TitleButton";
 import ResultsGroup from "./ResultsGroup";
@@ -27,24 +28,33 @@ enum SEARCH_OPTION {
 /**
  *
  */
-const SAMPLE_RESULTS = Object.freeze({
-    1: [{logEventNum: 1,
-        message: "hi how are you",
-        matchRange: [0,
-            2] as [number, number]}],
-    2: [{logEventNum: 202,
-        message: "i'm a super long message that supposedly overflows in the panel width.",
-        matchRange: [4,
-            6] as [number, number]}],
-    8: [{logEventNum: 808,
-        message: "hi how are you",
-        matchRange: [4,
-            6] as [number, number]},
-    {logEventNum: 809,
-        message: "hi how are you",
-        matchRange: [4,
-            6] as [number, number]}],
-});
+const SAMPLE_RESULTS: QueryResults = new Map([
+    [1,
+        [
+            {logEventNum: 1,
+                message: "hi how are you",
+                matchRange: [0,
+                    2] as [number, number]},
+        ]],
+    [2,
+        [
+            {logEventNum: 202,
+                message: "i'm a super long message that supposedly overflows in the panel width.",
+                matchRange: [4,
+                    6] as [number, number]},
+        ]],
+    [8,
+        [
+            {logEventNum: 808,
+                message: "hi how are you",
+                matchRange: [4,
+                    6] as [number, number]},
+            {logEventNum: 809,
+                message: "hi how are you",
+                matchRange: [4,
+                    6] as [number, number]},
+        ]],
+]);
 
 /**
  * Displays a panel for submitting search queries and viewing query results.
@@ -104,13 +114,9 @@ const SearchTabPanel = () => {
                 disableDivider={true}
                 size={"sm"}
             >
-                {Object.entries(SAMPLE_RESULTS).map(([pageNum, resultsOnPage]) => (
-                    <ResultsGroup
-                        isAllExpanded={isAllExpanded}
-                        key={pageNum}
-                        pageNum={parseInt(pageNum, 10)}
-                        results={resultsOnPage}/>
-                ))}
+                <ResultsGroup
+                    isAllExpanded={isAllExpanded}
+                    queryResults={SAMPLE_RESULTS}/>
             </AccordionGroup>
         </CustomTabPanel>
     );

From ac22041e6dce68657452e4fffaf68d65da871554 Mon Sep 17 00:00:00 2001
From: Henry8192 <50559854+Henry8192@users.noreply.github.com>
Date: Mon, 28 Oct 2024 12:23:43 -0400
Subject: [PATCH 03/24] show queryResults in search tab panel

---
 .../SidebarTabs/SearchTabPanel/index.tsx      | 60 +++++++------------
 1 file changed, 22 insertions(+), 38 deletions(-)

diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
index 66499f00..a132befb 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
@@ -1,4 +1,8 @@
-import {useState} from "react";
+import {
+    useContext,
+    useRef,
+    useState,
+} from "react";
 
 import {
     AccordionGroup,
@@ -10,11 +14,11 @@ import {
 import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
 import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
 
+import {StateContext} from "../../../../../contexts/StateContextProvider";
 import {
     TAB_DISPLAY_NAMES,
     TAB_NAME,
 } from "../../../../../typings/tab";
-import {QueryResults} from "../../../../../typings/worker";
 import CustomTabPanel from "../CustomTabPanel";
 import TitleButton from "../TitleButton";
 import ResultsGroup from "./ResultsGroup";
@@ -25,37 +29,6 @@ enum SEARCH_OPTION {
     IS_REGEX = "isRegex"
 }
 
-/**
- *
- */
-const SAMPLE_RESULTS: QueryResults = new Map([
-    [1,
-        [
-            {logEventNum: 1,
-                message: "hi how are you",
-                matchRange: [0,
-                    2] as [number, number]},
-        ]],
-    [2,
-        [
-            {logEventNum: 202,
-                message: "i'm a super long message that supposedly overflows in the panel width.",
-                matchRange: [4,
-                    6] as [number, number]},
-        ]],
-    [8,
-        [
-            {logEventNum: 808,
-                message: "hi how are you",
-                matchRange: [4,
-                    6] as [number, number]},
-            {logEventNum: 809,
-                message: "hi how are you",
-                matchRange: [4,
-                    6] as [number, number]},
-        ]],
-]);
-
 /**
  * Displays a panel for submitting search queries and viewing query results.
  *
@@ -64,24 +37,34 @@ const SAMPLE_RESULTS: QueryResults = new Map([
 const SearchTabPanel = () => {
     const [isAllExpanded, setIsAllExpanded] = useState<boolean>(true);
     const [searchOptions, setSearchOptions] = useState<SEARCH_OPTION[]>([]);
+    const searchTextRef = useRef<HTMLTextAreaElement>(null);
+    const {queryResults, startQuery} = useContext(StateContext);
+    const handleSearch = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if ("Enter" === event.key && searchTextRef.current) {
+            event.preventDefault();
+            const isCaseSensitive = searchOptions.includes(SEARCH_OPTION.IS_CASE_SENSITIVE);
+            const isRegex = searchOptions.includes(SEARCH_OPTION.IS_REGEX);
+            startQuery(searchTextRef.current.value, isRegex, isCaseSensitive);
+        }
+    };
 
     return (
         <CustomTabPanel
             tabName={TAB_NAME.SEARCH}
             title={TAB_DISPLAY_NAMES[TAB_NAME.SEARCH]}
-            titleButtons={<>
+            titleButtons={
                 <TitleButton onClick={() => { setIsAllExpanded((v) => !v); }}>
                     {isAllExpanded ?
                         <UnfoldLessIcon/> :
                         <UnfoldMoreIcon/>}
                 </TitleButton>
-            </>}
+            }
         >
             <Textarea
                 maxRows={7}
                 placeholder={"Search"}
                 size={"sm"}
-                slotProps={{endDecorator: {sx: {marginBlockStart: 0, display: "block"}}}}
+                slotProps={{textarea: {ref: searchTextRef}, endDecorator: {sx: {marginBlockStart: 0, display: "block"}}}}
                 sx={{flexDirection: "row"}}
                 endDecorator={
                     <>
@@ -109,14 +92,15 @@ const SearchTabPanel = () => {
                             </IconButton>
                         </ToggleButtonGroup>
                     </>
-                }/>
+                }
+                onKeyDown={handleSearch}/>
             <AccordionGroup
                 disableDivider={true}
                 size={"sm"}
             >
                 <ResultsGroup
                     isAllExpanded={isAllExpanded}
-                    queryResults={SAMPLE_RESULTS}/>
+                    queryResults={queryResults}/>
             </AccordionGroup>
         </CustomTabPanel>
     );

From 908b6dba0e3061ed325970a9342a6205a1623bc7 Mon Sep 17 00:00:00 2001
From: Henry8192 <50559854+Henry8192@users.noreply.github.com>
Date: Thu, 31 Oct 2024 17:58:10 -0400
Subject: [PATCH 04/24] fix search results not showing; show contexts before
 and after search results

---
 .../Sidebar/SidebarTabs/SearchTabPanel/Result.css      | 10 +++++++++-
 .../Sidebar/SidebarTabs/SearchTabPanel/Result.tsx      |  6 +++---
 .../Sidebar/SidebarTabs/SearchTabPanel/index.tsx       |  5 ++++-
 src/contexts/StateContextProvider.tsx                  |  1 +
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css
index e68e46be..a3afd8b7 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css
@@ -2,7 +2,7 @@
     user-select: none;
 
     overflow: hidden;
-    display: block !important;
+    display: flex !important;
 
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -13,3 +13,11 @@
     font-size: 0.875rem !important;
     font-weight: 400 !important;
 }
+
+.before-match,
+.match,
+.after-match {
+    flex: 1 1 0;  /* Allow each item to take an equal part */
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx
index 591bd835..e1359cfc 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx
@@ -34,13 +34,13 @@ const Result = ({message, matchRange}: ResultProps) => {
     return (
         <ListItemButton className={"result-button"}>
             <Typography
-                className={"result-text"}
+                className={"result-text before-match"}
                 level={"body-xs"}
             >
                 {beforeMatch}
             </Typography>
             <Typography
-                className={"result-text"}
+                className={"result-text match"}
                 level={"body-xs"}
                 sx={{
                     backgroundColor: "warning.softBg",
@@ -49,7 +49,7 @@ const Result = ({message, matchRange}: ResultProps) => {
                 {match}
             </Typography>
             <Typography
-                className={"result-text"}
+                className={"result-text after-match"}
                 level={"body-xs"}
             >
                 {afterMatch}
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
index a132befb..4606068a 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
@@ -64,7 +64,6 @@ const SearchTabPanel = () => {
                 maxRows={7}
                 placeholder={"Search"}
                 size={"sm"}
-                slotProps={{textarea: {ref: searchTextRef}, endDecorator: {sx: {marginBlockStart: 0, display: "block"}}}}
                 sx={{flexDirection: "row"}}
                 endDecorator={
                     <>
@@ -93,6 +92,10 @@ const SearchTabPanel = () => {
                         </ToggleButtonGroup>
                     </>
                 }
+                slotProps={{
+                    textarea: {ref: searchTextRef},
+                    endDecorator: {sx: {marginBlockStart: 0, display: "block"}},
+                }}
                 onKeyDown={handleSearch}/>
             <AccordionGroup
                 disableDivider={true}
diff --git a/src/contexts/StateContextProvider.tsx b/src/contexts/StateContextProvider.tsx
index 99f09ff7..74989ecf 100644
--- a/src/contexts/StateContextProvider.tsx
+++ b/src/contexts/StateContextProvider.tsx
@@ -307,6 +307,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
             }
             case WORKER_RESP_CODE.QUERY_RESULT:
                 setQueryResults((v) => {
+                    v = structuredClone(v);
                     args.results.forEach((resultsPerPage, queryPageNum) => {
                         if (false === v.has(queryPageNum)) {
                             v.set(queryPageNum, []);

From b931505a01c5e8fb6804735fbba03677e5419ae1 Mon Sep 17 00:00:00 2001
From: Henry <50559854+Henry8192@users.noreply.github.com>
Date: Fri, 1 Nov 2024 18:19:18 -0400
Subject: [PATCH 05/24] Nasty solution for individual search results expansion
 control

---
 .../SearchTabPanel/ResultsGroup.tsx           | 41 +++++++++++++++----
 1 file changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
index 2a426e21..f98d719a 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
@@ -38,27 +38,50 @@ const ResultsGroup = ({
     isAllExpanded,
     queryResults,
 }: ResultsGroupProps) => {
-    const [isExpanded, setIsExpanded] = useState<boolean>(isAllExpanded);
-
+    const [expandedMap, setExpandedMap] = useState<Record<number, boolean>>({});
     const handleAccordionChange = (
-        _: React.SyntheticEvent,
-        newValue: boolean
-    ) => {
-        setIsExpanded(newValue);
+        pageNum: number
+    ) => (_: React.SyntheticEvent, newValue: boolean) => {
+        setExpandedMap((prev) => ({
+            ...prev,
+            [pageNum]: newValue,
+        }));
     };
 
     // On `isAllExpanded` updates, sync current results group's expand status.
     useEffect(() => {
-        setIsExpanded(isAllExpanded);
+        const newExpandedMap = Object.fromEntries(
+            Object.entries(expandedMap).map(([key]) => [key,
+                isAllExpanded])
+        );
+
+        setExpandedMap(newExpandedMap);
     }, [isAllExpanded]);
 
+    useEffect(() => {
+        setExpandedMap((prevMap) => {
+            const updatedMap = {...prevMap};
+            queryResults.forEach((_, pageNum) => {
+                // Only set for entries not already in expandedMap
+                if (!(pageNum in updatedMap)) {
+                    updatedMap[pageNum] = isAllExpanded;
+                }
+            });
+
+            return updatedMap;
+        });
+    }, [
+        isAllExpanded,
+        queryResults,
+    ]);
+
     return (
         <>
             {Array.from(queryResults.entries()).map(([pageNum, results]) => (
                 <Accordion
-                    expanded={isExpanded}
+                    expanded={expandedMap[pageNum] ?? isAllExpanded}
                     key={pageNum}
-                    onChange={handleAccordionChange}
+                    onChange={handleAccordionChange(pageNum)}
                 >
                     <AccordionSummary
                         slotProps={{

From 3ddd96a988e6c0375d21c14e0c3db71f7423e070 Mon Sep 17 00:00:00 2001
From: Henry8192 <50559854+Henry8192@users.noreply.github.com>
Date: Mon, 4 Nov 2024 11:59:28 -0500
Subject: [PATCH 06/24] limit max query results to 1000; add jsdoc for
 ResultsGroup

---
 .../SidebarTabs/SearchTabPanel/ResultsGroup.tsx     |  2 ++
 src/services/LogFileManager/index.ts                | 13 +++++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
index f98d719a..d10a9a04 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
@@ -29,10 +29,12 @@ interface ResultsGroupProps {
 }
 
 /**
+ * Renders a group of results. Each group contains a list of results from a single page.
  *
  * @param props
  * @param props.isAllExpanded
  * @param props.queryResults
+ * @return
  */
 const ResultsGroup = ({
     isAllExpanded,
diff --git a/src/services/LogFileManager/index.ts b/src/services/LogFileManager/index.ts
index 67b1c0e4..ad0dae27 100644
--- a/src/services/LogFileManager/index.ts
+++ b/src/services/LogFileManager/index.ts
@@ -1,4 +1,4 @@
-/* eslint max-lines: ["error", 400] */
+/* eslint max-lines: ["error", 450] */
 import {
     Decoder,
     DecoderOptionsType,
@@ -33,6 +33,8 @@ import {
 } from "./utils";
 
 
+const MAX_RESULT_COUNT = 1_000;
+
 /**
  * Class to manage the retrieval and decoding of a given log file.
  */
@@ -51,6 +53,8 @@ class LogFileManager {
 
     #decoder: Decoder;
 
+    #queryCount: number = 0;
+
     /**
      * Private constructor for LogFileManager. This is not intended to be invoked publicly.
      * Instead, use LogFileManager.create() to create a new instance of the class.
@@ -287,6 +291,7 @@ class LogFileManager {
      */
     startQuery (queryString: string, isRegex: boolean, isCaseSensitive: boolean): void {
         this.#queryId++;
+        this.#queryCount = 0;
 
         // If the query string is empty, or there are no logs, return
         if ("" === queryString || 0 === this.#numEvents) {
@@ -318,7 +323,7 @@ class LogFileManager {
         chunkBeginIdx: number,
         queryRegex: RegExp
     ): void {
-        if (queryId !== this.#queryId) {
+        if (queryId !== this.#queryId || MAX_RESULT_COUNT < this.#queryCount) {
             // Current task no longer corresponds to the latest query in the LogFileManager.
             return;
         }
@@ -333,6 +338,10 @@ class LogFileManager {
         decodedEvents?.forEach(([message, , , logEventNum]) => {
             const matchResult = message.match(queryRegex);
             if (null !== matchResult && "number" === typeof matchResult.index) {
+                this.#queryCount++;
+                if (MAX_RESULT_COUNT < this.#queryCount) {
+                    return;
+                }
                 const pageNum = Math.ceil(logEventNum / this.#pageSize);
                 if (false === results.has(pageNum)) {
                     results.set(pageNum, []);

From 2cbb032a8425d5780208eb5041d34f71baf17a1c Mon Sep 17 00:00:00 2001
From: Henry8192 <50559854+Henry8192@users.noreply.github.com>
Date: Mon, 4 Nov 2024 15:52:34 -0500
Subject: [PATCH 07/24] change ResultsGroup structure: each should be a page of
 results; rewrite queryCount; fix format issue

---
 .../SidebarTabs/SearchTabPanel/Result.css     |   2 +-
 .../SearchTabPanel/ResultsGroup.tsx           | 129 +++++++-----------
 .../SidebarTabs/SearchTabPanel/index.tsx      |  14 +-
 .../Sidebar/SidebarTabs/TitleButton.css       |   1 +
 src/components/MenuBar/SmallIconButton.tsx    |   2 +
 src/services/LogFileManager/index.ts          |  49 ++++---
 src/typings/worker.ts                         |   1 +
 7 files changed, 94 insertions(+), 104 deletions(-)

diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css
index a3afd8b7..6824adbe 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css
@@ -17,7 +17,7 @@
 .before-match,
 .match,
 .after-match {
-    flex: 1 1 0;  /* Allow each item to take an equal part */
     overflow: hidden;
+    flex: 1 1 0; /* Allow each item to take an equal part */
     text-overflow: ellipsis;
 }
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
index d10a9a04..bedda76e 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
@@ -17,7 +17,7 @@ import {
 
 import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
 
-import {QueryResults} from "../../../../../typings/worker";
+import {QueryResultsType} from "../../../../../typings/worker";
 import Result from "./Result";
 
 import "./ResultsGroup.css";
@@ -25,7 +25,8 @@ import "./ResultsGroup.css";
 
 interface ResultsGroupProps {
     isAllExpanded: boolean,
-    queryResults: QueryResults,
+    pageNum: number,
+    results: QueryResultsType[],
 }
 
 /**
@@ -33,95 +34,69 @@ interface ResultsGroupProps {
  *
  * @param props
  * @param props.isAllExpanded
- * @param props.queryResults
+ * @param props.pageNum
+ * @param props.results
  * @return
  */
 const ResultsGroup = ({
     isAllExpanded,
-    queryResults,
+    pageNum,
+    results,
 }: ResultsGroupProps) => {
-    const [expandedMap, setExpandedMap] = useState<Record<number, boolean>>({});
+    const [isExpanded, setIsExpanded] = useState<boolean>(isAllExpanded);
+
     const handleAccordionChange = (
-        pageNum: number
-    ) => (_: React.SyntheticEvent, newValue: boolean) => {
-        setExpandedMap((prev) => ({
-            ...prev,
-            [pageNum]: newValue,
-        }));
+        _: React.SyntheticEvent,
+        newValue: boolean
+    ) => {
+        setIsExpanded(newValue);
     };
 
     // On `isAllExpanded` updates, sync current results group's expand status.
     useEffect(() => {
-        const newExpandedMap = Object.fromEntries(
-            Object.entries(expandedMap).map(([key]) => [key,
-                isAllExpanded])
-        );
-
-        setExpandedMap(newExpandedMap);
+        setIsExpanded(isAllExpanded);
     }, [isAllExpanded]);
 
-    useEffect(() => {
-        setExpandedMap((prevMap) => {
-            const updatedMap = {...prevMap};
-            queryResults.forEach((_, pageNum) => {
-                // Only set for entries not already in expandedMap
-                if (!(pageNum in updatedMap)) {
-                    updatedMap[pageNum] = isAllExpanded;
-                }
-            });
-
-            return updatedMap;
-        });
-    }, [
-        isAllExpanded,
-        queryResults,
-    ]);
-
     return (
-        <>
-            {Array.from(queryResults.entries()).map(([pageNum, results]) => (
-                <Accordion
-                    expanded={expandedMap[pageNum] ?? isAllExpanded}
-                    key={pageNum}
-                    onChange={handleAccordionChange(pageNum)}
-                >
-                    <AccordionSummary
-                        slotProps={{
-                            button: {className: "results-group-title-button"},
-                        }}
+        <Accordion
+            expanded={isExpanded}
+            onChange={handleAccordionChange}
+        >
+            <AccordionSummary
+                slotProps={{
+                    button: {className: "results-group-title-button"},
+                }}
+            >
+                <Box className={"results-group-title-container"}>
+                    <Stack
+                        className={"results-group-title-text-container"}
+                        direction={"row"}
                     >
-                        <Box className={"results-group-title-container"}>
-                            <Stack
-                                className={"results-group-title-text-container"}
-                                direction={"row"}
-                            >
-                                <DescriptionOutlinedIcon fontSize={"inherit"}/>
-                                <Typography
-                                    level={"title-sm"}
-                                >
-                                    Page
-                                    {" "}
-                                    {pageNum}
-                                </Typography>
-                            </Stack>
-                            <Chip size={"sm"}>
-                                {results.length}
-                            </Chip>
-                        </Box>
-                    </AccordionSummary>
-                    <AccordionDetails className={"results-group-content"}>
-                        <List size={"sm"}>
-                            {results.map((r) => (
-                                <Result
-                                    key={r.logEventNum}
-                                    matchRange={r.matchRange}
-                                    message={r.message}/>
-                            ))}
-                        </List>
-                    </AccordionDetails>
-                </Accordion>
-            ))}
-        </>
+                        <DescriptionOutlinedIcon fontSize={"inherit"}/>
+                        <Typography
+                            level={"title-sm"}
+                        >
+                            Page
+                            {" "}
+                            {pageNum}
+                        </Typography>
+                    </Stack>
+                    <Chip size={"sm"}>
+                        {results.length}
+                    </Chip>
+                </Box>
+            </AccordionSummary>
+            <AccordionDetails className={"results-group-content"}>
+                <List size={"sm"}>
+                    {results.map((r, index) => (
+                        <Result
+                            key={index}
+                            matchRange={r.matchRange}
+                            message={r.message}/>
+                    ))}
+                </List>
+            </AccordionDetails>
+        </Accordion>
     );
 };
 
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
index 4606068a..12581920 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
@@ -1,4 +1,4 @@
-import {
+import React, {
     useContext,
     useRef,
     useState,
@@ -64,7 +64,7 @@ const SearchTabPanel = () => {
                 maxRows={7}
                 placeholder={"Search"}
                 size={"sm"}
-                sx={{flexDirection: "row"}}
+                sx={{flexDirection: "row", zIndex: 0}}
                 endDecorator={
                     <>
                         <ToggleButtonGroup
@@ -101,9 +101,13 @@ const SearchTabPanel = () => {
                 disableDivider={true}
                 size={"sm"}
             >
-                <ResultsGroup
-                    isAllExpanded={isAllExpanded}
-                    queryResults={queryResults}/>
+                {Array.from(queryResults.entries()).map(([pageNum, results], index) => (
+                    <ResultsGroup
+                        isAllExpanded={isAllExpanded}
+                        key={index}
+                        pageNum={pageNum}
+                        results={results}/>
+                ))}
             </AccordionGroup>
         </CustomTabPanel>
     );
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/TitleButton.css b/src/components/CentralContainer/Sidebar/SidebarTabs/TitleButton.css
index 2bb9eb0f..33bfafd5 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/TitleButton.css
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/TitleButton.css
@@ -1,4 +1,5 @@
 .sidebar-tab-title-button {
+    z-index: 0 !important;
     min-width: 0 !important;
     min-height: 0 !important;
 }
diff --git a/src/components/MenuBar/SmallIconButton.tsx b/src/components/MenuBar/SmallIconButton.tsx
index 3fc3447e..dc061cba 100644
--- a/src/components/MenuBar/SmallIconButton.tsx
+++ b/src/components/MenuBar/SmallIconButton.tsx
@@ -1,3 +1,5 @@
+import React from "react";
+
 import {IconButton} from "@mui/joy";
 
 
diff --git a/src/services/LogFileManager/index.ts b/src/services/LogFileManager/index.ts
index ad0dae27..877d3b2f 100644
--- a/src/services/LogFileManager/index.ts
+++ b/src/services/LogFileManager/index.ts
@@ -318,12 +318,13 @@ class LogFileManager {
      * @param chunkBeginIdx
      * @param queryRegex
      */
+    // eslint-disable-next-line max-statements
     #queryChunkAndScheduleNext (
         queryId: number,
         chunkBeginIdx: number,
         queryRegex: RegExp
     ): void {
-        if (queryId !== this.#queryId || MAX_RESULT_COUNT < this.#queryCount) {
+        if (queryId !== this.#queryId) {
             // Current task no longer corresponds to the latest query in the LogFileManager.
             return;
         }
@@ -335,31 +336,37 @@ class LogFileManager {
             null !== this.#decoder.getFilteredLogEventMap()
         );
 
-        decodedEvents?.forEach(([message, , , logEventNum]) => {
+        if (null === decodedEvents) {
+            return;
+        }
+
+        for (const [message, , , logEventNum] of decodedEvents) {
             const matchResult = message.match(queryRegex);
-            if (null !== matchResult && "number" === typeof matchResult.index) {
-                this.#queryCount++;
-                if (MAX_RESULT_COUNT < this.#queryCount) {
-                    return;
-                }
-                const pageNum = Math.ceil(logEventNum / this.#pageSize);
-                if (false === results.has(pageNum)) {
-                    results.set(pageNum, []);
-                }
-                results.get(pageNum)?.push({
-                    logEventNum: logEventNum,
-                    message: message,
-                    matchRange: [
-                        matchResult.index,
-                        (matchResult.index + matchResult[0].length),
-                    ],
-                });
+            if (null === matchResult || "number" !== typeof matchResult.index) {
+                continue;
             }
-        });
+            const pageNum = Math.ceil(logEventNum / this.#pageSize);
+            if (false === results.has(pageNum)) {
+                results.set(pageNum, []);
+            }
+            results.get(pageNum)?.push({
+                logEventNum: logEventNum,
+                message: message,
+                matchRange: [
+                    matchResult.index,
+                    (matchResult.index + matchResult[0].length),
+                ],
+            });
+
+            this.#queryCount++;
+            if (MAX_RESULT_COUNT <= this.#queryCount) {
+                break;
+            }
+        }
 
         this.#onQueryResults(results);
 
-        if (chunkEndIdx < this.#numEvents) {
+        if (chunkEndIdx < this.#numEvents && MAX_RESULT_COUNT > this.#queryCount) {
             defer(() => {
                 this.#queryChunkAndScheduleNext(queryId, chunkEndIdx, queryRegex);
             });
diff --git a/src/typings/worker.ts b/src/typings/worker.ts
index 8e64e283..1cbe7c40 100644
--- a/src/typings/worker.ts
+++ b/src/typings/worker.ts
@@ -183,6 +183,7 @@ export type {
     MainWorkerReqMessage,
     MainWorkerRespMessage,
     QueryResults,
+    QueryResultsType,
     WorkerReq,
     WorkerResp,
 };

From 0889361694bb618e5d40e8a7f5081ca9996347e5 Mon Sep 17 00:00:00 2001
From: Henry8192 <50559854+Henry8192@users.noreply.github.com>
Date: Mon, 4 Nov 2024 15:55:23 -0500
Subject: [PATCH 08/24] amend stylelint

---
 .../Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.css          | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.css b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.css
index 5244d6a1..1ece47a6 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.css
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.css
@@ -17,5 +17,6 @@
 
 .results-group-content {
     margin-left: 1.5px !important;
+    /* stylelint-disable-next-line custom-property-pattern */
     border-left: 1px solid var(--joy-palette-neutral-outlinedBorder, #cdd7e1);
 }

From d8cd28cddbae77e398a79cf4460780bb8be6c8f4 Mon Sep 17 00:00:00 2001
From: Henry <50559854+Henry8192@users.noreply.github.com>
Date: Tue, 5 Nov 2024 12:55:37 -0500
Subject: [PATCH 09/24] edit QUERY_RESULT protocol to show search progress

---
 src/services/LogFileManager/index.ts | 8 ++++----
 src/services/MainWorker.ts           | 5 +++--
 src/typings/worker.ts                | 2 +-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/services/LogFileManager/index.ts b/src/services/LogFileManager/index.ts
index 877d3b2f..a389c9d3 100644
--- a/src/services/LogFileManager/index.ts
+++ b/src/services/LogFileManager/index.ts
@@ -49,7 +49,7 @@ class LogFileManager {
 
     readonly #onDiskFileSizeInBytes: number;
 
-    readonly #onQueryResults: (queryResults: QueryResults) => void;
+    readonly #onQueryResults: (queryProgress: number, queryResults: QueryResults) => void;
 
     #decoder: Decoder;
 
@@ -71,7 +71,7 @@ class LogFileManager {
         fileName: string,
         onDiskFileSizeInBytes: number,
         pageSize: number,
-        onQueryResults: (queryResults: QueryResults) => void,
+        onQueryResults: (queryProgress: number, queryResults: QueryResults) => void,
     }) {
         this.#decoder = decoder;
         this.#fileName = fileName;
@@ -115,7 +115,7 @@ class LogFileManager {
         fileSrc: FileSrcType,
         pageSize: number,
         decoderOptions: DecoderOptionsType,
-        onQueryResults: (queryResults: QueryResults) => void,
+        onQueryResults: (queryProgress: number, queryResults: QueryResults) => void,
     ): Promise<LogFileManager> {
         const {fileName, fileData} = await loadFile(fileSrc);
         const decoder = await LogFileManager.#initDecoder(fileName, fileData, decoderOptions);
@@ -364,7 +364,7 @@ class LogFileManager {
             }
         }
 
-        this.#onQueryResults(results);
+        this.#onQueryResults(chunkEndIdx / this.#numEvents, results);
 
         if (chunkEndIdx < this.#numEvents && MAX_RESULT_COUNT > this.#queryCount) {
             defer(() => {
diff --git a/src/services/MainWorker.ts b/src/services/MainWorker.ts
index 73b2f5da..dd651fd0 100644
--- a/src/services/MainWorker.ts
+++ b/src/services/MainWorker.ts
@@ -41,10 +41,11 @@ const postResp = <T extends WORKER_RESP_CODE>(
 /**
  * Post a response for a chunk of query results.
  *
+ * @param queryProgress
  * @param queryResults
  */
-const onQueryResults = (queryResults: QueryResults) => {
-    postResp(WORKER_RESP_CODE.QUERY_RESULT, {results: queryResults});
+const onQueryResults = (queryProgress: number, queryResults: QueryResults) => {
+    postResp(WORKER_RESP_CODE.QUERY_RESULT, {progress: queryProgress, results: queryResults});
 };
 
 // eslint-disable-next-line no-warning-comments
diff --git a/src/typings/worker.ts b/src/typings/worker.ts
index 1cbe7c40..4f7c8fa1 100644
--- a/src/typings/worker.ts
+++ b/src/typings/worker.ts
@@ -136,7 +136,7 @@ type WorkerRespMap = {
         numPages: number,
         pageNum: number,
     },
-    [WORKER_RESP_CODE.QUERY_RESULT]: { results: QueryResults },
+    [WORKER_RESP_CODE.QUERY_RESULT]: { progress: number, results: QueryResults },
 };
 
 type WorkerReq<T extends WORKER_REQ_CODE> = T extends keyof WorkerReqMap ?

From 4709312d8013c9fc3dac7f36c94a73c93116a82d Mon Sep 17 00:00:00 2001
From: Henry <50559854+Henry8192@users.noreply.github.com>
Date: Wed, 6 Nov 2024 20:49:47 -0500
Subject: [PATCH 10/24] display search progress in status bar

---
 .../SearchTabPanel/ResultsGroup.tsx           |  6 ++-
 .../SidebarTabs/SearchTabPanel/index.tsx      | 50 +++++++++----------
 src/components/StatusBar/index.tsx            |  4 +-
 src/contexts/StateContextProvider.tsx         | 15 ++++--
 src/services/LogFileManager/index.ts          |  5 +-
 5 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
index bedda76e..689cd110 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
@@ -38,7 +38,7 @@ interface ResultsGroupProps {
  * @param props.results
  * @return
  */
-const ResultsGroup = ({
+const ResultsGroup = React.memo(({
     isAllExpanded,
     pageNum,
     results,
@@ -98,6 +98,8 @@ const ResultsGroup = ({
             </AccordionDetails>
         </Accordion>
     );
-};
+});
+
+ResultsGroup.displayName = "ResultsGroup";
 
 export default ResultsGroup;
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
index 12581920..b3decc65 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
@@ -66,31 +66,29 @@ const SearchTabPanel = () => {
                 size={"sm"}
                 sx={{flexDirection: "row", zIndex: 0}}
                 endDecorator={
-                    <>
-                        <ToggleButtonGroup
-                            size={"sm"}
-                            spacing={0.3}
-                            sx={{borderRadius: "2px"}}
-                            value={searchOptions}
-                            variant={"plain"}
-                            onChange={(_, newValue) => {
-                                setSearchOptions(newValue);
-                            }}
+                    <ToggleButtonGroup
+                        size={"sm"}
+                        spacing={0.3}
+                        sx={{borderRadius: "2px"}}
+                        value={searchOptions}
+                        variant={"plain"}
+                        onChange={(_, newValue) => {
+                            setSearchOptions(newValue);
+                        }}
+                    >
+                        <IconButton
+                            sx={{fontFamily: "Inter"}}
+                            value={SEARCH_OPTION.IS_CASE_SENSITIVE}
                         >
-                            <IconButton
-                                sx={{fontFamily: "Inter"}}
-                                value={SEARCH_OPTION.IS_CASE_SENSITIVE}
-                            >
-                                Aa
-                            </IconButton>
-                            <IconButton
-                                sx={{fontFamily: "Inter"}}
-                                value={SEARCH_OPTION.IS_REGEX}
-                            >
-                                .*
-                            </IconButton>
-                        </ToggleButtonGroup>
-                    </>
+                            Aa
+                        </IconButton>
+                        <IconButton
+                            sx={{fontFamily: "Inter"}}
+                            value={SEARCH_OPTION.IS_REGEX}
+                        >
+                            .*
+                        </IconButton>
+                    </ToggleButtonGroup>
                 }
                 slotProps={{
                     textarea: {ref: searchTextRef},
@@ -101,10 +99,10 @@ const SearchTabPanel = () => {
                 disableDivider={true}
                 size={"sm"}
             >
-                {Array.from(queryResults.entries()).map(([pageNum, results], index) => (
+                {Array.from(queryResults.entries()).map(([pageNum, results]) => (
                     <ResultsGroup
                         isAllExpanded={isAllExpanded}
-                        key={index}
+                        key={`${pageNum} + ${results.length}`}
                         pageNum={pageNum}
                         results={results}/>
                 ))}
diff --git a/src/components/StatusBar/index.tsx b/src/components/StatusBar/index.tsx
index 8ddbe830..4a6a3e2f 100644
--- a/src/components/StatusBar/index.tsx
+++ b/src/components/StatusBar/index.tsx
@@ -31,13 +31,13 @@ const handleCopyLinkButtonClick = () => {
  * @return
  */
 const StatusBar = () => {
-    const {uiState, numEvents} = useContext(StateContext);
+    const {uiState, numEvents, queryProgress} = useContext(StateContext);
     const {logEventNum} = useContext(UrlContext);
 
     return (
         <Sheet className={"status-bar"}>
             <Typography className={"status-message"}>
-                {/* This is left blank intentionally until status messages are implemented. */}
+                {queryProgress}
             </Typography>
             <Button
                 color={"primary"}
diff --git a/src/contexts/StateContextProvider.tsx b/src/contexts/StateContextProvider.tsx
index 74989ecf..c36a738c 100644
--- a/src/contexts/StateContextProvider.tsx
+++ b/src/contexts/StateContextProvider.tsx
@@ -63,6 +63,7 @@ interface StateContextType {
     numPages: number,
     onDiskFileSizeInBytes: number,
     pageNum: number,
+    queryProgress: number,
     queryResults: QueryResults,
 
     exportLogs: () => void,
@@ -85,6 +86,7 @@ const STATE_DEFAULT: Readonly<StateContextType> = Object.freeze({
     numPages: 0,
     onDiskFileSizeInBytes: 0,
     pageNum: 0,
+    queryProgress: 0,
     queryResults: new Map(),
     uiState: UI_STATE.UNOPENED,
 
@@ -231,27 +233,28 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     const {filePath, logEventNum} = useContext(UrlContext);
 
     // States
+    const beginLineNumToLogEventNumRef =
+        useRef<BeginLineNumToLogEventNumMap>(STATE_DEFAULT.beginLineNumToLogEventNum);
     const [exportProgress, setExportProgress] =
         useState<Nullable<number>>(STATE_DEFAULT.exportProgress);
     const [fileName, setFileName] = useState<string>(STATE_DEFAULT.fileName);
-    const [uiState, setUiState] = useState<UI_STATE>(STATE_DEFAULT.uiState);
     const [logData, setLogData] = useState<string>(STATE_DEFAULT.logData);
     const [numEvents, setNumEvents] = useState<number>(STATE_DEFAULT.numEvents);
     const [numPages, setNumPages] = useState<number>(STATE_DEFAULT.numPages);
     const [onDiskFileSizeInBytes, setOnDiskFileSizeInBytes] =
         useState(STATE_DEFAULT.onDiskFileSizeInBytes);
     const [pageNum, setPageNum] = useState<number>(STATE_DEFAULT.pageNum);
+    const [queryProgress, setQueryProgress] = useState<number>(STATE_DEFAULT.queryProgress);
     const [queryResults, setQueryResults] = useState<QueryResults>(STATE_DEFAULT.queryResults);
-    const beginLineNumToLogEventNumRef =
-        useRef<BeginLineNumToLogEventNumMap>(STATE_DEFAULT.beginLineNumToLogEventNum);
+    const [uiState, setUiState] = useState<UI_STATE>(STATE_DEFAULT.uiState);
 
     // Refs
     const logEventNumRef = useRef(logEventNum);
+    const logExportManagerRef = useRef<null|LogExportManager>(null);
+    const mainWorkerRef = useRef<null|Worker>(null);
     const numPagesRef = useRef<number>(numPages);
     const pageNumRef = useRef<number>(pageNum);
     const uiStateRef = useRef<UI_STATE>(uiState);
-    const logExportManagerRef = useRef<null|LogExportManager>(null);
-    const mainWorkerRef = useRef<null|Worker>(null);
 
     const handleMainWorkerResp = useCallback((ev: MessageEvent<MainWorkerRespMessage>) => {
         const {code, args} = ev.data;
@@ -317,6 +320,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
 
                     return v;
                 });
+                setQueryProgress(args.progress);
                 break;
             default:
                 console.error(`Unexpected ev.data: ${JSON.stringify(ev.data)}`);
@@ -506,6 +510,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 numPages: numPages,
                 onDiskFileSizeInBytes: onDiskFileSizeInBytes,
                 pageNum: pageNum,
+                queryProgress: queryProgress,
                 queryResults: queryResults,
                 uiState: uiState,
 
diff --git a/src/services/LogFileManager/index.ts b/src/services/LogFileManager/index.ts
index a389c9d3..6442f2d1 100644
--- a/src/services/LogFileManager/index.ts
+++ b/src/services/LogFileManager/index.ts
@@ -364,7 +364,10 @@ class LogFileManager {
             }
         }
 
-        this.#onQueryResults(chunkEndIdx / this.#numEvents, results);
+        this.#onQueryResults(
+            Math.max(chunkEndIdx / this.#numEvents, this.#queryCount / MAX_RESULT_COUNT),
+            results
+        );
 
         if (chunkEndIdx < this.#numEvents && MAX_RESULT_COUNT > this.#queryCount) {
             defer(() => {

From a8a1551c48f504ceffb2fd2b7d551f8d6cae367f Mon Sep 17 00:00:00 2001
From: Henry8192 <50559854+Henry8192@users.noreply.github.com>
Date: Thu, 7 Nov 2024 14:03:37 -0500
Subject: [PATCH 11/24] move search progress bar under search input box

---
 .../Sidebar/SidebarTabs/SearchTabPanel/index.tsx             | 5 +++++
 src/components/StatusBar/index.tsx                           | 4 ++--
 src/contexts/StateContextProvider.tsx                        | 4 +++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
index b3decc65..1b7b6416 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
@@ -7,6 +7,7 @@ import React, {
 import {
     AccordionGroup,
     IconButton,
+    LinearProgress,
     Textarea,
     ToggleButtonGroup,
 } from "@mui/joy";
@@ -47,6 +48,7 @@ const SearchTabPanel = () => {
             startQuery(searchTextRef.current.value, isRegex, isCaseSensitive);
         }
     };
+    const {queryProgress} = useContext(StateContext);
 
     return (
         <CustomTabPanel
@@ -95,6 +97,9 @@ const SearchTabPanel = () => {
                     endDecorator: {sx: {marginBlockStart: 0, display: "block"}},
                 }}
                 onKeyDown={handleSearch}/>
+            <LinearProgress
+                determinate={true}
+                value={queryProgress * 100}/>
             <AccordionGroup
                 disableDivider={true}
                 size={"sm"}
diff --git a/src/components/StatusBar/index.tsx b/src/components/StatusBar/index.tsx
index 4a6a3e2f..8ddbe830 100644
--- a/src/components/StatusBar/index.tsx
+++ b/src/components/StatusBar/index.tsx
@@ -31,13 +31,13 @@ const handleCopyLinkButtonClick = () => {
  * @return
  */
 const StatusBar = () => {
-    const {uiState, numEvents, queryProgress} = useContext(StateContext);
+    const {uiState, numEvents} = useContext(StateContext);
     const {logEventNum} = useContext(UrlContext);
 
     return (
         <Sheet className={"status-bar"}>
             <Typography className={"status-message"}>
-                {queryProgress}
+                {/* This is left blank intentionally until status messages are implemented. */}
             </Typography>
             <Button
                 color={"primary"}
diff --git a/src/contexts/StateContextProvider.tsx b/src/contexts/StateContextProvider.tsx
index c36a738c..c74384eb 100644
--- a/src/contexts/StateContextProvider.tsx
+++ b/src/contexts/StateContextProvider.tsx
@@ -320,7 +320,9 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
 
                     return v;
                 });
-                setQueryProgress(args.progress);
+                setQueryProgress(1 === args.progress ?
+                    0 :
+                    args.progress);
                 break;
             default:
                 console.error(`Unexpected ev.data: ${JSON.stringify(ev.data)}`);

From 67957ca59d18ea6a4f4dee292d84fcf71551cddf Mon Sep 17 00:00:00 2001
From: Henry8192 <50559854+Henry8192@users.noreply.github.com>
Date: Thu, 7 Nov 2024 14:51:48 -0500
Subject: [PATCH 12/24] search results now support jump to current log event

---
 .../Sidebar/SidebarTabs/SearchTabPanel/Result.tsx  | 14 ++++++++++++--
 .../SidebarTabs/SearchTabPanel/ResultsGroup.tsx    |  1 +
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx
index e1359cfc..196b6c48 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx
@@ -3,10 +3,13 @@ import {
     Typography,
 } from "@mui/joy";
 
+import {updateWindowUrlHashParams} from "../../../../../contexts/UrlContextProvider";
+
 import "./Result.css";
 
 
 interface ResultProps {
+    logEventNum: number,
     message: string,
     matchRange: [number, number]
 }
@@ -18,9 +21,10 @@ interface ResultProps {
  * @param props.message
  * @param props.matchRange A two-element array indicating the start and end indices of the substring
  * to be highlighted.
+ * @param props.logEventNum
  * @return
  */
-const Result = ({message, matchRange}: ResultProps) => {
+const Result = ({logEventNum, message, matchRange}: ResultProps) => {
     const [
         beforeMatch,
         match,
@@ -30,9 +34,15 @@ const Result = ({message, matchRange}: ResultProps) => {
         message.slice(...matchRange),
         message.slice(matchRange[1]),
     ];
+    const handleResultButtonClick = () => {
+        updateWindowUrlHashParams({logEventNum});
+    };
 
     return (
-        <ListItemButton className={"result-button"}>
+        <ListItemButton
+            className={"result-button"}
+            onClick={handleResultButtonClick}
+        >
             <Typography
                 className={"result-text before-match"}
                 level={"body-xs"}
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
index 689cd110..cc3f5b27 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
@@ -91,6 +91,7 @@ const ResultsGroup = React.memo(({
                     {results.map((r, index) => (
                         <Result
                             key={index}
+                            logEventNum={r.logEventNum}
                             matchRange={r.matchRange}
                             message={r.message}/>
                     ))}

From 640b3e3999289ff0235542c919e94bb77010b3ee Mon Sep 17 00:00:00 2001
From: Henry8192 <50559854+Henry8192@users.noreply.github.com>
Date: Mon, 11 Nov 2024 16:16:11 -0500
Subject: [PATCH 13/24] address issues in code review

---
 .../SidebarTabs/SearchTabPanel/Result.css     |  7 +++-
 .../SidebarTabs/SearchTabPanel/index.css      | 13 +++++++
 .../SidebarTabs/SearchTabPanel/index.tsx      | 33 ++++++++----------
 src/components/MenuBar/ExportLogsButton.tsx   |  4 +--
 src/contexts/StateContextProvider.tsx         | 34 +++++++++++--------
 src/services/LogFileManager/index.ts          |  4 ++-
 6 files changed, 57 insertions(+), 38 deletions(-)
 create mode 100644 src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css

diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css
index 6824adbe..8814d963 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css
@@ -15,9 +15,14 @@
 }
 
 .before-match,
-.match,
 .after-match {
     overflow: hidden;
     flex: 1 1 0; /* Allow each item to take an equal part */
     text-overflow: ellipsis;
 }
+
+.match {
+    overflow: hidden;
+    flex: initial;
+    text-overflow: ellipsis;
+}
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css
new file mode 100644
index 00000000..f6969b4e
--- /dev/null
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css
@@ -0,0 +1,13 @@
+.end-decorator {
+    display: block;
+    margin-block-start: 0;
+}
+
+.search-option {
+    font-family: Inter; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
+}
+
+.textarea {
+    z-index: 0;
+    flex-direction: row;
+}
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
index 1b7b6416..ecf3ad25 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
@@ -1,6 +1,5 @@
 import React, {
     useContext,
-    useRef,
     useState,
 } from "react";
 
@@ -24,6 +23,8 @@ import CustomTabPanel from "../CustomTabPanel";
 import TitleButton from "../TitleButton";
 import ResultsGroup from "./ResultsGroup";
 
+import "./index.css";
+
 
 enum SEARCH_OPTION {
     IS_CASE_SENSITIVE = "isCaseSensitive",
@@ -36,19 +37,14 @@ enum SEARCH_OPTION {
  * @return
  */
 const SearchTabPanel = () => {
+    const {queryProgress, queryResults, startQuery} = useContext(StateContext);
     const [isAllExpanded, setIsAllExpanded] = useState<boolean>(true);
     const [searchOptions, setSearchOptions] = useState<SEARCH_OPTION[]>([]);
-    const searchTextRef = useRef<HTMLTextAreaElement>(null);
-    const {queryResults, startQuery} = useContext(StateContext);
-    const handleSearch = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-        if ("Enter" === event.key && searchTextRef.current) {
-            event.preventDefault();
-            const isCaseSensitive = searchOptions.includes(SEARCH_OPTION.IS_CASE_SENSITIVE);
-            const isRegex = searchOptions.includes(SEARCH_OPTION.IS_REGEX);
-            startQuery(searchTextRef.current.value, isRegex, isCaseSensitive);
-        }
+    const handleSearchInputChange = (ev: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const isCaseSensitive = searchOptions.includes(SEARCH_OPTION.IS_CASE_SENSITIVE);
+        const isRegex = searchOptions.includes(SEARCH_OPTION.IS_REGEX);
+        startQuery(ev.target.value, isRegex, isCaseSensitive);
     };
-    const {queryProgress} = useContext(StateContext);
 
     return (
         <CustomTabPanel
@@ -63,15 +59,16 @@ const SearchTabPanel = () => {
             }
         >
             <Textarea
+
+                // FIXME: extra newline between search input and search options
+                className={"textarea"}
                 maxRows={7}
                 placeholder={"Search"}
                 size={"sm"}
-                sx={{flexDirection: "row", zIndex: 0}}
                 endDecorator={
                     <ToggleButtonGroup
                         size={"sm"}
                         spacing={0.3}
-                        sx={{borderRadius: "2px"}}
                         value={searchOptions}
                         variant={"plain"}
                         onChange={(_, newValue) => {
@@ -79,13 +76,13 @@ const SearchTabPanel = () => {
                         }}
                     >
                         <IconButton
-                            sx={{fontFamily: "Inter"}}
+                            className={"search-option"}
                             value={SEARCH_OPTION.IS_CASE_SENSITIVE}
                         >
                             Aa
                         </IconButton>
                         <IconButton
-                            sx={{fontFamily: "Inter"}}
+                            className={"search-option"}
                             value={SEARCH_OPTION.IS_REGEX}
                         >
                             .*
@@ -93,12 +90,12 @@ const SearchTabPanel = () => {
                     </ToggleButtonGroup>
                 }
                 slotProps={{
-                    textarea: {ref: searchTextRef},
-                    endDecorator: {sx: {marginBlockStart: 0, display: "block"}},
+                    endDecorator: {className: "end-decorator"},
                 }}
-                onKeyDown={handleSearch}/>
+                onChange={handleSearchInputChange}/>
             <LinearProgress
                 determinate={true}
+                thickness={2}
                 value={queryProgress * 100}/>
             <AccordionGroup
                 disableDivider={true}
diff --git a/src/components/MenuBar/ExportLogsButton.tsx b/src/components/MenuBar/ExportLogsButton.tsx
index 5d9a2252..f6ea5b69 100644
--- a/src/components/MenuBar/ExportLogsButton.tsx
+++ b/src/components/MenuBar/ExportLogsButton.tsx
@@ -49,9 +49,7 @@ const ExportLogsButton = () => {
                         "primary"}
                 >
                     {EXPORT_LOG_PROGRESS_VALUE_MAX === exportProgress ?
-                        <DownloadIcon
-                            color={"success"}
-                            sx={{fontSize: "14px"}}/> :
+                        <DownloadIcon color={"success"}/> :
                         <Typography level={"body-xs"}>
                             {Math.ceil(exportProgress * 100)}
                         </Typography>}
diff --git a/src/contexts/StateContextProvider.tsx b/src/contexts/StateContextProvider.tsx
index c74384eb..c71629c3 100644
--- a/src/contexts/StateContextProvider.tsx
+++ b/src/contexts/StateContextProvider.tsx
@@ -97,6 +97,8 @@ const STATE_DEFAULT: Readonly<StateContextType> = Object.freeze({
     startQuery: () => null,
 });
 
+const INITIAL_QUERY_PROGRESS = 0;
+
 interface StateContextProviderProps {
     children: React.ReactNode
 }
@@ -233,8 +235,6 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     const {filePath, logEventNum} = useContext(UrlContext);
 
     // States
-    const beginLineNumToLogEventNumRef =
-        useRef<BeginLineNumToLogEventNumMap>(STATE_DEFAULT.beginLineNumToLogEventNum);
     const [exportProgress, setExportProgress] =
         useState<Nullable<number>>(STATE_DEFAULT.exportProgress);
     const [fileName, setFileName] = useState<string>(STATE_DEFAULT.fileName);
@@ -249,6 +249,8 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     const [uiState, setUiState] = useState<UI_STATE>(STATE_DEFAULT.uiState);
 
     // Refs
+    const beginLineNumToLogEventNumRef =
+            useRef<BeginLineNumToLogEventNumMap>(STATE_DEFAULT.beginLineNumToLogEventNum);
     const logEventNumRef = useRef(logEventNum);
     const logExportManagerRef = useRef<null|LogExportManager>(null);
     const mainWorkerRef = useRef<null|Worker>(null);
@@ -309,20 +311,22 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
                 break;
             }
             case WORKER_RESP_CODE.QUERY_RESULT:
-                setQueryResults((v) => {
-                    v = structuredClone(v);
-                    args.results.forEach((resultsPerPage, queryPageNum) => {
-                        if (false === v.has(queryPageNum)) {
-                            v.set(queryPageNum, []);
-                        }
-                        v.get(queryPageNum)?.push(...resultsPerPage);
+                setQueryProgress(args.progress);
+                if (INITIAL_QUERY_PROGRESS === args.progress) {
+                    setQueryResults(STATE_DEFAULT.queryResults);
+                } else {
+                    setQueryResults((v) => {
+                        v = structuredClone(v);
+                        args.results.forEach((resultsPerPage, queryPageNum) => {
+                            if (false === v.has(queryPageNum)) {
+                                v.set(queryPageNum, []);
+                            }
+                            v.get(queryPageNum)?.push(...resultsPerPage);
+                        });
+
+                        return v;
                     });
-
-                    return v;
-                });
-                setQueryProgress(1 === args.progress ?
-                    0 :
-                    args.progress);
+                }
                 break;
             default:
                 console.error(`Unexpected ev.data: ${JSON.stringify(ev.data)}`);
diff --git a/src/services/LogFileManager/index.ts b/src/services/LogFileManager/index.ts
index 6442f2d1..7dfcd6be 100644
--- a/src/services/LogFileManager/index.ts
+++ b/src/services/LogFileManager/index.ts
@@ -306,7 +306,7 @@ class LogFileManager {
             "" :
             "i";
         const queryRegex = new RegExp(regexPattern, regexFlags);
-
+        this.#onQueryResults(0, new Map());
         this.#queryChunkAndScheduleNext(this.#queryId, 0, queryRegex);
     }
 
@@ -364,6 +364,8 @@ class LogFileManager {
             }
         }
 
+        // The query progress takes the maximum of the progress based on the number of events
+        // queried over total log events, and the number of results over the maximum result limit.
         this.#onQueryResults(
             Math.max(chunkEndIdx / this.#numEvents, this.#queryCount / MAX_RESULT_COUNT),
             results

From 477ded647371770ba035b9c69c38e33ae3461a9d Mon Sep 17 00:00:00 2001
From: Henry8192 <50559854+Henry8192@users.noreply.github.com>
Date: Mon, 11 Nov 2024 17:54:12 -0500
Subject: [PATCH 14/24] Rename "search" -> "query" where appropriate; fix CSS
 issues.

---
 .../SidebarTabs/SearchTabPanel/index.css      | 20 ++++++-----
 .../SidebarTabs/SearchTabPanel/index.tsx      | 35 +++++++++----------
 src/index.css                                 |  1 +
 3 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css
index f6969b4e..1552b229 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css
@@ -1,13 +1,17 @@
-.end-decorator {
-    display: block;
-    margin-block-start: 0;
+.query-input-box {
+    z-index: var(--ylv-panel-query-input-z-index);
+    flex-direction: row !important;
 }
 
-.search-option {
-    font-family: Inter; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
+.query-option-button {
+    font-family: Inter, sans-serif !important;
 }
 
-.textarea {
-    z-index: 0;
-    flex-direction: row;
+.query-input-box-textarea {
+    width: 0;
+}
+
+.query-input-box-end-decorator {
+    display: block !important;
+    margin-block-start: 0 !important;
 }
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
index ecf3ad25..4fa93b52 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
@@ -26,23 +26,23 @@ import ResultsGroup from "./ResultsGroup";
 import "./index.css";
 
 
-enum SEARCH_OPTION {
+enum QUERY_OPTION {
     IS_CASE_SENSITIVE = "isCaseSensitive",
     IS_REGEX = "isRegex"
 }
 
 /**
- * Displays a panel for submitting search queries and viewing query results.
+ * Displays a panel for submitting queries and viewing query results.
  *
  * @return
  */
 const SearchTabPanel = () => {
     const {queryProgress, queryResults, startQuery} = useContext(StateContext);
     const [isAllExpanded, setIsAllExpanded] = useState<boolean>(true);
-    const [searchOptions, setSearchOptions] = useState<SEARCH_OPTION[]>([]);
-    const handleSearchInputChange = (ev: React.ChangeEvent<HTMLTextAreaElement>) => {
-        const isCaseSensitive = searchOptions.includes(SEARCH_OPTION.IS_CASE_SENSITIVE);
-        const isRegex = searchOptions.includes(SEARCH_OPTION.IS_REGEX);
+    const [queryOptions, setQueryOptions] = useState<QUERY_OPTION[]>([]);
+    const handleQueryInputChange = (ev: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const isCaseSensitive = queryOptions.includes(QUERY_OPTION.IS_CASE_SENSITIVE);
+        const isRegex = queryOptions.includes(QUERY_OPTION.IS_REGEX);
         startQuery(ev.target.value, isRegex, isCaseSensitive);
     };
 
@@ -59,40 +59,39 @@ const SearchTabPanel = () => {
             }
         >
             <Textarea
-
-                // FIXME: extra newline between search input and search options
-                className={"textarea"}
+                className={"query-input-box"}
                 maxRows={7}
                 placeholder={"Search"}
                 size={"sm"}
                 endDecorator={
                     <ToggleButtonGroup
                         size={"sm"}
-                        spacing={0.3}
-                        value={searchOptions}
+                        spacing={0.25}
+                        value={queryOptions}
                         variant={"plain"}
                         onChange={(_, newValue) => {
-                            setSearchOptions(newValue);
+                            setQueryOptions(newValue);
                         }}
                     >
                         <IconButton
-                            className={"search-option"}
-                            value={SEARCH_OPTION.IS_CASE_SENSITIVE}
+                            className={"query-option"}
+                            value={QUERY_OPTION.IS_CASE_SENSITIVE}
                         >
                             Aa
                         </IconButton>
                         <IconButton
-                            className={"search-option"}
-                            value={SEARCH_OPTION.IS_REGEX}
+                            className={"query-option"}
+                            value={QUERY_OPTION.IS_REGEX}
                         >
                             .*
                         </IconButton>
                     </ToggleButtonGroup>
                 }
                 slotProps={{
-                    endDecorator: {className: "end-decorator"},
+                    textarea: {className: "query-input-box-textarea"},
+                    endDecorator: {className: "query-input-box-end-decorator"},
                 }}
-                onChange={handleSearchInputChange}/>
+                onChange={handleQueryInputChange}/>
             <LinearProgress
                 determinate={true}
                 thickness={2}
diff --git a/src/index.css b/src/index.css
index 815b9bd2..0efaef05 100644
--- a/src/index.css
+++ b/src/index.css
@@ -27,6 +27,7 @@ html {
      * .monaco-editor .minimap { z-index: 5; }
      * ```
      */
+    --ylv-panel-query-input-z-index: 0;
     --ylv-resize-handle-z-index: 1;
     --ylv-menu-bar-z-index: 6;
     --ylv-status-bar-z-index: 6;

From e1dc2dfa63def25da76e5a4177892c20e69b12f6 Mon Sep 17 00:00:00 2001
From: Henry8192 <50559854+Henry8192@users.noreply.github.com>
Date: Mon, 11 Nov 2024 18:17:47 -0500
Subject: [PATCH 15/24] Fix panel overflow when there are a few query results;
 change progress bar color when the query completes.

---
 .../Sidebar/SidebarTabs/CustomTabPanel.tsx    |  39 ++++---
 .../SidebarTabs/SearchTabPanel/index.tsx      | 107 ++++++++++--------
 .../Sidebar/SidebarTabs/index.css             |   3 +-
 3 files changed, 82 insertions(+), 67 deletions(-)

diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.tsx
index c9809988..96551584 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 
 import {
+    Box,
     ButtonGroup,
     DialogContent,
     DialogTitle,
@@ -39,24 +40,26 @@ const CustomTabPanel = ({
             className={"sidebar-tab-panel"}
             value={tabName}
         >
-            <DialogTitle className={"sidebar-tab-panel-title-container"}>
-                <Typography
-                    className={"sidebar-tab-panel-title"}
-                    level={"body-md"}
-                >
-                    {title}
-                </Typography>
-                <ButtonGroup
-                    size={"sm"}
-                    spacing={"1px"}
-                    variant={"plain"}
-                >
-                    {titleButtons}
-                </ButtonGroup>
-            </DialogTitle>
-            <DialogContent>
-                {children}
-            </DialogContent>
+            <Box sx={{display: "flex", flexDirection: "column", height: "100%"}}>
+                <DialogTitle className={"sidebar-tab-panel-title-container"}>
+                    <Typography
+                        className={"sidebar-tab-panel-title"}
+                        level={"body-md"}
+                    >
+                        {title}
+                    </Typography>
+                    <ButtonGroup
+                        size={"sm"}
+                        spacing={"1px"}
+                        variant={"plain"}
+                    >
+                        {titleButtons}
+                    </ButtonGroup>
+                </DialogTitle>
+                <DialogContent sx={{flexGrow: 1}}>
+                    {children}
+                </DialogContent>
+            </Box>
         </TabPanel>
     );
 };
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
index 4fa93b52..de1ffd44 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
@@ -5,6 +5,7 @@ import React, {
 
 import {
     AccordionGroup,
+    Box,
     IconButton,
     LinearProgress,
     Textarea,
@@ -58,56 +59,66 @@ const SearchTabPanel = () => {
                 </TitleButton>
             }
         >
-            <Textarea
-                className={"query-input-box"}
-                maxRows={7}
-                placeholder={"Search"}
-                size={"sm"}
-                endDecorator={
-                    <ToggleButtonGroup
+            <Box sx={{display: "flex", flexDirection: "column", height: "100%", overflowY: "hidden"}}>
+                <div>
+                    <Textarea
+                        className={"query-input-box"}
+                        maxRows={7}
+                        placeholder={"Search"}
                         size={"sm"}
-                        spacing={0.25}
-                        value={queryOptions}
-                        variant={"plain"}
-                        onChange={(_, newValue) => {
-                            setQueryOptions(newValue);
+                        sx={{borderRadius: 0}}
+                        endDecorator={
+                            <ToggleButtonGroup
+                                size={"sm"}
+                                spacing={0.25}
+                                value={queryOptions}
+                                variant={"plain"}
+                                onChange={(_, newValue) => {
+                                    setQueryOptions(newValue);
+                                }}
+                            >
+                                <IconButton
+                                    className={"query-option"}
+                                    value={QUERY_OPTION.IS_CASE_SENSITIVE}
+                                >
+                                    Aa
+                                </IconButton>
+                                <IconButton
+                                    className={"query-option"}
+                                    value={QUERY_OPTION.IS_REGEX}
+                                >
+                                    .*
+                                </IconButton>
+                            </ToggleButtonGroup>
+                        }
+                        slotProps={{
+                            textarea: {className: "query-input-box-textarea"},
+                            endDecorator: {className: "query-input-box-end-decorator"},
                         }}
-                    >
-                        <IconButton
-                            className={"query-option"}
-                            value={QUERY_OPTION.IS_CASE_SENSITIVE}
-                        >
-                            Aa
-                        </IconButton>
-                        <IconButton
-                            className={"query-option"}
-                            value={QUERY_OPTION.IS_REGEX}
-                        >
-                            .*
-                        </IconButton>
-                    </ToggleButtonGroup>
-                }
-                slotProps={{
-                    textarea: {className: "query-input-box-textarea"},
-                    endDecorator: {className: "query-input-box-end-decorator"},
-                }}
-                onChange={handleQueryInputChange}/>
-            <LinearProgress
-                determinate={true}
-                thickness={2}
-                value={queryProgress * 100}/>
-            <AccordionGroup
-                disableDivider={true}
-                size={"sm"}
-            >
-                {Array.from(queryResults.entries()).map(([pageNum, results]) => (
-                    <ResultsGroup
-                        isAllExpanded={isAllExpanded}
-                        key={`${pageNum} + ${results.length}`}
-                        pageNum={pageNum}
-                        results={results}/>
-                ))}
-            </AccordionGroup>
+                        onChange={handleQueryInputChange}/>
+                    <LinearProgress
+                        determinate={true}
+                        sx={{"--LinearProgress-progressRadius": 0}}
+                        thickness={4}
+                        value={queryProgress * 100}
+                        color={1 === queryProgress ?
+                            "success" :
+                            "primary"}/>
+                </div>
+                <AccordionGroup
+                    disableDivider={true}
+                    size={"sm"}
+                    sx={{flexGrow: 1, overflowY: "auto"}}
+                >
+                    {Array.from(queryResults.entries()).map(([pageNum, results]) => (
+                        <ResultsGroup
+                            isAllExpanded={isAllExpanded}
+                            key={`${pageNum} + ${results.length}`}
+                            pageNum={pageNum}
+                            results={results}/>
+                    ))}
+                </AccordionGroup>
+            </Box>
         </CustomTabPanel>
     );
 };
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/index.css b/src/components/CentralContainer/Sidebar/SidebarTabs/index.css
index f9b4e2c3..51b03438 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/index.css
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/index.css
@@ -1,7 +1,8 @@
 .sidebar-tabs {
+    overflow-y: hidden;
     flex-grow: 1;
     width: calc(100% - var(--ylv-panel-resize-handle-width));
-    height: 100%;
+    height: calc(100vh - var(--ylv-menu-bar-height) - var(--ylv-status-bar-height));
 }
 
 .sidebar-tab-list-spacing {

From ec8cc5831a62ecbf980e799229cc7aa6eea8b6d6 Mon Sep 17 00:00:00 2001
From: Henry8192 <50559854+Henry8192@users.noreply.github.com>
Date: Mon, 11 Nov 2024 20:15:48 -0500
Subject: [PATCH 16/24] clean up sx props to css files

---
 .../Sidebar/SidebarTabs/CustomTabPanel.css    |  6 ++++
 .../Sidebar/SidebarTabs/CustomTabPanel.tsx    |  4 +--
 .../SidebarTabs/SearchTabPanel/Result.css     | 26 ++++-----------
 .../SidebarTabs/SearchTabPanel/Result.tsx     | 32 +++++++++----------
 .../SidebarTabs/SearchTabPanel/index.css      | 13 ++++++++
 .../SidebarTabs/SearchTabPanel/index.tsx      | 12 ++++---
 src/typings/states.ts                         |  6 ++++
 7 files changed, 56 insertions(+), 43 deletions(-)

diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.css b/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.css
index 8169315f..6951a4f3 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.css
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.css
@@ -2,6 +2,12 @@
     padding: 0.75rem;
 }
 
+.custom-tab-panel-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
 .sidebar-tab-panel-title-container {
     user-select: none;
     margin-bottom: 0.5rem !important;
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.tsx
index 96551584..d7eea8c3 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.tsx
@@ -40,7 +40,7 @@ const CustomTabPanel = ({
             className={"sidebar-tab-panel"}
             value={tabName}
         >
-            <Box sx={{display: "flex", flexDirection: "column", height: "100%"}}>
+            <Box className={"custom-tab-panel-container"}>
                 <DialogTitle className={"sidebar-tab-panel-title-container"}>
                     <Typography
                         className={"sidebar-tab-panel-title"}
@@ -56,7 +56,7 @@ const CustomTabPanel = ({
                         {titleButtons}
                     </ButtonGroup>
                 </DialogTitle>
-                <DialogContent sx={{flexGrow: 1}}>
+                <DialogContent>
                     {children}
                 </DialogContent>
             </Box>
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css
index 8814d963..c20fdad7 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css
@@ -1,28 +1,16 @@
 .result-button {
     user-select: none;
 
-    overflow: hidden;
-    display: flex !important;
+    overflow-x: hidden;
 
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
+    width: 100%;
+    padding: 0 0 0 12px !important;
 
-.result-text {
-    display: inline !important;
-    font-size: 0.875rem !important;
-    font-weight: 400 !important;
-}
-
-.before-match,
-.after-match {
-    overflow: hidden;
-    flex: 1 1 0; /* Allow each item to take an equal part */
+    text-align: left;
     text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
-.match {
-    overflow: hidden;
-    flex: initial;
-    text-overflow: ellipsis;
+.result-button-text {
+    font-family: Inter, sans-serif !important;
 }
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx
index 196b6c48..5cc73362 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx
@@ -14,6 +14,8 @@ interface ResultProps {
     matchRange: [number, number]
 }
 
+const SEARCH_RESULT_PREFIX_MAX_CHARACTERS = 20;
+
 /**
  * Displays a button containing a message, which highlights a specific range of text.
  *
@@ -44,24 +46,20 @@ const Result = ({logEventNum, message, matchRange}: ResultProps) => {
             onClick={handleResultButtonClick}
         >
             <Typography
-                className={"result-text before-match"}
-                level={"body-xs"}
-            >
-                {beforeMatch}
-            </Typography>
-            <Typography
-                className={"result-text match"}
-                level={"body-xs"}
-                sx={{
-                    backgroundColor: "warning.softBg",
-                }}
-            >
-                {match}
-            </Typography>
-            <Typography
-                className={"result-text after-match"}
-                level={"body-xs"}
+                className={"result-button-text"}
+                level={"body-sm"}
             >
+                <span>
+                    {(SEARCH_RESULT_PREFIX_MAX_CHARACTERS < beforeMatch.length) && "..."}
+                    {beforeMatch.slice(-SEARCH_RESULT_PREFIX_MAX_CHARACTERS)}
+                </span>
+                <Typography
+                    className={"result-button-text"}
+                    level={"body-sm"}
+                    sx={{backgroundColor: "warning.softBg"}}
+                >
+                    {match}
+                </Typography>
                 {afterMatch}
             </Typography>
         </ListItemButton>
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css
index 1552b229..c71f8af4 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css
@@ -1,6 +1,14 @@
+.search-tab-container {
+    overflow-y: hidden;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
 .query-input-box {
     z-index: var(--ylv-panel-query-input-z-index);
     flex-direction: row !important;
+    border-radius: 0;
 }
 
 .query-option-button {
@@ -15,3 +23,8 @@
     display: block !important;
     margin-block-start: 0 !important;
 }
+
+.accordion-group {
+    overflow-y: auto;
+    flex-grow: 1;
+}
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
index de1ffd44..39490de8 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
@@ -16,10 +16,12 @@ import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
 import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
 
 import {StateContext} from "../../../../../contexts/StateContextProvider";
+import {UI_ELEMENT} from "../../../../../typings/states";
 import {
     TAB_DISPLAY_NAMES,
     TAB_NAME,
 } from "../../../../../typings/tab";
+import {isDisabled} from "../../../../../utils/states";
 import CustomTabPanel from "../CustomTabPanel";
 import TitleButton from "../TitleButton";
 import ResultsGroup from "./ResultsGroup";
@@ -38,7 +40,7 @@ enum QUERY_OPTION {
  * @return
  */
 const SearchTabPanel = () => {
-    const {queryProgress, queryResults, startQuery} = useContext(StateContext);
+    const {queryProgress, queryResults, startQuery, uiState} = useContext(StateContext);
     const [isAllExpanded, setIsAllExpanded] = useState<boolean>(true);
     const [queryOptions, setQueryOptions] = useState<QUERY_OPTION[]>([]);
     const handleQueryInputChange = (ev: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -59,14 +61,14 @@ const SearchTabPanel = () => {
                 </TitleButton>
             }
         >
-            <Box sx={{display: "flex", flexDirection: "column", height: "100%", overflowY: "hidden"}}>
+            <Box className={"search-tab-container"}>
                 <div>
                     <Textarea
                         className={"query-input-box"}
+                        disabled={isDisabled(uiState, UI_ELEMENT.QUERY_INPUT_BOX)}
                         maxRows={7}
                         placeholder={"Search"}
                         size={"sm"}
-                        sx={{borderRadius: 0}}
                         endDecorator={
                             <ToggleButtonGroup
                                 size={"sm"}
@@ -106,14 +108,14 @@ const SearchTabPanel = () => {
                             "primary"}/>
                 </div>
                 <AccordionGroup
+                    className={"accordion-group"}
                     disableDivider={true}
                     size={"sm"}
-                    sx={{flexGrow: 1, overflowY: "auto"}}
                 >
                     {Array.from(queryResults.entries()).map(([pageNum, results]) => (
                         <ResultsGroup
                             isAllExpanded={isAllExpanded}
-                            key={`${pageNum} + ${results.length}`}
+                            key={`${pageNum}-${results.length}`}
                             pageNum={pageNum}
                             results={results}/>
                     ))}
diff --git a/src/typings/states.ts b/src/typings/states.ts
index 6a02064f..7b2517c3 100644
--- a/src/typings/states.ts
+++ b/src/typings/states.ts
@@ -42,6 +42,7 @@ enum UI_ELEMENT {
     NAVIGATION_BAR,
     OPEN_FILE_BUTTON,
     PROGRESS_BAR,
+    QUERY_INPUT_BOX,
 }
 
 type UiElementRow = {
@@ -66,6 +67,7 @@ const UI_STATE_GRID: UiStateGrid = Object.freeze({
         [UI_ELEMENT.NAVIGATION_BAR]: false,
         [UI_ELEMENT.OPEN_FILE_BUTTON]: true,
         [UI_ELEMENT.PROGRESS_BAR]: false,
+        [UI_ELEMENT.QUERY_INPUT_BOX]: false,
     },
     [UI_STATE.FILE_LOADING]: {
         [UI_ELEMENT.DRAG_AND_DROP]: false,
@@ -75,6 +77,7 @@ const UI_STATE_GRID: UiStateGrid = Object.freeze({
         [UI_ELEMENT.NAVIGATION_BAR]: false,
         [UI_ELEMENT.OPEN_FILE_BUTTON]: false,
         [UI_ELEMENT.PROGRESS_BAR]: true,
+        [UI_ELEMENT.QUERY_INPUT_BOX]: false,
     },
     [UI_STATE.FAST_LOADING]: {
         [UI_ELEMENT.DRAG_AND_DROP]: true,
@@ -84,6 +87,7 @@ const UI_STATE_GRID: UiStateGrid = Object.freeze({
         [UI_ELEMENT.NAVIGATION_BAR]: true,
         [UI_ELEMENT.OPEN_FILE_BUTTON]: true,
         [UI_ELEMENT.PROGRESS_BAR]: true,
+        [UI_ELEMENT.QUERY_INPUT_BOX]: false,
     },
     [UI_STATE.SLOW_LOADING]: {
         [UI_ELEMENT.DRAG_AND_DROP]: false,
@@ -93,6 +97,7 @@ const UI_STATE_GRID: UiStateGrid = Object.freeze({
         [UI_ELEMENT.NAVIGATION_BAR]: false,
         [UI_ELEMENT.OPEN_FILE_BUTTON]: false,
         [UI_ELEMENT.PROGRESS_BAR]: false,
+        [UI_ELEMENT.QUERY_INPUT_BOX]: false,
     },
     [UI_STATE.READY]: {
         [UI_ELEMENT.DRAG_AND_DROP]: true,
@@ -102,6 +107,7 @@ const UI_STATE_GRID: UiStateGrid = Object.freeze({
         [UI_ELEMENT.NAVIGATION_BAR]: true,
         [UI_ELEMENT.OPEN_FILE_BUTTON]: true,
         [UI_ELEMENT.PROGRESS_BAR]: false,
+        [UI_ELEMENT.QUERY_INPUT_BOX]: true,
     },
 });
 

From 96606b764d176c294f82f3015d0b6747c99ac95c Mon Sep 17 00:00:00 2001
From: Henry8192 <50559854+Henry8192@users.noreply.github.com>
Date: Tue, 12 Nov 2024 12:44:38 -0500
Subject: [PATCH 17/24] Apply suggestions from code review

Co-authored-by: Junhao Liao <junhao@junhao.ca>
---
 .../Sidebar/SidebarTabs/SearchTabPanel/Result.css           | 6 +++++-
 .../Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.css     | 3 ++-
 .../Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx     | 1 +
 .../Sidebar/SidebarTabs/SearchTabPanel/index.css            | 4 ++--
 .../Sidebar/SidebarTabs/SearchTabPanel/index.tsx            | 6 +++---
 src/contexts/StateContextProvider.tsx                       | 2 +-
 src/services/LogFileManager/index.ts                        | 1 +
 src/typings/worker.ts                                       | 5 ++++-
 8 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css
index c20fdad7..eac317d2 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.css
@@ -4,13 +4,17 @@
     overflow-x: hidden;
 
     width: 100%;
-    padding: 0 0 0 12px !important;
+    padding-left: 12px;
 
     text-align: left;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
+.result-button:hover {
+    cursor: default;
+}
+
 .result-button-text {
     font-family: Inter, sans-serif !important;
 }
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.css b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.css
index 1ece47a6..54c77b7c 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.css
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.css
@@ -1,4 +1,5 @@
 .results-group-title-button {
+    cursor: default !important;
     flex-direction: row-reverse !important;
     gap: 2px !important;
     padding-inline-start: 0 !important;
@@ -11,7 +12,7 @@
 
 .results-group-title-text-container {
     flex-grow: 1;
-    gap: 0.1rem;
+    gap: 0.2rem;
     align-items: center;
 }
 
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
index cc3f5b27..9f759b09 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
@@ -74,6 +74,7 @@ const ResultsGroup = React.memo(({
                     >
                         <DescriptionOutlinedIcon fontSize={"inherit"}/>
                         <Typography
+                            fontFamily={"Inter"}
                             level={"title-sm"}
                         >
                             Page
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css
index c71f8af4..155e1e8e 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css
@@ -8,7 +8,7 @@
 .query-input-box {
     z-index: var(--ylv-panel-query-input-z-index);
     flex-direction: row !important;
-    border-radius: 0;
+    border-radius: 0 !important;
 }
 
 .query-option-button {
@@ -24,7 +24,7 @@
     margin-block-start: 0 !important;
 }
 
-.accordion-group {
+.query-results {
     overflow-y: auto;
     flex-grow: 1;
 }
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
index 39490de8..23211857 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
@@ -80,13 +80,13 @@ const SearchTabPanel = () => {
                                 }}
                             >
                                 <IconButton
-                                    className={"query-option"}
+                                    className={"query-option-button"}
                                     value={QUERY_OPTION.IS_CASE_SENSITIVE}
                                 >
                                     Aa
                                 </IconButton>
                                 <IconButton
-                                    className={"query-option"}
+                                    className={"query-option-button"}
                                     value={QUERY_OPTION.IS_REGEX}
                                 >
                                     .*
@@ -103,7 +103,7 @@ const SearchTabPanel = () => {
                         sx={{"--LinearProgress-progressRadius": 0}}
                         thickness={4}
                         value={queryProgress * 100}
-                        color={1 === queryProgress ?
+                        color={QUERY_PROGRESS_VALUE_MAX === queryProgress ?
                             "success" :
                             "primary"}/>
                 </div>
diff --git a/src/contexts/StateContextProvider.tsx b/src/contexts/StateContextProvider.tsx
index c71629c3..e1863999 100644
--- a/src/contexts/StateContextProvider.tsx
+++ b/src/contexts/StateContextProvider.tsx
@@ -86,7 +86,7 @@ const STATE_DEFAULT: Readonly<StateContextType> = Object.freeze({
     numPages: 0,
     onDiskFileSizeInBytes: 0,
     pageNum: 0,
-    queryProgress: 0,
+    queryProgress: INITIAL_QUERY_PROGRESS,
     queryResults: new Map(),
     uiState: UI_STATE.UNOPENED,
 
diff --git a/src/services/LogFileManager/index.ts b/src/services/LogFileManager/index.ts
index 7dfcd6be..94682c45 100644
--- a/src/services/LogFileManager/index.ts
+++ b/src/services/LogFileManager/index.ts
@@ -306,6 +306,7 @@ class LogFileManager {
             "" :
             "i";
         const queryRegex = new RegExp(regexPattern, regexFlags);
+        // Send an empty query result with 0 progress to the render to init the results variable because there could be results sent by the last task before `startQuery()` runs.
         this.#onQueryResults(0, new Map());
         this.#queryChunkAndScheduleNext(this.#queryId, 0, queryRegex);
     }
diff --git a/src/typings/worker.ts b/src/typings/worker.ts
index 4f7c8fa1..9a7a654f 100644
--- a/src/typings/worker.ts
+++ b/src/typings/worker.ts
@@ -136,7 +136,10 @@ type WorkerRespMap = {
         numPages: number,
         pageNum: number,
     },
-    [WORKER_RESP_CODE.QUERY_RESULT]: { progress: number, results: QueryResults },
+    [WORKER_RESP_CODE.QUERY_RESULT]: {
+        progress: number,
+        results: QueryResults
+    },
 };
 
 type WorkerReq<T extends WORKER_REQ_CODE> = T extends keyof WorkerReqMap ?

From 854293fcf7c184a4a95186190cb9009a2c023384 Mon Sep 17 00:00:00 2001
From: Henry <50559854+Henry8192@users.noreply.github.com>
Date: Tue, 12 Nov 2024 13:48:49 -0500
Subject: [PATCH 18/24] Resolve issues from code review

---
 .../Sidebar/SidebarTabs/CustomTabPanel.css     |  1 +
 .../Sidebar/SidebarTabs/PanelTitleButton.css   |  5 +++++
 .../{TitleButton.tsx => PanelTitleButton.tsx}  |  8 ++++----
 .../SearchTabPanel/ResultsGroup.css            | 16 ++++++++++++----
 .../SearchTabPanel/ResultsGroup.tsx            | 18 +++++++++++++-----
 .../SidebarTabs/SearchTabPanel/index.css       | 11 +++++++++++
 .../SidebarTabs/SearchTabPanel/index.tsx       | 15 ++++++++-------
 .../Sidebar/SidebarTabs/TitleButton.css        |  5 -----
 src/components/MenuBar/SmallIconButton.tsx     |  2 --
 src/contexts/StateContextProvider.tsx          |  7 +++----
 src/index.css                                  |  1 +
 src/services/LogFileManager/index.ts           | 13 +++++++------
 src/typings/worker.ts                          |  5 +++++
 13 files changed, 70 insertions(+), 37 deletions(-)
 create mode 100644 src/components/CentralContainer/Sidebar/SidebarTabs/PanelTitleButton.css
 rename src/components/CentralContainer/Sidebar/SidebarTabs/{TitleButton.tsx => PanelTitleButton.tsx} (57%)
 delete mode 100644 src/components/CentralContainer/Sidebar/SidebarTabs/TitleButton.css

diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.css b/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.css
index 6951a4f3..1dabeece 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.css
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.css
@@ -14,6 +14,7 @@
 }
 
 .sidebar-tab-panel-title {
+    flex-grow: 1;
     font-size: 0.875rem !important;
     font-weight: 400 !important;
     text-transform: uppercase;
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/PanelTitleButton.css b/src/components/CentralContainer/Sidebar/SidebarTabs/PanelTitleButton.css
new file mode 100644
index 00000000..3369f559
--- /dev/null
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/PanelTitleButton.css
@@ -0,0 +1,5 @@
+.tab-panel-title-button {
+    z-index: var(--ylv-panel-title-button-z-index) !important;
+    min-width: 0 !important;
+    min-height: 0 !important;
+}
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/TitleButton.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/PanelTitleButton.tsx
similarity index 57%
rename from src/components/CentralContainer/Sidebar/SidebarTabs/TitleButton.tsx
rename to src/components/CentralContainer/Sidebar/SidebarTabs/PanelTitleButton.tsx
index 117037cd..2f2bec32 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/TitleButton.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/PanelTitleButton.tsx
@@ -3,7 +3,7 @@ import {
     IconButtonProps,
 } from "@mui/joy";
 
-import "./TitleButton.css";
+import "./PanelTitleButton.css";
 
 
 /**
@@ -12,10 +12,10 @@ import "./TitleButton.css";
  * @param props
  * @return
  */
-const TitleButton = (props: IconButtonProps) => (
+const PanelTitleButton = (props: IconButtonProps) => (
     <IconButton
-        className={"sidebar-tab-title-button"}
+        className={"tab-panel-title-button"}
         {...props}/>
 );
 
-export default TitleButton;
+export default PanelTitleButton;
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.css b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.css
index 54c77b7c..2729ecdd 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.css
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.css
@@ -1,23 +1,31 @@
-.results-group-title-button {
+.results-group-summary-button {
     cursor: default !important;
     flex-direction: row-reverse !important;
     gap: 2px !important;
     padding-inline-start: 0 !important;
 }
 
-.results-group-title-container {
+.results-group-summary-container {
     display: flex;
     flex-grow: 1;
 }
 
-.results-group-title-text-container {
+.results-group-summary-text-container {
     flex-grow: 1;
     gap: 0.2rem;
     align-items: center;
 }
 
-.results-group-content {
+.results-group-summary-count {
+    border-radius: 4px !important;
+}
+
+.results-group-details {
     margin-left: 1.5px !important;
     /* stylelint-disable-next-line custom-property-pattern */
     border-left: 1px solid var(--joy-palette-neutral-outlinedBorder, #cdd7e1);
 }
+
+.results-group-details-content {
+    padding-block: 0 !important;
+}
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
index 9f759b09..af77aee3 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
@@ -64,12 +64,12 @@ const ResultsGroup = React.memo(({
         >
             <AccordionSummary
                 slotProps={{
-                    button: {className: "results-group-title-button"},
+                    button: {className: "results-group-summary-button"},
                 }}
             >
-                <Box className={"results-group-title-container"}>
+                <Box className={"results-group-summary-container"}>
                     <Stack
-                        className={"results-group-title-text-container"}
+                        className={"results-group-summary-text-container"}
                         direction={"row"}
                     >
                         <DescriptionOutlinedIcon fontSize={"inherit"}/>
@@ -82,12 +82,19 @@ const ResultsGroup = React.memo(({
                             {pageNum}
                         </Typography>
                     </Stack>
-                    <Chip size={"sm"}>
+                    <Chip
+                        className={"results-group-summary-count"}
+                        size={"sm"}
+                        variant={"solid"}
+                    >
                         {results.length}
                     </Chip>
                 </Box>
             </AccordionSummary>
-            <AccordionDetails className={"results-group-content"}>
+            <AccordionDetails
+                className={"results-group-details"}
+                slotProps={{content: {className: "results-group-details-content"}}}
+            >
                 <List size={"sm"}>
                     {results.map((r, index) => (
                         <Result
@@ -97,6 +104,7 @@ const ResultsGroup = React.memo(({
                             message={r.message}/>
                     ))}
                 </List>
+
             </AccordionDetails>
         </Accordion>
     );
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css
index 155e1e8e..7a753dd8 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css
@@ -5,6 +5,12 @@
     height: 100%;
 }
 
+.query-input-box-with-progress {
+    /* JoyUI has a rounding issue when calculating the Textarea width, causing it to overflow its
+      container. */
+    margin-right: 1px;
+}
+
 .query-input-box {
     z-index: var(--ylv-panel-query-input-z-index);
     flex-direction: row !important;
@@ -24,6 +30,11 @@
     margin-block-start: 0 !important;
 }
 
+.query-input-box-linear-progress {
+    /* stylelint-disable-next-line custom-property-pattern */
+    --LinearProgress-radius: 0 !important;
+}
+
 .query-results {
     overflow-y: auto;
     flex-grow: 1;
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
index 23211857..ef331e59 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
@@ -21,9 +21,10 @@ import {
     TAB_DISPLAY_NAMES,
     TAB_NAME,
 } from "../../../../../typings/tab";
+import {QUERY_PROGRESS_DONE} from "../../../../../typings/worker";
 import {isDisabled} from "../../../../../utils/states";
 import CustomTabPanel from "../CustomTabPanel";
-import TitleButton from "../TitleButton";
+import PanelTitleButton from "../PanelTitleButton";
 import ResultsGroup from "./ResultsGroup";
 
 import "./index.css";
@@ -54,15 +55,15 @@ const SearchTabPanel = () => {
             tabName={TAB_NAME.SEARCH}
             title={TAB_DISPLAY_NAMES[TAB_NAME.SEARCH]}
             titleButtons={
-                <TitleButton onClick={() => { setIsAllExpanded((v) => !v); }}>
+                <PanelTitleButton onClick={() => { setIsAllExpanded((v) => !v); }}>
                     {isAllExpanded ?
                         <UnfoldLessIcon/> :
                         <UnfoldMoreIcon/>}
-                </TitleButton>
+                </PanelTitleButton>
             }
         >
             <Box className={"search-tab-container"}>
-                <div>
+                <div className={"query-input-box-with-progress"}>
                     <Textarea
                         className={"query-input-box"}
                         disabled={isDisabled(uiState, UI_ELEMENT.QUERY_INPUT_BOX)}
@@ -99,16 +100,16 @@ const SearchTabPanel = () => {
                         }}
                         onChange={handleQueryInputChange}/>
                     <LinearProgress
+                        className={"query-input-box-linear-progress"}
                         determinate={true}
-                        sx={{"--LinearProgress-progressRadius": 0}}
                         thickness={4}
                         value={queryProgress * 100}
-                        color={QUERY_PROGRESS_VALUE_MAX === queryProgress ?
+                        color={QUERY_PROGRESS_DONE === queryProgress ?
                             "success" :
                             "primary"}/>
                 </div>
                 <AccordionGroup
-                    className={"accordion-group"}
+                    className={"query-results"}
                     disableDivider={true}
                     size={"sm"}
                 >
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/TitleButton.css b/src/components/CentralContainer/Sidebar/SidebarTabs/TitleButton.css
deleted file mode 100644
index 33bfafd5..00000000
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/TitleButton.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.sidebar-tab-title-button {
-    z-index: 0 !important;
-    min-width: 0 !important;
-    min-height: 0 !important;
-}
diff --git a/src/components/MenuBar/SmallIconButton.tsx b/src/components/MenuBar/SmallIconButton.tsx
index dc061cba..3fc3447e 100644
--- a/src/components/MenuBar/SmallIconButton.tsx
+++ b/src/components/MenuBar/SmallIconButton.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 import {IconButton} from "@mui/joy";
 
 
diff --git a/src/contexts/StateContextProvider.tsx b/src/contexts/StateContextProvider.tsx
index e1863999..09d5eda3 100644
--- a/src/contexts/StateContextProvider.tsx
+++ b/src/contexts/StateContextProvider.tsx
@@ -25,6 +25,7 @@ import {
     EVENT_POSITION_ON_PAGE,
     FileSrcType,
     MainWorkerRespMessage,
+    QUERY_PROGRESS_INIT,
     QueryResults,
     WORKER_REQ_CODE,
     WORKER_RESP_CODE,
@@ -86,7 +87,7 @@ const STATE_DEFAULT: Readonly<StateContextType> = Object.freeze({
     numPages: 0,
     onDiskFileSizeInBytes: 0,
     pageNum: 0,
-    queryProgress: INITIAL_QUERY_PROGRESS,
+    queryProgress: QUERY_PROGRESS_INIT,
     queryResults: new Map(),
     uiState: UI_STATE.UNOPENED,
 
@@ -97,8 +98,6 @@ const STATE_DEFAULT: Readonly<StateContextType> = Object.freeze({
     startQuery: () => null,
 });
 
-const INITIAL_QUERY_PROGRESS = 0;
-
 interface StateContextProviderProps {
     children: React.ReactNode
 }
@@ -312,7 +311,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
             }
             case WORKER_RESP_CODE.QUERY_RESULT:
                 setQueryProgress(args.progress);
-                if (INITIAL_QUERY_PROGRESS === args.progress) {
+                if (QUERY_PROGRESS_INIT === args.progress) {
                     setQueryResults(STATE_DEFAULT.queryResults);
                 } else {
                     setQueryResults((v) => {
diff --git a/src/index.css b/src/index.css
index 0efaef05..b8d1ac44 100644
--- a/src/index.css
+++ b/src/index.css
@@ -27,6 +27,7 @@ html {
      * .monaco-editor .minimap { z-index: 5; }
      * ```
      */
+    --ylv-panel-title-button-z-index: 0;
     --ylv-panel-query-input-z-index: 0;
     --ylv-resize-handle-z-index: 1;
     --ylv-menu-bar-z-index: 6;
diff --git a/src/services/LogFileManager/index.ts b/src/services/LogFileManager/index.ts
index 94682c45..4b90681f 100644
--- a/src/services/LogFileManager/index.ts
+++ b/src/services/LogFileManager/index.ts
@@ -33,7 +33,7 @@ import {
 } from "./utils";
 
 
-const MAX_RESULT_COUNT = 1_000;
+const MAX_QUERY_RESULT_COUNT = 1_000;
 
 /**
  * Class to manage the retrieval and decoding of a given log file.
@@ -293,6 +293,9 @@ class LogFileManager {
         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 the last 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;
@@ -306,8 +309,6 @@ class LogFileManager {
             "" :
             "i";
         const queryRegex = new RegExp(regexPattern, regexFlags);
-        // Send an empty query result with 0 progress to the render to init the results variable because there could be results sent by the last task before `startQuery()` runs.
-        this.#onQueryResults(0, new Map());
         this.#queryChunkAndScheduleNext(this.#queryId, 0, queryRegex);
     }
 
@@ -360,7 +361,7 @@ class LogFileManager {
             });
 
             this.#queryCount++;
-            if (MAX_RESULT_COUNT <= this.#queryCount) {
+            if (MAX_QUERY_RESULT_COUNT <= this.#queryCount) {
                 break;
             }
         }
@@ -368,11 +369,11 @@ class LogFileManager {
         // The query progress takes the maximum of the progress based on the number of events
         // queried over total log events, and the number of results over the maximum result limit.
         this.#onQueryResults(
-            Math.max(chunkEndIdx / this.#numEvents, this.#queryCount / MAX_RESULT_COUNT),
+            Math.max(chunkEndIdx / this.#numEvents, this.#queryCount / MAX_QUERY_RESULT_COUNT),
             results
         );
 
-        if (chunkEndIdx < this.#numEvents && MAX_RESULT_COUNT > this.#queryCount) {
+        if (chunkEndIdx < this.#numEvents && MAX_QUERY_RESULT_COUNT > this.#queryCount) {
             defer(() => {
                 this.#queryChunkAndScheduleNext(queryId, chunkEndIdx, queryRegex);
             });
diff --git a/src/typings/worker.ts b/src/typings/worker.ts
index 9a7a654f..d32a4715 100644
--- a/src/typings/worker.ts
+++ b/src/typings/worker.ts
@@ -115,6 +115,9 @@ interface QueryResultsType {
 
 type QueryResults = Map<number, QueryResultsType[]>;
 
+const QUERY_PROGRESS_INIT = 0;
+const QUERY_PROGRESS_DONE = 1;
+
 type WorkerRespMap = {
     [WORKER_RESP_CODE.CHUNK_DATA]: {
         logs: string
@@ -175,6 +178,8 @@ export {
     CURSOR_CODE,
     EMPTY_PAGE_RESP,
     EVENT_POSITION_ON_PAGE,
+    QUERY_PROGRESS_DONE,
+    QUERY_PROGRESS_INIT,
     WORKER_REQ_CODE,
     WORKER_RESP_CODE,
 };

From 30481f99ccbe6e653a654c763f783879169160ef Mon Sep 17 00:00:00 2001
From: Henry <50559854+Henry8192@users.noreply.github.com>
Date: Tue, 12 Nov 2024 16:46:42 -0500
Subject: [PATCH 19/24] fix lint

---
 src/services/LogFileManager/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/services/LogFileManager/index.ts b/src/services/LogFileManager/index.ts
index 4b90681f..5dc4dbda 100644
--- a/src/services/LogFileManager/index.ts
+++ b/src/services/LogFileManager/index.ts
@@ -293,7 +293,8 @@ class LogFileManager {
         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 the last task before `startQuery()` runs.
+        // 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

From 8a81a878d2427fc640497f0fa139d10cee6cb555 Mon Sep 17 00:00:00 2001
From: Henry8192 <50559854+Henry8192@users.noreply.github.com>
Date: Thu, 14 Nov 2024 14:45:44 -0500
Subject: [PATCH 20/24] Apply suggestions from code review

Co-authored-by: Junhao Liao <junhao@junhao.ca>
---
 .../Sidebar/SidebarTabs/PanelTitleButton.tsx     | 16 ++++++++++------
 .../SidebarTabs/SearchTabPanel/Result.tsx        |  6 +++---
 .../SidebarTabs/SearchTabPanel/ResultsGroup.tsx  | 11 +++++------
 .../Sidebar/SidebarTabs/SearchTabPanel/index.tsx |  2 ++
 src/services/LogFileManager/index.ts             | 10 ++++++----
 5 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/PanelTitleButton.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/PanelTitleButton.tsx
index 2f2bec32..b527a564 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/PanelTitleButton.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/PanelTitleButton.tsx
@@ -7,15 +7,19 @@ import "./PanelTitleButton.css";
 
 
 /**
- * Renders an IconButton with an additional CSS class 'sidebar-tab-title-button'.
+ * Renders an IconButton for use in sidebar tab titles.
  *
  * @param props
  * @return
  */
-const PanelTitleButton = (props: IconButtonProps) => (
-    <IconButton
-        className={"tab-panel-title-button"}
-        {...props}/>
-);
+const PanelTitleButton = (props: IconButtonProps) => {
+    const {className, ...rest} = props;
+    return (
+        <IconButton
+            className={`tab-panel-title-button ${className ?? ""}`}
+            {...rest}/>
+    );
+};
+
 
 export default PanelTitleButton;
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx
index 5cc73362..ec45fd09 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx
@@ -17,12 +17,11 @@ interface ResultProps {
 const SEARCH_RESULT_PREFIX_MAX_CHARACTERS = 20;
 
 /**
- * Displays a button containing a message, which highlights a specific range of text.
+ * Renders a query result as a button with a message, highlighting the first matching text range.
  *
  * @param props
  * @param props.message
- * @param props.matchRange A two-element array indicating the start and end indices of the substring
- * to be highlighted.
+ * @param props.matchRange A two-element array [begin, end) representing the indices of the matching text range.
  * @param props.logEventNum
  * @return
  */
@@ -66,4 +65,5 @@ const Result = ({logEventNum, message, matchRange}: ResultProps) => {
     );
 };
 
+
 export default Result;
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
index af77aee3..d75061f0 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
@@ -2,7 +2,7 @@ import {
     useEffect,
     useState,
 } from "react";
-import * as React from "react";
+import React from "react";
 
 import {
     Accordion,
@@ -30,7 +30,7 @@ interface ResultsGroupProps {
 }
 
 /**
- * Renders a group of results. Each group contains a list of results from a single page.
+ * Renders a group of results, where each group represents a list of results from a single page.
  *
  * @param props
  * @param props.isAllExpanded
@@ -52,7 +52,7 @@ const ResultsGroup = React.memo(({
         setIsExpanded(newValue);
     };
 
-    // On `isAllExpanded` updates, sync current results group's expand status.
+    // On `isAllExpanded` update, sync current results group's expand status.
     useEffect(() => {
         setIsExpanded(isAllExpanded);
     }, [isAllExpanded]);
@@ -77,8 +77,7 @@ const ResultsGroup = React.memo(({
                             fontFamily={"Inter"}
                             level={"title-sm"}
                         >
-                            Page
-                            {" "}
+                            {"Page "}
                             {pageNum}
                         </Typography>
                     </Stack>
@@ -104,7 +103,6 @@ const ResultsGroup = React.memo(({
                             message={r.message}/>
                     ))}
                 </List>
-
             </AccordionDetails>
         </Accordion>
     );
@@ -112,4 +110,5 @@ const ResultsGroup = React.memo(({
 
 ResultsGroup.displayName = "ResultsGroup";
 
+
 export default ResultsGroup;
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
index ef331e59..883ef95f 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
@@ -44,6 +44,7 @@ const SearchTabPanel = () => {
     const {queryProgress, queryResults, startQuery, uiState} = useContext(StateContext);
     const [isAllExpanded, setIsAllExpanded] = useState<boolean>(true);
     const [queryOptions, setQueryOptions] = useState<QUERY_OPTION[]>([]);
+
     const handleQueryInputChange = (ev: React.ChangeEvent<HTMLTextAreaElement>) => {
         const isCaseSensitive = queryOptions.includes(QUERY_OPTION.IS_CASE_SENSITIVE);
         const isRegex = queryOptions.includes(QUERY_OPTION.IS_REGEX);
@@ -126,4 +127,5 @@ const SearchTabPanel = () => {
     );
 };
 
+
 export default SearchTabPanel;
diff --git a/src/services/LogFileManager/index.ts b/src/services/LogFileManager/index.ts
index 5dc4dbda..4c614f45 100644
--- a/src/services/LogFileManager/index.ts
+++ b/src/services/LogFileManager/index.ts
@@ -310,6 +310,7 @@ class LogFileManager {
             "" :
             "i";
         const queryRegex = new RegExp(regexPattern, regexFlags);
+
         this.#queryChunkAndScheduleNext(this.#queryId, 0, queryRegex);
     }
 
@@ -321,7 +322,6 @@ class LogFileManager {
      * @param chunkBeginIdx
      * @param queryRegex
      */
-    // eslint-disable-next-line max-statements
     #queryChunkAndScheduleNext (
         queryId: number,
         chunkBeginIdx: number,
@@ -369,11 +369,13 @@ class LogFileManager {
 
         // The query progress takes the maximum of the progress based on the number of events
         // queried over total log events, and the number of results over the maximum result limit.
-        this.#onQueryResults(
-            Math.max(chunkEndIdx / this.#numEvents, this.#queryCount / MAX_QUERY_RESULT_COUNT),
-            results
+        const progress = Math.max(
+            chunkEndIdx / this.#numEvents,
+            this.#queryCount / MAX_QUERY_RESULT_COUNT
         );
 
+        this.#onQueryResults(progress, results);
+
         if (chunkEndIdx < this.#numEvents && MAX_QUERY_RESULT_COUNT > this.#queryCount) {
             defer(() => {
                 this.#queryChunkAndScheduleNext(queryId, chunkEndIdx, queryRegex);

From 2c10ab734231d3d16cfd9fa0d67b6931961837a2 Mon Sep 17 00:00:00 2001
From: Henry8192 <50559854+Henry8192@users.noreply.github.com>
Date: Thu, 14 Nov 2024 15:00:49 -0500
Subject: [PATCH 21/24] resolve rest of suggestions

---
 .../Sidebar/SidebarTabs/CustomTabPanel.css    |  2 +-
 .../Sidebar/SidebarTabs/CustomTabPanel.tsx    |  2 +-
 .../Sidebar/SidebarTabs/PanelTitleButton.css  |  1 -
 .../SidebarTabs/SearchTabPanel/Result.tsx     |  6 +-
 .../SidebarTabs/SearchTabPanel/index.css      |  1 -
 .../SidebarTabs/SearchTabPanel/index.tsx      | 10 ++-
 src/components/MenuBar/ExportLogsButton.tsx   |  4 +-
 src/index.css                                 |  2 -
 src/services/LogFileManager/index.ts          | 64 ++++++++++++-------
 9 files changed, 56 insertions(+), 36 deletions(-)

diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.css b/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.css
index 1dabeece..f6b1f720 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.css
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.css
@@ -2,7 +2,7 @@
     padding: 0.75rem;
 }
 
-.custom-tab-panel-container {
+.sidebar-tab-panel-container {
     display: flex;
     flex-direction: column;
     height: 100%;
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.tsx
index d7eea8c3..2b5d5bc2 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.tsx
@@ -40,7 +40,7 @@ const CustomTabPanel = ({
             className={"sidebar-tab-panel"}
             value={tabName}
         >
-            <Box className={"custom-tab-panel-container"}>
+            <Box className={"sidebar-tab-panel-container"}>
                 <DialogTitle className={"sidebar-tab-panel-title-container"}>
                     <Typography
                         className={"sidebar-tab-panel-title"}
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/PanelTitleButton.css b/src/components/CentralContainer/Sidebar/SidebarTabs/PanelTitleButton.css
index 3369f559..27a464ec 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/PanelTitleButton.css
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/PanelTitleButton.css
@@ -1,5 +1,4 @@
 .tab-panel-title-button {
-    z-index: var(--ylv-panel-title-button-z-index) !important;
     min-width: 0 !important;
     min-height: 0 !important;
 }
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx
index ec45fd09..e172f437 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx
@@ -14,7 +14,7 @@ interface ResultProps {
     matchRange: [number, number]
 }
 
-const SEARCH_RESULT_PREFIX_MAX_CHARACTERS = 20;
+const QUERY_RESULT_PREFIX_MAX_CHARACTERS = 20;
 
 /**
  * Renders a query result as a button with a message, highlighting the first matching text range.
@@ -49,8 +49,8 @@ const Result = ({logEventNum, message, matchRange}: ResultProps) => {
                 level={"body-sm"}
             >
                 <span>
-                    {(SEARCH_RESULT_PREFIX_MAX_CHARACTERS < beforeMatch.length) && "..."}
-                    {beforeMatch.slice(-SEARCH_RESULT_PREFIX_MAX_CHARACTERS)}
+                    {(QUERY_RESULT_PREFIX_MAX_CHARACTERS < beforeMatch.length) && "..."}
+                    {beforeMatch.slice(-QUERY_RESULT_PREFIX_MAX_CHARACTERS)}
                 </span>
                 <Typography
                     className={"result-button-text"}
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css
index 7a753dd8..0670f821 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.css
@@ -12,7 +12,6 @@
 }
 
 .query-input-box {
-    z-index: var(--ylv-panel-query-input-z-index);
     flex-direction: row !important;
     border-radius: 0 !important;
 }
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
index 883ef95f..631878f1 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
@@ -50,6 +50,12 @@ const SearchTabPanel = () => {
         const isRegex = queryOptions.includes(QUERY_OPTION.IS_REGEX);
         startQuery(ev.target.value, isRegex, isCaseSensitive);
     };
+    const handleQueryOptionsChange = (
+        _: React.MouseEvent<HTMLElement>,
+        newOptions: QUERY_OPTION[]
+    ) => {
+        setQueryOptions(newOptions);
+    };
 
     return (
         <CustomTabPanel
@@ -77,9 +83,7 @@ const SearchTabPanel = () => {
                                 spacing={0.25}
                                 value={queryOptions}
                                 variant={"plain"}
-                                onChange={(_, newValue) => {
-                                    setQueryOptions(newValue);
-                                }}
+                                onChange={handleQueryOptionsChange}
                             >
                                 <IconButton
                                     className={"query-option-button"}
diff --git a/src/components/MenuBar/ExportLogsButton.tsx b/src/components/MenuBar/ExportLogsButton.tsx
index f6ea5b69..5d9a2252 100644
--- a/src/components/MenuBar/ExportLogsButton.tsx
+++ b/src/components/MenuBar/ExportLogsButton.tsx
@@ -49,7 +49,9 @@ const ExportLogsButton = () => {
                         "primary"}
                 >
                     {EXPORT_LOG_PROGRESS_VALUE_MAX === exportProgress ?
-                        <DownloadIcon color={"success"}/> :
+                        <DownloadIcon
+                            color={"success"}
+                            sx={{fontSize: "14px"}}/> :
                         <Typography level={"body-xs"}>
                             {Math.ceil(exportProgress * 100)}
                         </Typography>}
diff --git a/src/index.css b/src/index.css
index b8d1ac44..815b9bd2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -27,8 +27,6 @@ html {
      * .monaco-editor .minimap { z-index: 5; }
      * ```
      */
-    --ylv-panel-title-button-z-index: 0;
-    --ylv-panel-query-input-z-index: 0;
     --ylv-resize-handle-z-index: 1;
     --ylv-menu-bar-z-index: 6;
     --ylv-status-bar-z-index: 6;
diff --git a/src/services/LogFileManager/index.ts b/src/services/LogFileManager/index.ts
index 4c614f45..805fc2a5 100644
--- a/src/services/LogFileManager/index.ts
+++ b/src/services/LogFileManager/index.ts
@@ -1,6 +1,7 @@
 /* eslint max-lines: ["error", 450] */
 import {
     Decoder,
+    DecodeResultType,
     DecoderOptionsType,
 } from "../../typings/decoders";
 import {MAX_V8_STRING_LENGTH} from "../../typings/js";
@@ -314,6 +315,45 @@ class LogFileManager {
         this.#queryChunkAndScheduleNext(this.#queryId, 0, queryRegex);
     }
 
+    /**
+     * Processes decoded log events and populates the results map with matched entries.
+     *
+     * @param decodedEvents
+     * @param queryRegex
+     * @param results The map to store query results.
+     */
+    #processQueryDecodedEvents (
+        decodedEvents: DecodeResultType[],
+        queryRegex: RegExp,
+        results: QueryResults
+    ): void {
+        for (const [message, , , logEventNum] of decodedEvents) {
+            const matchResult = message.match(queryRegex);
+            if (null === matchResult || "number" !== typeof matchResult.index) {
+                continue;
+            }
+
+            const pageNum = Math.ceil(logEventNum / this.#pageSize);
+            if (false === results.has(pageNum)) {
+                results.set(pageNum, []);
+            }
+
+            results.get(pageNum)?.push({
+                logEventNum: logEventNum,
+                message: message,
+                matchRange: [
+                    matchResult.index,
+                    matchResult.index + matchResult[0].length,
+                ],
+            });
+
+            this.#queryCount++;
+            if (this.#queryCount >= MAX_QUERY_RESULT_COUNT) {
+                break;
+            }
+        }
+    }
+
     /**
      * Queries a chunk of log events, sends the results, and schedules the next chunk query if more
      * log events remain.
@@ -343,29 +383,7 @@ class LogFileManager {
             return;
         }
 
-        for (const [message, , , logEventNum] of decodedEvents) {
-            const matchResult = message.match(queryRegex);
-            if (null === matchResult || "number" !== typeof matchResult.index) {
-                continue;
-            }
-            const pageNum = Math.ceil(logEventNum / this.#pageSize);
-            if (false === results.has(pageNum)) {
-                results.set(pageNum, []);
-            }
-            results.get(pageNum)?.push({
-                logEventNum: logEventNum,
-                message: message,
-                matchRange: [
-                    matchResult.index,
-                    (matchResult.index + matchResult[0].length),
-                ],
-            });
-
-            this.#queryCount++;
-            if (MAX_QUERY_RESULT_COUNT <= this.#queryCount) {
-                break;
-            }
-        }
+        this.#processQueryDecodedEvents(decodedEvents, queryRegex, results);
 
         // The query progress takes the maximum of the progress based on the number of events
         // queried over total log events, and the number of results over the maximum result limit.

From fb1208020840b1e74dc45a373c4ca8b3fd4b4875 Mon Sep 17 00:00:00 2001
From: Henry8192 <50559854+Henry8192@users.noreply.github.com>
Date: Thu, 14 Nov 2024 15:07:15 -0500
Subject: [PATCH 22/24] fix lint

---
 .../Sidebar/SidebarTabs/SearchTabPanel/Result.tsx             | 3 ++-
 .../Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx       | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx
index e172f437..e3d0576b 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/Result.tsx
@@ -21,7 +21,8 @@ const QUERY_RESULT_PREFIX_MAX_CHARACTERS = 20;
  *
  * @param props
  * @param props.message
- * @param props.matchRange A two-element array [begin, end) representing the indices of the matching text range.
+ * @param props.matchRange A two-element array [begin, end) representing the indices of the matching
+ * text range.
  * @param props.logEventNum
  * @return
  */
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
index d75061f0..4fe35005 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
@@ -1,8 +1,8 @@
 import {
+    memo,
     useEffect,
     useState,
 } from "react";
-import React from "react";
 
 import {
     Accordion,
@@ -38,7 +38,7 @@ interface ResultsGroupProps {
  * @param props.results
  * @return
  */
-const ResultsGroup = React.memo(({
+const ResultsGroup = memo(({
     isAllExpanded,
     pageNum,
     results,

From f71269efc9e98058cd1a767cd500addd9c3b48a8 Mon Sep 17 00:00:00 2001
From: Henry8192 <50559854+Henry8192@users.noreply.github.com>
Date: Fri, 15 Nov 2024 14:12:40 -0500
Subject: [PATCH 23/24] Update
 src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 .../Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
index 4fe35005..28e1ce4a 100644
--- a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
+++ b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/ResultsGroup.tsx
@@ -1,4 +1,4 @@
-import {
+import React, {
     memo,
     useEffect,
     useState,

From 8793d0b656d8d41a6394618d5f37ef52e61c2714 Mon Sep 17 00:00:00 2001
From: Junhao Liao <junhao@junhao.ca>
Date: Fri, 15 Nov 2024 14:44:50 -0500
Subject: [PATCH 24/24] Rename `DecodeResultType` -> `DecodeResult` as a result
 of merging from `main`.

---
 src/services/LogFileManager/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/services/LogFileManager/index.ts b/src/services/LogFileManager/index.ts
index 82c3ffbc..10566999 100644
--- a/src/services/LogFileManager/index.ts
+++ b/src/services/LogFileManager/index.ts
@@ -1,7 +1,7 @@
 /* eslint max-lines: ["error", 450] */
 import {
     Decoder,
-    DecodeResultType,
+    DecodeResult,
     DecoderOptions,
 } from "../../typings/decoders";
 import {MAX_V8_STRING_LENGTH} from "../../typings/js";
@@ -323,7 +323,7 @@ class LogFileManager {
      * @param results The map to store query results.
      */
     #processQueryDecodedEvents (
-        decodedEvents: DecodeResultType[],
+        decodedEvents: DecodeResult[],
         queryRegex: RegExp,
         results: QueryResults
     ): void {