Fix TODOs and update code

cors-config.json

@@ -0,0 +1,8 @@
+[
+  {
+      "origin": ["https://nlesc.github.io/","http://localhost", "http://localhost:5173","https://ruisdael.ctwhome.com"],
+      "method": ["GET"],
+      "responseHeader": ["Content-Type"],
+      "maxAgeSeconds": 3600
+  }
+]

src/lib/utils/Utils.js

@@ -17,7 +17,6 @@ export function disableSpinnerRepeat(event, previous) {
 
 export function fixVolumeSize(volumeSize, data) {
 	const volumeSizeFixed = volumeSize;
-	// TODO: Is it really right that in practice, `image_size[2]` on the original file can be wrong?
 	const realFrameCount = data.byteLength / (volumeSize[0] * volumeSize[1]);
 	if (realFrameCount !== volumeSize[2]) {
 		console.log(`Frame count (z) seems to be ${realFrameCount} rather than ${volumeSize[2]}`);

src/routes/viewer/components/TimeLine.svelte

@@ -15,8 +15,6 @@
 
 	function play() {
 		playAnimation = !playAnimation;
-		// TODO This invertal emulates the playback of the data, make it a real playback
-
 		if (playAnimation) {
 			interval = setInterval(() => {
 				if (get(dataSlices)[get(currentTimeIndex)]) {
@@ -29,13 +27,6 @@
 		}
 	}
 
-	// TODO
-	// TODO
-	// TODO
-	// TODO  update the material when the currentTimeIndex changes
-	// TODO
-	// TODO
-	// TODO
 	onMount(() => {
 		// Update the material when the currentTimeIndex changes
 		currentTimeIndex.subscribe((index: number) => {

src/routes/viewer/components/Viewer.svelte

@@ -26,16 +26,9 @@
 			// Change transparency of the materials
 			boxes.ql && (boxes.ql.material.uniforms.uTransparency.value = $cloudLayerSettings.opacity / 100);
 			boxes.qr && (boxes.qr.material.uniforms.uTransparency.value = $rainLayerSettings.opacity / 100);
-
-			// TODO WORK IN PROGRSS< ADDING THE TEMPERATURE LAYER
 			boxes.thetavmix &&
 				(boxes.thetavmix.material.uniforms.uTransparency.value = $temperatureLayerSettings.opacity / 100);
 
-			// TODO: TESTING
-			// boxes.ql && (boxes.ql.material.opacity = $cloudLayerSettings.opacity / 100);
-			// boxes.qrBox && (boxes.qrBox.material.opacity = $rainLayerSettings.opacity / 100);
-			// boxes.thetavmix && (boxes.thetavmix.material.opacity = $temperatureLayerSettings.opacity / 100);
-
 			// Enable and disable the layers
 			$rainLayerSettings.enabled && !!boxes.qr ? scene.add(boxes.qr) : scene.remove(boxes.qr);
 			$cloudLayerSettings.enabled && !!boxes.ql ? scene.add(boxes.ql) : scene.remove(boxes.ql);
@@ -66,11 +59,6 @@
 		// It runs only once.
 		dataSetup(data_layers, scene);
 
-		// TODO:
-		// TODO: FETCH THE REST OF THE DATA
-		// TODO:
-		// TODO:
-
 		// Add the example points to the scene
 		// scene.add(examplePoints());
 

src/routes/viewer/fetchAndPrepareData/dataSetup.ts

@@ -16,17 +16,18 @@ export async function dataSetup(visible_data, scene) {
 
   for (const variable of visible_data) {
     const dimensions = variable === 'thetavmix' ? 3 : 4;
-    // Common operation for all variables
-
-
     const { dataUint8, store, shape } = await fetchSlice({ currentTimeIndex: 0, path: variable, dimensions });
     variable === 'thetavmix'
       ? await getVoxelAndVolumeSize2D(store, shape, variable)
       : await getVoxelAndVolumeSize(store, shape, variable);
 
     await createVolumetricRenderingBox({ scene, variable, dataUint8 });
+  }
 
-    fetchAllSlices({ path: variable, dimensions }); // TODO: FETCH ALL SLICES ONCE I HAVE THE FIRST ONE
+  // Fetch all slices after shwing the first one
+  for (const variable of visible_data) {
+    const dimensions = variable === 'thetavmix' ? 3 : 4;
+    fetchAllSlices({ path: variable, dimensions });
   }
 
 }

src/routes/viewer/fetchAndPrepareData/fetchSlice.ts

@@ -17,7 +17,7 @@ export async function fetchSlice({
   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: 'cors', credentials: 'include' } });
+  const store = new HTTPStore(datasetUrl, { fetchOptions: { redirect: 'follow', mode: 'no-cors', credentials: 'include' } });
   const zarrdata = await openArray({ store, path, mode });
   const { data, shape } = dimensions === 4
     ? await zarrdata.getRaw([currentTimeIndex, null, null, null])

src/routes/viewer/sceneSetup/createPlaneMesh.ts

@@ -7,8 +7,6 @@ import { scaleFactor } from '../stores/viewer.store';
 export function createPlaneMesh(): THREE.Mesh {
   const textureLoader = new THREE.TextureLoader();
   const texture = textureLoader.load('/maps/nl_map 50m per pixel.webp');
-  // texture.encoding = THREE.sRGBEncoding;
-  // TODO Replace with the following line when the texture is in sRGB
   texture.colorSpace = THREE.SRGBColorSpace;
 
   // Scale factor: 50 meters per pixel

src/routes/viewer/sceneSetup/initMaterial.ts

@@ -13,11 +13,6 @@ import { makeRainTransferTex } from '$lib/utils/makeRainTransferTex';
 import { cameraFar, cameraNear } from './create3DScene';
 import { cloudLayerSettings, rainLayerSettings, temperatureLayerSettings } from '../stores/viewer.store';
 
-// TODO:
-// TODO:
-// TODO: MAKE THIS WORK
-// TODO:
-
 // Run only once at mount
 const transferTexture = makeRainTransferTex();
 

src/routes/viewer/sceneSetup/updateMaterial.ts

@@ -35,7 +35,7 @@ export function updateMaterial({ variable, dataUint8 }) {
     case 'ql':
       volumeTexture = new THREE.Data3DTexture(dataUint8, sizes[0], sizes[1], sizes[2]);
       volumeTexture.format = THREE.RedFormat;
-      volumeTexture.minFilter = THREE.LinearFilter; // Better for volume rendering.// TODO: is this the best filter?
+      volumeTexture.minFilter = THREE.LinearFilter; // Better for volume rendering.
       volumeTexture.magFilter = THREE.LinearFilter;
       uniforms.dataScale.value = qlScale;
       uniforms.dtScale.value = dtScale;
@@ -51,7 +51,7 @@ export function updateMaterial({ variable, dataUint8 }) {
     case 'qr':
       volumeTexture = new THREE.Data3DTexture(dataUint8, sizes[0] / 8, sizes[1] / 8, sizes[2] / 8);
       volumeTexture.format = THREE.RedFormat;
-      volumeTexture.minFilter = THREE.NearestFilter; // TODO: is this the best filter?
+      volumeTexture.minFilter = THREE.NearestFilter;
       volumeTexture.magFilter = THREE.NearestFilter;
       uniforms.dataScale.value = qrScale;
       uniforms.dtScale.value = dtScale;

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

@@ -14,4 +14,5 @@ export const temperatureLayerSettings = persisted('temperatureLayer', { enabled:
 
 // 1 unit in the scene = 1000 meters (1 kilometer) in real life
 // Meters of the bounding box of the data
-export const scaleFactor = persisted('scaleFactor', 33800); // TODO: calculate this value from the data
+// NOTE: Calculate the bounding box of the data and set it here if possible.
+export const scaleFactor = persisted('scaleFactor', 33800);