From 302ce86d909d1b3d502b6dceed214e157b26f937 Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Tue, 17 Oct 2023 16:02:23 -0700
Subject: [PATCH] Determine panel on states in controls component

Instead of determining in the sidebar and passing down as props.
---
 src/components/controls/controls.tsx | 15 ++++++++++-----
 src/components/main/sidebar.js       |  8 +-------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/components/controls/controls.tsx b/src/components/controls/controls.tsx
index 0ce8fbb72..3a1f55331 100644
--- a/src/components/controls/controls.tsx
+++ b/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 />
diff --git a/src/components/main/sidebar.js b/src/components/main/sidebar.js
index 6e9bfcd2c..ec561f8a5 100644
--- a/src/components/main/sidebar.js
+++ b/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>