Merge pull request #488 from EarthyScience/jp/modern-netcdf

Just laying the foundation for when NetCDF is added.

Author: TheJeran

src/components/ui/MainPanel/Dataset.tsx

@@ -1,13 +1,14 @@
 "use client";
 
 import React, { SetStateAction, useEffect, useState, ReactNode } from 'react';
-import { useGlobalStore } from '@/utils/GlobalStates';
+import { useGlobalStore, useZarrStore } from '@/utils/GlobalStates';
 import { useShallow } from 'zustand/shallow';
 import { Input } from '../input';
 import { Button } from '../button';
 import { TbDatabasePlus } from "react-icons/tb";
 import { TbVariable } from "react-icons/tb";
 import LocalZarr from './LocalZarr';
+import LocalNetCDF from './LocalNetCDF';
 import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
 import {
   Tooltip,
@@ -19,6 +20,8 @@ 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',
@@ -94,6 +97,9 @@ const Dataset = ({setOpenVariables} : {setOpenVariables: React.Dispatch<React.Se
   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.useNC
+  })))
 
   const { initStore, setInitStore } = useGlobalStore(
     useShallow((state) => ({
@@ -248,17 +254,25 @@ const Dataset = ({setOpenVariables} : {setOpenVariables: React.Dispatch<React.Se
             >
               Local
             </DatasetOption>
-            {showLocalInput && (
+            {showLocalInput && 
               <div className="mt-2">
-                {isSafari ? (
+                {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} />
-                )}
+                : 
+                <>
+                  <Switcher leftText='Zarr' rightText='NetCDF' state={!useNC} onClick={()=>useZarrStore.setState({useNC:!useNC})} />
+                  {
+                    useNC ? 
+                    <LocalNetCDF setShowLocal={setShowLocalInput} setOpenVariables={popoverSide === 'top' ? setShowDescriptionDialog : setOpenDescriptionPopover} />
+                    :
+                    <LocalZarr setShowLocal={setShowLocalInput} setOpenVariables={popoverSide === 'top' ? setShowDescriptionDialog : setOpenDescriptionPopover} setInitStore={setInitStore} />
+                  }
+                </>
+                }
               </div>
-            )}
+            }
           </div>
         </div>
       </PopoverContent>

src/components/ui/MainPanel/LocalNetCDF.tsx

@@ -0,0 +1,37 @@
+"use client";
+import React, {ChangeEvent} from 'react'
+import { Input } from '../input'
+import { useGlobalStore } from '@/utils/GlobalStates';
+
+interface LocalNCType {
+  setShowLocal: React.Dispatch<React.SetStateAction<boolean>>;
+  setOpenVariables: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const LocalNetCDF = ({setShowLocal, setOpenVariables}:LocalNCType) => {
+
+    const {setStatus} = useGlobalStore.getState()
+
+    const handleFileSelect = async (event: ChangeEvent<HTMLInputElement>) => {
+        const files = event.target.files;
+        if (!files || files.length === 0) {
+        setStatus(null)
+        return;
+        }
+    };
+
+  return (
+    <div className='w-[100%]'>
+        Under construction
+        <Input type="file" id="filepicker"
+          className='hover:drop-shadow-md hover:scale-[110%]'
+          style={{width:'200px', cursor:'pointer'}}
+          accept='.nc, .netcdf, .nc3'
+          onChange={handleFileSelect}
+          disabled
+        />
+    </div>
+  )
+}
+
+export default LocalNetCDF

src/components/ui/MainPanel/LocalZarr.tsx

@@ -1,7 +1,7 @@
 "use client";
 import React, {useState, useEffect, ChangeEvent} from 'react'
 import * as zarr from 'zarrita'
-import { useZarrStore, useErrorStore, useGlobalStore } from '@/utils/GlobalStates';
+import { useZarrStore, useGlobalStore } from '@/utils/GlobalStates';
 import { Input } from '../input';
 import ZarrParser from '@/components/zarr/ZarrParser';
 

src/utils/GlobalStates.ts

@@ -454,6 +454,7 @@ type ZarrState = {
   reFetch: boolean;
   currentChunks: {x:number[], y:number[], z:number[]};
   arraySize: number,
+  useNC: boolean,
 
   setZSlice: (zSlice: [number , number | null]) => void;
   setYSlice: (ySlice: [number , number | null]) => void;
@@ -464,6 +465,7 @@ type ZarrState = {
   ReFetch: () => void;
   setCurrentChunks: (currentChunks: {x:number[], y:number[], z:number[]}) => void;
   setArraySize: (arraySize: number) => void;
+  setUseNC: (useNC: boolean) => void;
 }
 
 export const useZarrStore = create<ZarrState>((set, get) => ({
@@ -475,6 +477,7 @@ export const useZarrStore = create<ZarrState>((set, get) => ({
   reFetch: false,
   currentChunks: {x:[], y:[], z:[]},
   arraySize: 0,
+  useNC: false,
 
   setZSlice: (zSlice) => set({ zSlice }),
   setYSlice: (ySlice) => set({ ySlice }),
@@ -484,7 +487,8 @@ export const useZarrStore = create<ZarrState>((set, get) => ({
   setReFetch: (reFetch) => set({ reFetch }),
   ReFetch: () => set({ reFetch: !get().reFetch }),
   setCurrentChunks: (currentChunks) => set({ currentChunks }),
-  setArraySize: (arraySize) => set({ arraySize })
+  setArraySize: (arraySize) => set({ arraySize }),
+  setUseNC: (useNC) => set({ useNC })
 }))
 
 type CacheState = {