feat: simple working drop down menu

analysis.py

@@ -84,6 +84,7 @@ class Params(BaseModel):
 
 
 def sociogram_image(params: Params):
+    plt.close()
     plt.figure(figsize=(16, 10), facecolor="none")
     ax = plt.gca()
     ax.set_facecolor("none")  # Set the axis face color to none (transparent)

src/Analysis.tsx

@@ -24,7 +24,7 @@ export default function Analysis() {
     edgeWidth: 1,
     arrowSize: 20,
     fontSize: 10,
-    distance: 0.2,
+    distance: 2,
   });
   const [showControlPanel, setShowControlPanel] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -52,9 +52,9 @@ export default function Analysis() {
   return (
     <div className="stack column dropdown">
       <button onClick={() => setShowControlPanel(!showControlPanel)}>
-        Parameters {showControlPanel ? "🞁" : "🞃"}
+        Parameters  <img style={{ padding: 0, transform: `rotate(${showControlPanel ? 0 : 180}deg)` }} src="expand.svg" alt={showControlPanel ? "^" : "v"} />
       </button>
-      <div id="control-panel" className={showControlPanel ? "opened" : "closed"}>
+      <div id="control-panel" className={showControlPanel ? "opened" : ""}>
 
         <div className="control">
           <label>distance between nodes</label>

src/App.css

@@ -130,21 +130,16 @@ button {
 }
 
 #control-panel {
-  display: grid;
+  display: none;
   overflow: hidden;
   margin: auto;
   gap: 16px;
   grid-template-columns: repeat(3, 1fr);
+  transition: display 1s ease-out 0s;
 }
 
-.opened {
+#control-panel.opened {
-  max-height: 100vw;
+  display: grid;
-  transition: max-height 1s ease-in;
-}
-
-.closed {
-  max-height: 0px;
-  transition: max-height 0.5s ease-out;
 }
 
 .control {