diff --git a/Packages/lesiontracker/client/components/lesionTable/lesionTable.js b/Packages/lesiontracker/client/components/lesionTable/lesionTable.js index 5546e4d3c..1e8e1e210 100644 --- a/Packages/lesiontracker/client/components/lesionTable/lesionTable.js +++ b/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') { diff --git a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html index db0eda11d..6833bd978 100644 --- a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html +++ b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html @@ -29,7 +29,7 @@
{{#each thumbnail in thumbnailsList}} - {{>thumbnailEntry thumbnail=thumbnail viewportIndex=viewportIndex}} + {{>thumbnailEntry (extend this thumbnail=thumbnail)}} {{/each}}
diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepoint.html b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepoint.html index 05464505f..eea999efc 100644 --- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepoint.html +++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepoint.html @@ -2,7 +2,10 @@
{{#each study in studies}} - {{>studyTimepointStudy study=study active=(isActive study) viewportIndex=this.viewportIndex}} + {{>studyTimepointStudy (extend this + study=study + active=(isActive study) + )}} {{/each}}
diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.html b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.html index 0a404afbb..571e1b7c4 100644 --- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.html +++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.html @@ -32,7 +32,7 @@ {{/if}} {{else}}
- {{>studyTimepoint studies=studies viewportIndex=this.viewportIndex currentStudy=this.currentStudy}} + {{>studyTimepoint (extend this studies=studies)}}
{{/if}} diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.js b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.js index d8d1ee09b..af478acc7 100644 --- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.js +++ b/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 diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.html b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.html index 14394e01e..07804e483 100644 --- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.html +++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.html @@ -20,7 +20,7 @@ {{#if isSidebar}}
{{#each thumbnail in (studyThumbnails this.study)}} - {{>thumbnailEntry thumbnail=thumbnail viewportIndex=viewportIndex}} + {{>thumbnailEntry (extend this thumbnail=thumbnail)}} {{/each}}
{{/if}} diff --git a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js index 83cf32f87..32190286f 100644 --- a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js +++ b/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; diff --git a/Packages/lesiontracker/lib/api/timepoint.js b/Packages/lesiontracker/lib/api/timepoint.js index f60e43871..21b5beb1f 100644 --- a/Packages/lesiontracker/lib/api/timepoint.js +++ b/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); diff --git a/Packages/viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.js b/Packages/viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.js index 72de39669..36a3291cf 100644 --- a/Packages/viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.js +++ b/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 + '%'; } diff --git a/Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.html b/Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.html index c73c90ac9..0245fabe4 100644 --- a/Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.html +++ b/Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.html @@ -1,7 +1,7 @@