Integrate BubbleChart into Officer Search View

frontend/pages/search/index.tsx

@@ -1,5 +1,11 @@
 import { Column } from "react-table"
-import { DashboardHeader, Map, SearchPanel, SearchResultsTable } from "../../compositions"
+import {
+  BubbleChart,
+  DashboardHeader,
+  Map,
+  SearchPanel,
+  SearchResultsTable
+} from "../../compositions"
 import { resultsColumns } from "../../compositions/search-results/search-results"
 import { requireAuth, useSearch } from "../../helpers"
 import { Officer, Rank } from "../../helpers/api"
@@ -12,27 +18,32 @@ import { officerResultsColumns } from "../../models/officer"
 import { SearchResultsTypes, ToggleOptions } from "../../models"
 
 export default requireAuth(function Dashboard() {
-  const { searchPageContainer, searchPageDisplay } = styles
+  const { searchPageContainer } = styles
   const { incidentResults } = useSearch()
   const [toggleOptions, setToggleOptions] = useState(
     new ToggleOptions("incidents", "officers").options
   )
 
+  const isIncidentView = toggleOptions[0].value
+  const isOfficerView = toggleOptions[1].value
+
   return (
     <Layout>
       <div className={searchPageContainer}>
         <SearchPanel toggleOptions={toggleOptions} setToggleOptions={setToggleOptions} />
-        <div className={searchPageDisplay}>
-          <Map />
-          {toggleOptions[0].value && !!incidentResults && (
+        <div>
+          {isIncidentView && <Map />}
+          {isIncidentView && !!incidentResults && (
+            <SearchResultsTable results={incidentResults.results} resultsColumns={resultsColumns} />
+          )}
+
+          {isOfficerView && <BubbleChart height={325} />}
+          {isOfficerView && !!officerSearchResult && (
             <SearchResultsTable
-              results={incidentResults.results}
-              resultsColumns={resultsColumns}
+              results={officerSearchResult}
+              resultsColumns={officerResultsColumns}
             />
           )}
-          {toggleOptions[1].value && !!officerSearchResult && (
-            <SearchResultsTable results={officerSearchResult} resultsColumns={officerResultsColumns} />
-          )}
         </div>
       </div>
     </Layout>

frontend/pages/search/search.module.css

@@ -1,3 +1,7 @@
 .searchPageContainer {
-  display: flex;
+  max-height: 85vh;
+  overflow: auto;
+  display: grid;
+  grid-template-columns: 1fr 5fr;
+  grid-template-rows: repeat(2, 1fr);
 }