Merge pull request #414 from EarthyScience/jp/flat-ts

TheJeran · web-flow · commit d0b611fcef36 · 2025-11-07T14:42:33.000+01:00
Timeseries Select in Flat Mode
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -32,7 +32,7 @@
   --muted: oklch(0.97 0 0);
   --muted-foreground: oklch(0.556 0 0);
   --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(20.463% 0.00002 271.152 / 0.151);
+  --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
@@ -82,6 +82,7 @@
   --glass-border: rgba(255, 255, 255, 0.25);
   --glass-shadow: rgba(0, 0, 0, 0.15);
   --play-background: rgba(200, 200, 200, 0.8);
+  --notice-shadow: rgb(230, 230, 230);
 }
 
 /* Dark Theme */
@@ -116,7 +117,7 @@
   --muted: oklch(0.269 0 0);
   --muted-foreground: oklch(0.708 0 0);
   --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(98.511% 0.00011 271.152 / 0.226);
+  --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
@@ -139,6 +140,7 @@
   --glass-border: rgba(255, 255, 255, 0.1);
   --glass-shadow: rgba(0, 0, 0, 0.3);
   --play-background: rgba(200, 200, 200, 0.8);
+  --notice-shadow: rgb(70, 70, 70);
 }
 
 @layer utilities {
diff --git a/src/components/plots/FlatMap.tsx b/src/components/plots/FlatMap.tsx
@@ -1,13 +1,15 @@
 "use client";
 
-import React, {useMemo, useEffect, useRef, useCallback} from 'react'
+import React, {useMemo, useEffect, useRef, useState} from 'react'
 import * as THREE from 'three'
 import { useAnalysisStore, useGlobalStore, usePlotStore } from '@/utils/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 } from '@/utils/HelperFuncs';
+import { GetCurrentArray, GetTimeSeries, parseUVCoords } from '@/utils/HelperFuncs';
+import { ZarrDataset } from '../zarr/ZarrLoaderLRU';
+import { evaluate_cmap } from 'js-colormaps-es';
 
 interface InfoSettersProps{
   setLoc: React.Dispatch<React.SetStateAction<number[]>>;
@@ -21,29 +23,33 @@ function Rescale(value: number, scales: {minVal: number, maxVal: number}){
   return value * range + scales.minVal
 }
 
-
-const FlatMap = ({textures, infoSetters} : {textures : THREE.DataTexture | THREE.Data3DTexture[], infoSetters : InfoSettersProps}) => {
+const FlatMap = ({textures, infoSetters, ZarrDS} : {textures : THREE.DataTexture | THREE.Data3DTexture[], infoSetters : InfoSettersProps, ZarrDS: ZarrDataset}) => {
     const {setLoc, setShowInfo, val, coords} = infoSetters;
-    const {flipY, colormap, valueScales, dimArrays, isFlat, dataShape, textureArrayDepths} = useGlobalStore(useShallow(state => ({
-      flipY: state.flipY, 
-      colormap: state.colormap, 
-      valueScales: state.valueScales,
-      dimArrays: state.dimArrays,
-      isFlat: state.isFlat,
-      dataShape: state.dataShape,
-      textureArrayDepths: state.textureArrayDepths
+    const {flipY, colormap, valueScales, dimArrays, dimNames, dimUnits, 
+      isFlat, dataShape, textureArrayDepths, strides, timeSeries,
+      setPlotDim,updateDimCoords, updateTimeSeries} = useGlobalStore(useShallow(state => ({
+      flipY: state.flipY, colormap: state.colormap, 
+      valueScales: state.valueScales, dimArrays: state.dimArrays,
+      dimNames:state.dimNames, dimUnits: state.dimUnits,
+      isFlat: state.isFlat, dataShape: state.dataShape,
+      textureArrayDepths: state.textureArrayDepths,
+      strides: state.strides, timeSeries: state.timeSeries,
+      setPlotDim:state.setPlotDim, 
+      updateDimCoords:state.updateDimCoords,
+      updateTimeSeries: state.updateTimeSeries
     })))
-    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,
-      zSlice: state.zSlice,
-      ySlice: state.ySlice,
-      xSlice: state.xSlice
+
+    const {cScale, cOffset, animProg, nanTransparency, nanColor, 
+      zSlice, ySlice, xSlice, selectTS,
+      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,
+      getColorIdx: state.getColorIdx,
+      incrementColorIdx: state.incrementColorIdx
     })))
     const {axis, analysisMode, analysisArray} = useAnalysisStore(useShallow(state=> ({
       axis: state.axis,
@@ -71,19 +77,114 @@ const FlatMap = ({textures, infoSetters} : {textures : THREE.DataTexture | THREE
     const infoRef = useRef<boolean>(false)
     const lastUV = useRef<THREE.Vector2>(new THREE.Vector2(0,0))
     const rotateMap = analysisMode && axis == 2;
-    const sampleArray = useMemo(()=> analysisMode ? analysisArray : GetCurrentArray(),[analysisMode, analysisArray])
+    const sampleArray = useMemo(()=> analysisMode ? analysisArray : GetCurrentArray(),[analysisMode, analysisArray, textures])
     const analysisDims = useMemo(()=>dimArrays.length > 2 ? dimSlices.filter((_e,idx)=> idx != axis) : dimSlices,[dimSlices,axis])
+    useEffect(()=>{
+        geometry.dispose()
+    },[geometry])
+
+    // ----- MOUSE MOVE ----- //
+    const eventRef = useRef<ThreeEvent<PointerEvent> | null>(null);
+    const handleMove = (e: ThreeEvent<PointerEvent>) => {
+      if (infoRef.current && e.uv) {
+        eventRef.current = e;
+        setLoc([e.clientX, e.clientY]);
+        lastUV.current = e.uv;
+        const { x, y } = e.uv;
+        const xSize = isFlat ? (analysisMode ? analysisDims[1].length : dimSlices[1].length) : dimSlices[2].length;
+        const ySize = isFlat ? (analysisMode ? analysisDims[0].length : dimSlices[0].length) : dimSlices[1].length;
+        const xIdx = Math.round(x*xSize-.5)
+        const yIdx = Math.round(y*ySize-.5)
+        let dataIdx = xSize * yIdx + xIdx;
+        dataIdx += isFlat ? 0 : Math.floor((dimSlices[0].length-1) * animProg) * xSize*ySize
+        const dataVal = sampleArray ? sampleArray[dataIdx] : 0;
+        val.current = dataVal;
+        coords.current = isFlat ? analysisMode ? [analysisDims[0][yIdx], analysisDims[1][xIdx]] : [dimSlices[0][yIdx], dimSlices[1][xIdx]] : [dimSlices[1][yIdx], dimSlices[2][xIdx]]
+      }
+    }
+
+
+    // ----- TIMESERIES ----- //
+    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] = [dataShape[dataShape.length-2], dataShape[dataShape.length-1]]
+
+    useEffect(()=>{ //This goes through the list of highlighted squares and removes those that aren't included in the timeseries object.
+          let boundIDs = Object.keys(boundsObj)
+          const tsIDs = Object.keys(timeSeries)
+          boundIDs = boundIDs.filter((val) => tsIDs.includes(val))
+          const pointValues = boundIDs.map(id => boundsObj[id]);
+          const paddedArray = [
+            ...pointValues,
+            ...Array(Math.max(0, 10 - pointValues.length)).fill(new THREE.Vector4(-1 , -1, -1, -1))
+          ];
+          setBounds(paddedArray)
+        },[boundsObj, timeSeries])
+
+    function addBounds(uv : THREE.Vector2, tsID: string){ //This adds the bounds in UV space of a selected square on the sphere. 
+          const widthID = Math.floor(uv.x*(width))+.5;
+          const heightID = Math.ceil(uv.y*height)-.5 ;
+          const delX = 1/width;
+          const delY = 1/height;
+          const xBounds = [widthID/width-delX/2,widthID/width+delX/2]
+          const yBounds = [heightID/height-delY/2,heightID/height+delY/2]
+          const bounds = new THREE.Vector4(...xBounds, ...yBounds)
+          const newBoundObj = {[tsID] : bounds}
+          setBoundsObj(prev=>{ return {...newBoundObj, ...prev}})
+        }
+    function HandleTimeSeries(event: THREE.Intersection){
+            const uv = event.uv;
+            const normal = new THREE.Vector3(0,0,1)
+            if(ZarrDS && uv){
+              const tsUV = flipY ? new THREE.Vector2(uv.x, 1-uv.y) : uv
+              const tempTS = GetTimeSeries({data:analysisMode ? analysisArray : GetCurrentArray(), shape:dataShape, stride:strides},{uv:tsUV,normal})
+              setPlotDim(0) //I think this 2 is only if there are 3-dims. Need to rework the logic
+                
+              const coordUV = parseUVCoords({normal:normal,uv:uv})
+              let dimCoords = coordUV.map((val,idx)=>val ? dimSlices[idx][Math.round(val*dimSlices[idx].length)] : null)
+              const thisDimNames = dimNames.filter((_,idx)=> dimCoords[idx] !== null)
+              const thisDimUnits = dimUnits.filter((_,idx)=> dimCoords[idx] !== null)
+              dimCoords = dimCoords.filter(val => val !== null)
+              const tsID = `${dimCoords[0]}_${dimCoords[1]}`
+              const tsObj = {
+                color:evaluate_cmap(getColorIdx()/10,"Paired"),
+                data:tempTS
+              }
+              incrementColorIdx();
+              updateTimeSeries({ [tsID] : tsObj})
+              const dimObj = {
+                first:{
+                  name:thisDimNames[0],
+                  loc:dimCoords[0] ?? 0,
+                  units:thisDimUnits[0]
+                },
+                second:{
+                  name:thisDimNames[1],
+                  loc:dimCoords[1] ?? 0,
+                  units:thisDimUnits[1]
+                },
+                plot:{
+                  units:dimUnits[0]
+                }
+              }
+              updateDimCoords({[tsID] : dimObj})
+              addBounds(uv, tsID);
+            }
+          }
+    // ----- SHADER MATERIAL ----- //
     const shaderMaterial = useMemo(()=>new THREE.ShaderMaterial({
             glslVersion: THREE.GLSL3,
             uniforms:{
               cScale: {value: cScale},
               cOffset: {value: cOffset},
+              selectTS: {value: selectTS},
+              selectBounds: {value: bounds},
               map : {value: textures},
               textureDepths: {value:  new THREE.Vector3(textureArrayDepths[2], textureArrayDepths[1], textureArrayDepths[0])},
               cmap : { value : colormap},
               animateProg: {value:animProg},
               nanColor: {value : new THREE.Color(nanColor)},
-              nanAlpha: {value: 1 - nanTransparency}
+              nanAlpha: {value: 1 - nanTransparency},
             },
             vertexShader: vertShader,
             fragmentShader: isFlat ? fragmentFlat : flatFrag3D,
@@ -100,29 +201,12 @@ const FlatMap = ({textures, infoSetters} : {textures : THREE.DataTexture | THREE
         uniforms.nanColor.value = new THREE.Color(nanColor);
         uniforms.nanAlpha.value = 1 - nanTransparency;
         uniforms.cScale.value = cScale;
+        uniforms.selectBounds.value = bounds;
+        uniforms.selectTS.value = selectTS
       }
-    },[cScale, cOffset, textures, colormap, animProg, nanColor, nanTransparency])
-    useEffect(()=>{
-        geometry.dispose()
-    },[geometry])
-    const eventRef = useRef<ThreeEvent<PointerEvent> | null>(null);
-    const handleMove = useCallback((e: ThreeEvent<PointerEvent>) => {
-      if (infoRef.current && e.uv) {
-        eventRef.current = e;
-        setLoc([e.clientX, e.clientY]);
-        lastUV.current = e.uv;
-        const { x, y } = e.uv;
-        const xSize = isFlat ? (analysisMode ? analysisDims[1].length : dimSlices[1].length) : dimSlices[2].length;
-        const ySize = isFlat ? (analysisMode ? analysisDims[0].length : dimSlices[0].length) : dimSlices[1].length;
-        const xIdx = Math.round(x*xSize-.5)
-        const yIdx = Math.round(y*ySize-.5)
-        let dataIdx = xSize * yIdx + xIdx;
-        dataIdx += isFlat ? 0 : Math.floor((dimSlices[0].length-1) * animProg) * xSize*ySize
-        const dataVal = sampleArray ? sampleArray[dataIdx] : 0;
-        val.current = isFlat && !analysisMode ? Rescale(dataVal, valueScales) : dataVal;
-        coords.current = isFlat ? analysisMode ? [analysisDims[0][yIdx], analysisDims[1][xIdx]] : [dimSlices[0][yIdx], dimSlices[1][xIdx]] : [dimSlices[1][yIdx], dimSlices[2][xIdx]]
-      }
-    }, [sampleArray, dimSlices, animProg]);
+    },[cScale, cOffset, textures, colormap, animProg, nanColor, nanTransparency, bounds, selectTS])
+
+
   return (
     <>
     <mesh 
@@ -133,6 +217,7 @@ const FlatMap = ({textures, infoSetters} : {textures : THREE.DataTexture | THREE
       onPointerEnter={()=>{setShowInfo(true); infoRef.current = true }}
       onPointerLeave={()=>{setShowInfo(false); infoRef.current = false }}
       onPointerMove={handleMove}
+      onClick={selectTS && HandleTimeSeries}
     />
     </>
   )
diff --git a/src/components/plots/Plot.tsx b/src/components/plots/Plot.tsx
@@ -48,7 +48,7 @@ const Orbiter = ({isFlat} : {isFlat  : boolean}) =>{
       const duration = 1000; 
       const startTime = performance.now();
       const startPos = controls.object.position.clone();
-      const endPos = controls.position0.clone()
+      const endPos = isFlat ? new THREE.Vector3(0, 0, 5) : controls.position0.clone()
 
       const startTarget = controls.target.clone();
       const endTarget = controls.target0.clone()
@@ -62,8 +62,8 @@ const Orbiter = ({isFlat} : {isFlat  : boolean}) =>{
         controls.object.position.lerpVectors(startPos, endPos, t);
         controls.target.lerpVectors(startTarget,endTarget,t)
 
-        if (isFlat) {
-          controls.object.zoom = THREE.MathUtils.lerp(startZoom, 1000, t);
+        if (isFlat && useOrtho) {
+          controls.object.zoom = THREE.MathUtils.lerp(startZoom, 50, t);
           controls.object.updateProjectionMatrix();
           controls.update()
         } 
@@ -117,11 +117,11 @@ const Orbiter = ({isFlat} : {isFlat  : boolean}) =>{
   return (
     <OrbitControls 
       ref={orbitRef} 
-      enableRotate={!isFlat} 
+      enableRotate={!isFlat || !useOrtho} 
       enablePan={true} 
       maxDistance={50}
-      // minZoom={1} 
-      // maxZoom={3000}
+      minZoom={1} 
+      maxZoom={3000}
     />
   );
 }
@@ -208,7 +208,6 @@ const Plot = ({ZarrDS}:{ZarrDS: ZarrDataset}) => {
         const shapeLength = result.shape.length
         if (shapeLength == 2){
           setIsFlat(true)
-          setPlotType("sphere")
         }
         else{
           setIsFlat(false)
@@ -348,7 +347,7 @@ const Plot = ({ZarrDS}:{ZarrDS: ZarrDataset}) => {
           <ExportCanvas show={show}/>
           <CountryBorders/>
           {show && <AxisLines />}
-          <FlatMap textures={textures as THREE.DataTexture | THREE.Data3DTexture[]} infoSetters={infoSetters} />
+          <FlatMap textures={textures as THREE.DataTexture | THREE.Data3DTexture[]} infoSetters={infoSetters} ZarrDS={ZarrDS}/>
           <Orbiter isFlat={true}/>
         </Canvas>
         </>}
diff --git a/src/components/textures/shaders/flatFrag3D.glsl b/src/components/textures/shaders/flatFrag3D.glsl
@@ -4,11 +4,13 @@ uniform sampler3D map[14];
 uniform sampler2D cmap;
 uniform vec3 textureDepths;
 
+uniform bool selectTS;
 uniform float cOffset;
 uniform float cScale;
 uniform float animateProg;
 uniform float nanAlpha;
 uniform vec3 nanColor;
+uniform vec4[10] selectBounds; 
 
 varying vec2 vUv;
 out vec4 Color;
@@ -32,6 +34,20 @@ float sample1(vec3 p, int index) { // Shader doesn't support dynamic indexing so
     else return 0.0;
 }
 
+bool isValid(vec2 sampleCoord){
+    for (int i = 0; i < 10; i++){
+        vec4 thisBound = selectBounds[i];
+        if (thisBound.x == -1.){
+            return false;
+        }
+        bool cond = (sampleCoord.x < thisBound.r || sampleCoord.x > thisBound.g || sampleCoord.y < thisBound.b ||  sampleCoord.y > thisBound.a);
+        if (!cond){
+            return true;
+        }
+    }
+    return false;
+}
+
 void main() {
     int zStepSize = int(textureDepths.y) * int(textureDepths.x); 
     int yStepSize = int(textureDepths.x); 
@@ -47,5 +63,8 @@ void main() {
     float sampLoc = isNaN ? strength: (strength)*cScale;
     sampLoc = isNaN ? strength : min(sampLoc+cOffset,0.995);
     Color = isNaN ? vec4(nanColor, nanAlpha) : vec4(texture2D(cmap, vec2(sampLoc, 0.5)).rgb, 1.);
-
+    if (selectTS){
+        bool cond = isValid(vUv);
+        Color.rgb *= cond ? 1. : 0.65;
+    }
 }
diff --git a/src/components/textures/shaders/sphereFrag.glsl b/src/components/textures/shaders/sphereFrag.glsl
@@ -87,9 +87,9 @@ void main(){
         if (!isNaN){
             color.a = 1.;
         }
-        bool cond = isValid(sampleCoord);
-        if (!cond && selectTS){
-            color.rgb *= 0.65;
+        if (selectTS){
+            bool cond = isValid(vUv);
+            color.rgb *= cond ? 1. : 0.65;
         }
     } else {
         color = vec4(nanColor, 1.); // Black
diff --git a/src/components/ui/css/PlotLineButton.css b/src/components/ui/css/PlotLineButton.css
@@ -12,7 +12,7 @@
     font-size: 32px;
     background: var(--background-plot);
     transform: translateX(-50%);
-    filter: drop-shadow(0px 0px 5px var(--accent-foreground));
+    filter: drop-shadow(0px 0px 5px var(--notice-shadow));
     z-index: 4;
     padding-inline: 1rem;
 }

Original file line number	Diff line number	Diff line change
`@@ -87,9 +87,9 @@ void main(){`
`87`	`87`	`if (!isNaN){`
`88`	`88`	`color.a = 1.;`
`89`	`89`	`}`
`90`		`- bool cond = isValid(sampleCoord);`
`91`		`- if (!cond && selectTS){`
`92`		`- color.rgb *= 0.65;`
	`90`	`+ if (selectTS){`
	`91`	`+ bool cond = isValid(vUv);`
	`92`	`+ color.rgb *= cond ? 1. : 0.65;`
`93`	`93`	`}`
`94`	`94`	`} else {`
`95`	`95`	`color = vec4(nanColor, 1.); // Black`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@`
`12`	`12`	`font-size: 32px;`
`13`	`13`	`background: var(--background-plot);`
`14`	`14`	`transform: translateX(-50%);`
`15`		`- filter: drop-shadow(0px 0px 5px var(--accent-foreground));`
	`15`	`+ filter: drop-shadow(0px 0px 5px var(--notice-shadow));`
`16`	`16`	`z-index: 4;`
`17`	`17`	`padding-inline: 1rem;`
`18`	`18`	`}`