Rewrite the ResultsGroup return type

y-scope · Oct 28, 2024 · dcada93 · dcada93
1 parent 5094abf
commit dcada93
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 76 deletions.
diff --git 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
@@ -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>
     );