From d0a1b054cf9cee2c34b4bed6beecaacfc8958586 Mon Sep 17 00:00:00 2001
From: Jover Lee <joverlee521@gmail.com>
Date: Tue, 27 Aug 2024 12:15:21 -0700
Subject: [PATCH] controls: Hide date/animation sections for `divOnly` trees

Previously, the date/animation control components were hidden, but the
headers were still shown in the side panel. This commit hides the entire
section including the headers to reduce confusion.

Resolves https://github.com/nextstrain/auspice/issues/1833
---
 src/components/controls/controls.tsx | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/controls/controls.tsx b/src/components/controls/controls.tsx
index 3071869f1..8facaef8e 100644
--- a/src/components/controls/controls.tsx
+++ b/src/components/controls/controls.tsx
@@ -35,14 +35,19 @@ function Controls() {
   const panelsToDisplay = useSelector((state: RootState) => state.controls.panelsToDisplay);
   const showTreeToo = useSelector((state: RootState) => state.controls.showTreeToo);
   const canTogglePanelLayout = useSelector((state: RootState) => state.controls.canTogglePanelLayout);
+  const branchLengthsToDisplay = useSelector((state: RootState) => state.controls.branchLengthsToDisplay);
 
   return (
     <ControlsContainer>
       <ChooseDataset />
 
-      <ControlHeader title={t("sidebar:Date Range")} tooltip={DateRangeInfo}/>
-      <DateRangeInputs />
-      <AnimationControls />
+      {branchLengthsToDisplay !== 'divOnly' &&
+        <>
+          <ControlHeader title={t("sidebar:Date Range")} tooltip={DateRangeInfo}/>
+          <DateRangeInputs />
+          <AnimationControls />
+        </>
+      }
 
       <ControlHeader title={t("sidebar:Color By")} tooltip={ColorByInfo}/>
       <ColorBy />
@@ -110,10 +115,12 @@ function Controls() {
         />
       }
 
-      <span style={{ marginTop: "10px" }}>
-        <ControlHeader title={t("sidebar:Animation Options")} tooltip={AnimationOptionsInfo}/>
-        <AnimationOptions />
-      </span>
+      {branchLengthsToDisplay !== "divOnly" &&
+        <span style={{ marginTop: "10px" }}>
+          <ControlHeader title={t("sidebar:Animation Options")} tooltip={AnimationOptionsInfo}/>
+          <AnimationOptions />
+        </span>
+      }
 
       {canTogglePanelLayout &&
         <>