Revert "Add ability to show/hide panel options"

For preview.
nextstrain · Nov 9, 2023 · f3719d5 · f3719d5
1 parent 6753065
commit f3719d5
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 71 deletions.
diff --git a/src/components/controls/panelChevron.tsx b/src/components/controls/panelChevron.tsx
diff --git a/src/components/controls/panelHeader.tsx b/src/components/controls/panelHeader.tsx
@@ -4,7 +4,6 @@ import { togglePanelDisplay } from "../../actions/panelDisplay";
 import { HeaderContainer } from "./styles";
 import { PanelToggle, On } from "./panelToggle";
 import { AnnotatedTitle, Mobile, Title, Tooltip } from "./annotatedTitle";
-import { PanelChevron } from "./panelChevron";
 
 /** Panel identifier used internally. */
 export type PanelId = string;
@@ -15,44 +14,25 @@ type Props = {
   tooltip?: Tooltip
   panelIsVisible: On
   mobile: Mobile
-
-  /** Indicates whether there are options for the panel. */
-  hasOptions: boolean
-
-  /** Indicates options visibility. */
-  optionsAreVisible: boolean
-
-  /** Update options visibility. */
-  setOptionsAreVisible: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 /**
  * A header used by all panel controls, containing an interactive title.
  */
-export const PanelHeader = ({ panel, title, tooltip, panelIsVisible, hasOptions, optionsAreVisible, setOptionsAreVisible, mobile }: Props) => {
+export const PanelHeader = ({ panel, title, tooltip, panelIsVisible, mobile }: Props) => {
   const dispatch = useAppDispatch();
 
   function togglePanelVisibility() {
     dispatch(togglePanelDisplay(panel))
   }
 
-  function toggleOptionsVisibility() {
-    setOptionsAreVisible(!optionsAreVisible);
-  }
-
   return (
     // Clicking anywhere in the element, even whitespace, will toggle panel visibility.
     <HeaderContainer onClick={togglePanelVisibility}>
-      <span>
-        {hasOptions && !mobile &&
-          <PanelChevron
-            show={optionsAreVisible}
-            onClick={toggleOptionsVisibility} />}
-        <AnnotatedTitle
-          title={title}
-          tooltip={tooltip}
-          mobile={mobile} />
-      </span>
+      <AnnotatedTitle
+        title={title}
+        tooltip={tooltip}
+        mobile={mobile} />
       <PanelToggle
         on={panelIsVisible}
         callback={(togglePanelVisibility)} />

diff --git a/src/components/controls/panelSection.tsx b/src/components/controls/panelSection.tsx
@@ -24,14 +24,6 @@ export const PanelSection = ({ panel, title, tooltip, options=undefined, mobile
 
   const panelIsVisible = panelsToDisplay.includes(panel)
 
-  // Initially, panel visibility determines options visibility.
-  const [optionsAreVisible, setOptionsAreVisible] = React.useState(panelIsVisible);
-
-  // Subsequent panel visibility updates also determines options visibility.
-  React.useEffect(() => {
-    setOptionsAreVisible(panelIsVisible)
-  }, [panelIsVisible])
-
   return (
     <PanelSectionContainer>
       <PanelHeader
@@ -40,11 +32,8 @@ export const PanelSection = ({ panel, title, tooltip, options=undefined, mobile
         tooltip={tooltip}
         panelIsVisible={panelIsVisible}
         mobile={mobile}
-        hasOptions={options!==undefined}
-        optionsAreVisible={optionsAreVisible}
-        setOptionsAreVisible={setOptionsAreVisible}
       />
-      {optionsAreVisible && options}
+      {panelIsVisible && options}
     </PanelSectionContainer>
   );
 };
diff --git a/src/components/controls/styles.js b/src/components/controls/styles.js
@@ -50,7 +50,7 @@ export const PanelSectionContainer = styled.div`
 `;
 
 export const TitleAndIconContainer = styled.span`
-  display: inline-flex;
+  display: flex;
   align-items: center;
 `;