Cancellation of jpg network requests?

[peetaaah]

Hi there OpenSeadragon team,

I was browsing through some of the old issues and stumbled on this with regards to the cancellation of network requests:

1. How delete request tiles. #1327
2. Cancel pending request like google map #1747

Background:

I'm currently working on a project for my client handling cytology slides, and one issue that's been happening is - as more layers (slides) are being loaded in, the slower the browser performance becomes.

Issue:

I introduced a temporary 'abort' button as an experiment to cancel all incoming requests to prevent the tab from freezing up.

But somehow, the jpg requests are still coming through, as can be seen by the video below. The xml fetches do stop and show as 'cancelled' however.

Can anyone help out? I've attached the video of it, and below it are my code samples.

Essentially, I've tried nearly everything I could already, even reading the docs and the issues section (too many times haha) before posting the issue here.

sample-conv1.mp4

sample code:

And my OpenSeadragon sample code:

viewerRef.current = OpenSeadragon({
      id: 'openseadragon-viewer',
      preserveViewport: true,
      maxImageCacheCount: 200,
      imageLoaderLimit: 1,
      maxTilesPerFrame: 3,
      crossOriginPolicy: 'Anonymous',
      minZoomLevel: 0.5,
      maxZoomLevel: 50,
      prefixUrl: 'https://openseadragon.github.io/openseadragon/images/',
      tileSources: initialLayer,
  });

  const abortSignal = () => {
      if (viewerRef.current) {
          abortControllerRef.current.abort();
          viewerRef.current.imageLoader.clear()
      }
      console.log("Download aborted");
  }

  setTimeout(() => {
      OpenSeadragon.ImageLoader({
          const newController = new AbortController();
          abortControllerRef.current = newController;
      }, 100);
  }

  const fetchNewTiles = async (layerNumber) => {
      const url = await fetch(`${process.env.MY_API_ENDPOINT}/${slider}z${layerNumber}_layer.xml`,
          {
              signal: signal,
              "Content-Type": "application/xml"
          })
      const response = url.url
      return response
  }

Let me know if you spot a mistake or anything with my code, or if additional follow-up is needed.

Thank you once again!

As a side note - In the future I can offer a little bit of help answering questions here if people are building the OSD in React if you'd like!

[pearcetm]

I'm not sure exactly what's happening with your AbortController (as far as I know this isn't part of the OpenSeadragon ImageLoader API currrently).

No matter when you cancel/clear the image loader, OSD will continue to try to load the next best tile it needs on every animation frame, until the whole image is loaded.

However, to step back a bit, I think you need to look into why your browser tab is bogging down. Are you keeping external references to the downloaded data so that memory can't be cleared, and your memory usage is growing unbounded?

[peetaaah]

Hey Pearce,

Thanks for the reply, and happy new year!

so what I've discovered is that yeah, the memory usage is basically growing unbounded.

In the video, you can see that I'm switching layers, which, in effect, a different xml layer, and some of these cytology slides can be pretty massive in terms of image sizes and number of tiles.

To consistently switch between layers eats a pretty big chunk of memory and space which causes the browser lag - hence my idea in which i tried to use AbortController to basically halt all requests, even for the jpg / image loader.

[pearcetm]

OSD itself should only keep as much data in memory as is required for the current view plus the cache. So if memory is growing unbounded, you should look into why. Keeping a reference to all the tiles/images somewhere in your code outside of OSD could be one reason, because then they'll never be released from memory even when they aren't being used by the viewer. From your video it isn't possible say more about where this might be happening, though.

[peetaaah]

Hey @pearcetm , thanks for the reply again.

I figured it out - because of the way the layers work, the ImageLoader essentially 'stacks' the xhr requests, which when you stack enough of them, causes a very massive spike in network requests and data transfer to the browser.

I'm basically now just trying to limit / set a max on the ImageLoader tileSources now, and have had some success!