Prepare for panel-specific header changes

Split AnnotatedHeader into AnnotatedTitle and ControlHeader. A future commit will introduce PanelHeader.
nextstrain · Oct 19, 2023 · 2f69274 · 2f69274
1 parent 1880083
commit 2f69274
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 18 deletions.
diff --git a/src/components/controls/annotatedHeader.tsx → src/components/controls/annotatedTitle.tsx b/src/components/controls/annotatedHeader.tsx → src/components/controls/annotatedTitle.tsx
@@ -1,16 +1,16 @@
 import React from "react";
 import { FaInfoCircle } from "react-icons/fa";
-import {StyledTooltip, HeaderIconContainer, HeaderContainer, HeaderTitle} from "./styles";
+import {StyledTooltip, HeaderIconContainer, HeaderTitle} from "./styles";
 
 type Props = {
   title: string
   tooltip: JSX.Element
   mobile: boolean
 }
 
-export const AnnotatedHeader = ({title, tooltip, mobile}: Props) => {
+export const AnnotatedTitle = ({title, tooltip, mobile}: Props) => {
   return (
-    <HeaderContainer>
+    <span>
       <HeaderTitle>{title}</HeaderTitle>
       {tooltip && !mobile && (
         <>
@@ -22,7 +22,7 @@ export const AnnotatedHeader = ({title, tooltip, mobile}: Props) => {
           </StyledTooltip>
         </>
       )}
-    </HeaderContainer>
+    </span>
   );
 };
 
diff --git a/src/components/controls/choose-dataset.js b/src/components/controls/choose-dataset.js
@@ -2,7 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import { withTranslation } from "react-i18next";
 import ChooseDatasetSelect from "./choose-dataset-select";
-import { AnnotatedHeader } from "./annotatedHeader";
+import { ControlHeader } from "./controlHeader";
 
 // const DroppedFiles = withTheme((props) => {
 //   /* TODO: this shouldn't be in the auspice src, rather injected as an extension when needed */
@@ -54,7 +54,7 @@ class ChooseDataset extends React.Component {
 
     return (
       <>
-        <AnnotatedHeader title={t("sidebar:Dataset")} />
+        <ControlHeader title={t("sidebar:Dataset")} />
         {options.map((option, optionIdx) => (
           <ChooseDatasetSelect
             key={displayedDataset[optionIdx]}

diff --git a/src/components/controls/controlHeader.tsx b/src/components/controls/controlHeader.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { HeaderContainer } from "./styles";
+import { AnnotatedTitle } from "./annotatedTitle";
+
+type Props = {
+  title: string
+  tooltip: JSX.Element
+  mobile: boolean
+}
+
+export const ControlHeader = ({title, tooltip, mobile }: Props) => {
+  return (
+    <HeaderContainer>
+      <AnnotatedTitle
+        title={title}
+        tooltip={tooltip}
+        mobile={mobile} />
+    </HeaderContainer>
+  );
+};
diff --git a/src/components/controls/controls.tsx b/src/components/controls/controls.tsx
@@ -24,7 +24,7 @@ import { ControlsContainer } from "./styles";
 import FilterData, {FilterInfo} from "./filter";
 import {TreeOptionsInfo, MapOptionsInfo, AnimationOptionsInfo, PanelOptionsInfo,
   ExplodeTreeInfo, FrequencyInfo, MeasurementsOptionsInfo} from "./miscInfoText";
-import { AnnotatedHeader } from "./annotatedHeader";
+import { ControlHeader } from "./controlHeader";
 import MeasurementsOptions from "./measurementsOptions";
 import { RootState } from "../../store";
 
@@ -46,19 +46,19 @@ function Controls({ mobileDisplay }: Props) {
     <ControlsContainer>
       <ChooseDataset />
 
-      <AnnotatedHeader title={t("sidebar:Date Range")} tooltip={DateRangeInfo} mobile={mobileDisplay}/>
+      <ControlHeader title={t("sidebar:Date Range")} tooltip={DateRangeInfo} mobile={mobileDisplay}/>
       <DateRangeInputs />
       <AnimationControls />
 
-      <AnnotatedHeader title={t("sidebar:Color By")} tooltip={ColorByInfo} mobile={mobileDisplay}/>
+      <ControlHeader title={t("sidebar:Color By")} tooltip={ColorByInfo} mobile={mobileDisplay}/>
       <ColorBy />
 
-      <AnnotatedHeader title={t("sidebar:Filter Data")} tooltip={FilterInfo} mobile={mobileDisplay}/>
+      <ControlHeader title={t("sidebar:Filter Data")} tooltip={FilterInfo} mobile={mobileDisplay}/>
       <FilterData measurementsOn={measurementsOn} />
 
       {treeOn &&
         <span>
-          <AnnotatedHeader title={t("sidebar:Tree Options")} tooltip={TreeOptionsInfo} mobile={mobileDisplay}/>
+          <ControlHeader title={t("sidebar:Tree Options")} tooltip={TreeOptionsInfo} mobile={mobileDisplay}/>
           <ChooseLayout />
           <ChooseMetric />
           <ChooseBranchLabelling />
@@ -71,33 +71,33 @@ function Controls({ mobileDisplay }: Props) {
 
       {measurementsOn &&
         <span style={{ marginTop: "10px" }}>
-          <AnnotatedHeader title={t("sidebar:Measurements Options")} tooltip={MeasurementsOptionsInfo} mobile={mobileDisplay}/>
+          <ControlHeader title={t("sidebar:Measurements Options")} tooltip={MeasurementsOptionsInfo} mobile={mobileDisplay}/>
           <MeasurementsOptions />
         </span>
       }
 
       {mapOn &&
         <span style={{ marginTop: "10px" }}>
-          <AnnotatedHeader title={t("sidebar:Map Options")} tooltip={MapOptionsInfo} mobile={mobileDisplay}/>
+          <ControlHeader title={t("sidebar:Map Options")} tooltip={MapOptionsInfo} mobile={mobileDisplay}/>
           <GeoResolution />
           <TransmissionLines />
         </span>
       }
 
       {frequenciesOn &&
         <span style={{ marginTop: "10px" }}>
-          <AnnotatedHeader title={t("sidebar:Frequency Options")} tooltip={FrequencyInfo} mobile={mobileDisplay}/>
+          <ControlHeader title={t("sidebar:Frequency Options")} tooltip={FrequencyInfo} mobile={mobileDisplay}/>
           <NormalizeFrequencies />
         </span>
       }
 
       <span style={{ marginTop: "10px" }}>
-        <AnnotatedHeader title={t("sidebar:Animation Options")} tooltip={AnimationOptionsInfo} mobile={mobileDisplay}/>
+        <ControlHeader title={t("sidebar:Animation Options")} tooltip={AnimationOptionsInfo} mobile={mobileDisplay}/>
         <AnimationOptions />
       </span>
 
       <span style={{ paddingTop: "10px" }} />
-      <AnnotatedHeader title={t("sidebar:Panel Options")} tooltip={PanelOptionsInfo} mobile={mobileDisplay}/>
+      <ControlHeader title={t("sidebar:Panel Options")} tooltip={PanelOptionsInfo} mobile={mobileDisplay}/>
       <PanelLayout />
       <PanelToggles />
       <Language />

diff --git a/src/components/controls/styles.js b/src/components/controls/styles.js
@@ -38,8 +38,7 @@ export const HeaderTitle = styled.span`
 `;
 
 export const HeaderIconContainer = styled.span`
-  padding-top: 4px;
-  padding-right: 3px;
+  padding-left: 6px;
   cursor: help;
   color: #888;
 `;