OHIF-25: Multi-frame images should be loaded one frame at a time

Packages/ohif-viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.js

@@ -13,9 +13,16 @@ Template.imageThumbnail.onCreated(() => {
     // Get the image ID for current thumbnail
     instance.getThumbnailImageId = () => {
         const stack = instance.data.thumbnail.stack;
-        const lastIndex = (stack.images.length || 1) - 1;
-        const imageIndex = Math.floor(lastIndex / 2) !== 0 ? 0 : 0;
-        const imageInstance = stack.images[imageIndex];
+        const lastIndex = (stack.numImageFrames || stack.images.length || 1) - 1;
+        let imageIndex = Math.floor(lastIndex / 2);
+        let imageInstance;
+
+        if(stack.isMultiFrame) {
+            imageInstance = stack.images[0];
+        } else {
+            imageInstance = stack.images[imageIndex];
+            imageIndex = 0;
+        }
 
         return imageInstance.getImageId();
     };

Packages/ohif-viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js

@@ -105,7 +105,8 @@ const loadDisplaySetIntoViewport = (data, templateData) => {
 
     // Enable Cornerstone for the viewport element
     const options = {
-        renderer: 'webgl'
+        // TODO: It's not working with WADO-RS requests (see getWADORSImageId)
+        // renderer: 'webgl'
     };
 
     // NOTE: This uses the experimental WebGL renderer for Cornerstone!

Packages/ohif-viewerbase/client/lib/getImageId.js

@@ -25,6 +25,6 @@ export function getImageId(instance, frame) {
         return imageId;
     } else {
         // TODO= Check multiframe image support with WADO-RS
-        return getWADORSImageId(instance); // WADO-RS Retrieve Frame
+        return getWADORSImageId(instance, frame); // WADO-RS Retrieve Frame
     }
 }

Packages/ohif-viewerbase/client/lib/getWADORSImageId.js

@@ -42,14 +42,26 @@ class ImageMetadataBuilder {
     }
 }
 
+formatWADOREImageUrl = function(wadorsuri, frame) {
+    // We need to sum 1 because WADO-RS frame number is 1-based
+    frame = (frame || 0) + 1;
+
+    // Replaces /frame/1 by /frame/{frame}
+    // TODO: Maybe should be better to export the WADOProxy to be able to use it on client
+    //       Example: WADOProxy.convertURL(baseWadoRsUri + '/frame/' + frame)
+    wadorsuri = wadorsuri.replace(/(%2Fframes%2F)(\d+)/, `$1${frame}`);
+
+    return Meteor.absoluteUrl(wadorsuri);
+}
+
 /**
  * Obtain an imageId for Cornerstone based on the WADO-RS scheme
  *
  * @param {object} instanceMetada metadata object (InstanceMetadata)
  * @returns {string} The imageId to be used by Cornerstone
  */
-export function getWADORSImageId(instance) {
-    const uri = Meteor.absoluteUrl(instance.wadorsuri);
+export function getWADORSImageId(instance, frame) {
+    const uri = formatWADOREImageUrl(instance.wadorsuri, frame);
     const imageId = `wadors:${uri}`;
 
     const imageMetadata = new ImageMetadataBuilder()