Use AbortController to try abort chunks onDestroy()

ome · Oct 15, 2024 · c847454 · c847454
1 parent c03dbd2
commit c847454
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 13 deletions.
diff --git a/ome2024-ngff-challenge/src/Thumbnail.svelte b/ome2024-ngff-challenge/src/Thumbnail.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onMount } from "svelte";
+  import { onMount, onDestroy } from "svelte";
   import * as zarr from "zarrita";
   import { slice } from "@zarrita/indexing";
   import {
@@ -27,6 +27,8 @@
   let height = width / thumbAspectRatio;
   let showSpinner = true;
 
+  const controller = new AbortController();
+
   async function loadThumbnail() {
     let paths = attrs.multiscales[0].datasets.map((d) => d.path);
     let axes = attrs.multiscales[0].axes.map((a) => a.name);
@@ -86,7 +88,7 @@
         }
         return 0;
       });
-      return zarr.get(arr, slices);
+      return zarr.get(arr, slices, { opts: { signal: controller.signal } });
     });
 
     let ndChunks = await Promise.all(promises);
@@ -114,6 +116,10 @@
   onMount(() => {
     loadThumbnail();
   });
+
+  onDestroy(() => {
+    controller.abort();
+  });
 </script>
 
 <!-- Need a wrapper to show spinner -->

diff --git a/ome2024-ngff-challenge/src/ZarrListItem.svelte b/ome2024-ngff-challenge/src/ZarrListItem.svelte
@@ -3,6 +3,7 @@
   import { filesizeformat } from "./util";
   import { loadMultiscales } from "./tableStore";
   import Thumbnail from "./Thumbnail.svelte";
+  import { onDestroy } from "svelte";
 
   export let rowData;
   export let textFilter;
@@ -13,6 +14,7 @@
 
   let thumbDatasetIndex;
   let thumbAspectRatio = 1;
+  const controller = new AbortController();
   // If we have shape info
   if (rowData.size_x && rowData.size_y) {
     let longestSide = Math.max(rowData.size_x, rowData.size_y);
@@ -36,11 +38,15 @@
     if (rowData.series0 !== undefined) {
       zarrUrl += "/" + rowData.series0;
     }
-    let img = await loadMultiscales(zarrUrl);
+    let img = await loadMultiscales(zarrUrl, controller.signal);
     imgAttrs = img[0];
     imgUrl = img[1];
     plateAttrs = img[2]; // optional
+  });
 
+  onDestroy(() => {
+    // Doesn't seem to abort fetching of chunks
+    controller.abort();
   });
 
   $: description = (textFilter != "" && rowData.description?.includes(textFilter)) ? rowData.description : "";
@@ -97,6 +103,7 @@
     flex-direction: row;
     align-items: start;
     gap: 10px;
+    background-color: var(--background-color);
   }
   table {
     margin-left: 10px;
@@ -106,12 +113,4 @@
     font-size: 80%;
     line-height: normal;
   }
-  .link_logo {
-    width: 24px;
-    height: 24px;
-    visibility: hidden;
-  }
-  .zarr-list-item:hover .link_logo {
-    visibility: visible;
-  }
 </style>
diff --git a/ome2024-ngff-challenge/src/app.css b/ome2024-ngff-challenge/src/app.css
@@ -53,6 +53,7 @@ body {
   color: #333;
   position: absolute;
   inset: 0;
+  --background-color: white;
   --border-color: lightgrey;
   --light-background: #eee;
   --selected-background: #eee;

diff --git a/ome2024-ngff-challenge/src/tableStore.js b/ome2024-ngff-challenge/src/tableStore.js
@@ -3,9 +3,9 @@ import { organismStore, imagingModalityStore } from "./ontologyStore";
 import { range, getRandomInt } from "./util.js";
 const BATCH_SIZE = 5;
 
-export async function loadMultiscales(url) {
+export async function loadMultiscales(url, signal) {
   // return the json data that includes multiscales
-  let zarrData = await fetch(`${url}/zarr.json`)
+  let zarrData = await fetch(`${url}/zarr.json`, { signal })
     .then((response) => {
       if (response.status === 404) {
         throw new Error(`${url}/zarr.json not found`);