From b8e82c34cecfbec658a5c3eaeade52997b286db6 Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Tue, 12 Sep 2023 11:20:26 -0700
Subject: [PATCH 1/9] panel-toggles: Rename for TypeScript conversion

---
 src/components/controls/{panel-toggles.js => panel-toggles.tsx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/controls/{panel-toggles.js => panel-toggles.tsx} (100%)

diff --git a/src/components/controls/panel-toggles.js b/src/components/controls/panel-toggles.tsx
similarity index 100%
rename from src/components/controls/panel-toggles.js
rename to src/components/controls/panel-toggles.tsx

From 0615b36470ae70fe4eae57ee17589ce306c1d01a Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Tue, 12 Sep 2023 11:24:36 -0700
Subject: [PATCH 2/9] panel-toggles: Convert to TypeScript
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The hooks API is recommended by Redux docs¹.

¹ https://react-redux.js.org/api/hooks
---
 src/components/controls/panel-toggles.tsx | 63 ++++++++++++++---------
 1 file changed, 40 insertions(+), 23 deletions(-)

diff --git a/src/components/controls/panel-toggles.tsx b/src/components/controls/panel-toggles.tsx
index 145eadd30..821ea0535 100644
--- a/src/components/controls/panel-toggles.tsx
+++ b/src/components/controls/panel-toggles.tsx
@@ -1,35 +1,52 @@
 import React from "react";
-import { connect } from "react-redux";
-import { withTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from "react-redux";
+import { useTranslation } from 'react-i18next';
 
 import Toggle from "./toggle";
 import { togglePanelDisplay } from "../../actions/panelDisplay";
 
-@connect((state) => ({
-  panelsAvailable: state.controls.panelsAvailable,
-  panelsToDisplay: state.controls.panelsToDisplay,
-  showTreeToo: state.controls.showTreeToo
-}))
-class PanelToggles extends React.Component {
-  render() {
-    const { t } = this.props;
+// Interface to represent the entire Redux store.
+// Since most of the codebase is not typed yet, add types manually¹ for now.
+// TODO: Move this to src/store.
+// ¹ https://react-redux.js.org/using-react-redux/usage-with-typescript#typing-hooks-manually
+interface RootState {
+  controls: {
+    panelsAvailable: string[]
+    panelsToDisplay: string[]
+    showTreeToo: boolean
 
-    const panels = this.props.panelsAvailable.slice();
-    if (this.props.showTreeToo && panels.indexOf("map") !== -1) {
-      panels.splice(panels.indexOf("map"), 1);
-    }
-    return panels.map((n) => (
+    // This allows arbitrary prop names while TypeScript adoption is incomplete.
+    // TODO: add all other props explicitly and remove this.
+    [propName: string]: any;
+  }
+
+  // This allows arbitrary prop names while TypeScript adoption is incomplete.
+  // TODO: add all other props explicitly and remove this.
+  [propName: string]: any;
+}
+
+export default function PanelToggles() {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+
+  const panelsAvailable = useSelector((state: RootState) => state.controls.panelsAvailable);
+  const panelsToDisplay = useSelector((state: RootState) => state.controls.panelsToDisplay);
+  const showTreeToo = useSelector((state: RootState) => state.controls.showTreeToo);
+
+  const panels = panelsAvailable.slice();
+  if (showTreeToo && panels.indexOf("map") !== -1) {
+    panels.splice(panels.indexOf("map"), 1);
+  }
+  return <>
+    {panels.map((n) => (
       <Toggle
         key={n}
         display
-        on={this.props.panelsToDisplay.indexOf(n) !== -1}
-        callback={() => this.props.dispatch(togglePanelDisplay(n))}
+        on={panelsToDisplay.indexOf(n) !== -1}
+        callback={() => dispatch(togglePanelDisplay(n))}
         label={t("sidebar:Show " + n)}
-        style={{paddingBottom: "10px"}}
+        style={{ paddingBottom: "10px" }}
       />
-    ));
-  }
+    ))}
+  </>
 }
-
-const WithTranslation = withTranslation()(PanelToggles);
-export default WithTranslation;

From ec3423b2439e923c9e3b8a54b1f35569a12a6253 Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Tue, 12 Sep 2023 11:40:50 -0700
Subject: [PATCH 3/9] panel-toggles: Add context to implicit behavior

---
 src/components/controls/panel-toggles.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/controls/panel-toggles.tsx b/src/components/controls/panel-toggles.tsx
index 821ea0535..844c01b99 100644
--- a/src/components/controls/panel-toggles.tsx
+++ b/src/components/controls/panel-toggles.tsx
@@ -34,9 +34,13 @@ export default function PanelToggles() {
   const showTreeToo = useSelector((state: RootState) => state.controls.showTreeToo);
 
   const panels = panelsAvailable.slice();
+
+  // Prevent the map from being toggled on when a second tree is visible.
+  // It is hidden by logic elsewhere.
   if (showTreeToo && panels.indexOf("map") !== -1) {
     panels.splice(panels.indexOf("map"), 1);
   }
+
   return <>
     {panels.map((n) => (
       <Toggle

From d7354d1bff4b88de7380de1840ea8c0b5e1ddc56 Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Fri, 29 Sep 2023 11:59:45 -0700
Subject: [PATCH 4/9] annotatedHeader: Convert to TypeScript

---
 .../controls/{annotatedHeader.js => annotatedHeader.tsx}  | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)
 rename src/components/controls/{annotatedHeader.js => annotatedHeader.tsx} (79%)

diff --git a/src/components/controls/annotatedHeader.js b/src/components/controls/annotatedHeader.tsx
similarity index 79%
rename from src/components/controls/annotatedHeader.js
rename to src/components/controls/annotatedHeader.tsx
index bf53e2c7e..6e3b2561b 100644
--- a/src/components/controls/annotatedHeader.js
+++ b/src/components/controls/annotatedHeader.tsx
@@ -2,7 +2,13 @@ import React from "react";
 import { FaInfoCircle } from "react-icons/fa";
 import {StyledTooltip, HeaderIconContainer, HeaderContainer} from "./styles";
 
-export const AnnotatedHeader = ({title, tooltip, mobile}) => {
+type Props = {
+  title: string
+  tooltip: JSX.Element
+  mobile: boolean
+}
+
+export const AnnotatedHeader = ({title, tooltip, mobile}: Props) => {
   return (
     <HeaderContainer>
       <span>{title}</span>

From 16e680b03e4f8373d9964fe695bf1012a57074eb Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Fri, 29 Sep 2023 13:24:22 -0700
Subject: [PATCH 5/9] Move panel toggles to control headers

Do this by extending annotatedHeader to take an optional toggle, then
using it for all available panels.

Simplify headers and translations to just the panel name (e.g. Tree)
instead of "Show <panel name>" / "<panel name> Options".

Repurpose and move the section "Panel Options" to the top as "Layout".
Conditionally render that entire section including the header.
---
 src/components/controls/annotatedHeader.tsx |  8 +-
 src/components/controls/controls.tsx        | 84 ++++++++++++++++++---
 src/components/controls/miscInfoText.js     | 12 ++-
 src/components/controls/panel-layout.js     |  6 +-
 src/components/controls/panel-toggle.tsx    | 32 ++++++++
 src/components/controls/panel-toggles.tsx   | 56 --------------
 src/locales/ar/sidebar.json                 |  8 +-
 src/locales/de/sidebar.json                 |  8 +-
 src/locales/en/sidebar.json                 |  8 +-
 src/locales/es/sidebar.json                 |  8 +-
 src/locales/fr/sidebar.json                 |  8 +-
 src/locales/it/sidebar.json                 |  8 +-
 src/locales/ja/sidebar.json                 |  8 +-
 src/locales/lt/sidebar.json                 |  8 +-
 src/locales/pl/sidebar.json                 |  8 +-
 src/locales/pt/sidebar.json                 |  8 +-
 src/locales/ru/sidebar.json                 |  8 +-
 src/locales/tr/sidebar.json                 |  8 +-
 18 files changed, 153 insertions(+), 141 deletions(-)
 create mode 100644 src/components/controls/panel-toggle.tsx
 delete mode 100644 src/components/controls/panel-toggles.tsx

diff --git a/src/components/controls/annotatedHeader.tsx b/src/components/controls/annotatedHeader.tsx
index 6e3b2561b..0a19ec90a 100644
--- a/src/components/controls/annotatedHeader.tsx
+++ b/src/components/controls/annotatedHeader.tsx
@@ -3,15 +3,19 @@ import { FaInfoCircle } from "react-icons/fa";
 import {StyledTooltip, HeaderIconContainer, HeaderContainer} from "./styles";
 
 type Props = {
+  toggle?: JSX.Element
   title: string
   tooltip: JSX.Element
   mobile: boolean
 }
 
-export const AnnotatedHeader = ({title, tooltip, mobile}: Props) => {
+export const AnnotatedHeader = ({toggle=undefined, title, tooltip, mobile}: Props) => {
   return (
     <HeaderContainer>
-      <span>{title}</span>
+      <span>
+        {toggle && <span>{toggle}</span>}
+        <span>{title}</span>
+      </span>
       {tooltip && !mobile && (
         <>
           <HeaderIconContainer data-tip data-for={title}>
diff --git a/src/components/controls/controls.tsx b/src/components/controls/controls.tsx
index 0ce8fbb72..ef32a6f73 100644
--- a/src/components/controls/controls.tsx
+++ b/src/components/controls/controls.tsx
@@ -16,15 +16,37 @@ import GeoResolution from "./geo-resolution";
 import TransmissionLines from './transmission-lines';
 import NormalizeFrequencies from "./frequency-normalization";
 import AnimationOptions from "./animation-options";
-import PanelToggles from "./panel-toggles";
+import PanelToggle from "./panel-toggle";
 import ToggleTangle from "./toggle-tangle";
 import Language from "./language";
 import { ControlsContainer } from "./styles";
 import FilterData, {FilterInfo} from "./filter";
-import {TreeOptionsInfo, MapOptionsInfo, AnimationOptionsInfo, PanelOptionsInfo,
-  ExplodeTreeInfo, FrequencyInfo, MeasurementsOptionsInfo} from "./miscInfoText";
+import {TreeInfo, MapInfo, AnimationOptionsInfo, PanelLayoutInfo,
+  ExplodeTreeInfo, FrequencyInfo, MeasurementsInfo} from "./miscInfoText";
 import { AnnotatedHeader } from "./annotatedHeader";
 import MeasurementsOptions from "./measurementsOptions";
+import { useSelector } from "react-redux";
+
+// Interface to represent the entire Redux store.
+// Since most of the codebase is not typed yet, add types manually¹ for now.
+// TODO: Move this to src/store.
+// ¹ https://react-redux.js.org/using-react-redux/usage-with-typescript#typing-hooks-manually
+interface RootState {
+  controls: {
+    panelsAvailable: string[]
+    panelsToDisplay: string[]
+    showTreeToo: boolean
+    canTogglePanelLayout: boolean
+
+    // This allows arbitrary prop names while TypeScript adoption is incomplete.
+    // TODO: add all other props explicitly and remove this.
+    [propName: string]: any;
+  }
+
+  // This allows arbitrary prop names while TypeScript adoption is incomplete.
+  // TODO: add all other props explicitly and remove this.
+  [propName: string]: any;
+}
 
 type Props = {
   treeOn: boolean
@@ -37,6 +59,10 @@ type Props = {
 function Controls({ treeOn, mapOn, frequenciesOn, measurementsOn, mobileDisplay }: Props) {
   const { t } = useTranslation();
 
+  const panelsAvailable = useSelector((state: RootState) => state.controls.panelsAvailable);
+  const showTreeToo = useSelector((state: RootState) => state.controls.showTreeToo);
+  const canTogglePanelLayout = useSelector((state: RootState) => state.controls.canTogglePanelLayout);
+
   return (
     <ControlsContainer>
       <ChooseDataset />
@@ -51,9 +77,25 @@ function Controls({ treeOn, mapOn, frequenciesOn, measurementsOn, mobileDisplay
       <AnnotatedHeader title={t("sidebar:Filter Data")} tooltip={FilterInfo} mobile={mobileDisplay}/>
       <FilterData measurementsOn={measurementsOn} />
 
+      {canTogglePanelLayout &&
+        <>
+          <span style={{ paddingTop: "10px" }} />
+          {/* FIXME: update translations */}
+          <AnnotatedHeader title={t("sidebar:Layout")} tooltip={PanelLayoutInfo} mobile={mobileDisplay} />
+          <PanelLayout />
+        </>
+      }
+
+      {panelsAvailable.includes("tree") &&
+        <AnnotatedHeader
+          toggle={<PanelToggle panel="tree" on={treeOn} />}
+          title={t("sidebar:Tree")}
+          tooltip={TreeInfo}
+          mobile={mobileDisplay}
+        />
+      }
       {treeOn &&
         <span>
-          <AnnotatedHeader title={t("sidebar:Tree Options")} tooltip={TreeOptionsInfo} mobile={mobileDisplay}/>
           <ChooseLayout />
           <ChooseMetric />
           <ChooseBranchLabelling />
@@ -64,24 +106,48 @@ function Controls({ treeOn, mapOn, frequenciesOn, measurementsOn, mobileDisplay
         </span>
       }
 
+      {panelsAvailable.includes("measurements") &&
+        <AnnotatedHeader
+          toggle={<PanelToggle panel="measurements" on={measurementsOn} />}
+          title={t("sidebar:Measurements")}
+          tooltip={MeasurementsInfo}
+          mobile={mobileDisplay}
+        />
+      }
       {measurementsOn &&
         <span style={{ marginTop: "10px" }}>
-          <AnnotatedHeader title={t("sidebar:Measurements Options")} tooltip={MeasurementsOptionsInfo} mobile={mobileDisplay}/>
           <MeasurementsOptions />
         </span>
       }
 
+      {/* Prevent the map from being toggled on when a second tree is visible.
+          It is hidden by logic elsewhere.
+      */}
+      {panelsAvailable.includes("map") && !showTreeToo &&
+        <AnnotatedHeader
+          toggle={<PanelToggle panel="map" on={mapOn} />}
+          title={t("sidebar:Map")}
+          tooltip={MapInfo}
+          mobile={mobileDisplay}
+        />
+      }
       {mapOn &&
         <span style={{ marginTop: "10px" }}>
-          <AnnotatedHeader title={t("sidebar:Map Options")} tooltip={MapOptionsInfo} mobile={mobileDisplay}/>
           <GeoResolution />
           <TransmissionLines />
         </span>
       }
 
+      {panelsAvailable.includes("frequencies") &&
+        <AnnotatedHeader
+          toggle={<PanelToggle panel="frequencies" on={frequenciesOn} />}
+          title={t("sidebar:Frequency")}
+          tooltip={FrequencyInfo}
+          mobile={mobileDisplay}
+        />
+      }
       {frequenciesOn &&
         <span style={{ marginTop: "10px" }}>
-          <AnnotatedHeader title={t("sidebar:Frequency Options")} tooltip={FrequencyInfo} mobile={mobileDisplay}/>
           <NormalizeFrequencies />
         </span>
       }
@@ -91,10 +157,6 @@ function Controls({ treeOn, mapOn, frequenciesOn, measurementsOn, mobileDisplay
         <AnimationOptions />
       </span>
 
-      <span style={{ paddingTop: "10px" }} />
-      <AnnotatedHeader title={t("sidebar:Panel Options")} tooltip={PanelOptionsInfo} mobile={mobileDisplay}/>
-      <PanelLayout />
-      <PanelToggles />
       <Language />
     </ControlsContainer>
   );
diff --git a/src/components/controls/miscInfoText.js b/src/components/controls/miscInfoText.js
index eb2bafb91..8ec0777a3 100644
--- a/src/components/controls/miscInfoText.js
+++ b/src/components/controls/miscInfoText.js
@@ -1,7 +1,7 @@
 import React from "react";
 
 
-export const TreeOptionsInfo = (
+export const TreeInfo = (
   <>
     Change various options relating to how the tree is displayed.
     The exact options available depend on the dataset and specific analysis performed.
@@ -12,7 +12,7 @@ export const TreeOptionsInfo = (
 );
 
 
-export const MapOptionsInfo = (
+export const MapInfo = (
   <>
     Change various options relating to how the map is displayed.
     <br/>
@@ -27,11 +27,9 @@ export const AnimationOptionsInfo = (
   </>
 );
 
-export const PanelOptionsInfo = (
+export const PanelLayoutInfo = (
   <>
-    Control which panels are being displayed and whether to show the tree and the map side-by-side (<em>grid</em>) or expanded (<em>full</em>).
-    <br/>
-    Note that what options are available here are dataset specific!
+    Control whether to show the tree and the map side-by-side (<em>grid</em>) or expanded (<em>full</em>).
   </>
 );
 
@@ -42,7 +40,7 @@ export const FrequencyInfo = (
   </>
 );
 
-export const MeasurementsOptionsInfo = (
+export const MeasurementsInfo = (
   <>
     Change collection of measurements and various display options for the collection.
   </>
diff --git a/src/components/controls/panel-layout.js b/src/components/controls/panel-layout.js
index 61df20d95..c2cf1ead5 100644
--- a/src/components/controls/panel-layout.js
+++ b/src/components/controls/panel-layout.js
@@ -19,16 +19,12 @@ const PanelsGridIcon = withTheme(icons.PanelsGrid);
 @connect((state) => {
   return {
     panelLayout: state.controls.panelLayout,
-    canTogglePanelLayout: state.controls.canTogglePanelLayout
   };
 })
 class PanelLayouts extends React.Component {
   render() {
     const { t } = this.props;
-    // const mapAndTree = this.props.panels !== undefined && this.props.panels.indexOf("map") !== -1 && this.props.panels.indexOf("tree") !== -1;
-    if (!this.props.canTogglePanelLayout) {
-      return null;
-    }
+
     return (
       <div style={{marginTop: 0, marginBottom: 10}}>
         <PanelsFullIcon width={22} selected={this.props.panelLayout === "full"}/>
diff --git a/src/components/controls/panel-toggle.tsx b/src/components/controls/panel-toggle.tsx
new file mode 100644
index 000000000..b3b8b60e7
--- /dev/null
+++ b/src/components/controls/panel-toggle.tsx
@@ -0,0 +1,32 @@
+// A slider toggle to adjust the state of a panel via dispatch.
+
+import React from "react";
+import { useDispatch } from "react-redux";
+
+import Toggle from "./toggle";
+import { togglePanelDisplay } from "../../actions/panelDisplay";
+
+type Props = {
+  panel: string
+  on: boolean
+}
+
+const PanelToggle = ({ panel, on }: Props) => {
+  const dispatch = useDispatch();
+
+  // There is no slider label since the title in the annotated header acts as a
+  // visual label.
+  // FIXME: Add a hidden label?
+
+  return (
+    <Toggle
+      display={true}
+      on={on}
+      callback={() => dispatch(togglePanelDisplay(panel))}
+      label={""}
+      style={{display: "inline"}}
+    />
+  );
+};
+
+export default PanelToggle;
diff --git a/src/components/controls/panel-toggles.tsx b/src/components/controls/panel-toggles.tsx
deleted file mode 100644
index 844c01b99..000000000
--- a/src/components/controls/panel-toggles.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { useTranslation } from 'react-i18next';
-
-import Toggle from "./toggle";
-import { togglePanelDisplay } from "../../actions/panelDisplay";
-
-// Interface to represent the entire Redux store.
-// Since most of the codebase is not typed yet, add types manually¹ for now.
-// TODO: Move this to src/store.
-// ¹ https://react-redux.js.org/using-react-redux/usage-with-typescript#typing-hooks-manually
-interface RootState {
-  controls: {
-    panelsAvailable: string[]
-    panelsToDisplay: string[]
-    showTreeToo: boolean
-
-    // This allows arbitrary prop names while TypeScript adoption is incomplete.
-    // TODO: add all other props explicitly and remove this.
-    [propName: string]: any;
-  }
-
-  // This allows arbitrary prop names while TypeScript adoption is incomplete.
-  // TODO: add all other props explicitly and remove this.
-  [propName: string]: any;
-}
-
-export default function PanelToggles() {
-  const dispatch = useDispatch();
-  const { t } = useTranslation();
-
-  const panelsAvailable = useSelector((state: RootState) => state.controls.panelsAvailable);
-  const panelsToDisplay = useSelector((state: RootState) => state.controls.panelsToDisplay);
-  const showTreeToo = useSelector((state: RootState) => state.controls.showTreeToo);
-
-  const panels = panelsAvailable.slice();
-
-  // Prevent the map from being toggled on when a second tree is visible.
-  // It is hidden by logic elsewhere.
-  if (showTreeToo && panels.indexOf("map") !== -1) {
-    panels.splice(panels.indexOf("map"), 1);
-  }
-
-  return <>
-    {panels.map((n) => (
-      <Toggle
-        key={n}
-        display
-        on={panelsToDisplay.indexOf(n) !== -1}
-        callback={() => dispatch(togglePanelDisplay(n))}
-        label={t("sidebar:Show " + n)}
-        style={{ paddingBottom: "10px" }}
-      />
-    ))}
-  </>
-}
diff --git a/src/locales/ar/sidebar.json b/src/locales/ar/sidebar.json
index 003bdaffa..259b74ef3 100644
--- a/src/locales/ar/sidebar.json
+++ b/src/locales/ar/sidebar.json
@@ -2,7 +2,6 @@
   "Dataset": "مجموعة بيانات",
   "Date Range": "النطاق الزمني",
   "Color By": "اللون حسب",
-  "Tree Options": "خيارات الشجرة",
   "Layout": "التخطيط",
   "rectangular": "مستطيل",
   "radial": "شعاعي",
@@ -15,15 +14,14 @@
   "Branch Labels": "تسميات الفروع",
   "Search Strains": "البحث على السلالات",
   "Second Tree": "الشجرة الثانية",
-  "Map Options": "خيارات الخريطة",
   "Geographic resolution": "دقة الخريطة",
   "Animation Speed": "سرعة الحركة",
   "Loop animation": "حركة متكررة",
   "Animate cumulative history": "تحريك التاريخ التراكمي",
   "Panel Options": "خيارات اللوحة",
-  "Show tree": "اظهار الشجرة",
-  "Show map": "اظهار الخريطة",
-  "Show entropy": "اظهار الانتروبيا",
+  "Tree": "الشجرة",
+  "Map": "الخريطة",
+  "Entropy": "الانتروبيا",
   "Language": "اللغة",
   "Slow": "بطيئة",
   "Medium": "متوسطة",
diff --git a/src/locales/de/sidebar.json b/src/locales/de/sidebar.json
index 1c31c5788..4c7775d46 100644
--- a/src/locales/de/sidebar.json
+++ b/src/locales/de/sidebar.json
@@ -2,7 +2,6 @@
   "Dataset": "Datensatz",
   "Date Range": "Datenintervall",
   "Color By": "färben nach",
-  "Tree Options": "Baumeinstellungen",
   "Layout": "Anordnung",
   "rectangular": "rechteckig",
   "radial": "kreisförmig",
@@ -14,15 +13,14 @@
   "Branch Labels": "Astbeschriftungen",
   "Search Strains": "In Strängen suchen",
   "Second Tree": "Zweiter Baum",
-  "Map Options": "Karteneinstellungen",
   "Geographic resolution": "Geographische Aufteilung",
   "Animation Speed": "Geschwindigkeit der Animation",
   "Loop animation": "In einer Schleife animieren",
   "Animate cumulative history": "Gesamten Verlauf miteinbeziehen",
   "Panel Options": "Hauptansicht-Einstellungen",
-  "Show tree": "Baum anzeigen",
-  "Show map": "Karte anzeigen",
-  "Show entropy": "Entropie anzeigen",
+  "Tree": "Baum",
+  "Map": "Karte",
+  "Entropy": "Entropie",
   "Language": "Sprache",
   "Slow": "Langsam",
   "Medium": "Mittel",
diff --git a/src/locales/en/sidebar.json b/src/locales/en/sidebar.json
index 0e4ffc229..fe78fd56a 100644
--- a/src/locales/en/sidebar.json
+++ b/src/locales/en/sidebar.json
@@ -2,7 +2,6 @@
   "Dataset": "Dataset",
   "Date Range": "Date Range",
   "Color By": "Color By",
-  "Tree Options": "Tree Options",
   "Layout": "Layout",
   "rectangular": "rectangular",
   "radial": "radial",
@@ -15,15 +14,14 @@
   "Branch Labels": "Branch Labels",
   "Search Strains": "Search Strains",
   "Second Tree": "Second Tree",
-  "Map Options": "Map Options",
   "Geographic resolution": "Geographic resolution",
   "Animation Speed": "Animation Speed",
   "Loop animation": "Loop animation",
   "Animate cumulative history": "Animate cumulative history",
   "Panel Options": "Panel Options",
-  "Show tree": "Show tree",
-  "Show map": "Show map",
-  "Show entropy": "Show entropy",
+  "Tree": "Tree",
+  "Map": "Map",
+  "Entropy": "Entropy",
   "Language": "Language",
   "Slow": "Slow",
   "Medium": "Medium",
diff --git a/src/locales/es/sidebar.json b/src/locales/es/sidebar.json
index d93a81e75..4f749afaa 100644
--- a/src/locales/es/sidebar.json
+++ b/src/locales/es/sidebar.json
@@ -2,7 +2,6 @@
   "Dataset": "Conjunto de datos",
   "Date Range": "Rango de fechas",
   "Color By": "Asigna colores por",
-  "Tree Options": "Opciones del árbol",
   "Layout": "Diseño",
   "rectangular": "rectangular",
   "radial": "radial",
@@ -14,15 +13,14 @@
   "Branch Labels": "Etiquetas de rama",
   "Search Strains": "Buscar cepas",
   "Second Tree": "Segundo árbol",
-  "Map Options": "Opciones del mapa",
   "Geographic resolution": "Región geográfica",
   "Animation Speed": "Velocidad de la animación",
   "Loop animation": "Repitir la animación",
   "Animate cumulative history": "Animar historial cumulativo",
   "Panel Options": "Opciones del panel",
-  "Show tree": "Visualizar árbol",
-  "Show map": "Visualizar mapa",
-  "Show entropy": "Visualizar entropía",
+  "Tree": "Árbol",
+  "Map": "Mapa",
+  "Entropy": "Entropía",
   "Language": "Idioma",
   "Slow": "Lento",
   "Medium": "Medio",
diff --git a/src/locales/fr/sidebar.json b/src/locales/fr/sidebar.json
index 7ed38c1de..48b255b4a 100644
--- a/src/locales/fr/sidebar.json
+++ b/src/locales/fr/sidebar.json
@@ -2,7 +2,6 @@
   "Dataset": "Jeu de données",
   "Date Range": "Intervalle de dates",
   "Color By": "Couleur par",
-  "Tree Options": "Options d'arborescence",
   "Layout": "Disposition",
   "rectangular": "rectangulaire",
   "radial": "radiale",
@@ -15,15 +14,14 @@
   "Branch Labels": "Libellés de branches",
   "Search Strains": "Chercher souches",
   "Second Tree": "Deuxième arbre",
-  "Map Options": "Options de carte",
   "Geographic resolution": "Résolution géographique",
   "Animation Speed": "Vitesse d'animation",
   "Loop animation": "Animation en boucle",
   "Animate cumulative history": "Animer l'historique cumulatif",
   "Panel Options": "Options du panneau",
-  "Show tree": "Montrer arbre",
-  "Show map": "Montrer carte",
-  "Show entropy": "Montrer entropie",
+  "Tree": "Arbre",
+  "Map": "Carte",
+  "Entropy": "Entropie",
   "Language": "Langue",
   "Slow": "Lent",
   "Medium": "Moyen",
diff --git a/src/locales/it/sidebar.json b/src/locales/it/sidebar.json
index 81e647a4a..fad3fbb5f 100644
--- a/src/locales/it/sidebar.json
+++ b/src/locales/it/sidebar.json
@@ -2,7 +2,6 @@
   "Dataset": "Dataset",
   "Date Range": "Intervallo di date",
   "Color By": "Colore di",
-  "Tree Options": "Opzioni di albero",
   "Layout": "Disposizione",
   "rectangular": "rettangolare",
   "radial": "radiale",
@@ -15,15 +14,14 @@
   "Branch Labels": "Etichette di branche",
   "Search Strains": "Cercare ceppi",
   "Second Tree": "Secondo albero",
-  "Map Options": "Opzioni di mappa",
   "Geographic resolution": "Risoluzione geografica",
   "Animation Speed": "Velocità di animazioni",
   "Loop animation": "Animazioni in loop",
   "Animate cumulative history": "Animare la storia cumulativa",
   "Panel Options": "Opzioni di pannello",
-  "Show tree": "Mostrare albero",
-  "Show map": "Mostrare mappa",
-  "Show entropy": "Mostrare entropia",
+  "Tree": "Albero",
+  "Map": "Mappa",
+  "Entropy": "Entropia",
   "Language": "Lingua",
   "Slow": "Lento",
   "Medium": "Medio",
diff --git a/src/locales/ja/sidebar.json b/src/locales/ja/sidebar.json
index a6d830af1..9fe5e1293 100644
--- a/src/locales/ja/sidebar.json
+++ b/src/locales/ja/sidebar.json
@@ -2,7 +2,6 @@
   "Dataset": "データセット",
   "Date Range": "データ範囲",
   "Color By": "色分け",
-  "Tree Options": "ツリーのオプション",
   "Layout": "レイアウト",
   "rectangular": "矩形",
   "radial": "放射状",
@@ -15,15 +14,14 @@
   "Branch Labels": "枝のラベル",
   "Search Strains": "系統を検索",
   "Second Tree": "第二ツリー",
-  "Map Options": "地図のオプション",
   "Geographic resolution": "地域分けの単位",
   "Animation Speed": "アニメーション速度",
   "Loop animation": "アニメーションを繰り返し",
   "Animate cumulative history": "累積の履歴をアニメーション",
   "Panel Options": "パネルのオプション",
-  "Show tree": "ツリーを表示",
-  "Show map": "地図を表示",
-  "Show entropy": "エントロピーを表示",
+  "Tree": "ツリー",
+  "Map": "地図",
+  "Entropy": "エントロピー",
   "Language": "言語",
   "Slow": "遅い",
   "Medium": "普通",
diff --git a/src/locales/lt/sidebar.json b/src/locales/lt/sidebar.json
index f2fef0e68..0f3c9d3be 100644
--- a/src/locales/lt/sidebar.json
+++ b/src/locales/lt/sidebar.json
@@ -2,7 +2,6 @@
   "Dataset": "Duomenų rinkinys",
   "Date Range": "Laiko ribos",
   "Color By": "Spalvinti pagal",
-  "Tree Options": "Medžio parinktys",
   "Layout": "Išdėstymas",
   "rectangular": "stačiakampis",
   "radial": "apskritas",
@@ -15,15 +14,14 @@
   "Branch Labels": "Šakų žymės",
   "Search Strains": "Ieškoti štamų",
   "Second Tree": "Antras medis",
-  "Map Options": "Žemėlapio parinktys",
   "Geographic resolution": "Geografijos mastas",
   "Animation Speed": "Animacijos greitis",
   "Loop animation": "Kartoti laiko atkarpą",
   "Animate cumulative history": "Rodyti kauptinę istoriją",
   "Panel Options": "Langų parinktys",
-  "Show tree": "Rodyti medį",
-  "Show map": "Rodyti žemėlapį",
-  "Show entropy": "Rodyti entropiją",
+  "Tree": "Medį",
+  "Map": "Žemėlapį",
+  "Entropy": "Entropiją",
   "Language": "Kalba",
   "Slow": "Lėtas",
   "Medium": "Vidutiniškas",
diff --git a/src/locales/pl/sidebar.json b/src/locales/pl/sidebar.json
index 8e1b74659..490b8a8d7 100644
--- a/src/locales/pl/sidebar.json
+++ b/src/locales/pl/sidebar.json
@@ -2,7 +2,6 @@
   "Dataset": "Zbiór danych",
   "Date Range": "Zakres dat",
   "Color By": "Kolorowanie według",
-  "Tree Options": "Opcje drzewa",
   "Layout": "Układ",
   "rectangular": "prostokątny",
   "radial": "radialny",
@@ -16,7 +15,6 @@
   "Branch Labels": "Etykiety gałęzi",
   "Search Strains": "Wyszukaj warianty",
   "Second Tree": "Drugie drzewo",
-  "Map Options": "Opcje mapy",
   "Frequency Options": "Opcje częstości",
   "Normalize frequencies": "Normalizuj częstości",
   "Geographic resolution": "Rozdzielczość geograficzna",
@@ -24,9 +22,9 @@
   "Loop animation": "Animacja pętli",
   "Animate cumulative history": "Animuj historię zbiorczą",
   "Panel Options": "Opcje panelu",
-  "Show tree": "Pokaż drzewo",
-  "Show map": "Pokaż mapę",
-  "Show entropy": "Pokaż entropię",
+  "Tree": "Drzewo",
+  "Map": "Mapę",
+  "Entropy": "Entropię",
   "Show transmission lines": "Pokaż drogi transmisji",
   "Tip Labels": "Etykiety końcówek",
   "Language": "Język",
diff --git a/src/locales/pt/sidebar.json b/src/locales/pt/sidebar.json
index a81f11c62..85a7bd91a 100644
--- a/src/locales/pt/sidebar.json
+++ b/src/locales/pt/sidebar.json
@@ -2,7 +2,6 @@
   "Dataset": "Conjunto de Dados",
   "Date Range": "Intervalo de Datas",
   "Color By": "Atribuir cores por",
-  "Tree Options": "Opções de Árvore",
   "Layout": "Desenho",
   "rectangular": "retangular",
   "radial": "radial",
@@ -15,15 +14,14 @@
   "Branch Labels": "Rótulos dos ramos",
   "Search Strains": "Pesquisar Estirpes",
   "Second Tree": "Segunda Árvore",
-  "Map Options": "Opções do Mapa",
   "Geographic resolution": "Localização geográfica",
   "Animation Speed": "Velocidade de Animação",
   "Loop animation": "Repetir a animação",
   "Animate cumulative history": "Animar o histórico acumulado",
   "Panel Options": "Painel de Opções",
-  "Show tree": "Mostrar árvore",
-  "Show map": "Mostrar mapa",
-  "Show entropy": "Mostrar entropia",
+  "Tree": "Árvore",
+  "Map": "Mapa",
+  "Entropy": "Entropia",
   "Language": "Idioma",
   "Slow": "Lento",
   "Medium": "Médio",
diff --git a/src/locales/ru/sidebar.json b/src/locales/ru/sidebar.json
index 694cf85ad..7d83d068f 100644
--- a/src/locales/ru/sidebar.json
+++ b/src/locales/ru/sidebar.json
@@ -2,7 +2,6 @@
   "Dataset": "Данные",
   "Date Range": "Временной Диапазон",
   "Color By": "Цвет",
-  "Tree Options": "Настройки Дерева",
   "Layout": "Тип диаграммы",
   "rectangular": "прямоугольный",
   "radial": "радиальный",
@@ -14,15 +13,14 @@
   "Branch Labels": "Названия Ветвей",
   "Search Strains": "Поиск Штаммов",
   "Second Tree": "Второе Дерево",
-  "Map Options": "Настройки Карты",
   "Geographic resolution": "Географическое разрешение",
   "Animation Speed": "Скорость Анимации",
   "Loop animation": "Повтор анимации",
   "Animate cumulative history": "Анимировать кумулятивную историю",
   "Panel Options": "Настройки Панели",
-  "Show tree": "Показать дерево",
-  "Show map": "Показать карту",
-  "Show entropy": "Показать энтропию",
+  "Tree": "Дерево",
+  "Map": "Карту",
+  "Entropy": "Энтропию",
   "Language": "Язык",
   "Slow": "Медленный",
   "Medium": "Средний",
diff --git a/src/locales/tr/sidebar.json b/src/locales/tr/sidebar.json
index be800a200..b2e30f9f6 100644
--- a/src/locales/tr/sidebar.json
+++ b/src/locales/tr/sidebar.json
@@ -2,7 +2,6 @@
   "Dataset": "Veri kümesi",
   "Date Range": "Tarih Aralığı",
   "Color By": "Şuna Göre Renklendir",
-  "Tree Options": "Ağaç Seçenekleri",
   "Layout": "Görünüm",
   "rectangular": "dikdörtgensi",
   "radial": "dairesel",
@@ -15,15 +14,14 @@
   "Branch Labels": "Dal Etiketleri",
   "Search Strains": "Suşları Ara",
   "Second Tree": "İkinci Ağaç",
-  "Map Options": "Harita Seçenekleri",
   "Geographic resolution": "Coğrafik çözünürlük",
   "Animation Speed": "Animasyon Hızı",
   "Loop animation": "Döngülü animasyon",
   "Animate cumulative history": "Kümülatif tarihçeyi canlandır",
   "Panel Options": "Panel Seçenekleri",
-  "Show tree": "Ağacı göster",
-  "Show map": "Haritayı göster",
-  "Show entropy": "Entropiyi göster",
+  "Tree": "Ağacı",
+  "Map": "Haritayı",
+  "Entropy": "Entropiyi",
   "Language": "Dil",
   "Slow": "Yavaş",
   "Medium": "Orta",

From 0166bf38a983b4ff69316f0e6b49a308f9e1c0bc Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Fri, 6 Oct 2023 13:40:30 -0700
Subject: [PATCH 6/9] simplify label empty string

---
 src/components/controls/panel-toggle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/controls/panel-toggle.tsx b/src/components/controls/panel-toggle.tsx
index b3b8b60e7..0e76c8c09 100644
--- a/src/components/controls/panel-toggle.tsx
+++ b/src/components/controls/panel-toggle.tsx
@@ -23,7 +23,7 @@ const PanelToggle = ({ panel, on }: Props) => {
       display={true}
       on={on}
       callback={() => dispatch(togglePanelDisplay(panel))}
-      label={""}
+      label=""
       style={{display: "inline"}}
     />
   );

From 39e6d11dce8282727973c65de0cc09e713ebb0f6 Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Fri, 6 Oct 2023 15:34:22 -0700
Subject: [PATCH 7/9] Use separate styled component for font-related styles

This keeps the styling closer to where it is used.
---
 src/components/controls/annotatedHeader.tsx | 4 ++--
 src/components/controls/styles.js           | 7 +++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/controls/annotatedHeader.tsx b/src/components/controls/annotatedHeader.tsx
index 0a19ec90a..b6c592135 100644
--- a/src/components/controls/annotatedHeader.tsx
+++ b/src/components/controls/annotatedHeader.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { FaInfoCircle } from "react-icons/fa";
-import {StyledTooltip, HeaderIconContainer, HeaderContainer} from "./styles";
+import {StyledTooltip, HeaderIconContainer, HeaderContainer, HeaderTitle} from "./styles";
 
 type Props = {
   toggle?: JSX.Element
@@ -14,7 +14,7 @@ export const AnnotatedHeader = ({toggle=undefined, title, tooltip, mobile}: Prop
     <HeaderContainer>
       <span>
         {toggle && <span>{toggle}</span>}
-        <span>{title}</span>
+        <HeaderTitle>{title}</HeaderTitle>
       </span>
       {tooltip && !mobile && (
         <>
diff --git a/src/components/controls/styles.js b/src/components/controls/styles.js
index 45555053f..40c22bb23 100644
--- a/src/components/controls/styles.js
+++ b/src/components/controls/styles.js
@@ -24,12 +24,15 @@ export const ControlsContainer = styled.div`
 export const HeaderContainer = styled.div`
   display: flex;
   justify-content: space-between;
-  font-family: ${(props) => props.theme["font-family"]};
-  font-size: 16px;
   line-height: 28px;
   min-height: 28px; /* needed for safari, else the div height is 0 */
   margin-top: 15px;
   margin-bottom: 5px;
+`;
+
+export const HeaderTitle = styled.span`
+  font-family: ${(props) => props.theme["font-family"]};
+  font-size: 16px;
   font-weight: 500;
   color: ${(props) => props.theme.color};
 `;

From 8882e72423d9f7843cfe52a4a2eef1af032ceaa6 Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Mon, 9 Oct 2023 14:54:23 -0700
Subject: [PATCH 8/9] Add horizontal divider line

---
 src/components/controls/styles.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/controls/styles.js b/src/components/controls/styles.js
index 40c22bb23..35fd430b0 100644
--- a/src/components/controls/styles.js
+++ b/src/components/controls/styles.js
@@ -28,6 +28,8 @@ export const HeaderContainer = styled.div`
   min-height: 28px; /* needed for safari, else the div height is 0 */
   margin-top: 15px;
   margin-bottom: 5px;
+  border-top: 1px solid #d3d3d3;
+  padding-top: 9px;
 `;
 
 export const HeaderTitle = styled.span`

From 80063fae060c04ce6890982e41fa6db87bc8d281 Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Mon, 9 Oct 2023 14:57:00 -0700
Subject: [PATCH 9/9] [wip] panel info icon on immediate right, toggle on far
 right

---
 src/components/controls/annotatedHeader.tsx | 26 ++++++++++-----------
 src/components/controls/panel-toggle.tsx    |  1 -
 src/components/controls/styles.js           |  3 +--
 3 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/components/controls/annotatedHeader.tsx b/src/components/controls/annotatedHeader.tsx
index b6c592135..6b535c40e 100644
--- a/src/components/controls/annotatedHeader.tsx
+++ b/src/components/controls/annotatedHeader.tsx
@@ -12,20 +12,20 @@ type Props = {
 export const AnnotatedHeader = ({toggle=undefined, title, tooltip, mobile}: Props) => {
   return (
     <HeaderContainer>
-      <span>
-        {toggle && <span>{toggle}</span>}
+      <div>
         <HeaderTitle>{title}</HeaderTitle>
-      </span>
-      {tooltip && !mobile && (
-        <>
-          <HeaderIconContainer data-tip data-for={title}>
-            <FaInfoCircle/>
-          </HeaderIconContainer>
-          <StyledTooltip place="bottom" type="dark" effect="solid" id={title}>
-            {tooltip}
-          </StyledTooltip>
-        </>
-      )}
+        {tooltip && !mobile && (
+          <>
+            <HeaderIconContainer data-tip data-for={title}>
+              <FaInfoCircle />
+            </HeaderIconContainer>
+            <StyledTooltip place="bottom" type="dark" effect="solid" id={title}>
+              {tooltip}
+            </StyledTooltip>
+          </>
+        )}
+      </div>
+      {toggle !== undefined && toggle}
     </HeaderContainer>
   );
 };
diff --git a/src/components/controls/panel-toggle.tsx b/src/components/controls/panel-toggle.tsx
index 0e76c8c09..58169ec89 100644
--- a/src/components/controls/panel-toggle.tsx
+++ b/src/components/controls/panel-toggle.tsx
@@ -24,7 +24,6 @@ const PanelToggle = ({ panel, on }: Props) => {
       on={on}
       callback={() => dispatch(togglePanelDisplay(panel))}
       label=""
-      style={{display: "inline"}}
     />
   );
 };
diff --git a/src/components/controls/styles.js b/src/components/controls/styles.js
index 35fd430b0..2b6d1a475 100644
--- a/src/components/controls/styles.js
+++ b/src/components/controls/styles.js
@@ -40,8 +40,7 @@ export const HeaderTitle = styled.span`
 `;
 
 export const HeaderIconContainer = styled.span`
-  padding-top: 4px;
-  padding-right: 3px;
+  padding-left: 6px;
   cursor: help;
   color: #888;
 `;