Merge pull request #17 from NLeSC/main

intermediate main branch merge

.github/workflows/deploy.yml

@@ -0,0 +1,50 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: 'main'
+
+jobs:
+  build_site:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      # If you're using pnpm, add this step then change the commands and cache key below to use `pnpm`
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: build
+        env:
+          BASE_PATH: '/${{ github.event.repository.name }}'
+        run: |
+          npm run build
+
+      - name: Upload Artifacts
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # this should match the `pages` option in your adapter-static options
+          path: 'build/'
+
+  deploy:
+    needs: build_site
+    runs-on: ubuntu-latest
+
+    permissions:
+      pages: write
+      id-token: write
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v4

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
+  }
+]

package.json

@@ -15,6 +15,7 @@
 		"@janelia/three-orbit-unlimited-controls": "^1.1.0",
 		"@sveltejs/adapter-auto": "^3.1.1",
 		"@sveltejs/adapter-node": "^4.0.1",
+		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.5.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.2",
 		"@types/three": "^0.161.2",

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/+page.svelte

@@ -1,25 +1,31 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
 	import logos from '$lib/assets/images/logos.webp';
 
 	const datasets = [
 		// {
 		// 	title: 'Dataset 1 (80MB)',
 		// 	description: 'If a dog chews shoes whose shoes does he choose?',
-		// 	image: '/images/cover.webp',
+		//  image: `${base}/images/cover.webp`,
 		// 	url: 'https://s3.ctwhome.com/ruisdael/data/ql.zarr'
 		// },
 		// {
 		// 	title: 'Dataset 2 (300MB)',
 		// 	description: 'If a dog chews shoes whose shoes does he choose?',
-		// 	image: '/images/cover.webp',
+		//  image: `${base}/images/cover.webp`,
 		// 	url: 'https://s3.ctwhome.com/ruisdael/data/animated-data/ql.zarr'
 		// },
 		{
-			title: 'Dataset with Rain 3 (600MB)',
+			title: 'Localhost (Dev) Dataset with Rain 3 (600MB)',
 			description: 'Rain and clouds',
-			image: '/images/cover.webp',
+			image: `${base}/images/cover.webp`,
 			url: 'http://localhost:5173/data/movie.zarr'
+		},
+		{
+			title: 'Dataset with Rain 3 (600MB)',
+			description: 'Rain and clouds',
+			image: `${base}/images/cover.webp`,
+			url: 'https://storage.googleapis.com/ruisdael/movie.zarr'
 		}
 	];
 </script>

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

@@ -1,14 +1,13 @@
 import * as THREE from 'three';
 import { get } from 'svelte/store'
 import { scaleFactor } from '../stores/viewer.store';
+import { base } from '$app/paths';
 //
 // Create and add  plane mesh to the scene to hold the Map texture
 //
 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
+  const texture = textureLoader.load(`${base}/maps/nl_map 50m per pixel.webp`);
   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

@@ -36,7 +36,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;
@@ -54,7 +54,7 @@ export function updateMaterial({ variable, dataUint8 }) {
 
       volumeTexture = new THREE.Data3DTexture(dataUint8, sizes[0], sizes[1], sizes[2]);
       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);

svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-node';
+import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
 /** @type {import('@sveltejs/kit').Config} */
@@ -11,8 +11,13 @@ const config = {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter()
+		adapter: adapter({
+			fallback: '404.html'
+		}),
+		paths: {
+			base: process.argv.includes('dev') ? '' : process.env.BASE_PATH
+		}
 	}
 };
 
-export default config;
+export default config;