feat(query): Add a "Search" tab in the Sidebar for wildcard queries.

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}

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

@@ -0,0 +1,23 @@
+.result-button {
+    user-select: none;
+
+    overflow: hidden;
+    display: flex !important;
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.result-text {
+    display: inline !important;
+    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;
+}

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 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"}
+            >
+                {afterMatch}
+            </Typography>
+        </ListItemButton>
+    );
+};
+
+export default Result;

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);
+}

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

@@ -0,0 +1,126 @@
+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 {QueryResults} from "../../../../../typings/worker";
+import Result from "./Result";
+
+import "./ResultsGroup.css";
+
+
+interface ResultsGroupProps {
+    isAllExpanded: boolean,
+    queryResults: QueryResults,
+}
+
+/**
+ *
+ * @param props
+ * @param props.isAllExpanded
+ * @param props.queryResults
+ */
+const ResultsGroup = ({
+    isAllExpanded,
+    queryResults,
+}: ResultsGroupProps) => {
+    const [expandedMap, setExpandedMap] = useState<Record<number, boolean>>({});
+    const handleAccordionChange = (
+        pageNum: number
+    ) => (_: React.SyntheticEvent, newValue: boolean) => {
+        setExpandedMap((prev) => ({
+            ...prev,
+            [pageNum]: 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);
+    }, [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"},
+                        }}
+                    >
+                        <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>
+            ))}
+        </>
+    );
+};
+
+export default ResultsGroup;

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

@@ -0,0 +1,112 @@
+import {
+    useContext,
+    useRef,
+    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 {StateContext} from "../../../../../contexts/StateContextProvider";
+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"
+}
+
+/**
+ * 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[]>([]);
+    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={
+                <TitleButton onClick={() => { setIsAllExpanded((v) => !v); }}>
+                    {isAllExpanded ?
+                        <UnfoldLessIcon/> :
+                        <UnfoldMoreIcon/>}
+                </TitleButton>
+            }
+        >
+            <Textarea
+                maxRows={7}
+                placeholder={"Search"}
+                size={"sm"}
+                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>
+                    </>
+                }
+                slotProps={{
+                    textarea: {ref: searchTextRef},
+                    endDecorator: {sx: {marginBlockStart: 0, display: "block"}},
+                }}
+                onKeyDown={handleSearch}/>
+            <AccordionGroup
+                disableDivider={true}
+                size={"sm"}
+            >
+                <ResultsGroup
+                    isAllExpanded={isAllExpanded}
+                    queryResults={queryResults}/>
+            </AccordionGroup>
+        </CustomTabPanel>
+    );
+};
+
+export default SearchTabPanel;

src/components/CentralContainer/Sidebar/SidebarTabs/TitleButton.css

@@ -0,0 +1,4 @@
+.sidebar-tab-title-button {
+    min-width: 0 !important;
+    min-height: 0 !important;
+}