LT-275: Fixing issue with quick switch thumbnails

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

@@ -1,3 +1,18 @@
+import { Template } from 'meteor/templating';
+import { Tracker } from 'meteor/tracker';
+import { Session } from 'meteor/session';
+
+Template.imageThumbnail.onCreated(() => {
+    const instance = Template.instance();
+
+    // Get the image ID for current thumbnail
+    instance.getThumbnailImageId = () => {
+        const stack = instance.data.thumbnail.stack;
+        const imageInstance = stack.images[0];
+        return getImageId(imageInstance);
+    };
+});
+
 Template.imageThumbnail.onRendered(() => {
     const instance = Template.instance();
 
@@ -12,25 +27,15 @@ Template.imageThumbnail.onRendered(() => {
         // Disable cornerstone for thumbnail element and remove its canvas
         cornerstone.disable(element);
 
-        // Get the image ID
-        const stack = instance.data.thumbnail.stack;
-        const thumbnailIndex = instance.data.thumbnail.thumbnailIndex;
-        const imageInstance = stack.images[0];
-        const imageId = getImageId(imageInstance);
-
         // Activate the loading state
         $loading.css('display', 'block');
 
-        // Add the current index on the global thumbnail loading controller
-        ThumbnailLoading[thumbnailIndex] = imageId;
-
         // Define a handler for success on image load
         const loadSuccess = image => {
             // Enable cornerstone for thumbnail element again creating a new canvas
-            cornerstone.enable(element);
+            cornerstone.enable(element););
 
             cornerstone.displayImage(element, image);
-            delete ThumbnailLoading[thumbnailIndex];
             $loading.css('display', 'none');
         };
 
@@ -40,6 +45,9 @@ Template.imageThumbnail.onRendered(() => {
             $loadingError.css('display', 'block');
         };
 
+        // Get the image ID
+        const imageId = instance.getThumbnailImageId();
+
         // Call cornerstone image loader with the defined handlers
         cornerstone.loadAndCacheImage(imageId).then(loadSuccess, loadError);
     };
@@ -53,9 +61,7 @@ Template.imageThumbnail.onRendered(() => {
         }
 
         // Wait for the new data and refresh the image thumbnail
-        Tracker.afterFlush(() => {
+        Tracker.afterFlush(() => instance.refreshImage());
-            instance.refreshImage();
-        });
     });
 });
 
@@ -74,10 +80,12 @@ Template.imageThumbnail.helpers({
     // Executed every time the image loading progress is changed
     percentComplete() {
         const instance = Template.instance();
-        const thumbnailIndex = instance.data.thumbnail.thumbnailIndex;
+
+        // Get the encoded image ID for thumbnail
+        const encodedImageId = OHIF.string.encodeId(instance.getThumbnailImageId());
 
         // Register a dependency from this computation on Session key
-        const percentComplete = Session.get('CornerstoneThumbnailLoadProgress' + thumbnailIndex);
+        const percentComplete = Session.get('CornerstoneThumbnailLoadProgress' + encodedImageId);
 
         // Return the complete percent amount of the image loading
         if (percentComplete && percentComplete !== 100) {

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

@@ -421,16 +421,13 @@ function setDisplaySet(data, displaySetInstanceUid, templateData) {
  */
 function getKeysByValue(object, value) {
     // http://stackoverflow.com/questions/9907419/javascript-object-get-key-by-value
-    return Object.keys(object).filter(function(key) {
+    return Object.keys(object).filter(key => object[key] === value);
-        return object[key] === value;
-    });
 }
 
 Meteor.startup(function() {
     // On Meteor startup, define the global objects used to store loading imageIds
     // by viewport / thumbnail element
     ViewportLoading = {};
-    ThumbnailLoading = {};
 
     // Whenever the CornerstoneImageLoadProgress is fired, identify which viewports
     // the "in-progress" image is to be displayed in. Then pass the percent complete
@@ -441,13 +438,11 @@ Meteor.startup(function() {
             Session.set('CornerstoneLoadProgress' + viewportIndex, eventData.percentComplete);
         });
 
-        thumbnailIndices = getKeysByValue(ThumbnailLoading, eventData.imageId);
+        const encodedId = OHIF.string.encodeId(eventData.imageId);
-        thumbnailIndices.forEach(function(thumbnailIndex) {
+        Session.set('CornerstoneThumbnailLoadProgress' + encodedId, eventData.percentComplete);
-            Session.set('CornerstoneThumbnailLoadProgress' + thumbnailIndex, eventData.percentComplete);
-        });
     });
 
-    var config = {
+    const config = {
         magnifySize: 300,
         magnificationLevel: 3
     };