LT-251: Showing only the active timepoint and creating 'Show additional timepoints' button and behavior
This commit is contained in:
Bruno Alves de Faria
Erik Ziegler
parent
b6cb2051b8
commit
4b307598e9
@ -7,13 +7,13 @@
|
||||
<div class="studyBox"></div>
|
||||
<div class="switchHover studyHover clearfix">
|
||||
<div class="scrollArea">
|
||||
{{>studyTimepointBrowser timepointViewType=timepointViewType viewportIndex=viewportIndex}}
|
||||
{{>studyTimepointBrowser timepointViewType=this.timepointViewType currentStudy=this.currentStudy viewportIndex=this.viewportIndex}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="switchSection rm-x-1 {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}}">
|
||||
{{#let thumbnailsList=(thumbnails currentStudy)}}
|
||||
{{#let thumbnailsList=(studyThumbnails currentStudy)}}
|
||||
<div class="label">Series</div>
|
||||
<div class="seriesSwitch clearfix">
|
||||
{{#each thumbnail in thumbnailsList}}
|
||||
|
||||
@ -1,67 +1,44 @@
|
||||
Template.studySeriesQuickSwitch.onCreated(() => {
|
||||
const instance = Template.instance();
|
||||
|
||||
instance.data.timepointViewType = new ReactiveVar();
|
||||
instance.data.timepointViewType.set('key');
|
||||
// Defines the study being shown in the current viewport
|
||||
instance.data.currentStudy = new ReactiveVar();
|
||||
|
||||
// Shows only the key timepoints
|
||||
instance.data.timepointViewType = new ReactiveVar('key');
|
||||
|
||||
// Gets the viewport data for the given viewport index
|
||||
instance.getViewportData = viewportIndex => {
|
||||
const layoutManager = window.layoutManager;
|
||||
return layoutManager && layoutManager.viewportData && layoutManager.viewportData[viewportIndex];
|
||||
};
|
||||
|
||||
// Get the current study being shown in the current viewport
|
||||
instance.getCurrentStudy = () => {
|
||||
const viewportIndex = instance.data.viewportIndex;
|
||||
|
||||
// Runs this computation everytime the current viewport is changed
|
||||
Session.get('CornerstoneNewImage' + viewportIndex);
|
||||
|
||||
layoutManager = window.layoutManager;
|
||||
if (!layoutManager) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Gets the current viewport data
|
||||
const viewportData = instance.getViewportData(viewportIndex);
|
||||
if (!viewportData) {
|
||||
return;
|
||||
}
|
||||
|
||||
const study = ViewerStudies.findOne({
|
||||
// Fins the current study and return it
|
||||
return ViewerStudies.findOne({
|
||||
studyInstanceUid: viewportData.studyInstanceUid
|
||||
});
|
||||
|
||||
return study;
|
||||
};
|
||||
});
|
||||
|
||||
Template.studySeriesQuickSwitch.helpers({
|
||||
seriesOpen() {
|
||||
return Template.instance().seriesOpen.get();
|
||||
},
|
||||
|
||||
// Get the current study and change the reactive variable
|
||||
currentStudy() {
|
||||
return Template.instance().getCurrentStudy;
|
||||
},
|
||||
|
||||
currentTimepoint() {
|
||||
const instance = Template.instance();
|
||||
|
||||
const study = instance.getCurrentStudy();
|
||||
|
||||
const timepoint = Timepoint.findOne({
|
||||
timepointId: study.timepointId
|
||||
});
|
||||
console.warn('>>>>TIMEPOINT', timepoint);
|
||||
|
||||
return timepoint;
|
||||
},
|
||||
|
||||
thumbnails: function(study) {
|
||||
const stacks = createStacks(study);
|
||||
|
||||
const array = [];
|
||||
stacks.forEach(function(stack, index) {
|
||||
array.push({
|
||||
thumbnailIndex: index,
|
||||
stack: stack
|
||||
});
|
||||
});
|
||||
return array;
|
||||
const currentStudy = instance.getCurrentStudy();
|
||||
instance.data.currentStudy.set(currentStudy);
|
||||
return currentStudy;
|
||||
}
|
||||
});
|
||||
|
||||
@ -22,6 +22,11 @@
|
||||
<hr class="m-y-1">
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
{{#if and this.currentStudy (not showAdditionalTimepoints)}}
|
||||
<div class="studyModality additional">
|
||||
Show additional timepoints
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
Template.studyTimepointBrowser.onCreated(() => {
|
||||
const instance = Template.instance();
|
||||
|
||||
// Defines whether to show all key timepoints or only the current one
|
||||
instance.showAdditionalTimepoints = new ReactiveVar(true);
|
||||
|
||||
// Get the studies for a specific timepoint
|
||||
instance.getStudies = timepoint => {
|
||||
return timepoint.studyInstanceUids.map(studyInstanceUid => {
|
||||
@ -27,6 +30,7 @@ Template.studyTimepointBrowser.onCreated(() => {
|
||||
|
||||
Template.studyTimepointBrowser.onRendered(() => {
|
||||
const instance = Template.instance();
|
||||
|
||||
instance.autorun(() => {
|
||||
// Runs this computation everytime the timepointViewType is changed
|
||||
const type = instance.data.timepointViewType.get();
|
||||
@ -38,6 +42,18 @@ Template.studyTimepointBrowser.onRendered(() => {
|
||||
instance.$('.timepointEntry:first').addClass('active');
|
||||
}
|
||||
});
|
||||
|
||||
let lastStudy;
|
||||
instance.autorun(() => {
|
||||
// Runs this computation everytime 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
|
||||
if (currentStudy !== lastStudy) {
|
||||
instance.showAdditionalTimepoints.set(false);
|
||||
lastStudy = currentStudy;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Template.studyTimepointBrowser.events({
|
||||
@ -49,11 +65,32 @@ Template.studyTimepointBrowser.events({
|
||||
|
||||
// Toggle active class to group/ungroup timepoint studies
|
||||
$timepoint.toggleClass('active');
|
||||
},
|
||||
|
||||
'click .studyModality.additional'(event, instance) {
|
||||
// Show all key timepoints
|
||||
instance.showAdditionalTimepoints.set(true);
|
||||
}
|
||||
});
|
||||
|
||||
Template.studyTimepointBrowser.helpers({
|
||||
// Defines whether to show all key timepoints or only the current one
|
||||
showAdditionalTimepoints() {
|
||||
return Template.instance().showAdditionalTimepoints.get();
|
||||
},
|
||||
|
||||
// Get the timepoints to be listed
|
||||
timepoints() {
|
||||
const instance = Template.instance();
|
||||
// Get the current study
|
||||
const currentStudy = instance.data.currentStudy && instance.data.currentStudy.get();
|
||||
// Build the query
|
||||
const query = {};
|
||||
if (currentStudy && !instance.showAdditionalTimepoints.get()) {
|
||||
query['studyInstanceUids'] = {
|
||||
$in: [currentStudy.studyInstanceUid]
|
||||
};
|
||||
}
|
||||
// Sort timepoints based on timeline and type
|
||||
const sort = {
|
||||
sort: {
|
||||
@ -61,12 +98,14 @@ Template.studyTimepointBrowser.helpers({
|
||||
}
|
||||
};
|
||||
// Returns all timepoints with sorting
|
||||
return Timepoints.find({}, sort).fetch().reverse();
|
||||
return Timepoints.find(query, sort).fetch().reverse();
|
||||
},
|
||||
|
||||
// Get the studies for a specific timepoint
|
||||
studies(timepoint) {
|
||||
return Template.instance().getStudies(timepoint);
|
||||
},
|
||||
|
||||
// Decides if a timepoint should be shown or omitted
|
||||
shouldShowTimepoint(timepoint, index) {
|
||||
const instance = Template.instance();
|
||||
@ -79,6 +118,7 @@ Template.studyTimepointBrowser.helpers({
|
||||
// Show only the latest timepoints and baseline
|
||||
return index < 3 || timepoint.timepointType === 'baseline';
|
||||
},
|
||||
|
||||
// Build the timepoint title based on its date
|
||||
timepointTitle(timepoint, total, index) {
|
||||
const timepointName = getTimepointName(timepoint);
|
||||
@ -91,6 +131,7 @@ Template.studyTimepointBrowser.helpers({
|
||||
const parenthesis = states[index] || '';
|
||||
return `${timepointName} ${parenthesis}`;
|
||||
},
|
||||
|
||||
// Build the modalities summary for all timepoint's studies
|
||||
modalitiesSummary(timepoint) {
|
||||
const instance = Template.instance();
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="studyTimepointThumbnails">
|
||||
{{#each thumbnail in (thumbnails this.study)}}
|
||||
{{#each thumbnail in (studyThumbnails this.study)}}
|
||||
{{>thumbnailEntry thumbnail=thumbnail viewportIndex=viewportIndex}}
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
@ -56,18 +56,3 @@ Template.studyTimepointStudy.events({
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Template.studyTimepointStudy.helpers({
|
||||
thumbnails: function(study) {
|
||||
var stacks = createStacks(study);
|
||||
|
||||
var array = [];
|
||||
stacks.forEach(function(stack, index) {
|
||||
array.push({
|
||||
thumbnailIndex: index,
|
||||
stack: stack
|
||||
});
|
||||
});
|
||||
return array;
|
||||
}
|
||||
});
|
||||
|
||||
@ -53,66 +53,78 @@ $spacerY = 12px
|
||||
overflow: hidden
|
||||
transition($sidebarTransition)
|
||||
|
||||
.studyModality
|
||||
border: 1px solid $boxBorderColor
|
||||
border-radius: 12px
|
||||
cursor: pointer
|
||||
font-family: Roboto
|
||||
padding: $spacerY $spacerX ($spacerY - 1)
|
||||
position: relative
|
||||
transition($sidebarTransition)
|
||||
z-index: 1
|
||||
.studyModality
|
||||
border: 1px solid $boxBorderColor
|
||||
border-radius: 12px
|
||||
cursor: pointer
|
||||
font-family: Roboto
|
||||
padding: $spacerY $spacerX ($spacerY - 1)
|
||||
position: relative
|
||||
transition($sidebarTransition)
|
||||
z-index: 1
|
||||
|
||||
&:hover
|
||||
background-color: $boxHoverBackgroundColor
|
||||
border-color: $boxHoverBorderColor
|
||||
&:hover
|
||||
background-color: $boxHoverBackgroundColor
|
||||
border-color: $boxHoverBorderColor
|
||||
|
||||
.studyModalityText
|
||||
font-size: 13px
|
||||
left: ($spacerX * 3) + $boxWidth + ($nestingMargin * 3)
|
||||
line-height: 14px
|
||||
position: absolute
|
||||
right: $spacerX
|
||||
top: $spacerY
|
||||
.studyModalityDate
|
||||
margin-top: 8px
|
||||
color: $textSecondaryColor
|
||||
.studyModalityDescription
|
||||
margin-top: 8px
|
||||
color: $textPrimaryColor
|
||||
|
||||
.studyModalityBox
|
||||
&.additional
|
||||
color: $textSecondaryColor
|
||||
font-size: 22px
|
||||
line-height: $boxWidth
|
||||
margin-left: $nestingMargin * 2
|
||||
margin-top: $nestingMargin * 2
|
||||
position: relative
|
||||
text-align: center
|
||||
text-transform: uppercase
|
||||
|
||||
&
|
||||
&:before
|
||||
&:after
|
||||
background-color: $boxBackgroundColor
|
||||
border: $borderThickness solid $primaryBackgroundColor
|
||||
border-radius: $boxBorderRadius
|
||||
height: $boxWidth + ($borderThickness * 2)
|
||||
transition($sidebarTransition)
|
||||
width: $boxWidth + ($borderThickness * 2)
|
||||
&.additional
|
||||
color: $textPrimaryColor
|
||||
font-size: 16px
|
||||
font-weight: normal
|
||||
height: 91px
|
||||
line-height: 91px
|
||||
padding: 0
|
||||
text-align: center
|
||||
|
||||
&:before
|
||||
&:after
|
||||
display: block
|
||||
content: ''
|
||||
position: absolute
|
||||
.studyModalityText
|
||||
font-size: 13px
|
||||
left: ($spacerX * 3) + $boxWidth + ($nestingMargin * 3)
|
||||
line-height: 14px
|
||||
position: absolute
|
||||
right: $spacerX
|
||||
top: $spacerY
|
||||
.studyModalityDate
|
||||
margin-top: 8px
|
||||
color: $textSecondaryColor
|
||||
.studyModalityDescription
|
||||
margin-top: 8px
|
||||
color: $textPrimaryColor
|
||||
|
||||
&:before
|
||||
top: -($borderThickness + $nestingMargin)
|
||||
left: -($borderThickness + $nestingMargin)
|
||||
z-index: -1
|
||||
.studyModalityBox
|
||||
color: $textSecondaryColor
|
||||
font-size: 22px
|
||||
line-height: $boxWidth
|
||||
margin-left: $nestingMargin * 2
|
||||
margin-top: $nestingMargin * 2
|
||||
position: relative
|
||||
text-align: center
|
||||
text-transform: uppercase
|
||||
|
||||
&:after
|
||||
top: -($borderThickness + ($nestingMargin * 2))
|
||||
left: -($borderThickness + ($nestingMargin * 2))
|
||||
z-index: -2
|
||||
&
|
||||
&:before
|
||||
&:after
|
||||
background-color: $boxBackgroundColor
|
||||
border: $borderThickness solid $primaryBackgroundColor
|
||||
border-radius: $boxBorderRadius
|
||||
height: $boxWidth + ($borderThickness * 2)
|
||||
transition($sidebarTransition)
|
||||
width: $boxWidth + ($borderThickness * 2)
|
||||
|
||||
&:before
|
||||
&:after
|
||||
display: block
|
||||
content: ''
|
||||
position: absolute
|
||||
|
||||
&:before
|
||||
top: -($borderThickness + $nestingMargin)
|
||||
left: -($borderThickness + $nestingMargin)
|
||||
z-index: -1
|
||||
|
||||
&:after
|
||||
top: -($borderThickness + ($nestingMargin * 2))
|
||||
left: -($borderThickness + ($nestingMargin * 2))
|
||||
z-index: -2
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="studyBrowser">
|
||||
<div class="scrollableStudyThumbnails">
|
||||
{{#each study in studies}}
|
||||
{{#each thumbnail in thumbnails}}
|
||||
{{#each thumbnail in (studyThumbnails study)}}
|
||||
{{>thumbnailEntry thumbnail=thumbnail}}
|
||||
{{/each}}
|
||||
{{/each}}
|
||||
|
||||
@ -1,18 +1,7 @@
|
||||
Template.studyBrowser.helpers({
|
||||
studies : function() {
|
||||
return ViewerStudies.find({selected: true});
|
||||
},
|
||||
thumbnails: function() {
|
||||
var study = this;
|
||||
var stacks = createStacks(study);
|
||||
|
||||
var array = [];
|
||||
stacks.forEach(function(stack, index) {
|
||||
array.push({
|
||||
thumbnailIndex: index,
|
||||
stack: stack
|
||||
});
|
||||
studies() {
|
||||
return ViewerStudies.find({
|
||||
selected: true
|
||||
});
|
||||
return array;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,55 +1,64 @@
|
||||
Template.registerHelper('choose', function() {
|
||||
let result;
|
||||
_.each(_.initial(arguments, 1), function(value) {
|
||||
return value && (result = value);
|
||||
});
|
||||
return result;
|
||||
});
|
||||
/**
|
||||
* Global Blaze UI helpers to work with logical operations
|
||||
*/
|
||||
|
||||
Template.registerHelper('bool', function(value) {
|
||||
// Convert any value into a boolean value
|
||||
Template.registerHelper('bool', value => {
|
||||
return !!value;
|
||||
});
|
||||
|
||||
Template.registerHelper('eq', function(a, b) {
|
||||
// Check if two values are identical
|
||||
Template.registerHelper('eq', (a, b) => {
|
||||
return a === b;
|
||||
});
|
||||
|
||||
Template.registerHelper('ne', function(a, b) {
|
||||
// Check if two values are different
|
||||
Template.registerHelper('ne', (a, b) => {
|
||||
return a === b;
|
||||
});
|
||||
|
||||
Template.registerHelper('gt', function(a, b) {
|
||||
// Check if the first value is greater than the second one
|
||||
Template.registerHelper('gt', (a, b) => {
|
||||
return a > b;
|
||||
});
|
||||
|
||||
Template.registerHelper('lt', function(a, b) {
|
||||
// Check if the first value is lesser than the second one
|
||||
Template.registerHelper('lt', (a, b) => {
|
||||
return a < b;
|
||||
});
|
||||
|
||||
Template.registerHelper('gte', function(a, b) {
|
||||
// Check if the first value is greater than or equals the second one
|
||||
Template.registerHelper('gte', (a, b) => {
|
||||
return a >= b;
|
||||
});
|
||||
|
||||
Template.registerHelper('lte', function(a, b) {
|
||||
// Check if the first value is lesser than or equals the second one
|
||||
Template.registerHelper('lte', (a, b) => {
|
||||
return a <= b;
|
||||
});
|
||||
|
||||
Template.registerHelper('not', function(value) {
|
||||
// Get the boolean negation for the given value
|
||||
Template.registerHelper('not', value => {
|
||||
return !value;
|
||||
});
|
||||
|
||||
Template.registerHelper('and', function() {
|
||||
// Check if all the given values are true
|
||||
Template.registerHelper('and', (...values) => {
|
||||
let result = true;
|
||||
_.each(_.initial(arguments, 1), function(value) {
|
||||
return value || (result = false);
|
||||
});
|
||||
_.each(_.initial(values, 1), value => value || (result = false));
|
||||
return result;
|
||||
});
|
||||
|
||||
Template.registerHelper('or', function() {
|
||||
// Check if one of the given values is true
|
||||
Template.registerHelper('or', (...values) => {
|
||||
let result = false;
|
||||
_.each(_.initial(arguments, 1), function(value) {
|
||||
return value && (result = true);
|
||||
});
|
||||
_.each(_.initial(values, 1), value => value && (result = true));
|
||||
return result;
|
||||
});
|
||||
|
||||
// Choose the first truthy value in the given values
|
||||
Template.registerHelper('choose', (...values) => {
|
||||
let result;
|
||||
_.each(_.initial(values, 1), value => value && (result = value));
|
||||
return result;
|
||||
});
|
||||
|
||||
20
Packages/viewerbase/lib/helpers/studyThumbnails.js
Normal file
20
Packages/viewerbase/lib/helpers/studyThumbnails.js
Normal file
@ -0,0 +1,20 @@
|
||||
/**
|
||||
* A global Blaze UI helper to get the thumbnails for the given study
|
||||
*/
|
||||
Template.registerHelper('studyThumbnails', study => {
|
||||
// Creates the series stacks
|
||||
const stacks = createStacks(study);
|
||||
|
||||
// Defines the resulting thumbnails list
|
||||
const thumbnails = [];
|
||||
|
||||
// Iterate over the stacks and add one by one with its index
|
||||
_.each(stacks, (stack, index) => {
|
||||
thumbnails.push({
|
||||
thumbnailIndex: index,
|
||||
stack: stack
|
||||
});
|
||||
});
|
||||
|
||||
return thumbnails;
|
||||
});
|
||||
@ -189,6 +189,7 @@ Package.onUse(function(api) {
|
||||
'lib/helpers/objectEach.js',
|
||||
'lib/helpers/ifTypeIs.js',
|
||||
'lib/helpers/prettyPrintStringify.js',
|
||||
'lib/helpers/studyThumbnails.js',
|
||||
'lib/helpers/formatPN.js'
|
||||
], 'client');
|
||||
api.export('formatPN', 'client');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user