Determine panel on states in controls component

Instead of determining in the sidebar and passing down as props.

src/components/controls/controls.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useSelector } from "react-redux";
 import { useTranslation } from 'react-i18next';
 
 import ColorBy, {ColorByInfo} from "./color-by";
@@ -25,18 +26,22 @@ import {TreeOptionsInfo, MapOptionsInfo, AnimationOptionsInfo, PanelOptionsInfo,
   ExplodeTreeInfo, FrequencyInfo, MeasurementsOptionsInfo} from "./miscInfoText";
 import { AnnotatedHeader } from "./annotatedHeader";
 import MeasurementsOptions from "./measurementsOptions";
+import { RootState } from "../../store";
 
 type Props = {
-  treeOn: boolean
-  mapOn: boolean
-  frequenciesOn: boolean
-  measurementsOn: boolean
   mobileDisplay: boolean
 }
 
-function Controls({ treeOn, mapOn, frequenciesOn, measurementsOn, mobileDisplay }: Props) {
+function Controls({ mobileDisplay }: Props) {
   const { t } = useTranslation();
 
+  const panelsToDisplay = useSelector((state: RootState) => state.controls.panelsToDisplay);
+
+  const treeOn = panelsToDisplay.includes("tree");
+  const mapOn = panelsToDisplay.includes("map");
+  const frequenciesOn = panelsToDisplay.includes("frequencies");
+  const measurementsOn = panelsToDisplay.includes("measurements");
+
   return (
     <ControlsContainer>
       <ChooseDataset />

src/components/main/sidebar.js

@@ -23,13 +23,7 @@ export const Sidebar = (
         {displayNarrative ? (
           <Narrative height={height - narrativeNavBarHeight} width={width} />
         ) : (
-          <Controls
-            mobileDisplay={mobileDisplay}
-            treeOn={panelsToDisplay.includes("tree")}
-            mapOn={panelsToDisplay.includes("map")}
-            frequenciesOn={panelsToDisplay.includes("frequencies")}
-            measurementsOn={panelsToDisplay.includes("measurements")}
-          />
+          <Controls mobileDisplay={mobileDisplay} />
         )}
       </SidebarContainer>
     </ThemeProvider>