feat(streaming-image-volume): add caching for image load object

This commit adds functionality to cache image load object when it
has not already been loaded into the cache. This optimizes the
process of loading images.

refactor(stackToVolumeWithAnnotations): reverse order of image stack

This commit reverses the order of images in the image stack to match
the order in which they were added to the stack.

refactor(stackToVolumeWithAnnotations): use sagittal as default axis

This commit changes the default axis for the stack viewport to sagittal.

packages/streaming-image-volume-loader/src/BaseStreamingImageVolume.ts

@@ -896,9 +896,11 @@ export default class BaseStreamingImageVolume extends ImageVolume {
       );
 
       // 3. Caching the image
-      cache.putImageLoadObject(imageId, imageLoadObject).catch((err) => {
-        console.error(err);
-      });
+      if (!cache.getImageLoadObject(imageId)) {
+        cache.putImageLoadObject(imageId, imageLoadObject).catch((err) => {
+          console.error(err);
+        });
+      }
 
       // 4. If we know we won't be able to add another Image to the cache
       //    without breaching the limit, stop here.

packages/tools/examples/stackToVolumeWithAnnotations/_setViewports.ts

@@ -41,18 +41,14 @@ function _convertVolumeToStackViewport(
   const { uid: volumeId } = actorEntry;
   const volume = cache.getVolume(volumeId) as StreamingImageVolume;
 
-  const imageIds = volume.imageIds;
-
   // if this is the first time decaching do it
-  if (!cache.getImageLoadObject(imageIds[0])) {
-    volume.decache();
-  }
+  volume.decache();
 
-  const stack = volume.imageIds;
+  const stack = volume.imageIds.reverse();
 
   // Set the stack on the viewport
-  const currentIndex = Math.floor(stack.length / 2);
-  stackViewport.setStack(stack, currentIndex);
+  // const currentIndex = Math.floor(stack.length / 2);
+  stackViewport.setStack(stack, 0);
 
   // Render the image
   viewport.render();
@@ -82,7 +78,7 @@ async function _convertStackToVolumeViewport(
       type: ViewportType.ORTHOGRAPHIC,
       element,
       defaultOptions: {
-        orientation: Enums.OrientationAxis.AXIAL,
+        orientation: Enums.OrientationAxis.SAGITTAL,
         background: <Types.Point3>[0.2, 0.4, 0.2],
       },
     },

packages/tools/examples/stackToVolumeWithAnnotations/index.ts

@@ -221,8 +221,7 @@ async function run() {
   const stack = imageIds;
 
   // Set the stack on the viewport
-  const currentIndex = Math.floor(stack.length / 2);
-  viewport.setStack(stack, currentIndex);
+  viewport.setStack(stack, 0);
 
   // Render the image
   viewport.render();