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

Author: Henry8192

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

@@ -2,12 +2,19 @@
     padding: 0.75rem;
 }
 
+.sidebar-tab-panel-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
 .sidebar-tab-panel-title-container {
     user-select: none;
     margin-bottom: 0.5rem !important;
 }
 
 .sidebar-tab-panel-title {
+    flex-grow: 1;
     font-size: 0.875rem !important;
     font-weight: 400 !important;
     text-transform: uppercase;

src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 
 import {
+    Box,
+    ButtonGroup,
     DialogContent,
     DialogTitle,
     TabPanel,
@@ -14,6 +16,7 @@ interface CustomTabPanelProps {
     children: React.ReactNode,
     tabName: string,
     title: string,
+    titleButtons?: React.ReactNode,
 }
 
 /**
@@ -23,25 +26,40 @@ 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"}
             value={tabName}
         >
-            <DialogTitle className={"sidebar-tab-panel-title-container"}>
-                <Typography
-                    className={"sidebar-tab-panel-title"}
-                    level={"body-md"}
-                >
-                    {title}
-                </Typography>
-            </DialogTitle>
-            <DialogContent>
-                {children}
-            </DialogContent>
+            <Box className={"sidebar-tab-panel-container"}>
+                <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>
         </TabPanel>
     );
 };

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

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

src/components/CentralContainer/Sidebar/SidebarTabs/PanelTitleButton.tsx

@@ -0,0 +1,25 @@
+import {
+    IconButton,
+    IconButtonProps,
+} from "@mui/joy";
+
+import "./PanelTitleButton.css";
+
+
+/**
+ * Renders an IconButton for use in sidebar tab titles.
+ *
+ * @param props
+ * @return
+ */
+const PanelTitleButton = (props: IconButtonProps) => {
+    const {className, ...rest} = props;
+    return (
+        <IconButton
+            className={`tab-panel-title-button ${className ?? ""}`}
+            {...rest}/>
+    );
+};
+
+
+export default PanelTitleButton;

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

@@ -0,0 +1,20 @@
+.result-button {
+    user-select: none;
+
+    overflow-x: hidden;
+
+    width: 100%;
+    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;
+}

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

@@ -0,0 +1,70 @@
+import {
+    ListItemButton,
+    Typography,
+} from "@mui/joy";
+
+import {updateWindowUrlHashParams} from "../../../../../contexts/UrlContextProvider";
+
+import "./Result.css";
+
+
+interface ResultProps {
+    logEventNum: number,
+    message: string,
+    matchRange: [number, number]
+}
+
+const QUERY_RESULT_PREFIX_MAX_CHARACTERS = 20;
+
+/**
+ * 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 [begin, end) representing the indices of the matching
+ * text range.
+ * @param props.logEventNum
+ * @return
+ */
+const Result = ({logEventNum, message, matchRange}: ResultProps) => {
+    const [
+        beforeMatch,
+        match,
+        afterMatch,
+    ] = [
+        message.slice(0, matchRange[0]),
+        message.slice(...matchRange),
+        message.slice(matchRange[1]),
+    ];
+    const handleResultButtonClick = () => {
+        updateWindowUrlHashParams({logEventNum});
+    };
+
+    return (
+        <ListItemButton
+            className={"result-button"}
+            onClick={handleResultButtonClick}
+        >
+            <Typography
+                className={"result-button-text"}
+                level={"body-sm"}
+            >
+                <span>
+                    {(QUERY_RESULT_PREFIX_MAX_CHARACTERS < beforeMatch.length) && "..."}
+                    {beforeMatch.slice(-QUERY_RESULT_PREFIX_MAX_CHARACTERS)}
+                </span>
+                <Typography
+                    className={"result-button-text"}
+                    level={"body-sm"}
+                    sx={{backgroundColor: "warning.softBg"}}
+                >
+                    {match}
+                </Typography>
+                {afterMatch}
+            </Typography>
+        </ListItemButton>
+    );
+};
+
+
+export default Result;

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

@@ -0,0 +1,31 @@
+.results-group-summary-button {
+    cursor: default !important;
+    flex-direction: row-reverse !important;
+    gap: 2px !important;
+    padding-inline-start: 0 !important;
+}
+
+.results-group-summary-container {
+    display: flex;
+    flex-grow: 1;
+}
+
+.results-group-summary-text-container {
+    flex-grow: 1;
+    gap: 0.2rem;
+    align-items: center;
+}
+
+.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;
+}

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

@@ -0,0 +1,114 @@
+import React, {
+    memo,
+    useEffect,
+    useState,
+} from "react";
+
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    Box,
+    Chip,
+    List,
+    Stack,
+    Typography,
+} from "@mui/joy";
+
+import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
+
+import {QueryResultsType} from "../../../../../typings/worker";
+import Result from "./Result";
+
+import "./ResultsGroup.css";
+
+
+interface ResultsGroupProps {
+    isAllExpanded: boolean,
+    pageNum: number,
+    results: QueryResultsType[],
+}
+
+/**
+ * Renders a group of results, where each group represents a list of results from a single page.
+ *
+ * @param props
+ * @param props.isAllExpanded
+ * @param props.pageNum
+ * @param props.results
+ * @return
+ */
+const ResultsGroup = memo(({
+    isAllExpanded,
+    pageNum,
+    results,
+}: ResultsGroupProps) => {
+    const [isExpanded, setIsExpanded] = useState<boolean>(isAllExpanded);
+
+    const handleAccordionChange = (
+        _: React.SyntheticEvent,
+        newValue: boolean
+    ) => {
+        setIsExpanded(newValue);
+    };
+
+    // On `isAllExpanded` update, sync current results group's expand status.
+    useEffect(() => {
+        setIsExpanded(isAllExpanded);
+    }, [isAllExpanded]);
+
+    return (
+        <Accordion
+            expanded={isExpanded}
+            onChange={handleAccordionChange}
+        >
+            <AccordionSummary
+                slotProps={{
+                    button: {className: "results-group-summary-button"},
+                }}
+            >
+                <Box className={"results-group-summary-container"}>
+                    <Stack
+                        className={"results-group-summary-text-container"}
+                        direction={"row"}
+                    >
+                        <DescriptionOutlinedIcon fontSize={"inherit"}/>
+                        <Typography
+                            fontFamily={"Inter"}
+                            level={"title-sm"}
+                        >
+                            {"Page "}
+                            {pageNum}
+                        </Typography>
+                    </Stack>
+                    <Chip
+                        className={"results-group-summary-count"}
+                        size={"sm"}
+                        variant={"solid"}
+                    >
+                        {results.length}
+                    </Chip>
+                </Box>
+            </AccordionSummary>
+            <AccordionDetails
+                className={"results-group-details"}
+                slotProps={{content: {className: "results-group-details-content"}}}
+            >
+                <List size={"sm"}>
+                    {results.map((r, index) => (
+                        <Result
+                            key={index}
+                            logEventNum={r.logEventNum}
+                            matchRange={r.matchRange}
+                            message={r.message}/>
+                    ))}
+                </List>
+            </AccordionDetails>
+        </Accordion>
+    );
+});
+
+ResultsGroup.displayName = "ResultsGroup";
+
+
+export default ResultsGroup;