From 92d66ea643ef385c5cac78863e630ad7d9b50f23 Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Tue, 14 Nov 2023 16:06:26 -0800
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=9A=A7=20Add=20transition=20when=20to?=
 =?UTF-8?q?ggling=20panel=20transitions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This currently has two problems:

1. It does not allow dropdowns from within the options to render lower
   than the boundaries.
2. It transitions the height from viewport height to 0, however all the
   actual panel option divs are shorter than that. This means there is a
   delay before the transition makes a visible change, and the speed is
   much faster than if it went from panel option div's height to 0.

(2) is more of a nuisance and can be addressed by dynamically setting
the max-height based on the containing div's scrollHeight, however (1)
is the prevailing and blocking problem.
---
 src/components/controls/panelSection.tsx |  6 ++++--
 src/components/controls/styles.js        | 12 ++++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/controls/panelSection.tsx b/src/components/controls/panelSection.tsx
index de22a67a9..bd3c34488 100644
--- a/src/components/controls/panelSection.tsx
+++ b/src/components/controls/panelSection.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useSelector } from "react-redux";
-import { PanelSectionContainer } from "./styles";
+import { PanelOptionsContainer, PanelSectionContainer } from "./styles";
 import { Title, Tooltip } from "./annotatedTitle";
 import { PanelHeader, PanelId } from "./panelHeader";
 import { RootState } from "../../store";
@@ -42,7 +42,9 @@ export const PanelSection = ({ panel, title, tooltip, options=undefined }: Props
         optionsAreVisible={optionsAreVisible}
         setOptionsAreVisible={setOptionsAreVisible}
       />
-      {optionsAreVisible && options}
+      <PanelOptionsContainer className={`${optionsAreVisible ? "open" : ""}`}>
+        {options}
+      </PanelOptionsContainer>
     </PanelSectionContainer>
   );
 };
diff --git a/src/components/controls/styles.js b/src/components/controls/styles.js
index 30b57b5db..702905b9a 100644
--- a/src/components/controls/styles.js
+++ b/src/components/controls/styles.js
@@ -48,6 +48,18 @@ export const PanelSectionContainer = styled.div`
   }
 `;
 
+export const PanelOptionsContainer = styled.div`
+  visibility: hidden;
+  transition: visibility .5s, max-height .5s;
+  max-height: 0;
+  overflow: hidden;
+
+  &.open {
+    visibility: visible;
+    max-height: 100vh;
+  }
+`
+
 export const TitleAndIconContainer = styled.span`
   display: inline-flex;
   align-items: center;

From 1c264918d3c92940a8cc9952f99b664e6474b8de Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Tue, 14 Nov 2023 16:19:41 -0800
Subject: [PATCH 2/2] Dynamically calculate heights of panel option containers

---
 src/components/controls/panelSection.tsx | 12 +++++++++++-
 src/components/controls/styles.js        |  2 +-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/controls/panelSection.tsx b/src/components/controls/panelSection.tsx
index bd3c34488..19a4ddf76 100644
--- a/src/components/controls/panelSection.tsx
+++ b/src/components/controls/panelSection.tsx
@@ -31,6 +31,16 @@ export const PanelSection = ({ panel, title, tooltip, options=undefined }: Props
     setOptionsAreVisible(panelIsVisible)
   }, [panelIsVisible])
 
+  const [contentHeight, setContentHeight] = React.useState(1000);
+  const optionsContainer = React.useRef<HTMLDivElement>(null);
+
+  // FIXME: useLayoutEffect?
+  React.useEffect(() => {
+    if (optionsContainer.current) {
+      setContentHeight(optionsContainer.current.scrollHeight); // FIXME: offsetHeight?
+    }
+  }, [options]);
+
   return (
     <PanelSectionContainer>
       <PanelHeader
@@ -42,7 +52,7 @@ export const PanelSection = ({ panel, title, tooltip, options=undefined }: Props
         optionsAreVisible={optionsAreVisible}
         setOptionsAreVisible={setOptionsAreVisible}
       />
-      <PanelOptionsContainer className={`${optionsAreVisible ? "open" : ""}`}>
+      <PanelOptionsContainer ref={optionsContainer} className={`${optionsAreVisible ? "open" : ""}`} contentHeight={contentHeight}>
         {options}
       </PanelOptionsContainer>
     </PanelSectionContainer>
diff --git a/src/components/controls/styles.js b/src/components/controls/styles.js
index 702905b9a..fb5c33e29 100644
--- a/src/components/controls/styles.js
+++ b/src/components/controls/styles.js
@@ -56,7 +56,7 @@ export const PanelOptionsContainer = styled.div`
 
   &.open {
     visibility: visible;
-    max-height: 100vh;
+    max-height: ${({ contentHeight }) => `${contentHeight}px`};
   }
 `