diff --git a/src/routes/viewer/+page.svelte b/src/routes/viewer/+page.svelte index 27390ee..98e80c8 100644 --- a/src/routes/viewer/+page.svelte +++ b/src/routes/viewer/+page.svelte @@ -32,7 +32,7 @@ />
-

Scene Title

+

Dataset

@@ -47,7 +47,7 @@ }} class="input input-xs w-14" /> - of {totalSlices}
+ of {$totalSlices}
dataUint8 (slice) {$dataSlices[0]?.length} - {($dataSlices[0]?.byteLength / 1073741824).toFixed(3)} GB Slices downloaded: {JSON.stringify($dataSlices.length, null, 2)} diff --git a/src/routes/viewer/components/Viewer.svelte b/src/routes/viewer/components/Viewer.svelte index 6774413..fd617a8 100644 --- a/src/routes/viewer/components/Viewer.svelte +++ b/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'; diff --git a/src/routes/viewer/fetchAndPrepareData/dataSetup.ts b/src/routes/viewer/fetchAndPrepareData/dataSetup.ts index 942aefe..1c6d190 100644 --- a/src/routes/viewer/fetchAndPrepareData/dataSetup.ts +++ b/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 } - } \ No newline at end of file diff --git a/src/routes/viewer/fetchAndPrepareData/fetchAllSlices.ts b/src/routes/viewer/fetchAndPrepareData/fetchAllSlices.ts index 442c3c2..37e91fe 100644 --- a/src/routes/viewer/fetchAndPrepareData/fetchAllSlices.ts +++ b/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); diff --git a/src/routes/viewer/fetchAndPrepareData/fetchSlice.ts b/src/routes/viewer/fetchAndPrepareData/fetchSlice.ts index 276ca1e..8fb244e 100644 --- a/src/routes/viewer/fetchAndPrepareData/fetchSlice.ts +++ b/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 }; } \ No newline at end of file diff --git a/src/routes/viewer/stores/allSlices.store.ts b/src/routes/viewer/stores/allSlices.store.ts index 18137f5..78407a1 100644 --- a/src/routes/viewer/stores/allSlices.store.ts +++ b/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]);