From 0f31bcbac24a0aeb1e275bd840c7fa9987c123aa Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Wed, 18 Oct 2023 15:59:30 -0700
Subject: [PATCH] Add ability to show/hide panel options

---
 src/components/controls/panelChevron.tsx | 25 ++++++++++++++++++
 src/components/controls/panelHeader.tsx  | 33 +++++++++++++++++++-----
 src/components/controls/panelSection.tsx | 13 +++++++++-
 src/components/controls/styles.js        |  6 ++++-
 4 files changed, 68 insertions(+), 9 deletions(-)
 create mode 100644 src/components/controls/panelChevron.tsx

diff --git a/src/components/controls/panelChevron.tsx b/src/components/controls/panelChevron.tsx
new file mode 100644
index 000000000..520a99fce
--- /dev/null
+++ b/src/components/controls/panelChevron.tsx
@@ -0,0 +1,25 @@
+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
+}
+
+/**
+ * An interactive chevron to show/hide a panel's options.
+ */
+export const PanelChevron = ({ show }: Props) => {
+  const icon = show ? <FaChevronDown /> : <FaChevronRight />
+
+  return (
+    <Container>
+      {icon}
+    </Container>
+  )
+}
diff --git a/src/components/controls/panelHeader.tsx b/src/components/controls/panelHeader.tsx
index d156269b8..9d16c4ed5 100644
--- a/src/components/controls/panelHeader.tsx
+++ b/src/components/controls/panelHeader.tsx
@@ -1,9 +1,10 @@
 import React from "react";
 import { useAppDispatch } from "../../hooks";
 import { togglePanelDisplay } from "../../actions/panelDisplay";
-import { HeaderContainer } from "./styles";
+import { PanelSectionHeaderContainer } from "./styles";
 import Toggle from "./toggle";
 import { AnnotatedTitle, Title, Tooltip } from "./annotatedTitle";
+import { PanelChevron } from "./panelChevron";
 
 /** Panel identifier used internally. */
 export type PanelId = string;
@@ -15,28 +16,46 @@ type Props = {
 
   /** Indicates panel visibility. */
   panelIsVisible: boolean
+
+  /** 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 }: Props) => {
+export const PanelHeader = ({ panel, title, tooltip, panelIsVisible, hasOptions, optionsAreVisible, setOptionsAreVisible }: Props) => {
   const dispatch = useAppDispatch();
 
   function togglePanelVisibility() {
     dispatch(togglePanelDisplay(panel))
   }
 
+  function toggleOptionsVisibility() {
+    setOptionsAreVisible(!optionsAreVisible);
+  }
+
   return (
-    <HeaderContainer>
-      <AnnotatedTitle
-        title={title}
-        tooltip={tooltip} />
+    <PanelSectionHeaderContainer onClick={toggleOptionsVisibility}>
+      <span>
+        {hasOptions &&
+          <PanelChevron
+            show={optionsAreVisible} />}
+        <AnnotatedTitle
+          title={title}
+          tooltip={tooltip} />
+      </span>
       <Toggle
         display={true}
         on={panelIsVisible}
         callback={togglePanelVisibility}
         label="" />
-    </HeaderContainer>
+    </PanelSectionHeaderContainer>
   );
 };
diff --git a/src/components/controls/panelSection.tsx b/src/components/controls/panelSection.tsx
index 7dc6594b8..de22a67a9 100644
--- a/src/components/controls/panelSection.tsx
+++ b/src/components/controls/panelSection.tsx
@@ -23,6 +23,14 @@ export const PanelSection = ({ panel, title, tooltip, options=undefined }: Props
 
   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
@@ -30,8 +38,11 @@ export const PanelSection = ({ panel, title, tooltip, options=undefined }: Props
         title={title}
         tooltip={tooltip}
         panelIsVisible={panelIsVisible}
+        hasOptions={options!==undefined}
+        optionsAreVisible={optionsAreVisible}
+        setOptionsAreVisible={setOptionsAreVisible}
       />
-      {panelIsVisible && options}
+      {optionsAreVisible && options}
     </PanelSectionContainer>
   );
 };
diff --git a/src/components/controls/styles.js b/src/components/controls/styles.js
index 668adba3e..26137e4da 100644
--- a/src/components/controls/styles.js
+++ b/src/components/controls/styles.js
@@ -30,6 +30,10 @@ export const HeaderContainer = styled.div`
   margin-bottom: 5px;
 `;
 
+export const PanelSectionHeaderContainer = styled(HeaderContainer)`
+  cursor: pointer;
+`
+
 export const PanelSectionContainer = styled.div`
   // Less padding is necessary on the top because there is already some space
   // from HeaderContainer's top margin.
@@ -48,7 +52,7 @@ export const PanelSectionContainer = styled.div`
 `;
 
 export const TitleAndIconContainer = styled.span`
-  display: flex;
+  display: inline-flex;
   align-items: center;
 `;