From 2f692744e4a5ddf39464602755f5082c1ed5f2b3 Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Thu, 19 Oct 2023 11:27:42 -0700
Subject: [PATCH] Prepare for panel-specific header changes

Split AnnotatedHeader into AnnotatedTitle and ControlHeader. A future
commit will introduce PanelHeader.
---
 ...annotatedHeader.tsx => annotatedTitle.tsx} |  8 ++++----
 src/components/controls/choose-dataset.js     |  4 ++--
 src/components/controls/controlHeader.tsx     | 20 +++++++++++++++++++
 src/components/controls/controls.tsx          | 20 +++++++++----------
 src/components/controls/styles.js             |  3 +--
 5 files changed, 37 insertions(+), 18 deletions(-)
 rename src/components/controls/{annotatedHeader.tsx => annotatedTitle.tsx} (71%)
 create mode 100644 src/components/controls/controlHeader.tsx

diff --git a/src/components/controls/annotatedHeader.tsx b/src/components/controls/annotatedTitle.tsx
similarity index 71%
rename from src/components/controls/annotatedHeader.tsx
rename to src/components/controls/annotatedTitle.tsx
index 8ebf5e693..0c3da1e78 100644
--- a/src/components/controls/annotatedHeader.tsx
+++ b/src/components/controls/annotatedTitle.tsx
@@ -1,6 +1,6 @@
 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
@@ -8,9 +8,9 @@ type Props = {
   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
index c3f0c7bac..134fcfe12 100644
--- 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
new file mode 100644
index 000000000..4872bf221
--- /dev/null
+++ 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
index 3a1f55331..ea958a37f 100644
--- 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,14 +71,14 @@ 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>
@@ -86,18 +86,18 @@ function Controls({ mobileDisplay }: Props) {
 
       {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
index 40c22bb23..1a5cbc171 100644
--- 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;
 `;