From a3e851ea88396ad8d41dc146c5f44b9f22460901 Mon Sep 17 00:00:00 2001
From: "James A. Petts" <jamesapetts@gmail.com>
Date: Thu, 24 Sep 2020 13:48:19 +0100
Subject: [PATCH] =?UTF-8?q?perf:=20=E2=9A=A1=EF=B8=8F=20On=20scroll,=20res?=
 =?UTF-8?q?et=20the=20prefetch=20queue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On scroll with the scrollbar, reset the prefetch queue so that we don't
wait for images distant from the target. Build a new interleaved above
and below queue and fetch from there.
---
 .../CornerstoneViewport.js                    | 79 +++++++++++++++++++
 1 file changed, 79 insertions(+)

diff --git a/src/CornerstoneViewport/CornerstoneViewport.js b/src/CornerstoneViewport/CornerstoneViewport.js
index d6c8897..0027527 100644
--- a/src/CornerstoneViewport/CornerstoneViewport.js
+++ b/src/CornerstoneViewport/CornerstoneViewport.js
@@ -714,6 +714,85 @@ class CornerstoneViewport extends Component {
     this.setViewportActive();
 
     scrollToIndex(this.element, value);
+
+    this.resetPrefetching(value);
+  };
+
+  resetPrefetching = imageIdIndex => {
+    cornerstoneTools.stackPrefetch.setConfiguration({
+      maxImagesToPrefetch: Infinity,
+      preserveExistingPool: false,
+      maxSimultaneousRequests: 6,
+    });
+
+    const { imageIds } = this.props;
+
+    const minImageIdIndex = 0;
+    const maxImageIdIndex = imageIds.length - 1;
+
+    let lowerImageIdIndex = imageIdIndex;
+    let upperImageIdIndex = imageIdIndex;
+
+    // Build up an array of images to prefetch, starting with the current image.
+    let imageIdsToPrefetch = [imageIds[imageIdIndex]];
+
+    // 0: From current stack position down to minimum.
+    // 1: From current stack position up to maximum.
+
+    const prefetchQueuedFilled = [false, false];
+
+    // Check if on edges and some criteria is already fulfilled
+
+    if (imageIdIndex === minImageIdIndex) {
+      prefetchQueuedFilled[0] = true;
+    } else if (imageIdIndex === maxImageIdIndex) {
+      prefetchQueuedFilled[1] = true;
+    }
+
+    while (
+      prefetchQueuedFilled[0] === false ||
+      prefetchQueuedFilled[1] === false
+    ) {
+      if (prefetchQueuedFilled[0] === false) {
+        // Add imageId bellow
+        lowerImageIdIndex--;
+        imageIdsToPrefetch.push(imageIds[lowerImageIdIndex]);
+
+        if (lowerImageIdIndex === minImageIdIndex) {
+          prefetchQueuedFilled[0] = true;
+        }
+      }
+
+      if (prefetchQueuedFilled[1] === false) {
+        // Add imageId above
+        upperImageIdIndex++;
+        imageIdsToPrefetch.push(imageIds[upperImageIdIndex]);
+
+        if (upperImageIdIndex === maxImageIdIndex) {
+          prefetchQueuedFilled[1] = true;
+        }
+      }
+    }
+
+    const requestPoolManager = cornerstoneTools.requestPoolManager;
+    const requestType = 'prefetch';
+    const preventCache = false;
+    const noop = () => {};
+
+    requestPoolManager.clearRequestStack('prefetch');
+
+    imageIdsToPrefetch.forEach(imageId => {
+      requestPoolManager.addRequest(
+        {},
+        imageId,
+        requestType,
+        preventCache,
+        noop,
+        noop
+      );
+    });
+
+    requestPoolManager.startGrabbing();
   };
 
   setViewportActive = () => {