LT-251: Fixing quick switch thumbnails when study is changed

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

@@ -1,35 +1,70 @@
-Template.imageThumbnail.onRendered(function() {
-    var instance = this.data.stack.instances[0];
-    var element = this.find('.imageThumbnailCanvas');
+Template.imageThumbnail.onRendered(() => {
+    const instance = Template.instance();
 
-    cornerstone.disable(element);
-    $(element).find('canvas').remove();
+    // Declare DOM and jQuery objects
+    const element = instance.find('.imageThumbnailCanvas');
+    const $element = $(element);
+    const $loading = $element.find('.imageThumbnailLoadingIndicator');
+    const $loadingError = $element.find('.imageThumbnailErrorLoadingIndicator');
 
-    cornerstone.enable(element);
+    instance.refreshImage = () => {
+        // Disable cornerstone for thumbnail element and remove its canvas
+        cornerstone.disable(element);
+        $element.find('canvas').remove();
 
-    var imageId = getImageId(instance);
+        // Enable cornerstone for thumbnail element angain creating a new canvas
+        cornerstone.enable(element);
 
-    var elem = $(element);
-    elem.find('.imageThumbnailLoadingIndicator').css('display', 'block');
+        // Get the image ID
+        const imageInstance = instance.data.thumbnail.stack.instances[0];
+        const imageId = getImageId(imageInstance);
 
-    var thumbnailIndex = $('.imageThumbnailCanvas').index(element);
-    ThumbnailLoading[thumbnailIndex] = imageId;
+        // Activate the loading state
+        $loading.css('display', 'block');
 
-    this.data.thumbnailIndex = thumbnailIndex;
+        // Add the current index on the global thumbnail loading controller
+        const thumbnailIndex = $('.imageThumbnailCanvas').index(element);
+        ThumbnailLoading[thumbnailIndex] = imageId;
+        instance.data.thumbnailIndex = thumbnailIndex;
 
-    cornerstone.loadAndCacheImage(imageId).then(function(image) {
-        cornerstone.displayImage(element, image);
+        // Define a handler for success on image load
+        const loadSuccess = image => {
+            cornerstone.displayImage(element, image);
+            delete ThumbnailLoading[thumbnailIndex];
+            $loading.css('display', 'none');
+        };
 
-        delete ThumbnailLoading[thumbnailIndex];
-        elem.find('.imageThumbnailLoadingIndicator').css('display', 'none');
-    }, function(error) {
-        elem.find('.imageThumbnailErrorLoadingIndicator').css('display', 'block');
+        // Define a handler for error on image load
+        const loadError = error => $loadingError.css('display', 'block');
+
+        // Call cornerstone image loader with the defined handlers
+        cornerstone.loadAndCacheImage(imageId).then(loadSuccess, loadError);
+    };
+
+    // Run this computation every time the current study is changed
+    instance.autorun(() => {
+        // Check if there is a reactive var set for current study
+        if (instance.data.currentStudy) {
+            // Register a dependency from this computation on current study
+            instance.data.currentStudy.dep.depend();
+        }
+
+        // Wait for the new data and reresh the image thumbnail
+        Meteor.setTimeout(() => {
+            instance.refreshImage();
+        });
     });
 });
 
 Template.imageThumbnail.helpers({
-    percentComplete: function() {
-        var percentComplete = Session.get('CornerstoneThumbnailLoadProgress' + this.thumbnailIndex);
+    // Executed every time the image loading progress is changed
+    percentComplete() {
+        const instance = Template.instance();
+
+        // Register a dependency from this computation on Session key
+        const percentComplete = Session.get('CornerstoneThumbnailLoadProgress' + instance.data.thumbnailIndex);
+
+        // Return the complete percent amount of the image loading
         if (percentComplete && percentComplete !== 100) {
             return percentComplete + '%';
         }

Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.html

@@ -1,7 +1,7 @@
 <template name="thumbnailEntry">
     <div class="thumbnailEntry m-t-1 m-b-2 {{draggableClass}} {{#if isSeriesActive this.thumbnail.stack.seriesInstanceUid viewportIndex}}active{{/if}}">
         <div class="p-x-1">
-            {{>imageThumbnail this.thumbnail}}
+            {{>imageThumbnail (extend this)}}
         </div>
         <div class="seriesDetails noselect m-a-1">
             <div class="seriesDescription">