diff --git a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html index c5c04207d..f312d3ac4 100644 --- a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html +++ b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html @@ -7,13 +7,13 @@
- {{>studyTimepointBrowser timepointViewType=timepointViewType viewportIndex=viewportIndex}} + {{>studyTimepointBrowser timepointViewType=this.timepointViewType currentStudy=this.currentStudy viewportIndex=this.viewportIndex}}
- {{#let thumbnailsList=(thumbnails currentStudy)}} + {{#let thumbnailsList=(studyThumbnails currentStudy)}}
Series
{{#each thumbnail in thumbnailsList}} diff --git a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.js b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.js index bb8688f1f..627e73723 100644 --- a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.js +++ b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.js @@ -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; } }); diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.html b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.html index 2ab1bca1e..04b039a21 100644 --- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.html +++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.html @@ -22,6 +22,11 @@
{{/if}} {{/each}} + {{#if and this.currentStudy (not showAdditionalTimepoints)}} +
+ Show additional timepoints +
+ {{/if}}
diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.js b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.js index 8c234d127..314e8be05 100644 --- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.js +++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.js @@ -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(); diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.html b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.html index 6d513fb5e..d67d6d781 100644 --- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.html +++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.html @@ -15,7 +15,7 @@
- {{#each thumbnail in (thumbnails this.study)}} + {{#each thumbnail in (studyThumbnails this.study)}} {{>thumbnailEntry thumbnail=thumbnail viewportIndex=viewportIndex}} {{/each}}
diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.js b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.js index 225000523..4307d4758 100644 --- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.js +++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.js @@ -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; - } -}); diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl index 50abf83da..891ef8d06 100644 --- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl +++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl @@ -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 diff --git a/Packages/viewerbase/client/components/studyBrowser/studyBrowser/studyBrowser.html b/Packages/viewerbase/client/components/studyBrowser/studyBrowser/studyBrowser.html index 0488b1376..fd4b88b79 100644 --- a/Packages/viewerbase/client/components/studyBrowser/studyBrowser/studyBrowser.html +++ b/Packages/viewerbase/client/components/studyBrowser/studyBrowser/studyBrowser.html @@ -2,7 +2,7 @@
{{#each study in studies}} - {{#each thumbnail in thumbnails}} + {{#each thumbnail in (studyThumbnails study)}} {{>thumbnailEntry thumbnail=thumbnail}} {{/each}} {{/each}} diff --git a/Packages/viewerbase/client/components/studyBrowser/studyBrowser/studyBrowser.js b/Packages/viewerbase/client/components/studyBrowser/studyBrowser/studyBrowser.js index d1bf8b03a..fa0400b53 100644 --- a/Packages/viewerbase/client/components/studyBrowser/studyBrowser/studyBrowser.js +++ b/Packages/viewerbase/client/components/studyBrowser/studyBrowser/studyBrowser.js @@ -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; } -}); \ No newline at end of file +}); diff --git a/Packages/viewerbase/lib/helpers/logical.js b/Packages/viewerbase/lib/helpers/logical.js index a69fec541..08a95a60d 100644 --- a/Packages/viewerbase/lib/helpers/logical.js +++ b/Packages/viewerbase/lib/helpers/logical.js @@ -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; }); diff --git a/Packages/viewerbase/lib/helpers/studyThumbnails.js b/Packages/viewerbase/lib/helpers/studyThumbnails.js new file mode 100644 index 000000000..94aeb920f --- /dev/null +++ b/Packages/viewerbase/lib/helpers/studyThumbnails.js @@ -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; +}); diff --git a/Packages/viewerbase/package.js b/Packages/viewerbase/package.js index 6debaaf5c..ae713f623 100644 --- a/Packages/viewerbase/package.js +++ b/Packages/viewerbase/package.js @@ -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');