From 82015f3afd43c409a602b9b113d78a999be90a1d 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] 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        | 82 ++++++++++++++++++---
 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   | 54 --------------
 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, 151 insertions(+), 139 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..275c08a31 100644
--- a/src/components/controls/controls.tsx
+++ b/src/components/controls/controls.tsx
@@ -16,15 +16,35 @@ 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";
+
+// TODO: Move this to src/store.
+// https://react-redux.js.org/using-react-redux/usage-with-typescript#define-root-state-and-dispatch-types
+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 +57,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 +75,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 +104,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 +155,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 21769e062..000000000
--- a/src/components/controls/panel-toggles.tsx
+++ /dev/null
@@ -1,54 +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";
-
-// TODO: Move this to src/store.
-// https://react-redux.js.org/using-react-redux/usage-with-typescript#define-root-state-and-dispatch-types
-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",