split nc option (#502)

* split nc option

* nc badge

Author: lazarusA

README.md

@@ -10,6 +10,7 @@
 
 [![][docs-dev-img]][docs-dev-url]
 [![Zarr](https://img.shields.io/badge/Zarr-Compatible-e34b75)](https://zarr.dev/)
+[![NetCDF4](https://img.shields.io/badge/NetCDF4-Compatible-008B8B)](https://www.unidata.ucar.edu/software/netcdf/)
 [![Zarrita.js](https://img.shields.io/badge/Zarrita.js-0.5.x-0A7EA4)](https://github.com/manzt/zarrita.js)
 [![License: Apache 2.0](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://github.com/EarthyScience/Browzarr/blob/1c8d05d1c9ec0f96e599db26808b119839ece749/LICENSE)<br>
 [![Next.js](https://img.shields.io/badge/Next.js->=15.5.7-black)](https://nextjs.org/)
@@ -46,7 +47,7 @@ Stay tuned - major updates and new visualization features are on the way! 🚀
 We are still in active development but plan to release a stable 1.0.0 when all of the desired features are in place and a final stability and bug pass has been completed
 - [x] Temporal and spatial slicing
 - [x] Larger texture support
-- [ ] NetCDF Support
+- [x] NetCDF Support
 - [ ] Customizable export
 - [x] Animation export
 - [ ] Stability pass

src/components/ui/MainPanel/Dataset.tsx

@@ -20,7 +20,6 @@ import {
   DialogContent,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Switcher } from '../Switcher';
 
 
 const ZARR_STORES = {
@@ -91,15 +90,13 @@ const DatasetOption = ({
 
 const Dataset = ({setOpenVariables} : {setOpenVariables: React.Dispatch<React.SetStateAction<boolean>>}) => {
   const [showStoreInput, setShowStoreInput] = useState(false);
-  const [showLocalInput, setShowLocalInput] = useState(false);
+  const [showLocalZarrInput, setShowLocalZarrInput] = useState(false);
+  const [showLocalNetCDFInput, setShowLocalNetCDFInput] = useState(false);
   const [popoverSide, setPopoverSide] = useState<"left" | "top">("left");
   const [activeOption, setActiveOption] = useState<string>('ESDC')
   const [showDescriptionDialog, setShowDescriptionDialog] = useState<boolean>(false)
   const [openDescriptionPopover, setOpenDescriptionPopover] = useState<boolean>(false)
   const [isSafari, setIsSafari] = useState<boolean>(false)
-  const {useNC} = useZarrStore(useShallow(state => ({
-    useNC:state.fetchNC
-  })))
 
   const { initStore, setInitStore } = useGlobalStore(
     useShallow((state) => ({
@@ -172,7 +169,8 @@ const Dataset = ({setOpenVariables} : {setOpenVariables: React.Dispatch<React.Se
             active={activeOption === 'ESDC'}
             onClick={() => {
               setShowStoreInput(false);
-              setShowLocalInput(false);
+              setShowLocalZarrInput(false);
+              setShowLocalNetCDFInput(false);
               setActiveOption('ESDC');
               setInitStore(ZARR_STORES.ESDC);
               if (popoverSide === 'top') {
@@ -188,7 +186,8 @@ const Dataset = ({setOpenVariables} : {setOpenVariables: React.Dispatch<React.Se
             active={activeOption === 'seasfire'}
             onClick={() => {
               setShowStoreInput(false);
-              setShowLocalInput(false);
+              setShowLocalZarrInput(false);
+              setShowLocalNetCDFInput(false);
               setActiveOption('seasfire');
               setInitStore(ZARR_STORES.SEASFIRE);
               if (popoverSide === 'top') {
@@ -202,16 +201,17 @@ const Dataset = ({setOpenVariables} : {setOpenVariables: React.Dispatch<React.Se
           </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);
+                setShowLocalZarrInput(false);
+                setShowLocalNetCDFInput(false);
                 setActiveOption('remote');
               }}
             >
-              Remote
+              Remote Zarr
             </DatasetOption>
             {showStoreInput && (
               <form
@@ -245,35 +245,46 @@ const Dataset = ({setOpenVariables} : {setOpenVariables: React.Dispatch<React.Se
           </div>
           <div className="w-full">
             <DatasetOption
-              active={activeOption === 'local'}
+              active={activeOption === 'localZarr'}
               onClick={() => {
-                setShowLocalInput((prev) => !prev);
+                setShowLocalZarrInput((prev) => !prev);
                 setShowStoreInput(false);
-                setActiveOption('local');
+                setShowLocalNetCDFInput(false);
+                setActiveOption('localZarr');
               }}
             >
-              Local
+              Local Zarr
             </DatasetOption>
-            {showLocalInput && 
+            {showLocalZarrInput && 
               <div className="mt-2">
                 {isSafari ? 
                   <div className="p-3 rounded-md border border-yellow-600 text-tiny max-w-[300px]">
                     <strong>Local folder upload is not supported in Safari.</strong> Please use Chrome, Firefox, or Edge instead.
                   </div>
                 : 
-                <>
-                  <Switcher leftText='Zarr' rightText='NetCDF' state={!useNC} onClick={()=>useZarrStore.setState({fetchNC:!useNC})} />
-                  {
-                    useNC ? 
-                    <LocalNetCDF setShowLocal={setShowLocalInput} setOpenVariables={popoverSide === 'top' ? setShowDescriptionDialog : setOpenDescriptionPopover} />
-                    :
-                    <LocalZarr setShowLocal={setShowLocalInput} setOpenVariables={popoverSide === 'top' ? setShowDescriptionDialog : setOpenDescriptionPopover} setInitStore={setInitStore} />
-                  }
-                </>
+                  <LocalZarr setShowLocal={setShowLocalZarrInput} setOpenVariables={popoverSide === 'top' ? setShowDescriptionDialog : setOpenDescriptionPopover} setInitStore={setInitStore} />
                 }
               </div>
             }
           </div>
+          <div className="w-full">
+            <DatasetOption
+              active={activeOption === 'localNetCDF'}
+              onClick={() => {
+                setShowLocalNetCDFInput((prev) => !prev);
+                setShowStoreInput(false);
+                setShowLocalZarrInput(false);
+                setActiveOption('localNetCDF');
+              }}
+            >
+              Local NetCDF
+            </DatasetOption>
+            {showLocalNetCDFInput && 
+              <div className="mt-2">
+                <LocalNetCDF setShowLocal={setShowLocalNetCDFInput} setOpenVariables={popoverSide === 'top' ? setShowDescriptionDialog : setOpenDescriptionPopover} />
+              </div>
+            }
+          </div>
         </div>
       </PopoverContent>
     </Popover>
@@ -284,7 +295,7 @@ const Dataset = ({setOpenVariables} : {setOpenVariables: React.Dispatch<React.Se
             <div
               className="absolute -top-8"
               style={{
-                left: ['local', 'remote'].includes(activeOption) ? -215 : -100,
+                left: ['localZarr', 'localNetCDF', 'remote'].includes(activeOption) ? -215 : -130,
               }}
             />
           </PopoverTrigger>

src/components/ui/MainPanel/LocalNetCDF.tsx

@@ -38,14 +38,14 @@ const LocalNetCDF = ({setShowLocal, setOpenVariables}:LocalNCType) => {
         useGlobalStore.setState({titleDescription})
 
         setOpenVariables(true)
-        setShowLocal(false)
+        // setShowLocal(false)
         setStatus(null)
     };
 
   return (
     <div className='w-[100%]'>
         <Input type="file" id="filepicker"
-          className='hover:drop-shadow-md hover:scale-[110%]'
+          className='hover:drop-shadow-md hover:scale-[102%]'
           style={{width:'200px', cursor:'pointer'}}
           accept='.nc, .netcdf, .nc3, .nc4'
           onChange={handleFileSelect}