From df16c516fa5f64db03eacbef573887394ff2d093 Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Tue, 12 Sep 2023 13:17:42 -0700
Subject: [PATCH 1/2] Use && for conditional rendering

This is a bit simpler than the ternary operator.
---
 src/components/controls/controls.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/controls/controls.tsx b/src/components/controls/controls.tsx
index eca01d6b2..d713e311f 100644
--- a/src/components/controls/controls.tsx
+++ b/src/components/controls/controls.tsx
@@ -59,27 +59,27 @@ function Controls({ mapOn, frequenciesOn, measurementsOn, mobileDisplay }: Props
       <ChooseExplodeAttr tooltip={ExplodeTreeInfo} mobile={mobileDisplay} />
       <ToggleTangle />
 
-      {measurementsOn ? (
+      {measurementsOn &&
         <span style={{ marginTop: "10px" }}>
           <AnnotatedHeader title={t("sidebar:Measurements Options")} tooltip={MeasurementsOptionsInfo} mobile={mobileDisplay}/>
           <MeasurementsOptions />
         </span>
-      ) : null}
+      }
 
-      {mapOn ? (
+      {mapOn &&
         <span style={{ marginTop: "10px" }}>
           <AnnotatedHeader title={t("sidebar:Map Options")} tooltip={MapOptionsInfo} mobile={mobileDisplay}/>
           <GeoResolution />
           <TransmissionLines />
         </span>
-      ) : null}
+      }
 
-      {frequenciesOn ? (
+      {frequenciesOn &&
         <span style={{ marginTop: "10px" }}>
           <AnnotatedHeader title={t("sidebar:Frequency Options")} tooltip={FrequencyInfo} mobile={mobileDisplay}/>
           <NormalizeFrequencies />
         </span>
-      ) : null}
+      }
 
       <span style={{ marginTop: "10px" }}>
         <AnnotatedHeader title={t("sidebar:Animation Options")} tooltip={AnimationOptionsInfo} mobile={mobileDisplay}/>

From 1ceca1a26b2491649b50362022aef1585e2dc1b7 Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Tue, 12 Sep 2023 10:47:56 -0700
Subject: [PATCH 2/2] Hide tree options when tree is off

This conditional rendering is in place for all other panels. Make the
tree panel behave the same way.
---
 src/components/controls/controls.tsx | 23 ++++++++++++++---------
 src/components/main/sidebar.js       |  1 +
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/controls/controls.tsx b/src/components/controls/controls.tsx
index d713e311f..0ce8fbb72 100644
--- a/src/components/controls/controls.tsx
+++ b/src/components/controls/controls.tsx
@@ -27,13 +27,14 @@ import { AnnotatedHeader } from "./annotatedHeader";
 import MeasurementsOptions from "./measurementsOptions";
 
 type Props = {
+  treeOn: boolean
   mapOn: boolean
   frequenciesOn: boolean
   measurementsOn: boolean
   mobileDisplay: boolean
 }
 
-function Controls({ mapOn, frequenciesOn, measurementsOn, mobileDisplay }: Props) {
+function Controls({ treeOn, mapOn, frequenciesOn, measurementsOn, mobileDisplay }: Props) {
   const { t } = useTranslation();
 
   return (
@@ -50,14 +51,18 @@ function Controls({ mapOn, frequenciesOn, measurementsOn, mobileDisplay }: Props
       <AnnotatedHeader title={t("sidebar:Filter Data")} tooltip={FilterInfo} mobile={mobileDisplay}/>
       <FilterData measurementsOn={measurementsOn} />
 
-      <AnnotatedHeader title={t("sidebar:Tree Options")} tooltip={TreeOptionsInfo} mobile={mobileDisplay}/>
-      <ChooseLayout />
-      <ChooseMetric />
-      <ChooseBranchLabelling />
-      <ChooseTipLabel />
-      <ChooseSecondTree />
-      <ChooseExplodeAttr tooltip={ExplodeTreeInfo} mobile={mobileDisplay} />
-      <ToggleTangle />
+      {treeOn &&
+        <span>
+          <AnnotatedHeader title={t("sidebar:Tree Options")} tooltip={TreeOptionsInfo} mobile={mobileDisplay}/>
+          <ChooseLayout />
+          <ChooseMetric />
+          <ChooseBranchLabelling />
+          <ChooseTipLabel />
+          <ChooseSecondTree />
+          <ChooseExplodeAttr tooltip={ExplodeTreeInfo} mobile={mobileDisplay} />
+          <ToggleTangle />
+        </span>
+      }
 
       {measurementsOn &&
         <span style={{ marginTop: "10px" }}>
diff --git a/src/components/main/sidebar.js b/src/components/main/sidebar.js
index d1bf076fc..6e9bfcd2c 100644
--- a/src/components/main/sidebar.js
+++ b/src/components/main/sidebar.js
@@ -25,6 +25,7 @@ export const Sidebar = (
         ) : (
           <Controls
             mobileDisplay={mobileDisplay}
+            treeOn={panelsToDisplay.includes("tree")}
             mapOn={panelsToDisplay.includes("map")}
             frequenciesOn={panelsToDisplay.includes("frequencies")}
             measurementsOn={panelsToDisplay.includes("measurements")}