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

Packages/lesiontracker/client/components/lesionTable/lesionTable.js

@@ -4,7 +4,7 @@ Template.lesionTable.onCreated(() => {
     instance.data.lesionTableLayout = new ReactiveVar('comparison');
     instance.data.timepoints = new ReactiveVar([]);
 
-    // Run this computation everytime table layout changes
+    // Run this computation every time table layout changes
     instance.autorun(() => {
         // Get the current table layout
         const tableLayout = instance.data.lesionTableLayout.get();
@@ -25,7 +25,7 @@ Template.lesionTable.onRendered(() => {
     const instance = Template.instance();
 
     instance.autorun(() => {
-        // Run this computation everytime the lesion table layout is changed
+        // Run this computation every time the lesion table layout is changed
         instance.data.lesionTableLayout.dep.depend();
 
         if (instance.data.state.get('rightSidebar') !== 'lesions') {

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/studyTimepointBrowser.js

@@ -44,7 +44,7 @@ Template.studyTimepointBrowser.onRendered(() => {
     const instance = Template.instance();
 
     instance.autorun(() => {
-        // Runs this computation everytime the timepointViewType is changed
+        // Runs this computation every time the timepointViewType is changed
         const type = instance.timepointViewType.get();
 
         // Removes all active classes to collapse the timepoints and studies
@@ -57,7 +57,7 @@ Template.studyTimepointBrowser.onRendered(() => {
 
     let lastStudy;
     instance.autorun(() => {
-        // Runs this computation everytime the curenty study is changed
+        // Runs this computation every time the curenty study is changed
         const currentStudy = instance.data.currentStudy && instance.data.currentStudy.get();
 
         // Check if the study really changed and update the last study

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/lesiontracker/client/components/toolbarSection/toolbarSection.js

@@ -6,7 +6,7 @@ Template.toolbarSection.helpers({
             return;
         }
 
-        // Run this computation everytime the viewports are updated
+        // Run this computation every time the viewports are updated
         Session.get('LayoutManagerUpdated');
 
         return layoutManager.viewportData.length > 1;

Packages/lesiontracker/lib/api/timepoint.js

@@ -1,7 +1,7 @@
 class TimepointApi {
 
     constructor() {
-        // Run this computation everytime the timepoints are changed
+        // Run this computation every time the timepoints are changed
         Tracker.autorun(() => {
             // Get all the timepoints and store it
             this.timepoints = new Mongo.Collection(null);

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');
 
-    cornerstone.disable(element);
+    // Declare DOM and jQuery objects
-    $(element).find('canvas').remove();
+    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);
+        // Get the image ID
-    elem.find('.imageThumbnailLoadingIndicator').css('display', 'block');
+        const imageInstance = instance.data.thumbnail.stack.instances[0];
+        const imageId = getImageId(imageInstance);
 
-    var thumbnailIndex = $('.imageThumbnailCanvas').index(element);
+        // Activate the loading state
-    ThumbnailLoading[thumbnailIndex] = imageId;
+        $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) {
+        // Define a handler for success on image load
-        cornerstone.displayImage(element, image);
+        const loadSuccess = image => {
+            cornerstone.displayImage(element, image);
+            delete ThumbnailLoading[thumbnailIndex];
+            $loading.css('display', 'none');
+        };
 
-        delete ThumbnailLoading[thumbnailIndex];
+        // Define a handler for error on image load
-        elem.find('.imageThumbnailLoadingIndicator').css('display', 'none');
+        const loadError = error => $loadingError.css('display', 'block');
-    }, function(error) {
+
-        elem.find('.imageThumbnailErrorLoadingIndicator').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">

Packages/viewerbase/lib/helpers/isSeriesActive.js

@@ -2,7 +2,7 @@
  * Boolean helper to identify if a series instance is active in some viewport
  */
 Template.registerHelper('isSeriesActive', (seriesInstanceUid, viewportIndex) => {
-    // Run this computation everytime the viewports are updated
+    // Run this computation every time the viewports are updated
     Session.get('LayoutManagerUpdated');
 
     // Stop here if layoutManager is not defined yet