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.
nextstrain · Oct 12, 2023 · 9838191 · 9838191
1 parent d5ee1e1
commit 9838191
Show file tree

Hide file tree

Showing 19 changed files with 145 additions and 135 deletions.
diff --git a/src/components/controls/annotatedHeader.tsx b/src/components/controls/annotatedHeader.tsx
@@ -3,25 +3,29 @@ import { FaInfoCircle } from "react-icons/fa";
 import {StyledTooltip, HeaderIconContainer, HeaderContainer, HeaderTitle} 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>
-      <HeaderTitle>{title}</HeaderTitle>
-      {tooltip && !mobile && (
-        <>
-          <HeaderIconContainer data-tip data-for={title}>
-            <FaInfoCircle/>
-          </HeaderIconContainer>
-          <StyledTooltip place="bottom" type="dark" effect="solid" id={title}>
-            {tooltip}
-          </StyledTooltip>
-        </>
-      )}
+      <div>
+        <HeaderTitle>{title}</HeaderTitle>
+        {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/controls.tsx b/src/components/controls/controls.tsx
@@ -16,15 +16,17 @@ 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";
+import { RootState } from "../../store";
 
 type Props = {
   treeOn: boolean
@@ -37,6 +39,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 +57,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 +86,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 +137,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
@@ -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
@@ -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
@@ -0,0 +1,31 @@
+// A slider toggle to adjust the state of a panel via dispatch.
+
+import React from "react";
+import { useAppDispatch } from "../../hooks";
+
+import Toggle from "./toggle";
+import { togglePanelDisplay } from "../../actions/panelDisplay";
+
+type Props = {
+  panel: string
+  on: boolean
+}
+
+const PanelToggle = ({ panel, on }: Props) => {
+  const dispatch = useAppDispatch();
+
+  // 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=""
+    />
+  );
+};
+
+export default PanelToggle;
diff --git a/src/components/controls/panel-toggles.tsx b/src/components/controls/panel-toggles.tsx
diff --git 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`
@@ -38,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;
 `;

diff --git 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
@@ -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
@@ -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",