Merge pull request #27 from EarthyScience/quick-lru

implement quickLRU and added loading element

Author: TheJeran

package.json

@@ -32,6 +32,7 @@
     "jotai": "^2.10.0",
     "js-colormaps-es": "^0.0.5",
     "leva": "^0.10.0",
+    "quick-lru": "^7.0.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "three": "^0.175.0",

src/App.css

@@ -207,3 +207,16 @@ html, body, #root {
     padding: 0 5px;
   }
 }
+
+.loading{
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  background-color: rgba(255, 255, 255, 0.596);
+  z-index: 10;
+  padding: 20px;
+  font-size: 48px;
+  color: #222222;
+  border-radius: 20px;
+  transform: translate(-50%,-50%);
+}

src/components/CanvasGeometry.tsx

@@ -56,6 +56,7 @@ export function CanvasGeometry() {
   const [showTimeSeries,setShowTimeSeries] = useState<boolean>(false)
   const [colormap,setColormap] = useState<THREE.DataTexture>(GetColorMapTexture())
   const [timeSeries, setTimeSeries] = useState<number[]>([0]);
+  const [showLoading, setShowLoading] = useState<boolean>(false);
 
 
   const ZarrDS = useMemo(()=>new ZarrDataset(storeURL),[])
@@ -68,6 +69,7 @@ export function CanvasGeometry() {
   //DATA LOADING
   useEffect(() => {
     if (variable != "Default") {
+      setShowLoading(true);
       //Need to add a check somewhere here to swap to 2D or 3D based on shape. Probably export two variables from GetArray
       ZarrDS.GetArray(variable).then((result) => {
         // result now contains: { data: TypedArray, shape: number[], dtype: string }
@@ -91,6 +93,7 @@ export function CanvasGeometry() {
         }
         const shapeRatio = result.shape[1] / result.shape[2] * 2;
         setShape(new THREE.Vector3(2, shapeRatio, 2));
+        setShowLoading(false)
       })
     }
       else{
@@ -112,6 +115,11 @@ export function CanvasGeometry() {
 
   return (
     <>
+    <div className='messages'>
+      {showLoading && <div className='loading'>
+        Loading...
+      </div>}
+    </div>
     <div className='canvas'>
       <Canvas shadows camera={{ position: [-4.5, 3, 4.5], fov: 50 }}
       frameloop="demand"

src/components/ZarrLoaderLRU.tsx

@@ -1,5 +1,6 @@
 import * as zarr from "zarrita";
 import * as THREE from 'three';
+import QuickLRU from 'quick-lru';
 
 function GetZarrVariables(obj: Record<string, { path?: string; kind?: string }>) {
 	//Parses out variables in a Zarr group for variable list
@@ -84,8 +85,6 @@ function parseUVCoords({normal,uv}:{normal:THREE.Vector3,uv:THREE.Vector2}){
 	}
 }
 
-
-
 export async function GetTimeSeries({TimeSeriesObject}:GetTimeSeries){
 	const {uv,normal,variable, storePath} = TimeSeriesObject
 	const d_store = zarr.tryWithConsolidated(
@@ -102,29 +101,31 @@ export async function GetTimeSeries({TimeSeriesObject}:GetTimeSeries){
 	return arr
 }
 
+
 interface TimeSeriesInfo{
 	uv:THREE.Vector2,
 	normal:THREE.Vector3
 }
 
+  
 export class ZarrDataset{
 	private storePath: string;
 	private variable: string;
-	private cache: { [key: string]: any };
+	private cache: QuickLRU<string,any>;
 
 	constructor(storePath: string){
 		this.storePath = storePath;
 		this.variable = "Default";
-		this.cache = {};
+		this.cache = new QuickLRU({maxSize: 2000});
 	}
 
 	async GetArray(variable: string){
 		//This checks if variable is stored in cache
 		this.variable = variable;
 		let outVar = null;
-		if (this.cache.hasOwnProperty(variable)){
+		if (this.cache.has(variable)){
 			console.log("Using Cache")
-			return this.cache[variable]
+			return this.cache.get(variable)
 		}
 		const d_store = zarr.tryWithConsolidated(
 			new zarr.FetchStore(this.storePath)
@@ -137,7 +138,7 @@ export class ZarrDataset{
 		if (outVar.is("number") || outVar.is("bigint")) {
 			const chunk = await zarr.get(outVar)
 			const typedArray = new Float32Array(chunk.data);
-			this.cache[variable] = chunk;
+			this.cache.set(variable, chunk);
 			// TypeScript will now infer the correct numeric type
 			return {
 				data: typedArray,
@@ -151,10 +152,10 @@ export class ZarrDataset{
 
 	async GetTimeSeries(TimeSeriesInfo:TimeSeriesInfo){
 		const {uv,normal} = TimeSeriesInfo
-		if (!this.cache[this.variable]){
+		if (!this.cache.has(this.variable)){
 			return [0]
 		}
-		const {data,shape,stride} = this.cache[this.variable]
+		const {data,shape,stride} = this.cache.get(this.variable)
 		//This is a complicated logic check but it works bb
 		const sliceSize = parseUVCoords({normal,uv})