setStatus and CSS change

src/components/plots/AnalysisWG.tsx

@@ -43,10 +43,10 @@ type Operation = keyof typeof ShaderMap;
 const AnalysisWG = ({ setTexture, ZarrDS }: { setTexture: React.Dispatch<React.SetStateAction<THREE.Data3DTexture[] | THREE.DataTexture[] | null>>, ZarrDS: ZarrDataset }) => {
 
     // Global state hooks remain the same
-    const { strides, dataShape, valueScales, isFlat, setIsFlat, setDownloading, setShowLoading, setValueScales } = useGlobalStore(useShallow(state => ({
+    const { strides, dataShape, valueScales, isFlat, setIsFlat, setStatus, setValueScales } = useGlobalStore(useShallow(state => ({
         strides: state.strides, dataShape: state.dataShape, valueScales: state.valueScales,
-        isFlat: state.isFlat, setIsFlat: state.setIsFlat, setDownloading: state.setDownloading,
-        setShowLoading: state.setShowLoading, setValueScales: state.setValueScales,
+        isFlat: state.isFlat, setIsFlat: state.setIsFlat, setStatus: state.setStatus,
+         setValueScales: state.setValueScales,
     })));
 
     const setPlotType = usePlotStore(state => state.setPlotType);
@@ -73,21 +73,21 @@ const AnalysisWG = ({ setTexture, ZarrDS }: { setTexture: React.Dispatch<React.S
             return;
         }
         const executeAnalysis = async () => {
-            setShowLoading(true);
+            setStatus("Computing...");
             const currentOperation = operation == 'Convolution' ? kernelOperation as Operation : operation as Operation; // If it's convolution use the kernelOperation
             let newArray: Float16Array | Float32Array | undefined;
             let is3DResult = !isFlat; // Assume the result's dimensionality until determined
 
             // --- 1. Fetch second variable if needed ---
             let var2Data: ArrayBufferView | null = null;
             if (useTwo) {
-                setDownloading(true);
+                setStatus("Fetching second variable...")
                 const var2Array = await ZarrDS.GetArray(variable2, {zSlice, ySlice, xSlice});
                 var2Data = var2Array?.data;
-                setDownloading(false);
+                setStatus("Computing...");
                 if (!var2Data) {
                     console.error("Failed to fetch data for the second variable.");
-                    setShowLoading(false);
+                    setStatus(null);
                     return;
                 }
             }
@@ -138,13 +138,13 @@ const AnalysisWG = ({ setTexture, ZarrDS }: { setTexture: React.Dispatch<React.S
 
                 default:
                     console.warn(`Unknown operation: ${currentOperation}`);
-                    setShowLoading(false);
+                    setStatus(null);
                     return;
             }
 
             // --- 3. Process and display the result ---
             if (!newArray) {
-                setShowLoading(false);
+                setStatus(null);
                 return;
             }
 
@@ -180,9 +180,8 @@ const AnalysisWG = ({ setTexture, ZarrDS }: { setTexture: React.Dispatch<React.S
             setIsFlat(!is3DResult);
             setPlotType(is3DResult ? 'volume' : 'flat');
             setAnalysisMode(true);
-            setShowLoading(false);
+            setStatus(null);
         };
-
         executeAnalysis();
 
     }, [execute]); 

src/components/plots/Plot.tsx

@@ -76,7 +76,7 @@ const Orbiter = ({isFlat} : {isFlat  : boolean}) =>{
 const Plot = ({ZarrDS}:{ZarrDS: ZarrDataset}) => {
     const {
       setShape, setDataShape, setFlipY, setValueScales, setMetadata, setDimArrays, 
-      setDimNames, setDimUnits, setPlotOn, setShowLoading} = useGlobalStore(
+      setDimNames, setDimUnits, setPlotOn, setStatus} = useGlobalStore(
         useShallow(state => ({  //UseShallow for object returns
           setShape:state.setShape,
           setDataShape: state.setDataShape,
@@ -87,7 +87,7 @@ const Plot = ({ZarrDS}:{ZarrDS: ZarrDataset}) => {
           setDimNames:state.setDimNames,
           setDimUnits:state.setDimUnits,
           setPlotOn: state.setPlotOn,
-          setShowLoading: state.setShowLoading  
+          setStatus: state.setStatus  
         }
         )))
     const {colormap, variable, isFlat, metadata, valueScales, is4D, setIsFlat} = useGlobalStore(useShallow(state=>({
@@ -126,7 +126,6 @@ const Plot = ({ZarrDS}:{ZarrDS: ZarrDataset}) => {
   //DATA LOADING
   useEffect(() => {
     if (variable != "Default") {
-      setShowLoading(true);
       setShow(false)
       try{
         if (textures) {
@@ -160,10 +159,10 @@ const Plot = ({ZarrDS}:{ZarrDS: ZarrDataset}) => {
         setDataShape(result.shape)
         setShow(true)
         setPlotOn(true)
-        setShowLoading(false)
+        setStatus(null)
       })
       }catch{
-        setShowLoading(false);
+        setStatus(null);
         return;
       }
       //Get Metadata

src/components/ui/Loading.tsx

@@ -4,25 +4,22 @@ import { useShallow } from "zustand/shallow"
 
 
 export function Loading(){
-  const {progress, showLoading, downloading, decompressing} = useGlobalStore(useShallow(state => ({
+  const {progress, status} = useGlobalStore(useShallow(state => ({
     progress: state.progress,
-    showLoading: state.showLoading,
-    downloading: state.downloading,
-    decompressing: state.decompressing
+    status: state.status
   })))
 
     return (
-      showLoading && 
+      status && 
       <div className="loading-container">
       <div className='loading'>
-        {downloading ? 'Downloading' : decompressing ? 'Unpacking' : 'Building'}
+        {status}
         </div>
       <div className="progress-bar"
         style={{
           width:`${progress}%`
         }}
       />
       </div>
-
     )
   }

src/components/ui/MainPanel/Dataset.tsx

@@ -212,7 +212,9 @@ const Dataset = ({setOpenVariables} : {setOpenVariables: React.Dispatch<React.Se
                 }}
               >
                 <Input className="w-full" placeholder="Store URL" />
-                <Button type="submit" variant="outline" className='cursor-pointer'>
+                <Button type="submit" variant="outline" className='cursor-pointer'
+                  onClick={()=>useGlobalStore.getState().setStatus("Fetching...")}
+                >
                   Fetch
                 </Button>
               </form>

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 } from '@/utils/GlobalStates';
+import { useZarrStore, useErrorStore, useGlobalStore } from '@/utils/GlobalStates';
 import { Input } from '../input';
 import ZarrParser from '@/components/zarr/ZarrParser';
 
@@ -13,16 +13,13 @@ interface LocalZarrType {
 
 const LocalZarr = ({setShowLocal, setOpenVariables, setInitStore}:LocalZarrType) => {
   const setCurrentStore = useZarrStore(state => state.setCurrentStore)
-
+  const {setStatus} = useGlobalStore.getState()
   const handleFileSelect = async (event: ChangeEvent<HTMLInputElement>) => {
     const files = event.target.files;
-
     if (!files || files.length === 0) {
+      setStatus(null)
       return;
     }
-    if (files.length > 1000){
-      // useErrorStore.getState().setError('filecount')
-    }
     // Create a Map to hold the Zarr store data
     const fileMap = new Map<string, File>();
 
@@ -53,31 +50,31 @@ const LocalZarr = ({setShowLocal, setOpenVariables, setInitStore}:LocalZarrType)
         // Metadata is missing. We will need to parse variables here. 
         store = await ZarrParser(files, customStore)
       }
-      const gs = zarr.open(store, {kind: 'group'});
-      gs.then(e=>{setCurrentStore(e)})
-      setShowLocal(false)
-      setOpenVariables(true)
+      const gs = await zarr.open(store, {kind: 'group'});
+      setCurrentStore(gs);
+      setShowLocal(false);
+      setOpenVariables(true);
       setInitStore(`local_${baseDir}`)
+      setStatus(null)
     } catch (error) {
+      setStatus(null)
       if (error instanceof Error) {
         console.log(`Error opening Zarr store: ${error.message}`);
       } else {
         console.log('An unknown error occurred when opening the Zarr store.');
       }
     }
   };
-
   return (
     <div>
         <Input type="file" id="filepicker"
-        className='hover:drop-shadow-md hover:scale-[110%]'
-        style={{width:'200px', cursor:'pointer'}}
-        // @ts-expect-error `webkitdirectory` is non-standard attribute. TS doesn't know about it. It's used for cross-browser compatibility.
-        directory=''
-        webkitdirectory='true'
-        onChange={handleFileSelect}
-        >
-        </Input>
+          className='hover:drop-shadow-md hover:scale-[110%]'
+          style={{width:'200px', cursor:'pointer'}}
+          // @ts-expect-error `webkitdirectory` is non-standard attribute. TS doesn't know about it. It's used for cross-browser compatibility.
+          directory=''
+          webkitdirectory='true'
+          onChange={handleFileSelect}
+        />
     </div>
   )
 }

src/components/ui/MainPanel/MetaDataInfo.tsx

@@ -368,42 +368,42 @@ const MetaDataInfo = ({ meta, setShowMeta, setOpenVariables }: { meta: any, setS
           </>}
       </>}
       </div>
-      {cached &&
-      <div>
-        {cachedChunks ? 
-          <b>{cachedChunks} chunks already cached. </b> :
-          <b>This data is already cached. </b>
-        } 
-      </div>
-      }
-      {tooBig && 
-        <div className="bg-[#FFBEB388] rounded-md p-1">
-          <span className="text-xs font-medium text-red-800 dark:text-red-200">
-            Not only will this certainly not fit in memory, but it also won&apos;t fit in a single shader call. You are wild for this one. Textures:  <b>{texCount}/14</b>
-          </span>
+      <div className="grid gap-2 mt-2">
+        {cached &&
+        <div>
+          {cachedChunks ? 
+            <b>{cachedChunks} chunks already cached. </b> :
+            <b>This data is already cached. </b>
+          } 
         </div>
-      }
-      {true && <Button
-        variant="pink"
-        size="sm"
-
-        className="cursor-pointer hover:scale-[1.05]"
-        disabled={((is4D && idx4D == null) || smallCache)}
-        onClick={() => {
-          if (variable == meta.name){
-            setReFetch(!reFetch)
-          }
-          else{
-            setMaxSize(cacheSize)
-            setVariable(meta.name)
-            setReFetch(!reFetch)
-          }
-          setShowMeta(false)
-          setOpenVariables(false)
-        }}
-      >
-      Plot
-      </Button>}
+        }
+        {tooBig && 
+          <div className="bg-[#FFBEB388] rounded-md p-1">
+            <span className="text-xs font-medium text-red-800 dark:text-red-200">
+              Not only will this certainly not fit in memory, but it also won&apos;t fit in a single shader call. You are wild for this one. Textures:  <b>{texCount}/14</b>
+            </span>
+          </div>
+        }
+        {true && <Button
+          variant="pink"        
+          className="cursor-pointer hover:scale-[1.05]"
+          disabled={((is4D && idx4D == null) || smallCache)}
+          onClick={() => {
+            if (variable == meta.name){
+              setReFetch(!reFetch)
+            }
+            else{
+              setMaxSize(cacheSize)
+              setVariable(meta.name)
+              setReFetch(!reFetch)
+            }
+            setShowMeta(false)
+            setOpenVariables(false)
+          }}
+        >
+        Plot
+        </Button>}
+      </div>
   </>
   )
 }