From 0462ea9d4ebb47980dfa63d6da9eb4070634821c Mon Sep 17 00:00:00 2001
From: Jeran <jpoehls@bgc-jena.mpg.de>
Date: Wed, 11 Jun 2025 12:00:26 +0200
Subject: [PATCH 1/7] min-maxed-performance on scroller

---
 src/components/ui/VariableScroller.tsx     | 26 +++++++++++++---------
 src/components/ui/css/VariableScroller.css |  7 +++---
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/components/ui/VariableScroller.tsx b/src/components/ui/VariableScroller.tsx
index 361ae01b..a68a4ba9 100644
--- a/src/components/ui/VariableScroller.tsx
+++ b/src/components/ui/VariableScroller.tsx
@@ -10,7 +10,6 @@ const formatArray = (value: string | number[]): string => {
 
 const MetaDataInfo = ({meta} : {meta : any}) =>{ 
     const [show, setShow] = useState<boolean>(false)
-
     const setVariable = useGlobalStore(useShallow(state=> state.setVariable))
     return(
         <div className='meta-container'>
@@ -46,7 +45,6 @@ const MetaDataInfo = ({meta} : {meta : any}) =>{
 const VariableScroller = ({zMeta} : {zMeta : object[]}) => {
   const variables = useGlobalStore(useShallow(state=>state.variables))
   const [selectedIndex, setSelectedIndex] = useState(Math.floor(variables.length / 2));
-  const [variable, setVariable] = useState<string>("Default")
   const [meta, setMeta] = useState<any>(null) //This is the individual metadata for the element
   const [scrollHeight, setScrollHeight] = useState<number>(82);
   const previousTouch = useRef<number | null>(null)
@@ -78,18 +76,25 @@ const VariableScroller = ({zMeta} : {zMeta : object[]}) => {
   }
 
   useEffect(()=>{ //Update variable onScroll
-    if (variables){
-        setVariable(variables[selectedIndex])
+    if (variables && zMeta){
+      const tempVar = variables[selectedIndex]
+      const relevant = zMeta.find((e : any) => e.name === tempVar)
+      setMeta(relevant)
     }
   },[selectedIndex, variables])
 
-  useEffect(()=>{ //Grab relevant metadata
-    if(zMeta){
-        const relevant = zMeta.find((e : any) => e.name === variable)
-        setMeta(relevant)
+  function handleResize(){
+    const width = window.innerWidth
+    if (width <= 480){
+      setScrollHeight(42)
     }
-  },[variable])
-
+    else if (width <= 570){
+      setScrollHeight(54)
+    }
+    else {
+      setScrollHeight(82)
+    }
+  }
   useEffect(()=>{  //Sets scrollsize. Doesn't work with resize though
     const width = window.innerWidth
     if (width <= 480){
@@ -101,6 +106,7 @@ const VariableScroller = ({zMeta} : {zMeta : object[]}) => {
     else {
       setScrollHeight(82)
     }
+    return window.addEventListener('resize', handleResize)
   },[])
 
   return (
diff --git a/src/components/ui/css/VariableScroller.css b/src/components/ui/css/VariableScroller.css
index f0bd7a9c..48fcc244 100644
--- a/src/components/ui/css/VariableScroller.css
+++ b/src/components/ui/css/VariableScroller.css
@@ -31,10 +31,9 @@
 .meta-container{
     text-align: left;
     position: absolute;
-    min-width: 400px;
-    max-width: 500px;
-    left: 70%;
-    top: 50%;
+    width: 85%;
+    left: 7.5%;
+    top: 10%;
     z-index: 3;
     font-size: 18px;
     border-radius: 10px;

From 6e42dea68e07b5800e1ce4430886e4eabdaf584d Mon Sep 17 00:00:00 2001
From: Lazaro Alonso <lazarus.alon@gmail.com>
Date: Wed, 11 Jun 2025 12:59:48 +0200
Subject: [PATCH 2/7] popover

---
 package.json                  |  1 +
 src/components/ui/popover.tsx | 48 +++++++++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+)
 create mode 100644 src/components/ui/popover.tsx

diff --git a/package.json b/package.json
index 01231f24..bc07db19 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
   "dependencies": {
     "@lazarusa/react-tweakpane": "^0.9.0",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-slot": "^1.2.3",
     "@react-spring/three": "^10.0.0",
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
new file mode 100644
index 00000000..01e468b6
--- /dev/null
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

From 550e72712f538600e82c29338e27e9f81975d504 Mon Sep 17 00:00:00 2001
From: Jeran <jpoehls@bgc-jena.mpg.de>
Date: Wed, 11 Jun 2025 13:13:07 +0200
Subject: [PATCH 3/7] tweaks

---
 src/components/ui/Navbar.tsx | 93 ++++++++++++++++++++++--------------
 src/utils/GlobalStates.ts    | 15 +++++-
 2 files changed, 72 insertions(+), 36 deletions(-)

diff --git a/src/components/ui/Navbar.tsx b/src/components/ui/Navbar.tsx
index 05bae9a0..45e8e1f2 100644
--- a/src/components/ui/Navbar.tsx
+++ b/src/components/ui/Navbar.tsx
@@ -1,9 +1,15 @@
+"use client";
+
 import Image from "next/image";
 import { AboutButton } from "@/components/ui";
 import ThemeSwitch  from "@/components/ui/ThemeSwitch";
 import logo from "@/app/logo.png"
 import './css/Navbar.css'
-
+import { useShallow } from "zustand/shallow";
+import { useGlobalStore, usePlotStore } from "@/utils/GlobalStates";
+import { colormaps } from '@/components/textures';
+import { useEffect, useState } from "react";
+import { GetColorMapTexture } from "@/components/textures";
 import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
@@ -31,6 +37,20 @@ import {
 } from "@/components/ui/select"
 
 const Navbar = () => {
+  const {setInitStore, setVariable, setColormap} = useGlobalStore(
+    useShallow(state=>({
+      setInitStore : state.setInitStore, 
+      setVariable : state.setVariable,
+      setColormap : state.setColormap
+    
+    })))
+  const variables = useGlobalStore(useShallow(state=>state.variables))
+  const setPlotType = usePlotStore(state=> state.setPlotType)
+  const [cmap, setCmap] = useState<string>("viridis")
+
+  // useEffect(()=>{
+  //     setColormap(GetColorMapTexture(colormap, settings.cmap, 1, "#000000", 0, settings.flipCmap));
+  //   },[settings.cmap,  colormap, settings.flipCmap, setColormap])
   return (
     <nav className="navbar">
       <div className="navbar-left">
@@ -43,44 +63,47 @@ const Navbar = () => {
               <Button variant="outline">Open</Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56" align="start">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
+              <DropdownMenuLabel>Datasets</DropdownMenuLabel>
               <DropdownMenuGroup>
-                <DropdownMenuItem >
-                  Profile
-                  <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+                <DropdownMenuItem onSelect={e=>console.log("setting to ESDC")}>
+                  ESDC
                 </DropdownMenuItem>
-                <DropdownMenuItem>
-                  Billing
+                <DropdownMenuItem onSelect={e=>console.log("setting to Seasfire")}>
+                  Seasfire
                   <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
                 </DropdownMenuItem>
-                <DropdownMenuItem>
-                  Settings
+                <DropdownMenuItem onSelect={e=>console.log("setting to Personal and showing text field")}>
+                  Personal
                   <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
                 </DropdownMenuItem>
-                <DropdownMenuItem>
-                  Keyboard shortcuts
-                  <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
-                </DropdownMenuItem>
               </DropdownMenuGroup>
-              <DropdownMenuSeparator />
-              <DropdownMenuGroup>
-                <DropdownMenuItem>Team</DropdownMenuItem>
-                <DropdownMenuSub>
-                  <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
+              {/* <DropdownMenuSeparator /> */}
+              <DropdownMenuLabel>Plot Options</DropdownMenuLabel>
+              <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>Plot Type</DropdownMenuSubTrigger>
                   <DropdownMenuPortal>
                     <DropdownMenuSubContent>
-                      <DropdownMenuItem>Email</DropdownMenuItem>
-                      <DropdownMenuItem>Message</DropdownMenuItem>
-                      <DropdownMenuSeparator />
-                      <DropdownMenuItem>More...</DropdownMenuItem>
+                      <DropdownMenuItem onSelect={()=> setPlotType("volume") }>Volume</DropdownMenuItem>
+                      <DropdownMenuItem onSelect={()=> setPlotType("point-cloud") }>Point Cloud</DropdownMenuItem>
                     </DropdownMenuSubContent>
                   </DropdownMenuPortal>
                 </DropdownMenuSub>
-                <DropdownMenuItem>
-                  New Team
-                  <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
-                </DropdownMenuItem>
-              </DropdownMenuGroup>
+
+              <DropdownMenuSub>
+                  <Select onValueChange={e=>setCmap(e)}>
+                    <SelectTrigger className="w-[100%]">
+                      <SelectValue placeholder="Select a Colormap" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        <SelectLabel>ColorMaps</SelectLabel>
+                        {colormaps.map((val,idx)=>(
+                          <SelectItem value={val} key={idx} >{val}</SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </DropdownMenuSub>
               <DropdownMenuSeparator />
               <DropdownMenuItem>GitHub</DropdownMenuItem>
               <DropdownMenuItem>Support</DropdownMenuItem>
@@ -93,18 +116,18 @@ const Navbar = () => {
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
-        <Select>
+
+
+        <Select onValueChange={e=>setVariable(e)}>
           <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Select a fruit" />
+            <SelectValue placeholder="Select a variable" />
           </SelectTrigger>
           <SelectContent>
             <SelectGroup>
-              <SelectLabel>Fruits</SelectLabel>
-              <SelectItem value="apple">Apple</SelectItem>
-              <SelectItem value="banana">Banana</SelectItem>
-              <SelectItem value="blueberry">Blueberry</SelectItem>
-              <SelectItem value="grapes">Grapes</SelectItem>
-              <SelectItem value="pineapple">Pineapple</SelectItem>
+              <SelectLabel>Variables</SelectLabel>
+              {variables.map((val,idx)=>(
+                <SelectItem value={val} key={idx} >{val}</SelectItem>
+              ))}
             </SelectGroup>
           </SelectContent>
         </Select>
diff --git a/src/utils/GlobalStates.ts b/src/utils/GlobalStates.ts
index 780e04e0..fc5ad813 100644
--- a/src/utils/GlobalStates.ts
+++ b/src/utils/GlobalStates.ts
@@ -89,4 +89,17 @@ export const useGlobalStore = create<StoreState>((set) => ({
     set({ variable })
   },
   setVariables: (variables) => set({variables})
-}));
\ No newline at end of file
+}));
+
+type PlotState ={
+  plotType: string;
+
+  setPlotType: (plotType: string) => void;
+}
+
+export const usePlotStore = create<PlotState>((set) => ({
+  plotType: "volume",
+
+  setPlotType: (plotType) => set({ plotType })
+  
+}))
\ No newline at end of file

From 6cacbdaf63e238674ecf441da55b92dd6c605d30 Mon Sep 17 00:00:00 2001
From: Lazaro Alonso <lazarus.alon@gmail.com>
Date: Wed, 11 Jun 2025 13:18:35 +0200
Subject: [PATCH 4/7] command

---
 package.json                  |   2 +
 src/components/ui/command.tsx | 184 ++++++++++++++++++++++++++++++++++
 src/components/ui/dialog.tsx  | 143 ++++++++++++++++++++++++++
 3 files changed, 329 insertions(+)
 create mode 100644 src/components/ui/command.tsx
 create mode 100644 src/components/ui/dialog.tsx

diff --git a/package.json b/package.json
index bc07db19..f88ca953 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "@lazarusa/react-tweakpane": "^0.9.0",
+    "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-select": "^2.2.5",
@@ -39,6 +40,7 @@
     "@types/webpack": "^5.28.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "glslify": "^7.1.1",
     "jotai": "^2.12.3",
     "js-colormaps-es": "^0.0.5",
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
new file mode 100644
index 00000000..8cb4ca7a
--- /dev/null
+++ b/src/components/ui/command.tsx
@@ -0,0 +1,184 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 00000000..d9ccec91
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

From c4683f1aa840cc2d826c75b8f637941c5e1fa514 Mon Sep 17 00:00:00 2001
From: Jeran <jpoehls@bgc-jena.mpg.de>
Date: Wed, 11 Jun 2025 17:15:17 +0200
Subject: [PATCH 5/7] Implemented new UI on desktop.

---
 package.json                                  |   2 +
 src/components/LandingHome.tsx                |  24 +-
 src/components/plots/Analysis.tsx             |  24 +-
 src/components/plots/DataCube.tsx             |  59 +----
 src/components/plots/Plot.tsx                 |  22 +-
 src/components/plots/PointCloud.tsx           |  43 +---
 src/components/textures/colormap.tsx          |   8 +-
 .../textures/shaders/pointVertex.glsl         |   3 +-
 src/components/ui/Navbar.tsx                  | 125 ++++++++---
 src/components/ui/PlotTweaker.tsx             | 210 ++++++++++++++++++
 src/components/ui/css/VariableScroller.css    |   1 +
 src/components/ui/index.ts                    |   4 +-
 src/components/zarr/DataStores.tsx            |  38 +---
 src/utils/GlobalStates.ts                     |  42 +++-
 src/utils/HelperFuncs.ts                      |   1 -
 15 files changed, 401 insertions(+), 205 deletions(-)
 create mode 100644 src/components/ui/PlotTweaker.tsx

diff --git a/package.json b/package.json
index f88ca953..6c584ad9 100644
--- a/package.json
+++ b/package.json
@@ -49,8 +49,10 @@
     "next-themes": "^0.4.6",
     "quick-lru": "^7.0.1",
     "random-words": "^2.0.1",
+    "rc-slider": "^11.1.8",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
     "tailwind-merge": "^3.3.0",
     "three": "^0.176.0",
     "tweakpane": "^4.0.5",
diff --git a/src/components/LandingHome.tsx b/src/components/LandingHome.tsx
index d2f7bb1b..e0a33484 100644
--- a/src/components/LandingHome.tsx
+++ b/src/components/LandingHome.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as THREE from 'three'
 THREE.Cache.enabled = true;
-import { DataStores } from '@/components/zarr/DataStores'
+import { GetZarrMetadata, GetVariableNames } from '@/components/zarr/GetMetadata';
 import { ZarrDataset, GetStore } from '@/components/zarr/ZarrLoaderLRU';
 import { useRef, useState } from 'react';
 import VariableScroller from './ui/VariableScroller';
@@ -19,7 +19,7 @@ import { GetTitleDescription } from '@/components/zarr/GetMetadata';
 // import { PaneManager } from '@/components/PaneManager';
 
 export function LandingHome() {
-  const { bgcolor, fullmetadata, variables} = DataStores();
+
   const [settings, setSettings] = useState({plotType: 'volume', cmap: 'Spectral', flipCmap: false });
   const initStore = useGlobalStore(useShallow(state=>state.initStore))
   const [zMeta, setZMeta] = useState<object[]>([])
@@ -31,6 +31,11 @@ export function LandingHome() {
     GetTitleDescription(GetStore(initStore)).then((result) => {
       if (isMounted) setTitleDescription(result);
     });
+    const store = GetStore(initStore);
+    const fullmetadata = GetZarrMetadata(store);
+    const variables = GetVariableNames(fullmetadata);
+    fullmetadata.then(e=>setZMeta(e))
+    variables.then(e=> {setVariables(e)})
     return () => { isMounted = false; };
   }, [initStore]);
 
@@ -57,21 +62,14 @@ export function LandingHome() {
 
   useEffect(()=>{
     setColormap(GetColorMapTexture(colormap, settings.cmap, 1, "#000000", 0, settings.flipCmap));
-  },[settings.cmap,  colormap, settings.flipCmap, setColormap])
-
-  useEffect(()=>{
-    variables.then(e=> setVariables(e))
-    fullmetadata.then(e=> setZMeta(e))
-  },[])
+  },[settings.cmap,  settings.flipCmap])
 
   //These values are passed to the Plot Component
   const plotObj = useMemo(() => ({
-    plotType: settings.plotType,
     ZarrDS,
     variable,
-    bgcolor,
     canvasWidth
-  }), [settings.plotType, ZarrDS, variable, bgcolor, canvasWidth]);
+  }), [settings.plotType, ZarrDS, variable, canvasWidth]);
 
 //This is the data being passed down the plot tree
   const analysisObj = useMemo(() => ({
@@ -84,12 +82,10 @@ export function LandingHome() {
   
   return (
     <>
-      {/* <PaneManager /> */}
-    <PaneStore variablesPromise={variables} onSettingsChange={setSettings} />
     {canvasWidth < 10 && variable != "Default" && <ShowAnalysis onClick={()=>setCanvasWidth(window.innerWidth*.5)} canvasWidth={canvasWidth} />}
     {canvasWidth > 10 && <MiddleSlider canvasWidth={canvasWidth} setCanvasWidth={setCanvasWidth}/>}
     <Loading showLoading={showLoading} />
-    {canvasWidth > 10 && <Analysis values={analysisObj.values} variables={variables} />}
+    {canvasWidth > 10 && <Analysis values={analysisObj.values} />}
     {variable === "Default" && <VariableScroller zMeta={zMeta}/>}
     {variable != "Default" && <Plot values={plotObj} setShowLoading={setShowLoading} />}
     {metadata && <Metadata data={metadata} /> }
diff --git a/src/components/plots/Analysis.tsx b/src/components/plots/Analysis.tsx
index 94b83178..fe30beff 100644
--- a/src/components/plots/Analysis.tsx
+++ b/src/components/plots/Analysis.tsx
@@ -1,3 +1,4 @@
+//@ts-nocheck Analysis requires quite a lot of work to mesh with new UI. Will Monkey with that later
 import React, { useEffect, useMemo, useRef } from 'react'
 import { useState } from 'react'
 import { Canvas } from '@react-three/fiber'
@@ -19,31 +20,12 @@ interface Array{
   shape:number[],
   stride:number[]
 }
-interface AnalysisParameters {
-    values: {
-        ZarrDS: ZarrDataset;
-        canvasWidth: number;
-    }
-    variables: Promise<string[]>
-}
 
 // This wrapper handles loading state
-export function Analysis({ values, variables }: AnalysisParameters) {
-    const [optionsVariables, setOptionsVariables] = useState<{ text: string; value: string }[] | null>(null);
-
-    useEffect(() => {
-        getVariablesOptions(variables).then(setOptionsVariables);
-    }, [variables]);
-
-    if (!optionsVariables) return null;
-
-    return <AnalysisLoaded values={values} optionsVariables={optionsVariables} />;
-}
 
 // This renders only when data is ready and uses hooks safely
-function AnalysisLoaded({ values, optionsVariables }: { 
+export function Analysis({ values }: { 
     values: { ZarrDS: ZarrDataset; canvasWidth: number };
-    optionsVariables: { text: string; value: string }[];
 }) {
     const {dimNames, dimArrays, dimUnits, setDimNames, setDimArrays, setDimUnits} = useGlobalStore(
       useShallow(state=>({
@@ -55,6 +37,8 @@ function AnalysisLoaded({ values, optionsVariables }: {
         setDimUnits: state.setDimUnits
       })))
 
+
+    const variables = useGlobalStore(state => state.variables)
     const {ZarrDS, canvasWidth} = values
     const scaleObjRef = useRef<Record<string, { min: number; max: number }>>({});
     const setFlipY = useGlobalStore(state=>state.setFlipY)
diff --git a/src/components/plots/DataCube.tsx b/src/components/plots/DataCube.tsx
index e1311012..fc88c90e 100644
--- a/src/components/plots/DataCube.tsx
+++ b/src/components/plots/DataCube.tsx
@@ -3,7 +3,7 @@ import * as THREE from 'three'
 import { vertexShader, fragmentShader } from '@/components/textures/shaders';
 import { usePaneInput, usePaneFolder, useSliderBlade, useTweakpane } from '@lazarusa/react-tweakpane'
 import { createPaneContainer } from '@/components/ui';
-import { useGlobalStore } from '@/utils/GlobalStates';
+import { useGlobalStore, usePlotStore } from '@/utils/GlobalStates';
 import { useShallow } from 'zustand/shallow';
 
 interface DataCubeProps {
@@ -12,8 +12,16 @@ interface DataCubeProps {
 
 export const DataCube = ({ volTexture }: DataCubeProps ) => {
 
+
     const {shape, colormap, flipY} = useGlobalStore(useShallow(state=>({shape:state.shape, colormap:state.colormap, flipY:state.flipY}))) //We have to useShallow when returning an object instead of a state. I don't fully know the logic yet
 
+    const {valueRange, xRange, yRange, zRange, quality} = usePlotStore(useShallow(state => ({
+      valueRange: state.valueRange,
+      xRange: state.xRange,
+      yRange: state.yRange,
+      zRange: state.zRange,
+      quality: state.quality
+    })))
     const paneContainer = createPaneContainer("plot-pane");
     const pane = useTweakpane(
         {
@@ -43,49 +51,6 @@ export const DataCube = ({ volTexture }: DataCubeProps ) => {
         step: 25,
       })
 
-      const [xMin] = useSliderBlade(pane, {
-        label: 'xmin',
-        value: -1,
-        min: -1,
-        max: 1,
-        step: 0.01,
-      })
-      const [xMax] = useSliderBlade(pane, {
-        label: 'xmax',
-        value: 1,
-        min: -1,
-        max: 1,
-        step: 0.01,
-      })
-      const [yMin] = useSliderBlade(pane, {
-        label: 'ymin',
-        value: -1,
-        min: -1,
-        max: 1,
-        step: 0.01,
-      })
-      const [yMax] = useSliderBlade(pane, {
-        label: 'ymax',
-        value: 1,
-        min: -1,
-        max: 1,
-        step: 0.01,
-      })
-      const [zMin] = useSliderBlade(pane, {
-        label: 'zmin',
-        value: -1,
-        min: -1,
-        max: 1,
-        step: 0.01,
-      })
-      const [zMax] = useSliderBlade(pane, {
-        label: 'zmax',
-        value: 1,
-        min: -1,
-        max: 1,
-        step: 0.01,
-      })
-
       const [flip] = usePaneInput(
         pane,
         'flip',
@@ -103,9 +68,9 @@ export const DataCube = ({ volTexture }: DataCubeProps ) => {
           cameraPos: { value: new THREE.Vector3() },
           threshold: {value: threshold},
           scale: {value: shape},
-          flatBounds:{value: new THREE.Vector4(xMin,xMax,yMin,yMax)},
-          vertBounds:{value: new THREE.Vector2(zMin,zMax)},
-          steps: { value: steps },
+          flatBounds:{value: new THREE.Vector4(xRange[0],xRange[1],zRange[0],zRange[1])},
+          vertBounds:{value: new THREE.Vector2(yRange[0],yRange[1])},
+          steps: { value: quality },
           flip: {value: flip }
       },
       vertexShader,
diff --git a/src/components/plots/Plot.tsx b/src/components/plots/Plot.tsx
index 2cab7190..33a5d775 100644
--- a/src/components/plots/Plot.tsx
+++ b/src/components/plots/Plot.tsx
@@ -6,22 +6,19 @@ import { PointCloud, UVCube, DataCube } from '@/components/plots';
 import { Canvas, useThree } from '@react-three/fiber';
 import { ArrayToTexture, DefaultCubeTexture } from '@/components/textures';
 import { ZarrDataset } from '../zarr/ZarrLoaderLRU';
-import { useGlobalStore } from '@/utils/GlobalStates';
+import { useGlobalStore, usePlotStore } from '@/utils/GlobalStates';
 import { useShallow } from 'zustand/shallow';
 
 interface PlotParameters{
     values:{
-        plotType:string;
         ZarrDS: ZarrDataset;
         variable:string;
-        bgcolor:string;
         canvasWidth:number
     }
     setShowLoading: React.Dispatch<React.SetStateAction<boolean>>;
     
 }
 
-
 const Plot = ({values,setShowLoading}:PlotParameters) => {
 
     const {
@@ -41,12 +38,13 @@ const Plot = ({values,setShowLoading}:PlotParameters) => {
           setDimNames:state.setDimNames,
           setDimUnits:state.setDimUnits}
         )))
-
     const colormap = useGlobalStore(state=>state.colormap)
-    const {plotType,ZarrDS,variable,bgcolor,canvasWidth} = values;
+
+    const {ZarrDS,variable,canvasWidth} = values;
+    const plotType = usePlotStore(state => state.plotType)
 
     const [texture, setTexture] = useState<THREE.DataTexture | THREE.Data3DTexture | null>(null)
-    const [currentBg, setCurrentBg] = useState(bgcolor || 'var(--background)')
+    // const [currentBg, setCurrentBg] = useState(bgcolor || 'var(--background)')
     const [show, setShow] = useState<boolean>(true)
     
     const [windowWidth, setWindowWidth] = useState<number>(0);
@@ -63,7 +61,7 @@ const Plot = ({values,setShowLoading}:PlotParameters) => {
         const observer = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
                 if (mutation.attributeName === 'data-theme') {
-                    setCurrentBg('var(--background)')
+                    // setCurrentBg('var(--background)')
                 }
             })
         })
@@ -76,9 +74,9 @@ const Plot = ({values,setShowLoading}:PlotParameters) => {
     }, [])
 
     // Update background when bgcolor changes
-    useEffect(() => {
-        setCurrentBg(bgcolor || 'var(--background)')
-    }, [bgcolor])
+    // useEffect(() => {
+    //     setCurrentBg(bgcolor || 'var(--background)')
+    // }, [bgcolor])
 
   //DATA LOADING
   useEffect(() => {
@@ -151,7 +149,7 @@ const Plot = ({values,setShowLoading}:PlotParameters) => {
       <Canvas camera={{ position: [-4.5, 3, 4.5], fov: 50 }}
         frameloop="demand"
         style={{
-          background: currentBg
+          // background: currentBg
         }}
       >
         {/* Volume Plots */}
diff --git a/src/components/plots/PointCloud.tsx b/src/components/plots/PointCloud.tsx
index f7172b47..06bca147 100644
--- a/src/components/plots/PointCloud.tsx
+++ b/src/components/plots/PointCloud.tsx
@@ -5,7 +5,8 @@ import { useMemo } from 'react'
 import { pointFrag, pointVert } from '@/components/textures/shaders'
 import { usePaneInput, usePaneFolder, useSliderBlade, useTweakpane } from '@lazarusa/react-tweakpane'
 import { createPaneContainer } from '@/components/ui';
-import { useGlobalStore } from '@/utils/GlobalStates';
+import { useGlobalStore, usePlotStore } from '@/utils/GlobalStates';
+import { useShallow } from 'zustand/shallow';
 
 interface PCProps {
   texture: THREE.Data3DTexture | THREE.DataTexture | null,
@@ -16,39 +17,13 @@ export const PointCloud = ({textures} : {textures:PCProps} )=>{
     const {texture, colormap } = textures;
     const paneContainer = createPaneContainer("plot-cloud");
     const flipY = useGlobalStore(state=>state.flipY)
-    const pane = useTweakpane(
-      {
-        scalePoints: false,
-      },
-      {
-        title: 'Point cloud',
-        container: paneContainer ?? undefined,
-        expanded: false,
-      }
-    );
+    
+    const {scalePoints, scaleIntensity, pointSize} = usePlotStore(useShallow(state => ({
+      scalePoints: state.scalePoints,
+      scaleIntensity: state.scaleIntensity,
+      pointSize: state.pointSize
+    })))
 
-    const [pointScale] = useSliderBlade(pane, {
-      label: 'Point Size',
-      value: 1,
-      min: 1,
-      max: 100,
-      step: 1,
-    })
-    const [scalePoints] = usePaneInput(
-      pane,
-      'scalePoints',
-      {
-        label: 'Scale Points By Value',
-        value: false
-      }
-    )
-    const [scaleIntensity] = useSliderBlade(pane, {
-      label: 'Scale Intensity',
-      value: 2,
-      min: 1,
-      max: 10,
-      step: 0.2,
-    })
     //Extract data and shape from Data3DTexture
     const { data, width, height, depth } = useMemo(() => {
       if (!(texture instanceof THREE.Data3DTexture)) {
@@ -104,7 +79,7 @@ export const PointCloud = ({textures} : {textures:PCProps} )=>{
     const shaderMaterial = new THREE.ShaderMaterial({
       glslVersion: THREE.GLSL3,
       uniforms: {
-        pointSize: {value: pointScale},
+        pointSize: {value: pointSize},
         cmap: {value: colormap},
         scalePoints:{value: scalePoints},
         scaleIntensity: {value: scaleIntensity}
diff --git a/src/components/textures/colormap.tsx b/src/components/textures/colormap.tsx
index 42f0ac81..4b4b26b3 100644
--- a/src/components/textures/colormap.tsx
+++ b/src/components/textures/colormap.tsx
@@ -43,16 +43,12 @@ export function GetColorMapTexture(
   colData[lastIndex + 2] = to_nan[2];
   colData[lastIndex + 3] = nan_alpha;
   if (texture) {
-    // Update the existing texture data
-    (texture.image.data as Uint8Array).set(colData);
-    texture.needsUpdate = true;
-    return texture;
-  } else {
+    texture.dispose()
+  } 
     // Create a new texture if not already available
     const newTexture = new THREE.DataTexture(colData, rgbv.length + 1, 1, THREE.RGBAFormat);
     newTexture.needsUpdate = true;
     return newTexture;
-  }
 }
 
 // export function genRand(count: number) {
diff --git a/src/components/textures/shaders/pointVertex.glsl b/src/components/textures/shaders/pointVertex.glsl
index 9788f198..fee67ca4 100644
--- a/src/components/textures/shaders/pointVertex.glsl
+++ b/src/components/textures/shaders/pointVertex.glsl
@@ -10,7 +10,8 @@ void main() {
     //If it is nan we just yeet it tf out of the screen space. LMAO I love this solution
     float pointScale = pointSize/gl_Position.w;
     pointScale = scalePoints ? pointScale*pow(vValue,scaleIntensity) : pointScale;
-    if (value == 255. || (pointScale < 0.75 && scalePoints)){
+
+    if (value == 255. || (pointScale*gl_Position.w < 0.75 && scalePoints)){
         gl_Position = vec4(2.0, 2.0, 2.0, 1.0);
     }
 
diff --git a/src/components/ui/Navbar.tsx b/src/components/ui/Navbar.tsx
index 45e8e1f2..32b9ca3a 100644
--- a/src/components/ui/Navbar.tsx
+++ b/src/components/ui/Navbar.tsx
@@ -1,7 +1,9 @@
 "use client";
-
+import { LuChevronsUpDown } from "react-icons/lu";
+import { IoIosCheckmark } from "react-icons/io";
+import { ZARR_STORES } from "../zarr/ZarrLoaderLRU";
 import Image from "next/image";
-import { AboutButton } from "@/components/ui";
+import { AboutButton, PlotTweaker } from "@/components/ui";
 import ThemeSwitch  from "@/components/ui/ThemeSwitch";
 import logo from "@/app/logo.png"
 import './css/Navbar.css'
@@ -11,6 +13,8 @@ import { colormaps } from '@/components/textures';
 import { useEffect, useState } from "react";
 import { GetColorMapTexture } from "@/components/textures";
 import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -26,6 +30,21 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
 import {
   Select,
   SelectContent,
@@ -36,6 +55,54 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 
+const ColorMaps = ({cmap, setCmap} : {cmap : string, setCmap : React.Dispatch<React.SetStateAction<string>>}) => {
+  const [open, setOpen] = useState(false)
+  return (
+    <Popover open={open} onOpenChange={setOpen}>    
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[100%] justify-between"
+        >
+          {cmap === "Default" ?  "Select Colormap..." : cmap }
+          <LuChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[100%] p-0">
+        <Command>
+          <CommandInput placeholder="Search framework..." />
+          <CommandList>
+            <CommandEmpty>No Colormap found.</CommandEmpty>
+            <CommandGroup>
+              {colormaps.map((value) => (
+                <CommandItem
+                  key={value}
+                  value={value}
+                  onSelect={(currentValue) => {
+                    setCmap(currentValue)
+                    setOpen(false);
+                  }}
+                >
+                  <IoIosCheckmark
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      value === cmap ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  {value}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+
+}
+
 const Navbar = () => {
   const {setInitStore, setVariable, setColormap} = useGlobalStore(
     useShallow(state=>({
@@ -44,13 +111,19 @@ const Navbar = () => {
       setColormap : state.setColormap
     
     })))
+
+  const [refresh, setRefresh] = useState<boolean>(false)
   const variables = useGlobalStore(useShallow(state=>state.variables))
   const setPlotType = usePlotStore(state=> state.setPlotType)
-  const [cmap, setCmap] = useState<string>("viridis")
+  const [cmap, setCmap] = useState<string>("Default")
+  const [flipCmap, setFlipCmap] = useState<boolean>(false)
+  const colormap = useGlobalStore(useShallow(state=>state.colormap))
+
+  useEffect(()=>{
+    setColormap(GetColorMapTexture(colormap, cmap === "Default" ? "Spectral" : cmap, 1, "#000000", 0, flipCmap));
+  },[cmap, flipCmap])
+
 
-  // useEffect(()=>{
-  //     setColormap(GetColorMapTexture(colormap, settings.cmap, 1, "#000000", 0, settings.flipCmap));
-  //   },[settings.cmap,  colormap, settings.flipCmap, setColormap])
   return (
     <nav className="navbar">
       <div className="navbar-left">
@@ -60,15 +133,15 @@ const Navbar = () => {
         <div className="nav-dropdown">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button variant="outline">Open</Button>
+              <Button variant="outline">Settings</Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56" align="start">
               <DropdownMenuLabel>Datasets</DropdownMenuLabel>
               <DropdownMenuGroup>
-                <DropdownMenuItem onSelect={e=>console.log("setting to ESDC")}>
+                <DropdownMenuItem onSelect={e=>setInitStore(ZARR_STORES["ESDC"])}>
                   ESDC
                 </DropdownMenuItem>
-                <DropdownMenuItem onSelect={e=>console.log("setting to Seasfire")}>
+                <DropdownMenuItem onSelect={e=>setInitStore(ZARR_STORES["SEASFIRE"])}>
                   Seasfire
                   <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
                 </DropdownMenuItem>
@@ -77,7 +150,7 @@ const Navbar = () => {
                   <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
                 </DropdownMenuItem>
               </DropdownMenuGroup>
-              {/* <DropdownMenuSeparator /> */}
+              <DropdownMenuSeparator />
               <DropdownMenuLabel>Plot Options</DropdownMenuLabel>
               <DropdownMenuSub>
                   <DropdownMenuSubTrigger>Plot Type</DropdownMenuSubTrigger>
@@ -88,31 +161,17 @@ const Navbar = () => {
                     </DropdownMenuSubContent>
                   </DropdownMenuPortal>
                 </DropdownMenuSub>
-
+              <DropdownMenuSeparator />
               <DropdownMenuSub>
-                  <Select onValueChange={e=>setCmap(e)}>
-                    <SelectTrigger className="w-[100%]">
-                      <SelectValue placeholder="Select a Colormap" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectGroup>
-                        <SelectLabel>ColorMaps</SelectLabel>
-                        {colormaps.map((val,idx)=>(
-                          <SelectItem value={val} key={idx} >{val}</SelectItem>
-                        ))}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
+                 <DropdownMenuLabel>Colormap</DropdownMenuLabel>
+                  <ColorMaps cmap={cmap} setCmap={setCmap}/>
+                  <Button className="w-[100%] h-[20px] cursor-[pointer]" variant="destructive" onClick={()=>setFlipCmap(x=>!x)}>Flip Colormap</Button>
                 </DropdownMenuSub>
               <DropdownMenuSeparator />
-              <DropdownMenuItem>GitHub</DropdownMenuItem>
-              <DropdownMenuItem>Support</DropdownMenuItem>
-              <DropdownMenuItem disabled>API</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>
-                Log out
-                <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-              </DropdownMenuItem>
+              <DropdownMenuItem> 
+                <a href="https://github.com/EarthyScience/Browzarr/" target="_blank" rel="noopener noreferrer">
+                  GitHub
+                </a></DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
@@ -131,6 +190,8 @@ const Navbar = () => {
             </SelectGroup>
           </SelectContent>
         </Select>
+      
+      <PlotTweaker/>
       </div>
       <ThemeSwitch />
       <AboutButton />
diff --git a/src/components/ui/PlotTweaker.tsx b/src/components/ui/PlotTweaker.tsx
new file mode 100644
index 00000000..bdd66358
--- /dev/null
+++ b/src/components/ui/PlotTweaker.tsx
@@ -0,0 +1,210 @@
+"use client";
+
+import React, { useEffect, useState } from 'react'
+import { useGlobalStore, usePlotStore } from '@/utils/GlobalStates'
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+import Slider  from 'rc-slider';
+import { useShallow } from 'zustand/shallow';
+import 'rc-slider/assets/index.css';
+import { ArrayMinMax } from '@/utils/HelperFuncs';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+function DeNorm(val : number, min : number, max : number){
+    const range = max-min;
+    return Math.round((val*range+min)*100)/100;
+}
+
+
+const MinMaxSlider = ({range, setRange, valueScales} : 
+    {
+        range : number[], 
+        setRange : (value: number[]) => void, 
+        valueScales : {minVal : number, maxVal  : number}
+    }) => {
+        let {minVal, maxVal} = valueScales;
+        minVal = Number(minVal)
+        maxVal = Number(maxVal)
+    return(
+        <div className='w-full flex justify-between flex-col'>
+            <Slider
+                range
+                min={-1}
+                max={1}
+                defaultValue={range}
+                step={0.01}
+                onChange={(values) => setRange(values as number[])}
+            />
+        {/* Min/Max labels */}
+            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, marginTop: 18 }}>
+                {/* <span>Min: {DeNorm(range[0], minVal, maxVal)}</span>
+                <span>Max: {DeNorm(range[1], minVal, maxVal)}</span> */}
+                <span>Min: {range[0]}</span>
+                <span>Max: {range[1]}</span>
+            </div>
+        </div>
+
+    )
+}
+
+const VolumeTweaks = () => {
+    const {valueRange, xRange, yRange, zRange, setValueRange, setXRange, setYRange, setZRange, setQuality} = usePlotStore(useShallow(state => ({
+        valueRange: state.valueRange,
+        xRange: state.xRange,
+        yRange: state.yRange,
+        zRange: state.zRange,
+        setValueRange: state.setValueRange,
+        setXRange: state.setXRange,
+        setYRange: state.setYRange,
+        setZRange: state.setZRange,
+        setQuality: state.setQuality
+    })))
+    const [xScales, setXScales] = useState<{minVal: number, maxVal: number}>({minVal: 0, maxVal: 0})
+    const [yScales, setYScales] = useState<{minVal: number, maxVal: number}>({minVal: 0, maxVal: 0})
+    const [zScales, setZScales] = useState<{minVal: number, maxVal: number}>({minVal: 0, maxVal: 0})
+
+    const {valueScales, dimArrays} = useGlobalStore(useShallow(state => ({valueScales : state.valueScales, dimArrays : state.dimArrays})))
+
+    useEffect(()=>{
+        if (dimArrays){
+            const [xMin, xMax] = ArrayMinMax(dimArrays[2]);
+            const [yMin, yMax] = ArrayMinMax(dimArrays[1]); 
+            const [zMin, zMax] = ArrayMinMax(dimArrays[0]);
+            setXScales({minVal: xMin, maxVal: xMax});
+            setYScales({minVal: yMin, maxVal: yMax});
+            setZScales({minVal: zMin, maxVal: zMax});
+        }
+        
+    },[dimArrays])
+
+
+    return(
+        <div className="nav-dropdown">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">Adjust Volume</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56" align="start">
+                <DropdownMenuLabel>Plot Quality</DropdownMenuLabel>
+                <DropdownMenuItem onSelect={e=> e.preventDefault()} >
+                <div className='w-full flex justify-between'>
+                    Worse
+                    <input type="range"
+                        min={50}
+                        max={1000}
+                        step={50}
+                        defaultValue={200} 
+                    onChange={e => setQuality(parseInt(e.target.value))}
+                    />
+                    Better
+                </div>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                    <DropdownMenuLabel>Value Cropping</DropdownMenuLabel>
+                    <DropdownMenuItem onSelect={e=> e.preventDefault()}>
+                        <MinMaxSlider range={valueRange} setRange={setValueRange} valueScales={valueScales}/>
+                    </DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup onSelect={e=> e.preventDefault()}>
+                    <DropdownMenuLabel>Spatial Cropping</DropdownMenuLabel>
+                    <DropdownMenuGroup>
+                        <DropdownMenuItem onSelect={e=> e.preventDefault()}>
+                            <MinMaxSlider range={xRange} setRange={setXRange} valueScales={xScales}/>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onSelect={e=> e.preventDefault()}>
+                            <MinMaxSlider range={yRange} setRange={setYRange} valueScales={yScales}/>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onSelect={e=> e.preventDefault()}>
+                            <MinMaxSlider range={zRange} setRange={setZRange} valueScales={zScales}/>
+                        </DropdownMenuItem>
+                    </DropdownMenuGroup>
+                </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+    )
+}
+
+
+const PointTweaks = () => {
+    const {setPointSize, setScaleIntensity, setScalePoints} = usePlotStore(useShallow(
+        (state => ({setPointSize: state.setPointSize, setScaleIntensity: state.setScaleIntensity, setScalePoints: state.setScalePoints}))))
+
+    const {scalePoints, scaleIntensity, pointSize} = usePlotStore(useShallow(state => ({
+      scalePoints: state.scalePoints,
+      scaleIntensity: state.scaleIntensity,
+      pointSize: state.pointSize
+    })))
+
+    return(
+        <div className="nav-dropdown">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">Adjust Points</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56" align="start">
+              <DropdownMenuGroup>
+                <DropdownMenuItem onSelect={e=> e.preventDefault()}>
+                    <div className='w-full flex justify-between flex-col items-center'>
+                    <b>Point Size</b>
+                    <input type="range"
+                        className='w-full'
+                        min={1}
+                        max={50}
+                        step={1}
+                        defaultValue={pointSize} 
+                    onChange={e => setPointSize(parseInt(e.target.value))}
+                    />
+                </div>
+                </DropdownMenuItem>
+                <DropdownMenuItem onSelect={e=> e.preventDefault()}>
+                    <Button variant="destructive" className="w-[100%] h-[20px] cursor-[pointer]" onClick={() => setScalePoints(!scalePoints)}>{scalePoints ? "Remove Scaling" : "Scale By Value" }</Button>
+                </DropdownMenuItem>
+
+                <DropdownMenuItem onSelect={e=> e.preventDefault()}>
+                    <div className='w-full flex justify-between flex-col items-center'>
+                    <b>Scale Intensity</b>
+                    <input type="range"
+                        className='w-full'
+                        min={1}
+                        max={100}
+                        step={1}
+                        defaultValue={scaleIntensity} 
+                    onChange={e => setScaleIntensity(parseInt(e.target.value))}
+                    />
+                </div>
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+    )
+}
+
+const PlotTweaker = () => {
+    const plotType = usePlotStore(state => state.plotType)
+  return (
+    <>
+    {plotType === "volume" && <VolumeTweaks/>}
+    {plotType === "point-cloud" && <PointTweaks/>}
+    </>
+  )
+}
+
+export default PlotTweaker
diff --git a/src/components/ui/css/VariableScroller.css b/src/components/ui/css/VariableScroller.css
index 48fcc244..47bbc776 100644
--- a/src/components/ui/css/VariableScroller.css
+++ b/src/components/ui/css/VariableScroller.css
@@ -9,6 +9,7 @@
   overflow: hidden;
   position: fixed;
   left: 50%;
+  user-select: none;
   transform: translateX(-50%);
 }
 
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
index 79f62a1d..320299a1 100644
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -15,6 +15,7 @@ import ShowAnalysis from "./ShowAnalysis";
 import { Loading } from "./Loading";
 import useCSSVariable from "./useCSSVariable";
 import ShowLinePlot from "./ShowLinePlot";
+import PlotTweaker from "./PlotTweaker";
 export {
   Navbar,
   Footer,
@@ -33,5 +34,6 @@ export {
   ShowAnalysis,
   Loading,
   useCSSVariable,
-  ShowLinePlot
+  ShowLinePlot,
+  PlotTweaker
 };
diff --git a/src/components/zarr/DataStores.tsx b/src/components/zarr/DataStores.tsx
index 71327046..a000b535 100644
--- a/src/components/zarr/DataStores.tsx
+++ b/src/components/zarr/DataStores.tsx
@@ -9,50 +9,24 @@ import { GetZarrMetadata,  GetVariableNames } from '@/components/zarr/GetMetadat
 import { useGlobalStore } from '@/utils/GlobalStates';
 
 export function DataStores() {
-    const optionsStores = useMemo(() => Object.entries(ZARR_STORES).map(([key, value]) => ({
-        text: key,
-        value: value
-      })), []);
-const setTimeSeries = useGlobalStore(state=>state.setTimeSeries)
-const paneContainer = createPaneContainer("data-stores-pane");
-const pane = useTweakpane(
-    {
-      backgroundcolor: "#292b32",
-      storeURL: ZARR_STORES.ESDC,
-      varName: "Default"
-    },
-    {
-      title: 'Data Stores',
-      container: paneContainer ?? undefined,
-      expanded: false,
-    }
-  );
+  const storeURL = useGlobalStore(state => state.initStore)
 
-  const [bgcolor] = usePaneInput(pane, 'backgroundcolor', {
-    label: 'bgcolor',
-    value: '#292b32'
-  })
+  const setTimeSeries = useGlobalStore(state=>state.setTimeSeries)
 
-  const [currentStoreURL] = usePaneInput(pane, 'storeURL', {
-    label: 'Store URL',
-    options: optionsStores,
-    value: ZARR_STORES.SEASFIRE
-  })
-  const initStore = GetStore(currentStoreURL);
+  const initStore = GetStore(storeURL);
   const fullmetadata = GetZarrMetadata(initStore);
   const variables = GetVariableNames(fullmetadata);
   const setZarrStore = useGlobalStore(state=>state.setInitStore)
   
   useEffect(()=>{
-    if(currentStoreURL){
-      setZarrStore(currentStoreURL)
+    if(storeURL){
+      setZarrStore(storeURL)
       setTimeSeries([0])
     }
-  },[currentStoreURL])
+  },[storeURL])
 
   return (
     { 
-    bgcolor,
     fullmetadata,
     variables
     }
diff --git a/src/utils/GlobalStates.ts b/src/utils/GlobalStates.ts
index fc5ad813..da76d4ce 100644
--- a/src/utils/GlobalStates.ts
+++ b/src/utils/GlobalStates.ts
@@ -84,22 +84,54 @@ export const useGlobalStore = create<StoreState>((set) => ({
   setPlotDim: (plotDim) => set({ plotDim }),
   setFlipY: (flipY) => set({ flipY }),
   setInitStore: (initStore) => set({ initStore }),
-  setVariable: (variable) => {
-    console.log('✅ setting variable:', variable)
-    set({ variable })
+  setVariable: (variable) => {set({ variable })
   },
   setVariables: (variables) => set({variables})
 }));
 
 type PlotState ={
   plotType: string;
+  pointSize: number;
+  scalePoints: boolean;
+  scaleIntensity: number;
+  valueRange: number[];
+  xRange: number[];
+  yRange: number[];
+  zRange: number[];
+  quality: number;
 
+  setQuality: (quality: number) => void;
+  setValueRange: (valueRange: number[]) => void;
+  setXRange: (xRange: number[]) => void;
+  setYRange: (yRange: number[]) => void;
+  setZRange: (zRange: number[]) => void;
+  setPointSize: (pointSize: number) => void;
+  setScalePoints: (scalePoints: boolean) => void;
+  setScaleIntensity: (scaleIntensity: number) => void;
   setPlotType: (plotType: string) => void;
 }
 
 export const usePlotStore = create<PlotState>((set) => ({
-  plotType: "volume",
+  //Create the initial state for the plot store
+  plotType: "volume", 
+  pointSize: 10,
+  scalePoints: false,
+  scaleIntensity: 1,
+  quality: 200,
+  valueRange: [-1, 1],
+  xRange: [-1, 1],
+  yRange: [-1, 1],
+  zRange: [-1, 1],
 
-  setPlotType: (plotType) => set({ plotType })
+  setQuality: (quality) => set({ quality }),
+  setValueRange: (valueRange) => set({ valueRange }),
+  setXRange: (xRange) => set({ xRange }),
+  setYRange: (yRange) => set({ yRange }),
+  setZRange: (zRange) => set({ zRange }),
+  setPointSize: (pointSize) => set({ pointSize }),
+  setScalePoints: (scalePoints) => set({ scalePoints }),
+  setScaleIntensity: (scaleIntensity) => set({ scaleIntensity }),
+  setPlotType: (plotType) => {set({ plotType })
+  }
   
 }))
\ No newline at end of file
diff --git a/src/utils/HelperFuncs.ts b/src/utils/HelperFuncs.ts
index 57f4d83e..54dd64fb 100644
--- a/src/utils/HelperFuncs.ts
+++ b/src/utils/HelperFuncs.ts
@@ -10,7 +10,6 @@ import * as THREE from 'three'
 
 export function parseTimeUnit(units: string | undefined): number {
     if (units === "Default"){
-        console.log("Aborting?")
         return 1;
     }
 

From 041f09d77d9f8c025d7dec60a454bbdf8fb8e144 Mon Sep 17 00:00:00 2001
From: Jeran <jpoehls@bgc-jena.mpg.de>
Date: Wed, 11 Jun 2025 17:19:00 +0200
Subject: [PATCH 6/7] possibly removed refresh pull on mobile

---
 src/components/ui/Navbar.tsx           |  6 +++---
 src/components/ui/VariableScroller.tsx | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/Navbar.tsx b/src/components/ui/Navbar.tsx
index 32b9ca3a..8394961c 100644
--- a/src/components/ui/Navbar.tsx
+++ b/src/components/ui/Navbar.tsx
@@ -122,7 +122,7 @@ const Navbar = () => {
   useEffect(()=>{
     setColormap(GetColorMapTexture(colormap, cmap === "Default" ? "Spectral" : cmap, 1, "#000000", 0, flipCmap));
   },[cmap, flipCmap])
-
+  
 
   return (
     <nav className="navbar">
@@ -138,10 +138,10 @@ const Navbar = () => {
             <DropdownMenuContent className="w-56" align="start">
               <DropdownMenuLabel>Datasets</DropdownMenuLabel>
               <DropdownMenuGroup>
-                <DropdownMenuItem onSelect={e=>setInitStore(ZARR_STORES["ESDC"])}>
+                <DropdownMenuItem onSelect={e=>{setInitStore(ZARR_STORES["ESDC"]); setVariable("Default")}}>
                   ESDC
                 </DropdownMenuItem>
-                <DropdownMenuItem onSelect={e=>setInitStore(ZARR_STORES["SEASFIRE"])}>
+                <DropdownMenuItem onSelect={e=>{setInitStore(ZARR_STORES["SEASFIRE"]); setVariable("Default")}}>
                   Seasfire
                   <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
                 </DropdownMenuItem>
diff --git a/src/components/ui/VariableScroller.tsx b/src/components/ui/VariableScroller.tsx
index a68a4ba9..6d91790a 100644
--- a/src/components/ui/VariableScroller.tsx
+++ b/src/components/ui/VariableScroller.tsx
@@ -75,6 +75,20 @@ const VariableScroller = ({zMeta} : {zMeta : object[]}) => {
     }
   }
 
+  useEffect(() => { //Supposedly this disables the refresh pull
+  const disablePullToRefresh = (e : any) => {
+    if (e.cancelable) {
+      e.preventDefault();
+    }
+  };
+
+  document.addEventListener("touchmove", disablePullToRefresh, { passive: false });
+
+  return () => {
+    document.removeEventListener("touchmove", disablePullToRefresh);
+  };
+  }, []);
+
   useEffect(()=>{ //Update variable onScroll
     if (variables && zMeta){
       const tempVar = variables[selectedIndex]

From dea7f3c7b46376e0087553632de953da78b0ce31 Mon Sep 17 00:00:00 2001
From: Jeran <jpoehls@bgc-jena.mpg.de>
Date: Wed, 11 Jun 2025 17:24:38 +0200
Subject: [PATCH 7/7] lint

---
 src/components/plots/Analysis.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/plots/Analysis.tsx b/src/components/plots/Analysis.tsx
index fe30beff..36fd095f 100644
--- a/src/components/plots/Analysis.tsx
+++ b/src/components/plots/Analysis.tsx
@@ -1,3 +1,5 @@
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 //@ts-nocheck Analysis requires quite a lot of work to mesh with new UI. Will Monkey with that later
 import React, { useEffect, useMemo, useRef } from 'react'
 import { useState } from 'react'