From f3719d5dc2a411d39af0f59f035db3656145a06d Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Thu, 9 Nov 2023 15:57:53 -0800
Subject: [PATCH] Revert "Add ability to show/hide panel options"

For preview.
---
 src/components/controls/panelChevron.tsx | 33 ------------------------
 src/components/controls/panelHeader.tsx  | 30 ++++-----------------
 src/components/controls/panelSection.tsx | 13 +---------
 src/components/controls/styles.js        |  2 +-
 4 files changed, 7 insertions(+), 71 deletions(-)
 delete mode 100644 src/components/controls/panelChevron.tsx

diff --git a/src/components/controls/panelChevron.tsx b/src/components/controls/panelChevron.tsx
deleted file mode 100644
index 087864f70..000000000
--- a/src/components/controls/panelChevron.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-import styled from 'styled-components';
-import { FaChevronRight, FaChevronDown } from "react-icons/fa";
-
-const Container = styled.span`
-  padding-right: 6px;
-  color: ${(props) => props.theme.color};
-`
-
-type Props = {
-  show: boolean
-
-  /** Run this callback only and ignore any parent callbacks. */
-  onClick: () => void
-}
-
-/**
- * An interactive chevron to show/hide a panel's options.
- */
-export const PanelChevron = ({ show, onClick: isolatedOnClick }: Props) => {
-  const icon = show ? <FaChevronDown /> : <FaChevronRight />
-
-  function onClick(event: React.MouseEvent) {
-    event.stopPropagation();
-    isolatedOnClick();
-  }
-
-  return (
-    <Container onClick={onClick}>
-      {icon}
-    </Container>
-  )
-}
diff --git a/src/components/controls/panelHeader.tsx b/src/components/controls/panelHeader.tsx
index a74185c64..7e0f5d821 100644
--- 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
index 9c5a11f82..1826da855 100644
--- 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
index dff8554db..8e4dcbae9 100644
--- 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;
 `;