Update dataset and fix totalSlices calculation

src/routes/viewer/+page.svelte

@@ -32,7 +32,7 @@
 		/>
 	</div>
 	<div class="px-4 py-4">
-		<h2 class="text-2xl mb-3">Scene Title</h2>
+		<h2 class="text-2xl mb-3">Dataset</h2>
 		<Stats />
 
 		<div class="text-sm">
@@ -47,7 +47,7 @@
 				}}
 				class="input input-xs w-14"
 			/>
-			of {totalSlices}<br />
+			of {$totalSlices}<br />
 			dataUint8 (slice) {$dataSlices[0]?.length} - {($dataSlices[0]?.byteLength / 1073741824).toFixed(3)} GB
 			<!-- <pre>dataCellSize: {$dataCellSize.length} |</pre> -->
 			Slices downloaded: {JSON.stringify($dataSlices.length, null, 2)}

src/routes/viewer/components/Viewer.svelte

@@ -5,7 +5,7 @@
 
 	import { dataSlices, currentTimeIndex, downloadedTime } from '../stores/allSlices.store';
 	import { cloudLayerSettings, rainLayerSettings, temperatureLayerSettings, showGrid } from '../stores/viewer.store';
-	import { create3DScene, scene, camera } from '../sceneSetup/create3DScene';
+	import { create3DScene, scene } from '../sceneSetup/create3DScene';
 
 	import { dataSetup } from '../fetchAndPrepareData/dataSetup';
 	import { createGridHelper } from '../sceneSetup/createGridHelper';

src/routes/viewer/fetchAndPrepareData/dataSetup.ts

@@ -3,31 +3,42 @@ import {
 } from "../sceneSetup/boxSetup";
 import {
   getVoxelAndVolumeSize,
-  getVoxelAndVolumeSize2D
+  getVoxelAndVolumeSize2D,
+  totalSlices
 } from "../stores/allSlices.store";
 import { fetchAllSlices } from "./fetchAllSlices";
 import { fetchSlice } from "./fetchSlice";
+import { openArray, HTTPStore } from 'zarr';
 
 
+export const zarrdata = []
 // Download first slice of the data and
 // calculate the voxel and volume size.
 // It runs only once.
 export async function dataSetup(visible_data, scene) {
 
+  const urlSearchParams = new URLSearchParams(document.location.search);
+  const datasetUrl = urlSearchParams.get("dataset") || 'http://localhost:5173/data/movie.zarr';
+
+  // open array, no need to opening it again for each variable
+
+  const store = new HTTPStore(datasetUrl, { fetchOptions: { redirect: 'follow', mode: 'no-cors', credentials: 'include' } });
   for (const variable of visible_data) {
+    zarrdata[variable] = await openArray({ store, path: variable, mode: 'r' });
     const dimensions = variable === 'thetavmix' ? 3 : 4;
-    const { dataUint8, store, shape } = await fetchSlice({ currentTimeIndex: 0, path: variable, dimensions });
+    const { dataUint8, shape } = await fetchSlice({ currentTimeIndex: 0, path: variable, dimensions });
+
     variable === 'thetavmix'
       ? await getVoxelAndVolumeSize2D(store, shape, variable)
       : await getVoxelAndVolumeSize(store, shape, variable);
 
+    totalSlices.set(zarrdata[variable].length);
     await createVolumetricRenderingBox({ scene, variable, dataUint8 });
   }
 
   // Fetch all slices after shwing the first one
   for (const variable of visible_data) {
     const dimensions = variable === 'thetavmix' ? 3 : 4;
-    fetchAllSlices({ path: variable, dimensions });
+    fetchAllSlices({ path: variable, dimensions }); // todo run this in parallel
   }
-
 }

src/routes/viewer/fetchAndPrepareData/fetchAllSlices.ts

@@ -17,6 +17,7 @@ export async function fetchAllSlices({ path = 'ql', dimensions = 4 }) {
   const promises = [];
 
   console.log('📕 Downloading all slices');
+  // Start loop at 1 because the first slice was already fetched at mounted
   for (let i = 1; i < get(slicesToRender); ++i) { // start with 1 because 0 was already fetched at mounted
     // const me = Symbol();
     // await q.wait(me, 10 - i);

src/routes/viewer/fetchAndPrepareData/fetchSlice.ts

@@ -1,27 +1,20 @@
-import { openArray, HTTPStore } from 'zarr';
-import type { PersistenceMode } from 'zarr/types/types';
 
 import { dataSlices } from "../stores/allSlices.store";
 import { coarseData } from './coarseData';
+import { zarrdata } from './dataSetup';
 
 // downloadZarrPoints
 export async function fetchSlice({
   currentTimeIndex = 0,
   path = 'ql',
-  mode = 'r' as PersistenceMode,
-  dimensions = 4
+  dimensions = 4,
 }) {
   console.log('🚀 Downloading slice... ', currentTimeIndex + 1);
 
-  const urlSearchParams = new URLSearchParams(document.location.search);
-  const datasetUrl = urlSearchParams.get("dataset") || 'http://localhost:5173/data/movie.zarr';
-
-  // Create an HTTPStore pointing to the base of your Zarr hierarchy
-  const store = new HTTPStore(datasetUrl, { fetchOptions: { redirect: 'follow', mode: 'no-cors', credentials: 'include' } });
-  const zarrdata = await openArray({ store, path, mode });
+  // Create an HTTPStore pointing to the base of the Zarr hierarchy
   const { data, shape } = dimensions === 4
-    ? await zarrdata.getRaw([currentTimeIndex, null, null, null])
-    : await zarrdata.getRaw([currentTimeIndex, null, null]);
+    ? await zarrdata[path].getRaw([currentTimeIndex, null, null, null])
+    : await zarrdata[path].getRaw([currentTimeIndex, null, null]);
 
 
   let dataUint8 = null;
@@ -45,7 +38,5 @@ export async function fetchSlice({
     }
     return timeSlices;
   });
-  // console.log('🎹 downloaded ', currentTimeIndex + 1);
-  // console.log('🎹 downloaded ', get(allTimeSlices)[currentTimeIndex]);
-  return { dataUint8, shape, store };
+  return { dataUint8, shape };
 }

src/routes/viewer/stores/allSlices.store.ts

@@ -4,7 +4,7 @@ import * as THREE from "three";
 import { openArray } from 'zarr';
 
 
-export const totalSlices = writable(1); // calculated number of slices in the data
+export const totalSlices = writable(0); // calculated number of slices in the data
 export const dataSlices = writable([]);
 export const currentTimeIndex = writable(0);
 
@@ -17,6 +17,10 @@ export const downloadedTime = writable(0)
 export async function getVoxelAndVolumeSize(store, shape, path) {
   // if (currentTimeIndex === 0) {
   const zarrxvals = await openArray({ store, path: 'xt', mode: 'r' });
+  console.log("Shape of the dataset: ", shape);
+
+
+
   const zarryvals = await openArray({ store, path: 'yt', mode: 'r' });
   const zarrzvals = await openArray({ store, path: 'z_' + path, mode: 'r' });
   const xvals = await zarrxvals.getRaw([null]);