Time Chunk Grabber

src/app/globals.css

@@ -81,6 +81,7 @@
   --glass-bg: rgba(255, 255, 255, 0.15);
   --glass-border: rgba(255, 255, 255, 0.25);
   --glass-shadow: rgba(0, 0, 0, 0.15);
+  --play-background: rgb(175, 175, 175);
 }
 
 /* Dark Theme */
@@ -137,6 +138,7 @@
   --glass-bg: rgba(0, 0, 0, 0.2);
   --glass-border: rgba(255, 255, 255, 0.1);
   --glass-shadow: rgba(0, 0, 0, 0.3);
+  --play-background: hsla(0, 0%, 51%, 1);
 }
 
 @layer utilities {

src/components/plots/AnalysisWG.tsx

@@ -3,7 +3,7 @@ import { ArrayMinMax, GetCurrentArray } from '@/utils/HelperFuncs';
 import * as THREE from 'three';
 import React, { useEffect } from 'react';
 import { DataReduction, Convolve, Multivariate2D, Multivariate3D, CUMSUM3D, Convolve2D } from '../computation/webGPU';
-import { useGlobalStore, useAnalysisStore, usePlotStore, useZarrStore } from '@/utils/GlobalStates';
+import { useGlobalStore, useAnalysisStore, usePlotStore } from '@/utils/GlobalStates';
 import { useShallow } from 'zustand/shallow';
 import { ZarrDataset } from '../zarr/ZarrLoaderLRU';
 import { CreateTexture } from '../textures';
@@ -60,7 +60,7 @@ const AnalysisWG = ({ setTexture, ZarrDS }: { setTexture: React.Dispatch<React.S
             setAnalysisArray: state.setAnalysisArray, setAnalysisMode: state.setAnalysisMode, setOperation: state.setOperation
         })));
 
-    const {zSlice, ySlice, xSlice} = useZarrStore(useShallow(state => ({
+    const {zSlice, ySlice, xSlice} = usePlotStore(useShallow(state => ({
         zSlice: state.zSlice,
         ySlice: state.ySlice,
         xSlice: state.xSlice

src/components/plots/AxisLines.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useAnalysisStore, useGlobalStore, useImageExportStore, usePlotStore, useZarrStore } from '@/utils/GlobalStates'
+import { useAnalysisStore, useGlobalStore, useImageExportStore, usePlotStore } from '@/utils/GlobalStates'
 import React, {useState, useMemo} from 'react'
 import { useShallow } from 'zustand/shallow'
 import { Text } from '@react-three/drei'
@@ -35,18 +35,17 @@ const CubeAxis = ({flipX, flipY, flipDown}: {flipX: boolean, flipY: boolean, fli
     dataShape: state.dataShape,
     revY: state.flipY
   })))
-  const {zSlice, ySlice, xSlice} = useZarrStore(useShallow(state => ({
-    zSlice: state.zSlice,
-    ySlice: state.ySlice,
-    xSlice: state.xSlice
-  })))
-  const {xRange, yRange, zRange, plotType, timeScale, animProg} = usePlotStore(useShallow(state => ({
+
+  const {xRange, yRange, zRange, plotType, timeScale, animProg, zSlice, ySlice, xSlice} = usePlotStore(useShallow(state => ({
     xRange: state.xRange,
     yRange: state.yRange,
     zRange: state.zRange,
     plotType: state.plotType,
     timeScale: state.timeScale,
-    animProg: state.animProg
+    animProg: state.animProg,
+    zSlice: state.zSlice,
+    ySlice: state.ySlice,
+    xSlice: state.xSlice
   })))
 
   const {hideAxis, hideAxisControls} = useImageExportStore(useShallow( state => ({
@@ -344,14 +343,13 @@ const FlatAxis = () =>{
     isFlat: state.isFlat
   })))
 
-  const {plotType} = usePlotStore(useShallow(state=>({
-    plotType: state.plotType
-  })))
-  const {zSlice, ySlice, xSlice} = useZarrStore(useShallow(state => ({
+  const {plotType,  zSlice, ySlice, xSlice} = usePlotStore(useShallow(state=>({
+    plotType: state.plotType,
     zSlice: state.zSlice,
     ySlice: state.ySlice,
     xSlice: state.xSlice
   })))
+
   const {hideAxis, hideAxisControls} = useImageExportStore(useShallow( state => ({
     hideAxis: state.hideAxis,
     hideAxisControls: state.hideAxisControls

src/components/plots/FlatMap.tsx

@@ -2,7 +2,7 @@
 
 import React, {useMemo, useEffect, useRef, useCallback} from 'react'
 import * as THREE from 'three'
-import { useAnalysisStore, useGlobalStore, usePlotStore, useZarrStore } from '@/utils/GlobalStates'
+import { useAnalysisStore, useGlobalStore, usePlotStore } from '@/utils/GlobalStates'
 import { vertShader } from '@/components/computation/shaders'
 import { flatFrag3D, fragmentFlat } from '../textures/shaders';
 import { useShallow } from 'zustand/shallow'
@@ -33,25 +33,24 @@ const FlatMap = ({textures, infoSetters} : {textures : THREE.DataTexture | THREE
       dataShape: state.dataShape,
       textureArrayDepths: state.textureArrayDepths
     })))
-    const {cScale, cOffset, animProg, nanTransparency, nanColor} = usePlotStore(useShallow(state => ({
+    const {cScale, cOffset, animProg, nanTransparency, nanColor, zSlice, ySlice, xSlice} = usePlotStore(useShallow(state => ({
       cOffset: state.cOffset,
       cScale: state.cScale,
       resetAnim: state.resetAnim,
       animate: state.animate,
       animProg: state.animProg,
       nanTransparency: state.nanTransparency,
-      nanColor: state.nanColor
+      nanColor: state.nanColor,
+      zSlice: state.zSlice,
+      ySlice: state.ySlice,
+      xSlice: state.xSlice
     })))
     const {axis, analysisMode, analysisArray} = useAnalysisStore(useShallow(state=> ({
       axis: state.axis,
       analysisMode: state.analysisMode,
       analysisArray: state.analysisArray
     })))
-    const {zSlice, ySlice, xSlice} = useZarrStore(useShallow(state => ({
-        zSlice: state.zSlice,
-        ySlice: state.ySlice,
-        xSlice: state.xSlice
-      })))
+
     const dimSlices = [
       dimArrays[0].slice(zSlice[0], zSlice[1] ? zSlice[1] : undefined),
       dimArrays[1].slice(ySlice[0], ySlice[1] ? ySlice[1] : undefined),

src/components/plots/Plot.tsx

@@ -135,6 +135,10 @@ const Plot = ({ZarrDS}:{ZarrDS: ZarrDataset}) => {
             tex.source.data = null
           });
         }
+        const {setZSlice, setYSlice, setXSlice} = usePlotStore.getState() // Set the plot slices with zarr slices
+        setZSlice(zSlice);
+        setYSlice(ySlice);
+        setXSlice(xSlice);
         ZarrDS.GetArray(variable, {xSlice, ySlice, zSlice}).then((result) => {
         const [tempTexture, scaling] = ArrayToTexture({
           data: result.data,

src/components/plots/PointCloud.tsx

@@ -2,7 +2,7 @@
 import * as THREE from 'three'
 import { useEffect, useMemo, useState, useRef } from 'react'
 import { pointFrag, pointVert } from '@/components/textures/shaders'
-import { useAnalysisStore, useZarrStore, useGlobalStore, usePlotStore } from '@/utils/GlobalStates';
+import { useAnalysisStore, useGlobalStore, usePlotStore } from '@/utils/GlobalStates';
 import { useShallow } from 'zustand/shallow';
 import { ZarrDataset } from '../zarr/ZarrLoaderLRU';
 import { parseUVCoords, getUnitAxis, GetTimeSeries, GetCurrentArray } from '@/utils/HelperFuncs';
@@ -46,24 +46,22 @@ const MappingCube = ({dimensions, ZarrDS, setters} : {dimensions: dimensionsProp
     analysisMode: state.analysisMode,
     analysisArray: state.analysisArray
   })))
-  const {zSlice, ySlice, xSlice} = useZarrStore(useShallow(state => ({
-          zSlice: state.zSlice,
-          ySlice: state.ySlice,
-          xSlice: state.xSlice
+
+  const {timeScale, zSlice, ySlice, xSlice, getColorIdx, incrementColorIdx} = usePlotStore(useShallow(state=> ({
+    timeScale: state.timeScale,
+    zSlice: state.zSlice,
+    ySlice: state.ySlice,
+    xSlice: state.xSlice,
+    getColorIdx: state.getColorIdx,
+    incrementColorIdx: state.incrementColorIdx
   })))
+
   const dimSlices = [
     dimArrays[0].slice(zSlice[0], zSlice[1] ? zSlice[1] : undefined),
     dimArrays[1].slice(ySlice[0], ySlice[1] ? ySlice[1] : undefined),
     dimArrays.length > 2 ? dimArrays[2].slice(xSlice[0], xSlice[1] ? xSlice[1] : undefined) : [],
   ]
   const lastNormal = useRef<number | null> ( null )
-
-  const {timeScale, getColorIdx, incrementColorIdx} = usePlotStore(useShallow(state=> ({
-    timeScale: state.timeScale,
-    getColorIdx: state.getColorIdx,
-    incrementColorIdx: state.incrementColorIdx
-  })))
-
   const globalScale = dataShape[2]/500
   const offset = 1/500; //I don't really understand that. But the cube is off by one pixel in each dimension
 

src/components/plots/Sphere.tsx

@@ -1,6 +1,6 @@
 import React, {useRef, useMemo, useState, useEffect} from 'react'
 import * as THREE from 'three'
-import { useAnalysisStore, useGlobalStore, usePlotStore, useZarrStore } from '@/utils/GlobalStates'
+import { useAnalysisStore, useGlobalStore, usePlotStore } from '@/utils/GlobalStates'
 import { ZarrDataset } from '@/components/zarr/ZarrLoaderLRU';
 import { useShallow } from 'zustand/shallow'
 import { sphereVertex, sphereVertexFlat, sphereFrag, flatSphereFrag } from '../textures/shaders'
@@ -51,18 +51,10 @@ export const Sphere = ({textures, ZarrDS} : {textures: THREE.Data3DTexture[] | T
         flipY: state.flipY,
         textureArrayDepths: state.textureArrayDepths
     })))
-    const {zSlice, ySlice, xSlice} = useZarrStore(useShallow(state => ({
-              zSlice: state.zSlice,
-              ySlice: state.ySlice,
-              xSlice: state.xSlice
-    })))
-    const dimSlices = [
-      dimArrays[0].slice(zSlice[0], zSlice[1] ? zSlice[1] : undefined),
-      dimArrays[1].slice(ySlice[0], ySlice[1] ? ySlice[1] : undefined),
-      dimArrays.length > 2 ? dimArrays[2].slice(xSlice[0], xSlice[1] ? xSlice[1] : undefined) : [],
-    ]
+
     const {animate, animProg, cOffset, cScale, selectTS, lonExtent, latExtent, 
       lonResolution, latResolution, nanColor, nanTransparency, sphereDisplacement, sphereResolution,
+      zSlice, ySlice, xSlice,
       getColorIdx, incrementColorIdx} = usePlotStore(useShallow(state=> ({
         animate: state.animate,
         animProg: state.animProg,
@@ -77,10 +69,17 @@ export const Sphere = ({textures, ZarrDS} : {textures: THREE.Data3DTexture[] | T
         nanTransparency: state.nanTransparency,
         sphereDisplacement: state.sphereDisplacement,
         sphereResolution: state.sphereResolution,
+        zSlice: state.zSlice,
+        ySlice: state.ySlice,
+        xSlice: state.xSlice,
         getColorIdx: state.getColorIdx,
         incrementColorIdx: state.incrementColorIdx
     })))
-
+    const dimSlices = [
+      dimArrays[0].slice(zSlice[0], zSlice[1] ? zSlice[1] : undefined),
+      dimArrays[1].slice(ySlice[0], ySlice[1] ? ySlice[1] : undefined),
+      dimArrays.length > 2 ? dimArrays[2].slice(xSlice[0], xSlice[1] ? xSlice[1] : undefined) : [],
+    ]
     const [boundsObj, setBoundsObj] = useState<Record<string, THREE.Vector4>>({})
     const [bounds, setBounds] = useState<THREE.Vector4[]>(new Array(10).fill(new THREE.Vector4(-1 , -1, -1, -1)))
     const [height, width] = useMemo(()=>isFlat ? dataShape : [dataShape[1], dataShape[2]], [dataShape])

src/components/plots/plotarea/FixedTicks.tsx

@@ -3,7 +3,7 @@ import { useThree, useFrame } from '@react-three/fiber'
 import { useState, useMemo, useEffect, useRef } from 'react'
 import { parseTimeUnit } from '@/utils/HelperFuncs'
 import { Fragment } from 'react'
-import { useGlobalStore, useZarrStore } from '@/utils/GlobalStates'
+import { useGlobalStore, usePlotStore } from '@/utils/GlobalStates'
 import { useShallow } from 'zustand/shallow'
 
 
@@ -44,7 +44,7 @@ export function FixedTicks({
       plotDim:state.plotDim,
       valueScales:state.valueScales
     })))
-  const {zSlice, ySlice, xSlice} = useZarrStore(useShallow(state => ({
+  const {zSlice, ySlice, xSlice} = usePlotStore(useShallow(state => ({
                 zSlice: state.zSlice,
                 ySlice: state.ySlice,
                 xSlice: state.xSlice

src/components/ui/MainPanel/AnalysisOptions.tsx

@@ -114,9 +114,8 @@ const AnalysisOptions = () => {
     setAnalysisStore: state.setAnalysisStore, setAnalysisDim: state.setAnalysisDim
     })));
 
-  const {reFetch, setReFetch} = useZarrStore(useShallow(state => ({
+  const {reFetch} = useZarrStore(useShallow(state => ({
     reFetch: state.reFetch,
-    setReFetch: state.setReFetch
   })))
 
   const [showError, setShowError] = useState<boolean>(false);

src/components/ui/MainPanel/MetaDataInfo.tsx

@@ -71,16 +71,15 @@ const MetaDataInfo = ({ meta, metadata, setShowMeta, setOpenVariables, popoverSi
   const {dimArrays, dimNames, dimUnits} = meta.dimInfo
   const {maxSize, setMaxSize} = useCacheStore.getState()
   const [cacheSize, setCacheSize] = useState(maxSize)
-  const { zSlice, ySlice, xSlice, reFetch, compress, setZSlice, setYSlice, setXSlice, setReFetch, setCompress } = useZarrStore(useShallow(state => ({
-    reFetch: state.reFetch,
+  const { zSlice, ySlice, xSlice, compress, setZSlice, setYSlice, setXSlice, ReFetch, setCompress } = useZarrStore(useShallow(state => ({
     zSlice: state.zSlice,
     ySlice: state.ySlice,
     xSlice: state.xSlice,
     compress: state.compress,
     setZSlice: state.setZSlice,
     setYSlice: state.setYSlice,
     setXSlice: state.setXSlice,
-    setReFetch: state.setReFetch,
+    ReFetch: state.ReFetch,
     setCompress: state.setCompress
   })))
   const cache = useCacheStore(state => state.cache)
@@ -420,12 +419,12 @@ const MetaDataInfo = ({ meta, metadata, setShowMeta, setOpenVariables, popoverSi
           disabled={((is4D && idx4D == null) || smallCache)}
           onClick={() => {
             if (variable == meta.name){
-              setReFetch(!reFetch)
+              ReFetch();
             }
             else{
               setMaxSize(cacheSize)
               setVariable(meta.name)
-              setReFetch(!reFetch)
+              ReFetch();
             }
             setShowMeta(false)
             setOpenVariables(false)