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(isAllExpanded); @@ -62,45 +53,50 @@ const ResultsGroup = ({ }, [isAllExpanded]); return ( - - - - + {Array.from(queryResults.entries()).map(([pageNum, results]) => ( + + - - - Page - {" "} - {pageNum} - - - - {results.length} - - - - - - {results.map((r, index) => ( - - ))} - - - + + + + + Page + {" "} + {pageNum} + + + + {results.length} + + + + + + {results.map((r) => ( + + ))} + + + + ))} + ); }; 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]) => ( - - ))} + );