squash! Move panel toggles to control headers

Repurpose and move the section "Panel Options" to the top as "Layout".
Conditionally render that entire section including the header.

src/components/controls/controls.tsx

@@ -21,7 +21,7 @@ import ToggleTangle from "./toggle-tangle";
 import Language from "./language";
 import { ControlsContainer } from "./styles";
 import FilterData, {FilterInfo} from "./filter";
-import {TreeInfo, MapInfo, AnimationOptionsInfo, PanelOptionsInfo,
+import {TreeInfo, MapInfo, AnimationOptionsInfo, PanelLayoutInfo,
   ExplodeTreeInfo, FrequencyInfo, MeasurementsInfo} from "./miscInfoText";
 import { AnnotatedHeader } from "./annotatedHeader";
 import MeasurementsOptions from "./measurementsOptions";
@@ -34,6 +34,7 @@ interface RootState {
     panelsAvailable: string[]
     panelsToDisplay: string[]
     showTreeToo: boolean
+    canTogglePanelLayout: boolean
   }
 }
 
@@ -49,6 +50,7 @@ function Controls({ treeOn, mapOn, frequenciesOn, measurementsOn, mobileDisplay
   const { t } = useTranslation();
 
   const panelsAvailable = useSelector((state: RootState) => state.controls.panelsAvailable);
+  const canTogglePanelLayout = useSelector((state: RootState) => state.controls.canTogglePanelLayout);
 
   return (
     <ControlsContainer>
@@ -64,6 +66,15 @@ 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} />}
@@ -132,9 +143,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 />
       <Language />
     </ControlsContainer>
   );

src/components/controls/miscInfoText.js

@@ -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>).
   </>
 );
 

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"}/>