From f98d0c56d07f43a56ff9ebe72d4a703313cf9ac1 Mon Sep 17 00:00:00 2001
From: Lazaro Alonso <lazarus.alon@gmail.com>
Date: Wed, 15 Oct 2025 01:42:20 +0200
Subject: [PATCH 1/2] more sides

---
 src/components/ui/MainPanel/AdjustPlot.tsx |  22 ++-
 src/components/ui/MainPanel/Dataset.tsx    | 219 +++++++++++----------
 src/components/ui/MainPanel/PlayButton.tsx |  17 +-
 src/components/ui/MainPanel/PlotType.tsx   |  15 +-
 4 files changed, 147 insertions(+), 126 deletions(-)

diff --git a/src/components/ui/MainPanel/AdjustPlot.tsx b/src/components/ui/MainPanel/AdjustPlot.tsx
index 3f26964c..71684123 100644
--- a/src/components/ui/MainPanel/AdjustPlot.tsx
+++ b/src/components/ui/MainPanel/AdjustPlot.tsx
@@ -468,6 +468,7 @@ const GlobalOptions = () =>{
 
 const AdjustPlot = () => {
     const [isMobile, setIsMobile] = useState(false);
+    const [popoverSide, setPopoverSide] = useState<"left" | "top">("left");
 
     const {plotOn} = useGlobalStore(
         useShallow(state=>({
@@ -480,15 +481,13 @@ const AdjustPlot = () => {
     
 
   useEffect(() => {
-    const checkWindowSize = () => {
-      setIsMobile(window.innerWidth <= 768);
-    };
-
-    checkWindowSize(); // Initial check
-    window.addEventListener("resize", checkWindowSize);
-
-    return () => window.removeEventListener("resize", checkWindowSize);
-  }, []);
+      const handleResize = () => {
+        setPopoverSide(window.innerWidth < 768 ? "top" : "left");
+      };
+      handleResize();
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }, []);
 
   const enableCond = (plotOn)
   return (
@@ -511,7 +510,10 @@ const AdjustPlot = () => {
                   </Button>
                 </div>
               </TooltipTrigger>
-              <TooltipContent side="left" align="start">
+              <TooltipContent
+                side={popoverSide === "left" ? "left" : "top"}
+                align={popoverSide === "left" ? "start" : "center"}
+              >
                 <span>Plot Settings</span>
               </TooltipContent>
             </Tooltip>
diff --git a/src/components/ui/MainPanel/Dataset.tsx b/src/components/ui/MainPanel/Dataset.tsx
index 8f6794bf..f17efd89 100644
--- a/src/components/ui/MainPanel/Dataset.tsx
+++ b/src/components/ui/MainPanel/Dataset.tsx
@@ -1,19 +1,23 @@
 "use client";
 
-import React, { SetStateAction, useEffect, useState } from 'react';
+import React, { SetStateAction, useEffect, useState, ReactNode } from 'react';
 import { useGlobalStore } from '@/utils/GlobalStates';
 import { useShallow } from 'zustand/shallow';
 import { Input } from '../input';
 import { Button } from '../button';
-// import { CgDatabase } from "react-icons/cg";
 import { TbDatabasePlus } from "react-icons/tb";
 import LocalZarr from './LocalZarr';
-import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from "@/components/ui/popover";
+import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from "@/components/ui/dialog";
 
 const ZARR_STORES = {
   ESDC: 'https://s3.bgc-jena.mpg.de:9000/esdl-esdc-v3.0.2/esdc-16d-2.5deg-46x72x1440-3.0.2.zarr',
@@ -46,6 +50,27 @@ const DescriptionContent = ({setOpenVariables}:{setOpenVariables : React.Dispatc
   )
 }
 
+const DatasetOption = ({
+  children,
+  active,
+  onClick,
+}: {
+  children: ReactNode;
+  active: boolean;
+  onClick: () => void;
+}) => {
+  return (
+    <Button
+      variant={active ? "default" : "ghost"}
+      className='cursor-pointer w-full justify-start'
+      onClick={onClick}
+    >
+      {children}
+    </Button>
+  );
+};
+
+
 const Dataset = ({setOpenVariables} : {setOpenVariables: React.Dispatch<React.SetStateAction<boolean>>}) => {
   const [showStoreInput, setShowStoreInput] = useState(false);
   const [showLocalInput, setShowLocalInput] = useState(false);
@@ -53,7 +78,7 @@ const Dataset = ({setOpenVariables} : {setOpenVariables: React.Dispatch<React.Se
   const [activeOption, setActiveOption] = useState<string>('ESDC')
   const [openDescription, setOpenDescription] = useState<boolean>(false)
   
-  const { setInitStore, setVariable } = useGlobalStore(
+  const { setInitStore } = useGlobalStore(
     useShallow((state) => ({
       setInitStore: state.setInitStore,
       setVariable: state.setVariable,
@@ -70,7 +95,7 @@ const Dataset = ({setOpenVariables} : {setOpenVariables: React.Dispatch<React.Se
   }, []);
 
   return (
-    <Popover >
+    <Popover>
       <PopoverTrigger asChild>
         <div>
           <Tooltip delayDuration={500} >
@@ -87,126 +112,108 @@ const Dataset = ({setOpenVariables} : {setOpenVariables: React.Dispatch<React.Se
                 </Button>
               </div>
             </TooltipTrigger>
-            {popoverSide === "left" ? (
-              <TooltipContent side="left" align="start">
-                <span>Select dataset</span>
-              </TooltipContent>
-            ) : (
-              <TooltipContent side="top" align="center">
-                <span>Select dataset</span>
-              </TooltipContent>
-            )}
+            <TooltipContent
+              side={popoverSide === "left" ? "left" : "top"}
+              align={popoverSide === "left" ? "start" : "center"}
+            >
+              <span>Select dataset</span>
+            </TooltipContent>
           </Tooltip>
         </div>
 
       </PopoverTrigger>
-      <PopoverContent
-        side={popoverSide}
-        className="flex flex-col items-start max-w-[220px] p-3 gap-3 w-auto mb-1"
-      >
-        <p >Curated</p>
-        <Popover >
-          <PopoverTrigger asChild 
+      <PopoverContent side={popoverSide} className="w-auto p-0"
+        onInteractOutside={(e) => {
+              const target = e.target as HTMLElement;
+              // If the click is inside the MetaData popover, do not close
+              if (target.closest('[data-meta-popover]')) {
+                e.preventDefault();
+              }
+            }}
+        >
+        <div className="flex flex-col items-start max-w-[220px] p-3 gap-1 w-auto">
+          <p className="px-2 text-sm text-muted-foreground">Curated</p>
+          <DatasetOption
+            active={activeOption === 'ESDC'}
             onClick={() => {
               setShowStoreInput(false);
               setShowLocalInput(false);
-              setActiveOption('ESDC')
+              setActiveOption('ESDC');
               setInitStore(ZARR_STORES.ESDC);
+              setOpenDescription(true);
             }}
           >
-            <Button
-              variant={activeOption === 'ESDC' ? "default" : "ghost"}
-              className='cursor-pointer mt-[-20px]'
-            >
-              ESDC
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent 
-            className="flex flex-col items-start max-w-[300px] p-3 gap-3 w-auto mb-1"
-            side={'left'}
-          >
-              <DescriptionContent setOpenVariables={setOpenVariables} />
-          </PopoverContent>
-        </Popover>
-        <Popover>
-          <PopoverTrigger asChild>
-            <Button
-              variant={activeOption === 'seasfire' ? "default" : "ghost"}
-              className='cursor-pointer'
-              onClick={() => {
-                setShowStoreInput(false);
-                setShowLocalInput(false);
-                setActiveOption('seasfire')
-                setInitStore(ZARR_STORES.SEASFIRE);
-              }}
-            >
-              Seasfire
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent side='left'>
-            <DescriptionContent setOpenVariables={setOpenVariables} />
-          </PopoverContent>
-        </Popover>
-        
-        <div className="w-full h-px bg-gray-300" />
-        <p >Personal</p>
-        <div>
-          <Button
-            variant={activeOption === 'remote' ? "default" : "ghost"}
-            className='cursor-pointer mt-[-20px]'
+            ESDC
+          </DatasetOption>
+          <DatasetOption
+            active={activeOption === 'seasfire'}
             onClick={() => {
+              setShowStoreInput(false);
               setShowLocalInput(false);
-              setActiveOption('remote')
-              setShowStoreInput((prev) => !prev);
+              setActiveOption('seasfire');
+              setInitStore(ZARR_STORES.SEASFIRE);
+              setOpenDescription(true);
             }}
           >
-            Remote
-          </Button>
-          {showStoreInput && (
-            <form
-              className="mt-2 flex items-center gap-2"
-              onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
-                e.preventDefault();
-                const input = e.currentTarget.elements[0] as HTMLInputElement;
-                setInitStore(input.value);
+            Seasfire
+          </DatasetOption>
+
+          <div className="w-full h-px bg-gray-300 my-2" />
+          <p className="px-2 text-sm text-muted-foreground">Personal</p>
+          <div className="w-full">
+            <DatasetOption
+              active={activeOption === 'remote'}
+              onClick={() => {
+                setShowStoreInput((prev) => !prev);
+                setActiveOption('remote');
               }}
             >
-              <Input className="w-[100px]" placeholder="Store URL" />
-              <Button type="submit" variant="outline" className='cursor-pointer'>
-                Fetch
-              </Button>
-            </form>
-          )}
-        </div>
-        <Popover open={openDescription} onOpenChange={setOpenDescription} >
-          <PopoverAnchor> 
-            <div>
-              <Button
-                variant={activeOption === 'local' ? "default" : "ghost"}
-                className='cursor-pointer'
-                onClick={() => {
-                  setShowLocalInput((prev) => !prev);
-                  setShowStoreInput(false);
-                  setActiveOption('local')
+              Remote
+            </DatasetOption>
+            {showStoreInput && (
+              <form
+                className="mt-2 flex items-center gap-2"
+                onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
+                  e.preventDefault();
+                  const input = e.currentTarget.elements[0] as HTMLInputElement;
+                  setInitStore(input.value);
+                  if (input.value) {
+                    setOpenDescription(true);
+                  }
                 }}
               >
-                Local
-              </Button>
-              {showLocalInput && (
-                <div className="mt-2">
-                  <LocalZarr setShowLocal={setShowLocalInput} setOpenVariables={setOpenDescription} setInitStore={setInitStore} />
-                </div>
-              )}
-            </div>
-          </PopoverAnchor>
-          <PopoverContent 
-            className="flex flex-col items-start max-w-[300px] p-3 gap-3 w-auto mb-1"
-            side={'left'}
-          >
-            <DescriptionContent setOpenVariables={setOpenVariables} />
-          </PopoverContent>
-        </Popover>
+                <Input className="w-full" placeholder="Store URL" />
+                <Button type="submit" variant="outline" className='cursor-pointer'>
+                  Fetch
+                </Button>
+              </form>
+            )}
+          </div>
+          <div className="w-full">
+            <DatasetOption
+              active={activeOption === 'local'}
+              onClick={() => {
+                setShowLocalInput((prev) => !prev);
+                setShowStoreInput(false);
+                setActiveOption('local');
+              }}
+            >
+              Local
+            </DatasetOption>
+            {showLocalInput && (
+              <div className="mt-2">
+                <LocalZarr setShowLocal={setShowLocalInput} setOpenVariables={setOpenDescription} setInitStore={setInitStore} />
+              </div>
+            )}
+          </div>
+        </div>
       </PopoverContent>
+      <Dialog open={openDescription} onOpenChange={setOpenDescription}>
+        <DialogTitle>{}</DialogTitle>
+        <DialogContent data-meta-popover className="max-w-[85%] md:max-w-md max-h-[80vh] overflow-y-auto">
+          <DescriptionContent setOpenVariables={setOpenVariables} />
+        </DialogContent>
+      </Dialog>
     </Popover>
   );
 };
diff --git a/src/components/ui/MainPanel/PlayButton.tsx b/src/components/ui/MainPanel/PlayButton.tsx
index 22ba50cd..0ef704a6 100644
--- a/src/components/ui/MainPanel/PlayButton.tsx
+++ b/src/components/ui/MainPanel/PlayButton.tsx
@@ -193,10 +193,20 @@ const PlayButton = () => {
     const [showOptions, setShowOptions] = useState<boolean>(false)
     const cond = useMemo(()=>!isFlat && plotOn, [isFlat,plotOn])
     const enableCond = (!isFlat && plotOn)
+    const [popoverSide, setPopoverSide] = useState<"left" | "top">("left");
 
     useEffect(()=>{
       setShowOptions(false)
     },[reFetch])
+
+    useEffect(() => {
+        const handleResize = () => {
+          setPopoverSide(window.innerWidth < 768 ? "top" : "left");
+        };
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+      }, []);
     
   return (
     <>
@@ -216,9 +226,14 @@ const PlayButton = () => {
             </Button>
           </div>
         </TooltipTrigger>
-        <TooltipContent side="left" align="start" className="flex flex-col">
+        <TooltipContent
+          side={popoverSide === "left" ? "left" : "top"}
+          align={popoverSide === "left" ? "start" : "center"}
+          className="flex flex-col"
+        >
           <span>Animation controls</span>
         </TooltipContent>
+
       </Tooltip>
       <PlayInterFace visible={(showOptions && enableCond)}/>
     </>
diff --git a/src/components/ui/MainPanel/PlotType.tsx b/src/components/ui/MainPanel/PlotType.tsx
index 2d228c93..a8534b6c 100644
--- a/src/components/ui/MainPanel/PlotType.tsx
+++ b/src/components/ui/MainPanel/PlotType.tsx
@@ -79,15 +79,12 @@ const PlotType = () => {
               </Button>
             </div>
             </TooltipTrigger>
-            {popoverSide === "left" ? (
-              <TooltipContent side="left" align="start">
-                <span>Change plot type</span>
-              </TooltipContent>
-            ) : (
-              <TooltipContent side="top" align="center">
-                <span>Change plot type</span>
-              </TooltipContent>
-            )}
+            <TooltipContent
+              side={popoverSide === "left" ? "left" : "top"}
+              align={popoverSide === "left" ? "start" : "center"}
+            >
+              <span>Change plot type</span>
+            </TooltipContent>
           </Tooltip>
       </div>
       </PopoverTrigger>

From 48da8fa7c1c325004f8d07f1ed6dda973b93ea10 Mon Sep 17 00:00:00 2001
From: Lazaro Alonso <lazarus.alon@gmail.com>
Date: Wed, 15 Oct 2025 02:25:50 +0200
Subject: [PATCH 2/2] user click here

---
 src/components/ui/MainPanel/Dataset.tsx | 51 ++++++++++++++++++-------
 1 file changed, 37 insertions(+), 14 deletions(-)

diff --git a/src/components/ui/MainPanel/Dataset.tsx b/src/components/ui/MainPanel/Dataset.tsx
index f17efd89..b1aa7b70 100644
--- a/src/components/ui/MainPanel/Dataset.tsx
+++ b/src/components/ui/MainPanel/Dataset.tsx
@@ -6,6 +6,7 @@ import { useShallow } from 'zustand/shallow';
 import { Input } from '../input';
 import { Button } from '../button';
 import { TbDatabasePlus } from "react-icons/tb";
+import { TbVariable } from "react-icons/tb";
 import LocalZarr from './LocalZarr';
 import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
 import {
@@ -17,6 +18,7 @@ import {
   Dialog,
   DialogContent,
   DialogTitle,
+  DialogPortal
 } from "@/components/ui/dialog";
 
 const ZARR_STORES = {
@@ -24,7 +26,13 @@ const ZARR_STORES = {
   SEASFIRE: 'https://s3.bgc-jena.mpg.de:9000/misc/seasfire_rechunked.zarr',
 };
 
-const DescriptionContent = ({setOpenVariables}:{setOpenVariables : React.Dispatch<SetStateAction<boolean>>}) => {
+const DescriptionContent = ({
+  setOpenVariables,
+  onCloseDialog,
+}: {
+  setOpenVariables: React.Dispatch<SetStateAction<boolean>>;
+  onCloseDialog: () => void;
+}) => {
   const {titleDescription} = useGlobalStore(useShallow(state => ({
     titleDescription: state.titleDescription
   })))
@@ -32,19 +40,27 @@ const DescriptionContent = ({setOpenVariables}:{setOpenVariables : React.Dispatc
   return (
     <div className='grid gap-1'>
       <div className='mb-2'>
-        <b>Title</b>
-        <h1>
-          {title ? title : "No Title"}
+        <h1 className='text-lg font-bold'>
+          {title ? title : "Store"}
         </h1>
-        <b>Description</b>
-        <p>{description ? description : "No Description"}</p>
+        <p className="whitespace-pre-wrap break-words"
+          style={{ overflowWrap: 'anywhere' }}
+          >
+            {description ? description : "No Description"}
+        </p>
       </div>
       <div className='flex justify-center my-2'>
         <Button
         variant={"default"}
         className='cursor-pointer mt-[-20px]'
-        onClick={e=>setOpenVariables(true)}
-        >Variables</Button>
+        onClick={() => {
+          setOpenVariables(true);
+          onCloseDialog();
+        }}
+        >
+          Open Variables 
+          <TbVariable className="size-8" />
+        </Button>
       </div>
     </div>
   )
@@ -95,6 +111,7 @@ const Dataset = ({setOpenVariables} : {setOpenVariables: React.Dispatch<React.Se
   }, []);
 
   return (
+    <>
     <Popover>
       <PopoverTrigger asChild>
         <div>
@@ -208,13 +225,19 @@ const Dataset = ({setOpenVariables} : {setOpenVariables: React.Dispatch<React.Se
           </div>
         </div>
       </PopoverContent>
-      <Dialog open={openDescription} onOpenChange={setOpenDescription}>
-        <DialogTitle>{}</DialogTitle>
-        <DialogContent data-meta-popover className="max-w-[85%] md:max-w-md max-h-[80vh] overflow-y-auto">
-          <DescriptionContent setOpenVariables={setOpenVariables} />
-        </DialogContent>
-      </Dialog>
     </Popover>
+    <Dialog open={openDescription} onOpenChange={setOpenDescription}>
+        <DialogPortal>
+          <DialogTitle>{}</DialogTitle>
+            <DialogContent data-meta-popover className="max-w-[85%] md:max-w-md max-h-[80vh] overflow-y-auto">
+              <DescriptionContent
+                setOpenVariables={setOpenVariables}
+                onCloseDialog={() => setOpenDescription(false)}
+              />
+          </DialogContent>
+        </DialogPortal>
+      </Dialog>
+    </>
   );
 };