Merge pull request #47 from EarthyScience/Context

Context

Author: TheJeran

src/components/CanvasGeometry.tsx

@@ -2,29 +2,24 @@ import * as THREE from 'three'
 THREE.Cache.enabled = true;
 import { Canvas } from '@react-three/fiber';
 import { Center, OrbitControls, Environment } from '@react-three/drei'
-import { variables, ZarrDataset, parseUVCoords } from '@/components/ZarrLoaderLRU'
+import { variables, ZarrDataset } from '@/components/ZarrLoaderLRU'
 import { useEffect, useState, useMemo } from 'react';
 import { useControls } from 'leva'
-import { DataCube, PointCloud, UVCube, PlotLine, PlotArea, FixedTicks } from './PlotObjects';
+import { PointCloud, UVCube, PlotArea, DataCube } from './PlotObjects';
 import { GetColorMapTexture, ArrayToTexture, DefaultCube, colormaps } from './Textures';
-import { Metadata, ResizeBar } from './UI';
+import { Metadata } from './UI';
+import { plotContext, DimCoords } from './Contexts';
 
 const storeURL = "https://s3.bgc-jena.mpg.de:9000/esdl-esdc-v3.0.2/esdc-16d-2.5deg-46x72x1440-3.0.2.zarr"
 
-interface TimeSeriesLocs{
-  uv:THREE.Vector2;
-  normal:THREE.Vector3
-}
-interface Coord {
-  name: string; 
-  loc: number;  
-  units: string;
-}
-
-interface DimCoords {
-  first: Coord;
-  second: Coord;
-  plot: Pick<Coord, "units">; // Only units
+function Loading({showLoading}:{showLoading:boolean}){
+  return(
+    <div className='messages'>
+      {showLoading && <div className='loading'>
+        Loading...
+      </div>}
+    </div>
+  )
 }
 
 export function CanvasGeometry() {
@@ -53,22 +48,18 @@ export function CanvasGeometry() {
 
   const [texture, setTexture] = useState<THREE.DataTexture | THREE.Data3DTexture | null>(null) //Main Texture
   const [shape, setShape] = useState<THREE.Vector3 | THREE.Vector3>(new THREE.Vector3(2, 2, 2))
-  const [timeSeriesLocs,setTimeSeriesLocs] = useState<TimeSeriesLocs>({uv:new THREE.Vector2(.5,.5), normal:new THREE.Vector3(0,0,1)})
   const [valueScales,setValueScales] = useState({maxVal:1,minVal:-1})
   const [colormap,setColormap] = useState<THREE.DataTexture>(GetColorMapTexture())
   const [timeSeries, setTimeSeries] = useState<number[]>([0]);
   const [showLoading, setShowLoading] = useState<boolean>(false);
-  const [metadata,setMetadata] = useState<Object[]>([{},{}])
+  const [metadata,setMetadata] = useState<object[] | null>(null)
 
   //Timeseries Plotting Information
   const [dimArrays,setDimArrays] = useState([[0],[0],[0]])
   const [dimNames,setDimNames] = useState<string[]>(["default"])
   const [dimUnits,setDimUnits] = useState<string[]>(["Default"]);
-  const [dimCoords, setDimCoords] = useState<Object | null>(null);
+  const [dimCoords, setDimCoords] = useState<DimCoords>();
   const [plotDim,setPlotDim] = useState<number>(0)
-  const [height, setHeight] = useState<number>(Math.round(window.innerHeight-(window.innerHeight*0.15)-48))
-
-
   const ZarrDS = useMemo(()=>new ZarrDataset(storeURL),[])
 
   useEffect(()=>{
@@ -104,6 +95,7 @@ export function CanvasGeometry() {
         setShape(new THREE.Vector3(2, shapeRatio, 2));
         setShowLoading(false)
       })
+      //Get Metadata
       ZarrDS.GetAttributes(variable).then((result)=>{
         setMetadata(result);
         const [dimArrs, dimMetas] = ZarrDS.GetDimArrays()
@@ -126,51 +118,48 @@ export function CanvasGeometry() {
           setTexture(texture);
         }
         setShape(new THREE.Vector3(2, 2, 2))
-        setMetadata([{}])
+        setMetadata(null)
       }
   }, [variable])
 
-  //TIMESERIES
-  useEffect(()=>{
-    if(ZarrDS && metadata){
-      ZarrDS.GetTimeSeries(timeSeriesLocs).then((e)=> setTimeSeries(e))
-      const plotDim = (timeSeriesLocs.normal.toArray()).map((val, idx) => {
-        if (Math.abs(val) > 0) {
-          return idx;
-        }
-        return null;}).filter(idx => idx !== null);
-      setPlotDim(2-plotDim[0]) //I think this 2 is only if there are 3-dims. Need to rework the logic
-
-      const coordUV = parseUVCoords({normal:timeSeriesLocs.normal,uv:timeSeriesLocs.uv})
-      let dimCoords = coordUV.map((val,idx)=>val ? dimArrays[idx][Math.round(val*dimArrays[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 dimObj = {
-        first:{
-          name:thisDimNames[0],
-          loc:dimCoords[0],
-          units:thisDimUnits[0]
-        },
-        second:{
-          name:thisDimNames[1],
-          loc:dimCoords[1],
-          units:thisDimUnits[1]
-        },
-        plot:{
-          units:dimUnits[2-plotDim[0]]
-        }
-      }
-      setDimCoords(dimObj)
+  //These are passed to the UVCube (will be renamed) to extract the timeseries info
+  const timeSeriesObj ={
+    setters:{
+      setTimeSeries,
+      setPlotDim,
+      setDimCoords
+    },
+    values:{
+      ZarrDS,
+      shape,
+      dimArrays,
+      dimNames,
+      dimUnits
     }
-  },[timeSeriesLocs])
+  }
+
+  const defaultDimCoords: DimCoords = {
+    first: { name: "", loc: 0, units: "" },
+    second: { name: "", loc: 0, units: "" },
+    plot: { units: "" }
+  };
+
+//This is the data being passed down the plot tree
+  const plotObj = {
+    coords: dimCoords ?? defaultDimCoords,
+    plotDim,
+    dimNames,
+    dimUnits,
+    dimArrays,
+    plotUnits:metadata ? (metadata as any).units : "Default",
+    yRange:[valueScales.minVal,valueScales.maxVal],
+    timeSeries,
+    scaling:{...valueScales,colormap}
+  } 
+
   return (
     <>
-    <div className='messages'>
-      {showLoading && <div className='loading'>
-        Loading...
-      </div>}
-    </div>
+    <Loading showLoading={showLoading} />
     <div className='canvas'>
       <Canvas shadows camera={{ position: [-4.5, 3, 4.5], fov: 50 }}
       frameloop="demand"
@@ -180,7 +169,7 @@ export function CanvasGeometry() {
         {/* Volume Plots */}
         {plotter == "volume" && <>
           <DataCube volTexture={texture} shape={shape} colormap={colormap}/>
-          <UVCube shape={shape} setTimeSeriesLocs={setTimeSeriesLocs}/>
+          <UVCube {...timeSeriesObj} />
         </>}
         {/* Point Clouds Plots */}
         {plotter == "point-cloud" && <PointCloud textures={{texture,colormap}} />}
@@ -194,16 +183,9 @@ export function CanvasGeometry() {
 
     {metadata && <Metadata data={metadata} /> }
 
-    <ResizeBar height={height} setHeight={setHeight} />
-    <PlotArea height={height} coords={dimCoords as DimCoords }>
-        <PlotLine 
-          data={timeSeries} 
-          lineWidth={20}
-          scaling={{...valueScales,colormap}}
-          height={height}
-        />
-        {dimCoords && <FixedTicks color='white' xDimArray={dimArrays[plotDim]} yRange={[valueScales.minVal,valueScales.maxVal]} coords={dimCoords as DimCoords} height={height}/>}
-    </PlotArea>
+    <plotContext.Provider value={plotObj} >
+      <PlotArea />
+    </plotContext.Provider>
 
     {/* <Leva theme={lightTheme} /> */}
     </>

src/components/Contexts/PlotContext.ts

@@ -0,0 +1,60 @@
+import { createContext } from "react";
+import * as THREE from 'three'
+
+interface Coord {
+  name: string; 
+  loc: number;  
+  units: string;
+}
+export interface DimCoords {
+  first: Coord;
+  second: Coord;
+  plot: Pick<Coord, "units">; // Only units
+}
+interface PlotContextType {
+    coords: DimCoords;
+    plotDim: number;
+    dimNames:string[],
+    dimUnits:string[],
+    dimArrays: number[][];
+    plotUnits:string;
+    yRange: number[];
+    timeSeries: number[];
+    scaling: {
+        colormap: THREE.DataTexture;
+        maxVal: number;
+        minVal: number;
+    };
+}
+const plotObj = {
+    coords: {
+      first: {
+        name: "DefaultName1",
+        loc: 0,
+        units: "meters",
+      },
+      second: {
+        name: "DefaultName2",
+        loc: 1,
+        units: "meters",
+      },
+      plot: {
+        units: "pixels",
+      },
+    },
+    plotDim: 100, // Example dimension value
+    dimNames:["Default","Default","Default"],
+    dimUnits:["Default","Default","Default"],
+    dimArrays: [[0, 1, 2], [3, 4, 5]], // Example array of arrays
+    plotUnits:"Default",
+    yRange: [0, 10], // Example range
+    timeSeries: [1, 2, 3, 4, 5], // Example time series
+    scaling: {
+      colormap: new THREE.DataTexture(), // Example DataTexture instance
+      maxVal: 100, // Example max value
+      minVal: 0, // Example min value
+    },
+  };
+  
+export const plotContext = createContext<PlotContextType>(plotObj)
+

src/components/Contexts/index.ts

@@ -0,0 +1,2 @@
+export {plotContext} from './PlotContext'
+export type {DimCoords} from './PlotContext'

src/components/PlotObjects/FixedTicks.tsx

@@ -1,7 +1,8 @@
 import { Text, OrbitControls } from '@react-three/drei'
 import { useThree, useFrame } from '@react-three/fiber'
-import { useState, useMemo, useEffect, useRef } from 'react'
+import { useState, useMemo, useEffect, useRef, useContext } from 'react'
 import { parseTimeUnit } from '@/utils/HelperFuncs'
+import { plotContext } from '../Contexts/PlotContext'
 
 
 interface ViewportBounds {
@@ -17,23 +18,6 @@ interface FixedTicksProps {
   fontSize?: number;
   showGrid?: boolean;
   gridOpacity?: number;
-  xDimArray: number[];
-  yRange: number[];
-  coords:{
-    first:{
-      name:string,
-      loc:number,
-      units:string
-    },  
-    second:{
-      name:string,
-      loc:number,
-      units:string
-    },      
-    plot:{
-      units: string
-    }
-  };
   height:number
 }
 
@@ -43,28 +27,12 @@ export function FixedTicks({
   fontSize = 18,
   showGrid = true,
   gridOpacity = 0.5,
-  xDimArray = [0,0,0,0,0],
-  yRange = [0,1],
-  coords = {
-    first:{
-      name:"Default",
-      loc:0.5,
-      units:"Default"
-    },
-    second:{
-      name:"Default",
-      loc:0.5,
-      units:"Default"
-    },
-    plot:{
-      units:"Default"
-    }
-  },
   height
 }: FixedTicksProps) {
   const { camera } = useThree()
   const [bounds, setBounds] = useState<ViewportBounds>({ left: 0, right: 0, top: 0, bottom: 0 })
-
+  const {coords, yRange, dimArrays, plotDim} = useContext(plotContext)
+  const xDimArray = dimArrays[plotDim]
   const xTickCount = 10;
   const yTickCount = 8;
 
@@ -221,7 +189,7 @@ export function FixedTicks({
                       anchorX="center"
                       anchorY="top"
                     >
-                      {textArray?.[Math.round(normX*xDimSize)] ?? ''}
+                      {textArray?.[Math.round(normX*xDimSize-.5)] ?? ''}
                     </Text>
                   )}
                 </group>
@@ -237,8 +205,8 @@ export function FixedTicks({
             const x = horX
             return (
               <>
-                <group position={[x,y,0]}>
-                  <line key={`hgrid-${i}`} >
+                <group key={`hgrid-${i}`} position={[x,y,0]}>
+                  <line >
                     <bufferGeometry>
                       <float32BufferAttribute
                         attach="attributes-position"

src/components/PlotObjects/PlotArea/PlotArea.css

@@ -2,5 +2,18 @@
     position: relative;
     width: 200px;
     bottom:50%;
-    left:2%
+    left:2%;
+    pointer-events: none;
+}
+
+.point-info{
+    position: fixed;
+    z-index: 9;
+    color: white;
+    background: rgb(66, 66, 66);
+    pointer-events: none;
+    transform: translate(10px,20px);
+    padding: 5px;
+    border-radius: 5px;
+    box-shadow: 1px 2px 5px rgba(255, 255, 255, 0.37);
 }