EarthyScience · TheJeran · Jun 17, 2025 · Jun 17, 2025
diff --git a/package.json b/package.json
@@ -48,7 +48,6 @@
     "next": "15.3.1",
     "next-themes": "^0.4.6",
     "quick-lru": "^7.0.1",
-    "r3f-perf": "^7.2.3",
     "random-words": "^2.0.1",
     "rc-slider": "^11.1.8",
     "react": "^19.0.0",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import { ThemeProvider } from 'next-themes'
 import { Navbar, Footer, Overlays} from "@/components/ui";
-
 import "./globals.css";
 
 export const metadata: Metadata = {
@@ -14,6 +13,7 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+
   return (
     <html suppressHydrationWarning lang="en">
       <body className="antialiased">

diff --git a/src/components/LandingHome.tsx b/src/components/LandingHome.tsx
@@ -9,7 +9,7 @@ import { useEffect, useMemo } from 'react';
 import { Analysis, PlotArea, Plot } from '@/components/plots';
 import { GetColorMapTexture } from '@/components/textures';
 import { MiddleSlider } from '@/components/ui';
-import { Metadata, ShowAnalysis, Loading } from '@/components/ui';
+import { Metadata, ShowAnalysis, Loading, Navbar } from '@/components/ui';
 import { useGlobalStore } from '@/utils/GlobalStates';
 import { useShallow, shallow } from 'zustand/shallow';
 import { PaneStore } from '@/components/zarr/PaneStore';
@@ -40,14 +40,16 @@ export function LandingHome() {
   }, [initStore]);
 
   const { title, description } = titleDescription;
-  const {  setColormap, setVariables,  colormap, timeSeries, variable, metadata  } = useGlobalStore(
+  const {  setColormap, setVariables, setPlotOn, colormap, timeSeries, variable, metadata, plotOn  } = useGlobalStore(
     useShallow(state => ({
       setColormap: state.setColormap,
       setVariables: state.setVariables,
+      setPlotOn: state.setPlotOn,
       colormap: state.colormap,
       timeSeries: state.timeSeries,
       variable: state.variable,
       metadata: state.metadata,
+      plotOn: state.plotOn
     }))
   );
   const [showLoading, setShowLoading] = useState<boolean>(false);
@@ -77,13 +79,21 @@ export function LandingHome() {
       canvasWidth,
     }
   }), [ZarrDS, canvasWidth]);
+
+  useEffect(()=>{
+    if (variable === "Default"){
+      setCanvasWidth(0);
+      setPlotOn(false)
+    }
+  },[variable])
 
   return (
     <>
+    {!plotOn && <Navbar />}
     {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} />}
+    {canvasWidth > 10 && variable != "Default" && <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/Plot.tsx b/src/components/plots/Plot.tsx
@@ -27,15 +27,17 @@ const Plot = ({values,setShowLoading}:PlotParameters) => {
       setMetadata, 
       setDimArrays, 
       setDimNames, 
-      setDimUnits} = useGlobalStore(
+      setDimUnits,
+      setPlotOn} = useGlobalStore(
         useShallow(state => ({  //UseShallow for object returns
           setShape:state.setShape,
           setFlipY:state.setFlipY,
           setValueScales:state.setValueScales,
           setMetadata: state.setMetadata,
           setDimArrays:state.setDimArrays, 
           setDimNames:state.setDimNames,
-          setDimUnits:state.setDimUnits}
+          setDimUnits:state.setDimUnits,
+          setPlotOn: state.setPlotOn}
         )))
     const {colormap, variable, isFlat, setIsFlat} = useGlobalStore(useShallow(state=>({
       colormap: state.colormap, variable: state.variable, isFlat: state.isFlat, setIsFlat: state.setIsFlat
@@ -110,6 +112,7 @@ const Plot = ({values,setShowLoading}:PlotParameters) => {
         setShape(new THREE.Vector3(2, shapeRatio, 2));
         setShowLoading(false)
         setShow(true)
+        setPlotOn(true)
       })
       //Get Metadata
       ZarrDS.GetAttributes(variable).then((result)=>{
@@ -149,7 +152,6 @@ const Plot = ({values,setShowLoading}:PlotParameters) => {
         width: windowWidth - canvasWidth         
       }}
     >
-      {plotType == "volume" && !isFlat && <PlotLineButton />}
       <Nav />
 
       {!isFlat && <>

diff --git a/src/components/ui/Navbar.tsx b/src/components/ui/Navbar.tsx
@@ -4,7 +4,7 @@ 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, PlotTweaker } from "@/components/ui";
+import { AboutButton, PlotTweaker, PlotLineButton } from "@/components/ui";
 import ThemeSwitch  from "@/components/ui/ThemeSwitch";
 import logo from "@/app/logo.png"
 import './css/Navbar.css'
@@ -105,18 +105,20 @@ const ColorMaps = ({cmap, setCmap} : {cmap : string, setCmap : React.Dispatch<Re
 }
 
 const Navbar = React.memo(function Navbar(){
-  const {setInitStore, setVariable, setColormap, setTimeSeries, isFlat, plotOn} = useGlobalStore(
+  const {setInitStore, setVariable, setColormap, setTimeSeries, isFlat, plotOn, variables} = useGlobalStore(
     useShallow(state=>({
       setInitStore : state.setInitStore, 
       setVariable : state.setVariable,
       setColormap : state.setColormap,
       setTimeSeries: state.setTimeSeries,
       isFlat: state.isFlat,
-      plotOn: state.plotOn
+      plotOn: state.plotOn,
+      variables: state.variables
     })))
 
-  const variables = useGlobalStore(useShallow(state=>state.variables))
-  const setPlotType = usePlotStore(state=> state.setPlotType)
+
+  const {setPlotType} = usePlotStore(useShallow(state=> ({
+    setPlotType: state.setPlotType})))
   const [cmap, setCmap] = useState<string>("Default")
   const [flipCmap, setFlipCmap] = useState<boolean>(false)
   const colormap = useGlobalStore(useShallow(state=>state.colormap))
@@ -151,6 +153,7 @@ const Navbar = React.memo(function Navbar(){
                 </DropdownMenuItem>
               </DropdownMenuGroup>
               <DropdownMenuSeparator />
+              {plotOn && <>
               <DropdownMenuSub>
                   <DropdownMenuSubTrigger>Plot Type</DropdownMenuSubTrigger>
                   <DropdownMenuPortal>
@@ -166,6 +169,7 @@ const Navbar = React.memo(function Navbar(){
                   <Button className="w-[100%] h-[20px] cursor-[pointer]" variant="destructive" onClick={()=>setFlipCmap(x=>!x)}>Flip Colormap</Button>
                 </DropdownMenuSub>
               <DropdownMenuSeparator />
+              </>}
               <DropdownMenuItem> 
                 <a href="https://github.com/EarthyScience/Browzarr/" target="_blank" rel="noopener noreferrer">
                   GitHub
@@ -189,7 +193,8 @@ const Navbar = React.memo(function Navbar(){
           </SelectContent>
         </Select>
 
-      {!isFlat && <PlotTweaker/>}
+      {!isFlat && plotOn && <PlotTweaker/>}
+      {!isFlat && plotOn && <PlotLineButton />}
       </div>
       <ThemeSwitch />
       <AboutButton />

diff --git a/src/components/ui/PlotLineButton.tsx b/src/components/ui/PlotLineButton.tsx
@@ -1,5 +1,7 @@
-import React from 'react'
-import lineIcon from '@/assets/line-graph.svg'
+"use client";
+
+import React, {useState} from 'react'
+import { IoMdInformationCircleOutline } from "react-icons/io";
 import { VscGraphLine } from "react-icons/vsc"; //Use this if you hate the svg
 import { usePlotStore } from '@/utils/GlobalStates'
 import { useShallow } from 'zustand/shallow';
@@ -11,14 +13,42 @@ const PlotLineButton = () => {
         setSelectTS: state.setSelectTS
     })))
 
+    const [showInfo, setShowInfo] = useState(false)
+
   return (
 
     <div className='selectTS' onClick={()=> setSelectTS(!selectTS)}>
       <VscGraphLine size={40}
       style={{
         color:selectTS ? "red" : "grey",
-        filter: selectTS ? "drop-shadow(0px 0px 10px red)" : ""
+        filter: selectTS ? "drop-shadow(0px 0px 10px red)" : "",
+        cursor:'pointer'
       }}/>
+      <IoMdInformationCircleOutline 
+        style={{
+          height:'15px',
+          position:'absolute',
+          right:'-10px',
+          bottom:'0',
+          zIndex:'3'
+        }}
+        onPointerEnter={e=>setShowInfo(true)}
+        onPointerLeave={e=>setShowInfo(false)}
+      />
+      <div
+        style={{
+          position:'absolute',
+          width:'100px',
+          top:'100%',
+          left:'100%',
+          borderRadius: '6px',
+          display: showInfo ? '' : 'none',
+          background: 'rgb(223, 234, 255)',
+          padding:'2px'
+        }}
+      >
+        While active, Click the volume to view 1D transects through the given dimension
+      </div>
     </div>
   )
 }

diff --git a/src/components/ui/css/Navbar.css b/src/components/ui/css/Navbar.css
@@ -3,6 +3,7 @@
   display: flex;
   position: absolute;
   justify-content: space-between;
+  align-content: center;
   top: 4px;
   left: 8px;
   right: 4px;
@@ -44,6 +45,7 @@
 .navbar-left {
   display: flex;
   align-items: center;
+  align-content: center;
 }
 
 .nav-dropdown {

diff --git a/src/components/ui/css/PlotLineButton.css b/src/components/ui/css/PlotLineButton.css
@@ -1,10 +1,6 @@
 .selectTS{
-    width: 50px;
-    height: 50px;
-    position: absolute;
-    right: 20px;
-    top: 45%;
-    z-index: 5;
-    cursor: pointer;
+    z-index: 1;
+    padding-left: 10px;
+    position: relative;
 }