Merge pull request #534 from EarthyScience/jp/coarsen

Coarsen Datasets

Author: TheJeran

src/GlobalStates/PlotStore.ts

@@ -55,6 +55,8 @@ type PlotState ={
   useOrtho: boolean;
   rotateFlat: boolean;
   fillValue: number | undefined,
+  coarsen: boolean, //Seperate from zarr store so dependencies don't update when changing coarsen in a menu
+  kernel:{kernelSize:number, kernelDepth:number}
 
   setQuality: (quality: number) => void;
   setTimeScale: (timeScale : number) =>void;
@@ -165,6 +167,8 @@ export const usePlotStore = create<PlotState>((set, get) => ({
   useOrtho: false,
   rotateFlat: false,
   fillValue: undefined,
+  coarsen: false,
+  kernel:{kernelDepth:1, kernelSize:1},
 
   setVTransferRange: (vTransferRange) => set({ vTransferRange }),
   setVTransferScale: (vTransferScale) => set({ vTransferScale }),

src/GlobalStates/ZarrStore.ts

@@ -15,6 +15,9 @@ type ZarrState = {
   useNC: boolean, // This one is more static and so toggling switch doesn't break all other logic
   fetchNC: boolean,
   ncModule: any,
+  coarsen: boolean,
+  kernelSize: number,
+  kernelDepth: number,
 
   setZSlice: (zSlice: [number , number | null]) => void;
   setYSlice: (ySlice: [number , number | null]) => void;
@@ -27,6 +30,9 @@ type ZarrState = {
   setArraySize: (arraySize: number) => void;
   setUseNC: (useNC: boolean) => void;
   setFetchNC: (fetchNC: boolean) => void;
+  setCoarsen: (coarsen: boolean) => void;
+  setKernelSize: (kernelSize: number) => void;
+  setKernelDepth: (kernelDepth: number) => void;
 }
 
 export const useZarrStore = create<ZarrState>((set, get) => ({
@@ -41,6 +47,9 @@ export const useZarrStore = create<ZarrState>((set, get) => ({
   useNC: false,
   fetchNC: false,
   ncModule: null,
+  coarsen: false,
+  kernelSize: 2,
+  kernelDepth: 2,
 
   setZSlice: (zSlice) => set({ zSlice }),
   setYSlice: (ySlice) => set({ ySlice }),
@@ -53,4 +62,7 @@ export const useZarrStore = create<ZarrState>((set, get) => ({
   setArraySize: (arraySize) => set({ arraySize }),
   setUseNC: (useNC) => set({ useNC }),
   setFetchNC: (fetchNC) => set({ fetchNC }),
+  setCoarsen: (coarsen) => set({ coarsen }),
+  setKernelSize: (kernelSize) => set({ kernelSize }),
+  setKernelDepth: (kernelDepth) => set({ kernelDepth }),
 }))

src/components/plots/AxisLines.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import { useAnalysisStore, useGlobalStore, useImageExportStore, usePlotStore } from '@/GlobalStates'
+import { useAnalysisStore, useGlobalStore, useImageExportStore, usePlotStore, useZarrStore } from '@/GlobalStates'
 import React, {useState, useMemo} from 'react'
 import { useShallow } from 'zustand/shallow'
 import { Text } from '@react-three/drei'
 import { LineSegmentsGeometry } from 'three/addons/lines/LineSegmentsGeometry.js';
 import { LineSegments2 } from 'three/addons/lines/LineSegments2.js';
 import { LineMaterial } from 'three-stdlib';
 import { useFrame } from '@react-three/fiber';
-import { parseLoc } from '@/utils/HelperFuncs';
+import { parseLoc, coarsenFlatArray } from '@/utils/HelperFuncs';
 import { useCSSVariable } from '../ui';
 import * as THREE from 'three'
 
@@ -37,32 +37,33 @@ const CubeAxis = ({flipX, flipY, flipDown}: {flipX: boolean, flipY: boolean, fli
     is4D: state.is4D
   })))
 
-  const {xRange, yRange, zRange, plotType, timeScale, animProg, zSlice, ySlice, xSlice} = usePlotStore(useShallow(state => ({
+  const {xRange, yRange, zRange, plotType, timeScale, animProg, zSlice, ySlice, xSlice, coarsen} = usePlotStore(useShallow(state => ({
     xRange: state.xRange, yRange: state.yRange,
     zRange: state.zRange, plotType: state.plotType,
     timeScale: state.timeScale, animProg: state.animProg,
     zSlice: state.zSlice, ySlice: state.ySlice,
-    xSlice: state.xSlice, 
+    xSlice: state.xSlice, coarsen: state.coarsen,
   })))
-
   const {hideAxis, hideAxisControls} = useImageExportStore(useShallow( state => ({
     hideAxis: state.hideAxis,
     hideAxisControls: state.hideAxisControls
   })))
 
   const shapeLength = dimArrays.length
 
-  const dimLengths = [
-    (zSlice[1] ? zSlice[1] : dimArrays[shapeLength - 3].length) - zSlice[0],
-    (ySlice[1] ? ySlice[1] : dimArrays[shapeLength - 2].length) - ySlice[0],
-    (xSlice[1] ? xSlice[1] : dimArrays[shapeLength - 1].length) - xSlice[0],
-  ]
-
-  const dimSlices = [
-    dimArrays[shapeLength-3].slice(zSlice[0], zSlice[1] ? zSlice[1] : undefined),
-    revY ? dimArrays[shapeLength-2].slice(ySlice[0], ySlice[1] ? ySlice[1] : undefined).reverse() : dimArrays[shapeLength-2].slice(ySlice[0], ySlice[1] ? ySlice[1] : undefined),
-    dimArrays[shapeLength-1].slice(xSlice[0], xSlice[1] ? xSlice[1] : undefined),
-  ]
+  const dimSlices = useMemo(()=> {
+    let slices = [
+      dimArrays[shapeLength-3].slice(zSlice[0], zSlice[1] ? zSlice[1] : undefined),
+      revY ? dimArrays[shapeLength-2].slice(ySlice[0], ySlice[1] ? ySlice[1] : undefined).reverse() : dimArrays[shapeLength-2].slice(ySlice[0], ySlice[1] ? ySlice[1] : undefined),
+      dimArrays[shapeLength-1].slice(xSlice[0], xSlice[1] ? xSlice[1] : undefined),
+    ] 
+    if (coarsen) {
+      const {kernelDepth, kernelSize} = useZarrStore.getState()
+      slices = slices.map((val, idx) => coarsenFlatArray(val, (idx === 0 ? kernelDepth : kernelSize)))
+    }
+    return slices
+  },[revY, dimArrays, zSlice, ySlice, xSlice, coarsen])
+  const dimLengths = dimSlices.map(val => val.length)
 
   const [xResolution, setXResolution] = useState<number>(AXIS_CONSTANTS.INITIAL_RESOLUTION)
   const [yResolution, setYResolution] = useState<number>(AXIS_CONSTANTS.INITIAL_RESOLUTION)

src/components/plots/FlatMap.tsx

@@ -2,12 +2,12 @@
 
 import React, {useMemo, useEffect, useRef, useState} from 'react'
 import * as THREE from 'three'
-import { useAnalysisStore, useGlobalStore, usePlotStore } from '@/GlobalStates'
+import { useAnalysisStore, useGlobalStore, usePlotStore, useZarrStore } from '@/GlobalStates'
 import { vertShader } from '@/components/computation/shaders'
 import { flatFrag3D, fragmentFlat } from '../textures/shaders';
 import { useShallow } from 'zustand/shallow'
 import { ThreeEvent } from '@react-three/fiber';
-import { GetCurrentArray, GetTimeSeries, parseUVCoords } from '@/utils/HelperFuncs';
+import { coarsenFlatArray, GetCurrentArray, GetTimeSeries, parseUVCoords } from '@/utils/HelperFuncs';
 import { evaluate_cmap } from 'js-colormaps-es';
 
 interface InfoSettersProps{
@@ -39,14 +39,14 @@ const FlatMap = ({textures, infoSetters} : {textures : THREE.DataTexture | THREE
     })))
 
     const {cScale, cOffset, animProg, nanTransparency, nanColor, 
-      zSlice, ySlice, xSlice, selectTS,
+      zSlice, ySlice, xSlice, selectTS, coarsen,
       getColorIdx, incrementColorIdx} = usePlotStore(useShallow(state => ({
       cOffset: state.cOffset, cScale: state.cScale,
       resetAnim: state.resetAnim, animate: state.animate,
       animProg: state.animProg, nanTransparency: state.nanTransparency,
       nanColor: state.nanColor, zSlice: state.zSlice,
       ySlice: state.ySlice, xSlice: state.xSlice,
-      selectTS: state.selectTS,
+      selectTS: state.selectTS, coarsen: state.coarsen,
       getColorIdx: state.getColorIdx,
       incrementColorIdx: state.incrementColorIdx
     })))
@@ -55,20 +55,27 @@ const FlatMap = ({textures, infoSetters} : {textures : THREE.DataTexture | THREE
       analysisMode: state.analysisMode,
       analysisArray: state.analysisArray
     })))
+    const {kernelSize, kernelDepth} = useZarrStore(useShallow(state => ({
+      kernelSize: state.kernelSize,
+      kernelDepth: state.kernelDepth
+    })))
 
     const shapeLength = dimArrays.length
-    const is4D = shapeLength === 4
-
-    const dimSlices = isFlat 
-      ? [
-        dimArrays[0].slice(zSlice[0], zSlice[1] ? zSlice[1] : undefined),
-        dimArrays[1].slice(ySlice[0], ySlice[1] ? ySlice[1] : undefined),
-      ]
-      : [
-        dimArrays[shapeLength - 3].slice(zSlice[0], zSlice[1] ? zSlice[1] : undefined),
-        dimArrays[shapeLength - 2].slice(ySlice[0], ySlice[1] ? ySlice[1] : undefined),
-        dimArrays[shapeLength - 1].slice(xSlice[0], xSlice[1] ? xSlice[1] : undefined )
-      ]
+
+    const dimSlices = useMemo (() => {
+      let slices = isFlat 
+        ? [
+          dimArrays[0].slice(zSlice[0], zSlice[1] ? zSlice[1] : undefined),
+          dimArrays[1].slice(ySlice[0], ySlice[1] ? ySlice[1] : undefined),
+        ]
+        : [
+          dimArrays[shapeLength - 3].slice(zSlice[0], zSlice[1] ? zSlice[1] : undefined),
+          dimArrays[shapeLength - 2].slice(ySlice[0], ySlice[1] ? ySlice[1] : undefined),
+          dimArrays[shapeLength - 1].slice(xSlice[0], xSlice[1] ? xSlice[1] : undefined )
+        ]
+      if (coarsen) slices = slices.map((val, idx) => coarsenFlatArray(val, (idx === 0 ? kernelDepth : kernelSize)))
+      return slices
+    } ,[dimArrays, zSlice, ySlice, xSlice, coarsen])
 
     const shapeRatio = useMemo(()=> {
       if (dataShape.length == 2){

src/components/plots/Plot.tsx

@@ -11,7 +11,7 @@ import { Navbar, Colorbar, ExportExtent } from '../ui';
 import AnalysisInfo from './AnalysisInfo';
 import { OrbitControls as OrbitControlsImpl } from 'three-stdlib';
 import AnalysisWG from './AnalysisWG';
-import { ParseExtent, GetDimInfo } from '@/utils/HelperFuncs';
+import { ParseExtent, GetDimInfo, coarsenFlatArray } from '@/utils/HelperFuncs';
 import ExportCanvas from '@/utils/ExportCanvas';
 import KeyFrames from '../ui/KeyFrames';
 
@@ -164,11 +164,14 @@ const Plot = () => {
       setPlotType: state.setPlotType
     })))
 
-    const {zSlice, ySlice, xSlice, reFetch} = useZarrStore(useShallow(state=> ({
+    const {zSlice, ySlice, xSlice, reFetch, coarsen, kernelDepth, kernelSize} = useZarrStore(useShallow(state=> ({
       zSlice: state.zSlice,
       ySlice: state.ySlice,
       xSlice: state.xSlice,
-      reFetch: state.reFetch
+      reFetch: state.reFetch,
+      coarsen: state.coarsen,
+      kernelDepth: state.kernelDepth,
+      kernelSize: state.kernelSize
     })))
     const {analysisMode} = useAnalysisStore(useShallow(state => ({
       analysisMode: state.analysisMode
@@ -182,7 +185,8 @@ const Plot = () => {
     const [textures, setTextures] = useState<THREE.DataTexture[] | THREE.Data3DTexture[] | null>(null)
     const [show, setShow] = useState<boolean>(true) //Prevents rendering of 3D objects until data is fully loaded in
     const [stableMetadata, setStableMetadata] = useState<Record<string, any>>({});
-  //DATA LOADING
+  
+    //DATA LOADING
   useEffect(() => {
     if (variable != "Default") {
       setShow(false)
@@ -234,10 +238,11 @@ const Plot = () => {
       })
       GetDimInfo(variable).then((arrays)=>{
         let {dimArrays, dimUnits, dimNames}= arrays;
+
         if (is4D){
-          dimArrays = dimArrays.slice();
-          dimUnits = dimUnits.slice();
-          dimNames = dimNames.slice();
+          dimArrays = dimArrays.slice(1);
+          dimUnits = dimUnits.slice(1);
+          dimNames = dimNames.slice(1);
         }
         setDimNames(dimNames)
         setDimArrays(dimArrays)

src/components/ui/MainPanel/AnalysisOptions.tsx

@@ -13,6 +13,7 @@ import {KernelVisualizer} from "@/components/ui";
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { BsFillQuestionCircleFill } from "react-icons/bs";
 import { Switch } from '../switch';
+import { HandleKernelNums } from '@/utils/HelperFuncs';
 import {
   Select,
   SelectContent,
@@ -181,16 +182,6 @@ const AnalysisOptions = () => {
       return () => window.removeEventListener("resize", handleResize);
   }, []);
 
-  function HandleKernelNums(e: string){
-    const newVal = parseInt(e);
-    if (newVal % 2 == 0){
-      return Math.max(1, newVal - 1)
-    }
-    else{
-      return newVal
-    }
-  }
-
   return (
     <>
       <Popover>