LT-251: Fixing quick switch thumbnails when study is changed
This commit is contained in:
Bruno Alves de Faria
Erik Ziegler
parent
a4354efa15
commit
529ef28042
@ -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') {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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}}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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 + '%';
|
||||
}
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user