attributes badge (#389)

* badge

* attach attr to cbar name

* better open and close

Author: lazarusA

package.json

@@ -49,6 +49,7 @@
     "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@react-spring/three": "^10.0.0",
     "@react-three/drei": "^10.0.7",

src/components/LandingHome.tsx

@@ -6,19 +6,18 @@ import { ZarrDataset, GetStore } from '@/components/zarr/ZarrLoaderLRU';
 import { useEffect, useMemo } from 'react';
 import { PlotArea, Plot, LandingShapes } from '@/components/plots';
 import { MainPanel } from '@/components/ui';
-import { Metadata, Loading, Navbar, Error } from '@/components/ui';
+import { Loading, Navbar, Error } from '@/components/ui';
 import { useGlobalStore, useZarrStore } from '@/utils/GlobalStates';
 import { useShallow } from 'zustand/shallow';
 
 export function LandingHome() {
   const {
-    initStore, timeSeries, variable, metadata, plotOn,
+    initStore, timeSeries, variable, plotOn,
     setZMeta, setVariables, setPlotOn, setTitleDescription, 
   } = useGlobalStore(useShallow(state => ({
     initStore: state.initStore, 
     timeSeries: state.timeSeries,
     variable: state.variable,
-    metadata: state.metadata,
     plotOn: state.plotOn,
     setZMeta: state.setZMeta,
     setVariables: state.setVariables,
@@ -76,7 +75,6 @@ export function LandingHome() {
 
     {/* {variable === "Default" && <ScrollableLinksTable />} */}
     {variable != "Default" && <Plot ZarrDS={ZarrDS} />}
-    {metadata && <Metadata data={metadata} /> }
     {Object.keys(timeSeries).length >= 1 && <PlotArea />}
     </>
   );

src/components/plots/Plot.tsx

@@ -122,7 +122,7 @@ const Plot = ({ZarrDS}:{ZarrDS: ZarrDataset}) => {
 
     const [textures, setTextures] = useState<THREE.DataTexture[] | THREE.Data3DTexture[] | null>(null)
     const [show, setShow] = useState<boolean>(true) //Prevents rendering of 3D objects until data is fully loaded in
-
+    const [stableMetadata, setStableMetadata] = useState<Record<string, any>>({});
   //DATA LOADING
   useEffect(() => {
     if (variable != "Default") {
@@ -168,6 +168,7 @@ const Plot = ({ZarrDS}:{ZarrDS: ZarrDataset}) => {
       //Get Metadata
       ZarrDS.GetAttributes(variable).then((result)=>{
         setMetadata(result);
+        setStableMetadata(result);
         let [dimArrs, dimUnits, dimNames] = ZarrDS.GetDimArrays()
         if (is4D){
           dimArrs = dimArrs.slice(1);
@@ -232,7 +233,7 @@ const Plot = ({ZarrDS}:{ZarrDS: ZarrDataset}) => {
       style={{width:'100vw'}}
     >
       <AnalysisWG setTexture={setTextures} ZarrDS={ZarrDS}/>
-      {show && <Colorbar units={metadata?.units} valueScales={valueScales}/>}
+      {show && <Colorbar units={stableMetadata?.units} metadata={stableMetadata} valueScales={valueScales}/>}
       <Nav />
       {(isFlat || plotType == "flat") && <AnalysisInfo loc={loc} show={showInfo} info={[...coords.current,val.current]}/> }
       {((!isFlat && plotType != "flat") || (isFlat && plotType === 'sphere')) && <>

src/components/ui/Colorbar.tsx

@@ -8,6 +8,7 @@ import { useGlobalStore, usePlotStore, useAnalysisStore } from '@/utils/GlobalSt
 import { useShallow } from 'zustand/shallow'
 import './css/Colorbar.css'
 import { linspace, TwoDecimals } from '@/utils/HelperFuncs';
+import Metadata from "./MetaData";
 
 const operationMap = {
     // Reductions
@@ -37,7 +38,7 @@ const operationMap = {
     CUMSUM3D: "Cumulative Sum"
 };
 
-const Colorbar = ({units, valueScales} : {units: string, valueScales: {maxVal: number, minVal:number}}) => {
+const Colorbar = ({units, metadata, valueScales} : {units: string, metadata: Record<string, any>, valueScales: {maxVal: number, minVal:number}}) => {
     const {colormap, variable} = useGlobalStore(useShallow(state => ({
         colormap: state.colormap,
         variable: state.variable
@@ -227,7 +228,8 @@ const Colorbar = ({units, valueScales} : {units: string, valueScales: {maxVal: n
                 left:'50%',
                 transform:'translateX(-50%)',
             }}>
-                {`${variable} ${analysisString}`}
+                {<Metadata data={metadata} variable ={variable} />}
+                {`${analysisString}`}
             </p>
         {(cScale != 1 || cOffset != 0) && <RxReset size={25} style={{position:'absolute', top:'-25px', cursor:'pointer'}} 
             onClick={()=>{setNewMin(origMin); setNewMax(origMax)}}

src/components/ui/MainPanel/MetaDataInfo.tsx

@@ -3,6 +3,7 @@ import { useAnalysisStore, useCacheStore, useGlobalStore, usePlotStore, useZarrS
 import { useShallow } from 'zustand/shallow'
 import { SliderThumbs } from "@/components/ui/SliderThumbs"
 import { Button } from "@/components/ui/button"
+import Metadata, { defaultAttributes, renderAttributes } from "@/components/ui/MetaData"
 import { Input } from "../input"
 import { BsFillQuestionCircleFill } from "react-icons/bs";
 import { parseLoc } from "@/utils/HelperFuncs"
@@ -11,7 +12,8 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-
+import {Popover, PopoverTrigger, PopoverContent} from "@/components/ui/popover"
+import { Badge } from "@/components/ui/badge"
 
 const formatArray = (value: string | number[]): string => {
   if (typeof value === 'string') return value
@@ -54,7 +56,7 @@ function HandleCustomSteps(e: string, chunkSize: number){
   }
 
 
-const MetaDataInfo = ({ meta, setShowMeta, setOpenVariables }: { meta: any, setShowMeta: React.Dispatch<React.SetStateAction<boolean>>, setOpenVariables: React.Dispatch<React.SetStateAction<boolean>>  }) => {
+const MetaDataInfo = ({ meta, metadata, setShowMeta, setOpenVariables, popoverSide }: { meta: any, metadata: Record<string, any>, setShowMeta: React.Dispatch<React.SetStateAction<boolean>>, setOpenVariables: React.Dispatch<React.SetStateAction<boolean>>, popoverSide: string  }) => {
   const {is4D, idx4D, variable, initStore, setIs4D, setIdx4D, setVariable, setTextureArrayDepths} = useGlobalStore(useShallow(state => ({
     is4D: state.is4D,
     idx4D: state.idx4D,
@@ -191,9 +193,25 @@ const MetaDataInfo = ({ meta, setShowMeta, setOpenVariables }: { meta: any, setS
       // Don't put any more work in the landing page version. Since it won't be visible in the future
       // The logic here was to just get divs to be used later in a Card or Dialog component!
     <> 
-      <div className="meta-info">
-        <b>Long Name</b> <br/>
-        {`${meta.long_name}`}<br/>
+        <b>{`${meta.long_name} `}</b>
+          { popoverSide=="left" ? <Popover>
+            <PopoverTrigger className="cursor-pointer" asChild>
+              <Badge variant="default">
+              Attributes
+              </Badge>
+            </PopoverTrigger>
+            <PopoverContent
+              data-meta-popover
+              className="max-h-[50vh] overflow-y-auto max-w-200"
+              align="center"
+              >
+              {renderAttributes(metadata, defaultAttributes)}
+            </PopoverContent>
+          </Popover>
+          :
+          <Metadata data={metadata} variable ={'Attributes'} />
+          }
+        <br/>
         <br/>
         <div className="grid grid-cols-2">
           <div>
@@ -367,7 +385,6 @@ const MetaDataInfo = ({ meta, setShowMeta, setOpenVariables }: { meta: any, setS
             </div>
           </>}
       </>}
-      </div>
       <div className="grid gap-2 mt-2">
         {cached &&
         <div>

src/components/ui/MainPanel/Variables.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect, useMemo } from "react";
 import { TbVariable } from "react-icons/tb";
-import { useGlobalStore } from "@/utils/GlobalStates";
+import { useGlobalStore, useZarrStore } from "@/utils/GlobalStates";
 import { useShallow } from "zustand/shallow";
 import { Separator } from "@/components/ui/separator";
 import MetaDataInfo from "./MetaDataInfo";
@@ -20,6 +20,7 @@ import {
   DialogContent,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { ZarrDataset } from "@/components/zarr/ZarrLoaderLRU";
 
 const Variables = ({
   openVariables,
@@ -32,13 +33,20 @@ const Variables = ({
   const [openMetaPopover, setOpenMetaPopover] = useState(false);
 
   const [showMeta, setShowMeta] = useState(false);
-  const { variables, zMeta, initStore } = useGlobalStore(
+  const { variables, zMeta, metadata, setMetadata, initStore } = useGlobalStore(
     useShallow((state) => ({
       variables: state.variables,
       zMeta: state.zMeta,
+      metadata: state.metadata,
+      setMetadata: state.setMetadata,
       initStore: state.initStore
     }))
   );
+  const { currentStore } = useZarrStore(useShallow(state => ({
+    currentStore: state.currentStore,
+  })))
+  const ZarrDS = useMemo(() => new ZarrDataset(currentStore), [currentStore])
+
   const [dimArrays, setDimArrays] = useState([[0],[0],[0]])
   const [dimUnits, setDimUnits] = useState([null,null,null])
   const [dimNames, setDimNames] = useState<string[]> (["Default"])
@@ -61,6 +69,7 @@ const Variables = ({
       const relevant = zMeta.find((e: any) => e.name === selectedVar);
       if (relevant){
         setMeta({...relevant, dimInfo : {dimArrays, dimNames, dimUnits}});
+        ZarrDS.GetAttributes(selectedVar).then(e=>setMetadata(e))
       }
     }
   }, [selectedVar, variables, zMeta, dimArrays, dimNames, dimUnits]);
@@ -69,6 +78,7 @@ const Variables = ({
     setSelectedIndex(null)
     setSelectedVar(null)
     setMeta(null)
+    setMetadata(null)
   },[initStore])
 
   useEffect(() => {
@@ -191,9 +201,11 @@ const Variables = ({
           >
             {meta && (
                 <MetaDataInfo 
-                  meta={meta} 
+                  meta={meta}
+                  metadata={metadata??{}}
                   setShowMeta={setOpenMetaPopover} 
                   setOpenVariables={setOpenVariables}
+                  popoverSide={"left"}
                 />
             )}
           </PopoverContent>
@@ -202,12 +214,16 @@ const Variables = ({
       {popoverSide === "top" && (
         <Dialog open={showMeta} onOpenChange={setShowMeta}>
           <DialogContent className="max-w-[85%] md:max-w-2xl max-h-[80vh] overflow-y-auto">
-            <DialogTitle className="text-center text-lg font-semibold">
-              {selectedVar}
-            </DialogTitle>
-            <div className="mt-4">
+            <DialogTitle>{}</DialogTitle>
+            <div className="-mt-4">
               {meta && (
-                <MetaDataInfo meta={meta} setShowMeta={setShowMeta} setOpenVariables={setOpenVariables}/>
+                <MetaDataInfo
+                  meta={meta}
+                  metadata={metadata??{}}
+                  setShowMeta={setShowMeta}
+                  setOpenVariables={setOpenVariables}
+                  popoverSide={"top"}
+                />
               )}
             </div>
           </DialogContent>

src/components/ui/MetaData.tsx

@@ -20,7 +20,7 @@ import {
 
 import { Button } from "@/components/ui/button"
 
-const defaultAttributes = [
+export const defaultAttributes = [
     "long_name",
     "description",
     "units",
@@ -51,7 +51,7 @@ export function renderAttributes(
         >
           {key}:
         </div>
-        <div className="font-mono whitespace-pre-wrap break-words md:col-start-2 md:row-start-auto pl-4 md:pl-0"
+        <div className="font-mono whitespace-pre-wrap break-words md:col-start-2 md:row-start-auto pl-4 md:pl-2"
           style={{ overflowWrap: 'anywhere' }}
         >
           {typeof value === 'object' ? JSON.stringify(value) : String(value)}
@@ -60,41 +60,37 @@ export function renderAttributes(
     );
   });
 }
-const Metadata = ({ data }: { data: Record<string, any> }) => {
+const Metadata = ({ data, variable }: { data: Record<string, any>, variable: string }) => {
     return (
-        <div className="metadata-container">
-            <Dialog>
-                <Tooltip delayDuration={500} >
-                    <TooltipTrigger asChild>
-                    <DialogTrigger asChild>
-                        <div>
-                        <Button
-                            variant="ghost"
-                            size="icon"
-                            className="size-6 cursor-pointer"
-                            tabIndex={0}
-                            >
-                            <HiInformationCircle className="size-6" />
-                        </Button>
-                        </div>
-                        </DialogTrigger>
-                    </TooltipTrigger>
-                    <TooltipContent side="bottom" align="start">
-                        <span>Show Variable Attributes</span>
-                    </TooltipContent>
-                </Tooltip>
-                <DialogContent aria-describedby="Metadata Information for variable" className="metadata-dialog">
-                    <DialogHeader>
-                        <DialogTitle>Attributes</DialogTitle>
-                    </DialogHeader>
-                        <div className="max-h-[60vh] text-[12px] overflow-y-auto break-words p-0">
-                            <div className="grid grid-cols-1 md:grid-cols-[max-content_1fr] gap-x-3 gap-y-[6px]">
-                                {renderAttributes(data, defaultAttributes)}
-                            </div>
-                        </div>
-                </DialogContent>
-            </Dialog>
-        </div>
+          <Dialog>
+              <Tooltip delayDuration={500} >
+                  <TooltipTrigger asChild>
+                  <DialogTrigger asChild>
+                      <Button
+                          variant={variable == "Attributes" ? "default" : "ghost"}
+                          size="icon"
+                          className="size-6 w-auto cursor-pointer px-2"
+                          tabIndex={0}
+                          >
+                          {variable}
+                      </Button>
+                      </DialogTrigger>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom" align="start">
+                      <span>Show Variable Attributes</span>
+                  </TooltipContent>
+              </Tooltip>
+              <DialogContent aria-describedby="Metadata Information for variable" className="metadata-dialog">
+                  <DialogHeader>
+                      <DialogTitle>Attributes</DialogTitle>
+                  </DialogHeader>
+                      <div className="max-h-[60vh] text-[12px] overflow-y-auto break-words p-0">
+                          <div className="grid grid-cols-1 md:grid-cols-[max-content_1fr] gap-x-1 gap-y-[6px]">
+                              {renderAttributes(data, defaultAttributes)}
+                          </div>
+                      </div>
+              </DialogContent>
+          </Dialog>
     );
 };
 

src/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }