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.
nextstrain · Sep 12, 2023 · 1ceca1a · 1ceca1a
1 parent df16c51
commit 1ceca1a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git 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
@@ -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")}