TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

LT-357: Fixing error with DOM access on not loaded studies

Browse Source
This commit is contained in:
Bruno Alves de Faria 2016-11-17 06:59:41 -02:00
parent c9e607a21c
commit 5ee0513a5b
2 changed files with 92 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointStudy.html
View File

@ -1,6 +1,6 @@
<template name="studyTimepointStudy">
{{#let isSidebar=(isUndefined viewportIndex)}}
<div class="studyTimepointStudy {{#if isSidebar}}studySidebarTimepoint{{else}}studyQuickSwitchTimepoint{{/if}} {{#if this.active}}active{{/if}}" data-uid="{{this.study.studyInstanceUid}}">
<div class="studyTimepointStudy {{#if isSidebar}}studySidebarTimepoint{{else}}studyQuickSwitchTimepoint{{/if}} {{#if this.active}}active{{/if}} {{#if isLoading}}loading{{/if}}" data-uid="{{this.study.studyInstanceUid}}">
<div class="studyItem">
{{>loadingText}}
<div class="studyModality">

166
Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointStudy.js
View File

@ -5,8 +5,15 @@ import { _ } from 'meteor/underscore';
Template.studyTimepointStudy.onCreated(() => {
const instance = Template.instance();
instance.loading = new ReactiveVar(false);
// Set the current study as selected in the studies list
instance.select = (isQuickSwitch=false) => {
// Stop here if the view was already destroyed
if (instance.view.isDestroyed) {
return;
}
const $study = instance.$('.studyTimepointStudy');
const $timepoint = $study.closest('.studyTimepoint');
@ -18,40 +25,99 @@ Template.studyTimepointStudy.onCreated(() => {
$timepoint.trigger('selectionChanged', selectionChanged);
};
instance.initializeStudyWrapper = instance => {
// Stop here if the view was already destroyed
if (instance.view.isDestroyed) {
return;
}
// Stop here if it's a quick switch
if (instance.data.currentStudy) {
return;
}
const $study = instance.$('.studyTimepointStudy');
const $thumbnails = instance.$('.studyTimepointThumbnails');
$study.addClass('active');
// If element already has max-height property set, .height()
// will return that value, so remove it to recalculate
$thumbnails.css('max-height', '');
$thumbnails.css('max-height', $thumbnails.height());
$study.removeClass('active');
// Here we add, remove, and add the active class again because this way
// the max-height animation appears smooth to the user.
if (instance.data.active) {
Meteor.setTimeout(() => {
$study.addClass('active');
}, 1);
}
};
});
const initializeStudyWrapper = instance => {
// Stop here if it's a quick switch
if (instance.data.currentStudy) {
return;
}
const $study = instance.$('.studyTimepointStudy');
const $thumbnails = instance.$('.studyTimepointThumbnails');
$study.addClass('active');
// If element already has max-height property set, .height()
// will return that value, so remove it to recalculate
$thumbnails.css('max-height', '');
$thumbnails.css('max-height', $thumbnails.height());
$study.removeClass('active');
// Here we add, remove, and add the active class again because this way
// the max-height animation appears smooth to the user.
if (instance.data.active) {
Meteor.setTimeout(() => {
$study.addClass('active');
}, 1);
}
};
// Initialize the study wrapper max-height to enable CSS transition
Template.studyTimepointStudy.onRendered(() => {
const instance = Template.instance();
initializeStudyWrapper(instance);
instance.initializeStudyWrapper(instance);
});
Template.studyTimepointStudy.events({
// Recalculates the timepoint height to make CSS transition smoother
'transitionend .studyTimepointThumbnails'(event, instance) {
if (event.target === event.currentTarget) {
$(event.currentTarget).closest('.studyTimepoint').trigger('displayStateChanged');
}
},
// Transfers the active state to the current study
'click .studyQuickSwitchTimepoint .studyModality'(event, instance) {
instance.select(true);
},
// Changes the current study selection for the clicked study
'click .studyModality'(event, instance) {
const $study = $(event.currentTarget).closest('.studyTimepointStudy');
const studyData = instance.data.study;
const { studyInstanceUid, _id } = studyData;
const isQuickSwitch = !_.isUndefined(instance.data.viewportIndex);
// Check if the study already has series data,
// and if not, retrieve it.
if (!studyData.seriesList) {
const alreadyLoaded = ViewerStudies.findOne({ _id });
if (!alreadyLoaded) {
instance.loading.set(true);
getStudyMetadata(studyInstanceUid, study => {
study.displaySets = createStacks(study);
instance.data.study = study;
ViewerStudies.insert(study, () => {
// To make sure studies are rendered in the DOM
// use minimongo insert callback
instance.initializeStudyWrapper(instance);
instance.select(isQuickSwitch);
});
});
} else {
studyData.seriesList = alreadyLoaded.seriesList;
}
} else {
instance.select(isQuickSwitch);
}
}
});
Template.studyTimepointStudy.helpers({
isLoading() {
const instance = Template.instance();
const studyData = instance.data.study;
const alreadyLoaded = ViewerStudies.findOne({ _id: studyData._id });
return instance.loading.get() && !alreadyLoaded;
},
modalities() {
const instance = Template.instance();
let modalities = instance.data.study.modalities;
@ -83,53 +149,3 @@ Template.studyTimepointStudy.helpers({
}
}
});
Template.studyTimepointStudy.events({
// Recalculates the timepoint height to make CSS transition smoother
'transitionend .studyTimepointThumbnails'(event, instance) {
if (event.target === event.currentTarget) {
$(event.currentTarget).closest('.studyTimepoint').trigger('displayStateChanged');
}
},
// Transfers the active state to the current study
'click .studyQuickSwitchTimepoint .studyModality'(event, instance) {
instance.select(true);
},
// Changes the current study selection for the clicked study
'click .studyModality'(event, instance) {
const $study = $(event.currentTarget).closest('.studyTimepointStudy');
const studyData = instance.data.study;
const { studyInstanceUid, _id } = studyData;
const isQuickSwitch = !_.isUndefined(instance.data.viewportIndex);
// Check if the study already has series data,
// and if not, retrieve it.
if (!studyData.seriesList) {
const alreadyLoaded = ViewerStudies.findOne({
_id
});
if (!alreadyLoaded) {
$study.addClass('loading');
getStudyMetadata(studyInstanceUid, study => {
study.displaySets = createStacks(study);
instance.data.study = study;
ViewerStudies.insert(study, () => {
// To make sure studies are rendered in the DOM
// use minimongo insert callback
initializeStudyWrapper(instance);
instance.select(isQuickSwitch);
});
});
} else {
studyData.seriesList = alreadyLoaded.seriesList;
}
} else {
instance.select(isQuickSwitch);
}
}
});