some types

Author: lazarusA

src/components/CanvasGeometry.tsx

@@ -36,7 +36,7 @@ export function CanvasGeometry() {
     } 
   })
   const [texture, setTexture] = useState<THREE.DataTexture | THREE.Data3DTexture | null>(null)
-  const [shape, setShape] = useState<THREE.Vector2 | THREE.Vector3>(new THREE.Vector3(2, 2, 2))
+  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 [showTimeSeries,setShowTimeSeries] = useState<boolean>(false)
@@ -46,25 +46,35 @@ export function CanvasGeometry() {
       //Need to add a check somewhere here to swap to 2D or 3D based on shape. Probably export two variables from GetArray
       GetArray(storeURL, variable).then((result) => {
         // result now contains: { data: TypedArray, shape: number[], dtype: string }
-        const [texture, _shape,scaling] = ArrayToTexture({
+        const [texture, shape, scaling] = ArrayToTexture({
           data: result.data,
           shape: result.shape
         })
-        console.log(_shape)
+        console.log(shape)
         if (texture instanceof THREE.DataTexture || texture instanceof THREE.Data3DTexture) {
           setTexture(texture)
         } else {
           console.error("Invalid texture type returned from ArrayToTexture");
           setTexture(null);
         }
-        setValueScales(scaling)
+        // norrow down type before using it!
+        if (
+          typeof scaling === 'object' &&
+          'maxVal' in scaling &&
+          'minVal' in scaling
+        ) {
+          setValueScales(scaling as { maxVal: number; minVal: number });
+        }
         const shapeRatio = result.shape[1] / result.shape[2] * 2;
         setShape(new THREE.Vector3(2, shapeRatio, 2));
       })
     }
       else{
         const texture = DefaultCube();
-        setTexture(texture)
+        // again need to check type before using it
+        if (texture instanceof THREE.Data3DTexture || texture instanceof THREE.DataTexture) {
+          setTexture(texture);
+        }
         setShape(new THREE.Vector3(2, 2, 2))
       }
   }, [variable])
@@ -80,7 +90,7 @@ export function CanvasGeometry() {
           <Center top position={[-1, 0, 1]}/>
           {plotter == "volume" && <>
             <DataCube volTexture={texture} shape={shape}/>
-            <mesh onClick={()=>setShowTimeSeries(x=>true)}>
+            <mesh onClick={() => setShowTimeSeries(true)}>
               <UVCube shape={shape} setTimeSeriesLocs={setTimeSeriesLocs}/>
             </mesh>
 

src/components/TextureMakers.tsx

@@ -94,8 +94,8 @@ export function DefaultCube() {
     const array: Array = {
         data,
         shape,
-        stride:[1,1,1]
     }
-    const [texture,scaling] = ArrayTo3D(array)
+    const [texture, scaling] = ArrayTo3D(array)
+    console.log(scaling)
     return texture
 }

src/components/TimeSeries.tsx

@@ -1,12 +1,12 @@
 import * as THREE from 'three'
-import { Canvas, createPortal, useThree } from '@react-three/fiber';
-import { Center, Html, Hud, OrthographicCamera, PerspectiveCamera, Text } from '@react-three/drei'
+// ! don't import things that are not used in the code, build will fail
+// import { Canvas, createPortal, useThree } from '@react-three/fiber';
+// import { Center, Html, Text } from '@react-three/drei'
+import { Hud, OrthographicCamera, Text } from '@react-three/drei'
 import { useMemo, useState, useEffect } from 'react';
 import { GetTimeSeries } from './ZarrLoaderLRU';
 
-
-
-const storeURL = "https://s3.bgc-jena.mpg.de:9000/esdl-esdc-v3.0.2/esdc-16d-2.5deg-46x72x1440-3.0.2.zarr"
+// 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;
@@ -29,7 +29,7 @@ export function TimeSeries({timeSeriesLocs,DSInfo,scaling} : {timeSeriesLocs:tim
     const {variable, storePath} = DSInfo;
     const {maxVal,minVal} = scaling;
     const [timeSeries, setTimeSeries] = useState<number[]>([0]);
-    const [xLabls,setXLabels] = useState();
+    // const [xLabls,setXLabels] = useState();
     const [yLabels, setYLabels] = useState();
     const verticleScale = 2;
     const horizontalScale = 5;
@@ -72,12 +72,14 @@ export function TimeSeries({timeSeriesLocs,DSInfo,scaling} : {timeSeriesLocs:tim
         yMax = (yMax-0.5)*verticleScale
         const step = (maxVal-minVal)/3;
         let yLabels = Array.from({ length: 3 }, (_, i) => Math.round(minVal + step * i))
-        let yPos = yLabels.map((val,ind)=>{
+        let yPos = yLabels.map(val => {
             return (((val-minVal)/(maxVal-minVal))-0.5)*verticleScale
         })
         yPos = [yMin, ...yPos.slice(1), yMax]
         yLabels = [Math.ceil(minVal),...yLabels.slice(1), Math.floor(maxVal)]
-
+        // console unused variables
+        console.log(xPos,xMin,xMax,yPos,yMin,yMax)
+        
         setYLabels({
             positions:yPos,
             labels:yLabels

src/components/ZarrLoaderLRU.tsx

@@ -94,8 +94,7 @@ export async function GetTimeSeries({TimeSeriesObject}:GetTimeSeries){
 	//This is a complicated logic check but it works bb
 	const sliceSize = parseUVCoords({normal,uv})
 	const slice = sliceSize.map((value, index) =>
-		value === null || shape[index] === null ? null : value * shape[index]
-	  );
+		value === null || shape[index] === null ? null : value * shape[index]);
 	const arr = await zarr.get(outVar,slice)
 	return arr
 }