Add ability to show/hide options when panel is on

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>
+  )
+}

src/components/controls/panelHeader.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { HeaderContainer } from "./styles";
 import PanelToggle from "./panelToggle";
 import { AnnotatedTitle } from "./annotatedTitle";
+import { PanelChevron } from "./panelChevron";
 
 type Props = {
   /** Panel identifier used internally. */
@@ -16,20 +17,42 @@ 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>>
+
   /** Indicates mobile display. */
   mobile: boolean
 }
 
 /**
  * A header used by all panel controls, containing an interactive title.
  */
-export const PanelHeader = ({ panel, title, tooltip, panelIsVisible, mobile }: Props) => {
+export const PanelHeader = ({ panel, title, tooltip, panelIsVisible, hasOptions, optionsAreVisible, setOptionsAreVisible, mobile }: Props) => {
+
+  let titleContainerProps = {}
+
+  if (hasOptions) {
+    titleContainerProps = {
+      role: "button",
+      onClick: () => setOptionsAreVisible(!optionsAreVisible),
+    }
+  }
+
   return (
     <HeaderContainer>
-      <AnnotatedTitle
-        title={title}
-        tooltip={tooltip}
-        mobile={mobile} />
+      <span {...titleContainerProps}>
+        {hasOptions && <PanelChevron show={optionsAreVisible} />}
+        <AnnotatedTitle
+          title={title}
+          tooltip={tooltip}
+          mobile={mobile} />
+      </span>
       <PanelToggle
         panel={panel}
         on={panelIsVisible} />

src/components/controls/panelSection.tsx

@@ -30,6 +30,14 @@ 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
@@ -38,8 +46,11 @@ export const PanelSection = ({ panel, title, tooltip, options=undefined, mobile
         tooltip={tooltip}
         panelIsVisible={panelIsVisible}
         mobile={mobile}
+        hasOptions={options!==undefined}
+        optionsAreVisible={optionsAreVisible}
+        setOptionsAreVisible={setOptionsAreVisible}
       />
-      {panelIsVisible && options}
+      {optionsAreVisible && options}
     </PanelSectionContainer>
   );
 };