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

Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html

@@ -29,7 +29,7 @@
                             <div class="scrollArea">
                                 <div class="thumbnailsWrapper">
                                     {{#each thumbnail in thumbnailsList}}
-                                        {{>thumbnailEntry thumbnail=thumbnail viewportIndex=viewportIndex}}
+                                        {{>thumbnailEntry (extend this thumbnail=thumbnail)}}
                                     {{/each}}
                                 </div>
                             </div>

Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepoint.html

@@ -2,7 +2,10 @@
     <div class="studyTimepointWrapper">
         <div class="studyTimepoint">
             {{#each study in studies}}
-                {{>studyTimepointStudy study=study active=(isActive study) viewportIndex=this.viewportIndex}}
+                {{>studyTimepointStudy (extend this
+                    study=study
+                    active=(isActive study)
+                )}}
             {{/each}}
         </div>
     </div>

Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.html

@@ -32,7 +32,7 @@
                         {{/if}}
                     {{else}}
                         <div class="p-t-2">
-                            {{>studyTimepoint studies=studies viewportIndex=this.viewportIndex currentStudy=this.currentStudy}}
+                            {{>studyTimepoint (extend this studies=studies)}}
                         </div>
                     {{/if}}
                 </div>

Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.html

@@ -20,7 +20,7 @@
             {{#if isSidebar}}
                 <div class="studyTimepointThumbnails">
                     {{#each thumbnail in (studyThumbnails this.study)}}
-                        {{>thumbnailEntry thumbnail=thumbnail viewportIndex=viewportIndex}}
+                        {{>thumbnailEntry (extend this thumbnail=thumbnail)}}
                     {{/each}}
                 </div>
             {{/if}}

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

@@ -1,35 +1,70 @@
-Template.imageThumbnail.onRendered(function() {
+Template.imageThumbnail.onRendered(() => {
-    var instance = this.data.stack.instances[0];
+    const instance = Template.instance();
-    var element = this.find('.imageThumbnailCanvas');
 
+    // Declare DOM and jQuery objects
+    const element = instance.find('.imageThumbnailCanvas');
+    const $element = $(element);
+    const $loading = $element.find('.imageThumbnailLoadingIndicator');
+    const $loadingError = $element.find('.imageThumbnailErrorLoadingIndicator');
+
+    instance.refreshImage = () => {
+        // Disable cornerstone for thumbnail element and remove its canvas
         cornerstone.disable(element);
-    $(element).find('canvas').remove();
+        $element.find('canvas').remove();
 
+        // Enable cornerstone for thumbnail element angain creating a new canvas
         cornerstone.enable(element);
 
-    var imageId = getImageId(instance);
+        // Get the image ID
+        const imageInstance = instance.data.thumbnail.stack.instances[0];
+        const imageId = getImageId(imageInstance);
 
-    var elem = $(element);
+        // Activate the loading state
-    elem.find('.imageThumbnailLoadingIndicator').css('display', 'block');
+        $loading.css('display', 'block');
 
-    var thumbnailIndex = $('.imageThumbnailCanvas').index(element);
+        // Add the current index on the global thumbnail loading controller
+        const thumbnailIndex = $('.imageThumbnailCanvas').index(element);
         ThumbnailLoading[thumbnailIndex] = imageId;
+        instance.data.thumbnailIndex = thumbnailIndex;
 
-    this.data.thumbnailIndex = thumbnailIndex;
+        // Define a handler for success on image load
-
+        const loadSuccess = image => {
-    cornerstone.loadAndCacheImage(imageId).then(function(image) {
             cornerstone.displayImage(element, image);
-
             delete ThumbnailLoading[thumbnailIndex];
-        elem.find('.imageThumbnailLoadingIndicator').css('display', 'none');
+            $loading.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() {
+    // Executed every time the image loading progress is changed
-        var percentComplete = Session.get('CornerstoneThumbnailLoadProgress' + this.thumbnailIndex);
+    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">