From 705b64cef6c9a8b10201033acce65dcee78c9969 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 options when panel is on

---
 src/components/controls/panelChevron.tsx | 22 ++++++++++++++++++++++
 src/components/controls/panelHeader.tsx  | 16 +++++++++++-----
 src/components/controls/panelSection.tsx | 13 ++++++++++++-
 3 files changed, 45 insertions(+), 6 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..43f1d9f81
--- /dev/null
+++ b/src/components/controls/panelChevron.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import styled from 'styled-components';
+import { FaChevronRight, FaChevronDown } from "react-icons/fa";
+
+const Container = styled.span`
+  padding-right: 6px;
+  color: white;
+`
+
+type Props = {
+  show: boolean
+}
+
+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 23f022842..921dec176 100644
--- a/src/components/controls/panelHeader.tsx
+++ b/src/components/controls/panelHeader.tsx
@@ -2,22 +2,28 @@ import React from "react";
 import { HeaderContainer } from "./styles";
 import PanelToggle from "./panel-toggle";
 import { AnnotatedTitle } from "./annotatedTitle";
+import { PanelChevron } from "./panelChevron";
 
 type Props = {
   panel: string
   title: string
   panelIsVisible: boolean
   tooltip: JSX.Element
+  optionsAreVisible: boolean
+  setOptionsAreVisible: React.Dispatch<React.SetStateAction<boolean>>
   mobile: boolean
 }
 
-export const PanelHeader = ({ panel, title, panelIsVisible, tooltip, mobile }: Props) => {
+export const PanelHeader = ({ panel, title, panelIsVisible, tooltip, optionsAreVisible, setOptionsAreVisible, mobile }: Props) => {
   return (
     <HeaderContainer>
-      <AnnotatedTitle
-        title={title}
-        tooltip={tooltip}
-        mobile={mobile} />
+      <span onClick={() => setOptionsAreVisible(!optionsAreVisible)}>
+        <PanelChevron show={optionsAreVisible} />
+        <AnnotatedTitle
+          title={title}
+          tooltip={tooltip}
+          mobile={mobile} />
+      </span>
       <PanelToggle
         panel={panel}
         on={panelIsVisible} />
diff --git a/src/components/controls/panelSection.tsx b/src/components/controls/panelSection.tsx
index a7c0e48c2..5fa1036f1 100644
--- a/src/components/controls/panelSection.tsx
+++ b/src/components/controls/panelSection.tsx
@@ -4,6 +4,7 @@ import { PanelSectionContainer } from "./styles";
 import { PanelHeader } from "./panelHeader";
 import { RootState } from "../../store";
 
+
 type Props = {
   panel: string
   title: string
@@ -18,6 +19,14 @@ export const PanelSection = ({ panel, title, tooltip, options, mobile }: 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
@@ -26,8 +35,10 @@ export const PanelSection = ({ panel, title, tooltip, options, mobile }: Props)
         title={title}
         tooltip={tooltip}
         mobile={mobile}
+        optionsAreVisible={optionsAreVisible}
+        setOptionsAreVisible={setOptionsAreVisible}
       />
-      {panelIsVisible && options}
+      {optionsAreVisible && options}
     </PanelSectionContainer>
   );
 };