update useNC logic.

src/components/LandingHome.tsx

@@ -59,6 +59,7 @@ export function LandingHome() {
     if (initStore.startsWith('local')){ // Don't fetch store if local 
       return
     }
+    setUseNC(false)
     const newStore = GetStore(initStore)
     setCurrentStore(newStore)
   }, [initStore, setCurrentStore])

src/components/ui/MainPanel/Dataset.tsx

@@ -20,7 +20,7 @@ import {
   DialogContent,
   DialogTitle,
 } from "@/components/ui/dialog";
-
+import { Switcher } from '../Switcher';
 
 const ZARR_STORES = {
   ESDC: 'https://s3.bgc-jena.mpg.de:9000/esdl-esdc-v3.0.2/esdc-16d-2.5deg-46x72x1440-3.0.2.zarr',
@@ -41,7 +41,7 @@ const DescriptionContent = ({
   return (
     <div className='grid gap-1'>
       <div className='mb-2'>
-        <h1 className='text-lg font-bold'>
+        <h1 className="text-lg font-bold break-all">
           {title ? title : "Store"}
         </h1>
         <p className="whitespace-pre-wrap break-words"
@@ -90,13 +90,15 @@ const DatasetOption = ({
 
 const Dataset = ({setOpenVariables} : {setOpenVariables: React.Dispatch<React.SetStateAction<boolean>>}) => {
   const [showStoreInput, setShowStoreInput] = useState(false);
-  const [showLocalZarrInput, setShowLocalZarrInput] = useState(false);
-  const [showLocalNetCDFInput, setShowLocalNetCDFInput] = useState(false);
+  const [showLocalInput, setShowLocalInput] = 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) => ({
@@ -124,7 +126,7 @@ const Dataset = ({setOpenVariables} : {setOpenVariables: React.Dispatch<React.Se
       }, 0);
     }
   }, []);
-
+  console.log(activeOption)
   return (
     <>
     <Popover>
@@ -169,8 +171,7 @@ const Dataset = ({setOpenVariables} : {setOpenVariables: React.Dispatch<React.Se
             active={activeOption === 'ESDC'}
             onClick={() => {
               setShowStoreInput(false);
-              setShowLocalZarrInput(false);
-              setShowLocalNetCDFInput(false);
+              setShowLocalInput(false);
               setActiveOption('ESDC');
               setInitStore(ZARR_STORES.ESDC);
               if (popoverSide === 'top') {
@@ -186,8 +187,7 @@ const Dataset = ({setOpenVariables} : {setOpenVariables: React.Dispatch<React.Se
             active={activeOption === 'seasfire'}
             onClick={() => {
               setShowStoreInput(false);
-              setShowLocalZarrInput(false);
-              setShowLocalNetCDFInput(false);
+              setShowLocalInput(false);
               setActiveOption('seasfire');
               setInitStore(ZARR_STORES.SEASFIRE);
               if (popoverSide === 'top') {
@@ -206,8 +206,7 @@ const Dataset = ({setOpenVariables} : {setOpenVariables: React.Dispatch<React.Se
               active={activeOption === 'remote'}
               onClick={() => {
                 setShowStoreInput((prev) => !prev);
-                setShowLocalZarrInput(false);
-                setShowLocalNetCDFInput(false);
+                setShowLocalInput(false);
                 setActiveOption('remote');
               }}
             >
@@ -245,43 +244,30 @@ const Dataset = ({setOpenVariables} : {setOpenVariables: React.Dispatch<React.Se
           </div>
           <div className="w-full">
             <DatasetOption
-              active={activeOption === 'localZarr'}
+              active={activeOption === 'local'}
               onClick={() => {
-                setShowLocalZarrInput((prev) => !prev);
+                setShowLocalInput((prev) => !prev);
                 setShowStoreInput(false);
-                setShowLocalNetCDFInput(false);
-                setActiveOption('localZarr');
+                setActiveOption('local');
               }}
             >
-              Local Zarr
+              Local
             </DatasetOption>
-            {showLocalZarrInput && 
+            {showLocalInput && 
               <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>
-                : 
-                  <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} />
+                <>
+                  <Switcher leftText='Zarr' rightText='NetCDF' state={!useNC} onClick={()=>useZarrStore.setState({fetchNC:!useNC})} />
+                  {
+                    useNC ? 
+                    <LocalNetCDF setShowLocal={setShowLocalInput} setOpenVariables={popoverSide === 'top' ? setShowDescriptionDialog : setOpenDescriptionPopover} />
+                    : 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>
+                    : 
+                    <LocalZarr setShowLocal={setShowLocalInput} setOpenVariables={popoverSide === 'top' ? setShowDescriptionDialog : setOpenDescriptionPopover} setInitStore={setInitStore} />
+                  }
+                </>
               </div>
             }
           </div>
@@ -295,7 +281,7 @@ const Dataset = ({setOpenVariables} : {setOpenVariables: React.Dispatch<React.Se
             <div
               className="absolute -top-8"
               style={{
-                left: ['localZarr', 'localNetCDF', 'remote'].includes(activeOption) ? -215 : -130,
+                left: ['local', 'remote'].includes(activeOption) ? -215 : -130,
               }}
             />
           </PopoverTrigger>

src/components/ui/MainPanel/LocalNetCDF.tsx

@@ -10,8 +10,8 @@ interface LocalNCType {
   setOpenVariables: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const LocalNetCDF = ({setShowLocal, setOpenVariables}:LocalNCType) => {
-    const {setStatus, setVariables, setZMeta, setInitStore} = useGlobalStore.getState()
+const LocalNetCDF = ({ setOpenVariables}:LocalNCType) => {
+    const {setStatus } = useGlobalStore.getState()
     const {ncModule} = useZarrStore.getState()
 
     const handleFileSelect = async (event: ChangeEvent<HTMLInputElement>) => {

src/components/ui/MainPanel/LocalZarr.tsx

@@ -56,6 +56,7 @@ const LocalZarr = ({setShowLocal, setOpenVariables, setInitStore}:LocalZarrType)
       setOpenVariables(true);
       setInitStore(`local_${baseDir}`)
       setStatus(null)
+      useZarrStore.setState({ useNC: false})
     } catch (error) {
       setStatus(null)
       if (error instanceof Error) {

src/components/ui/MainPanel/MetaDataInfo.tsx

@@ -191,9 +191,7 @@ const MetaDataInfo = ({ meta, metadata, setShowMeta, setOpenVariables, popoverSi
     } else {
       setCached(false)
     }
-
   },[meta, chunkIDs])
-
   return (
       // 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!