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

Creating ohif-studies package to deal with studies browsing

Browse Source
This commit is contained in:
Bruno Alves de Faria committed 2017-10-25 22:09:08 -02:00
1 parent 956e6da0b3
commit 0b51a53976
28 files changed
+323 -83
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepoint.js
+1 -1
View File
@@ -53,7 +53,7 @@ Template.studyTimepoint.events({
}
// Removes selected state from all studies but the triggered study
$studiesTarget.find('.studyTimepointStudy').not($selection).removeClass('active');
$studiesTarget.find('.study-browser-item').not($selection).removeClass('active');
if (changed.isQuickSwitch) {
// Reset active studies map to allow only one active study
Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointBrowser.html
+1 -1
View File
@@ -26,7 +26,7 @@
<hr>
{{/each}}
{{#if and this.currentStudy (not showAdditionalTimepoints) hasAdditionalTimepoints}}
<div class="studyModality additional">
<div class="study-item-box additional">
Show additional timepoints
</div>
{{/if}}
Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointBrowser.js
+20 -14
View File
@@ -28,22 +28,18 @@ Template.studyTimepointBrowser.onCreated(() => {
}
return timepoint.studyInstanceUids.map(studyInstanceUid => {
const query = {
patientId: timepoint.patientId,
studyInstanceUid: studyInstanceUid
};
const query = { studyInstanceUid };
const loadedStudy = OHIF.viewer.Studies.findBy(query);
if (loadedStudy) {
return loadedStudy;
}
if (loadedStudy) return loadedStudy;
const notYetLoaded = OHIF.studylist.collections.Studies.findOne(query);
if (!notYetLoaded) {
throw new OHIFError(`No study data available for Study: ${studyInstanceUid}`);
}
if (notYetLoaded) return notYetLoaded;
return notYetLoaded;
// const studyData = _.findWhere(timepoint.studiesData, query);
// if (studyData) return studyData;
throw new OHIFError(`No study data available for Study: ${studyInstanceUid}`);
});
};
});
@@ -57,7 +53,7 @@ Template.studyTimepointBrowser.onRendered(() => {
const type = instance.timepointViewType.get();
// Removes all active classes to collapse the timepoints and studies
instance.$('.timepointEntry, .studyTimepointStudy').removeClass('active');
instance.$('.timepointEntry, .study-browser-item').removeClass('active');
if (type === 'key' && !instance.data.currentStudy) {
// Show only first timepoint expanded for key timepoints
instance.$('.timepointEntry:first').addClass('active');
@@ -71,7 +67,7 @@ Template.studyTimepointBrowser.onRendered(() => {
// Wait for rerendering and set the timepoint as active
instance.refreshActiveStudies = () => Tracker.afterFlush(() => {
_.each(activeStudiesUids, studyInstanceUid => {
instance.$(`.studyTimepointStudy[data-uid='${studyInstanceUid}']`).addClass('active');
instance.$(`.study-browser-item[data-uid='${studyInstanceUid}']`).addClass('active');
});
// Show only first timepoint expanded for key timepoints
instance.$('.timepointEntry:first').addClass('active');
@@ -108,7 +104,7 @@ Template.studyTimepointBrowser.events({
$timepoint.toggleClass('active');
},
'click .studyModality.additional'(event, instance) {
'click .study-item-box.additional'(event, instance) {
// Show all key timepoints
instance.showAdditionalTimepoints.set(true);
}
@@ -199,12 +195,22 @@ Template.studyTimepointBrowser.helpers({
const studies = instance.getStudies(timepoint);
const includedUids = new Set();
const modalities = {};
studies.forEach(study => {
const modality = study.modalities || 'UN';
modalities[modality] = modalities[modality] + 1 || 1;
includedUids.add(study.studyInstanceUid);
});
if (_.isArray(timepoint.studiesData)) {
timepoint.studiesData.forEach(({ modality, studyInstanceUid }) => {
if (includedUids.has(studyInstanceUid)) return;
modalities[modality] = modalities[modality] + 1 || 1;
includedUids.add(studyInstanceUid);
});
}
const result = [];
_.each(modalities, (count, modality) => {
result.push(`${count} ${modality}`);
Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointStudy.html
+9 -13
View File
@@ -1,23 +1,19 @@
<template name="studyTimepointStudy">
{{#let isSidebar=(isUndefined viewportIndex)}}
<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">
<div class="study-browser-item {{#if isSidebar}}studySidebarTimepoint{{else}}studyQuickSwitchTimepoint{{/if}} {{#if this.active}}active{{/if}} {{#if isLoading}}loading{{/if}}" data-uid="{{this.study.studyInstanceUid}}">
<div class="study-item">
{{#if isLoading}}
{{>loadingText}}
{{/if}}
<div class="studyModality">
<div class="studyModalityBox">
<div class="studyModalityText" style="{{modalityStyle}}">
{{#if instance.modalities}}
{{modalities}}
{{else}}
UN
{{/if}}
<div class="study-item-box">
<div class="study-modality">
<div class="study-modality-text" style="{{modalityStyle}}">
{{choose instance.modalities 'UN'}}
</div>
</div>
<div class="studyText">
<div class="studyDate">{{formatDA instance.studyDate 'D-MMM-YYYY'}}</div>
<div class="studyDescription">{{instance.studyDescription}}</div>
<div class="study-text">
<div class="study-date">{{formatDA instance.studyDate 'D-MMM-YYYY'}}</div>
<div class="study-description">{{instance.studyDescription}}</div>
</div>
</div>
</div>
Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointStudy.js
+10 -10
View File
@@ -21,7 +21,7 @@ Template.studyTimepointStudy.onCreated(() => {
// Get the current study element
instance.getStudyElement = (isGlobal=false) => {
const studyInstanceUid = instance.data.study.studyInstanceUid;
const selector = `.studyTimepointStudy[data-uid='${studyInstanceUid}']`;
const selector = `.study-browser-item[data-uid='${studyInstanceUid}']`;
return isGlobal ? $(selector) : instance.$browser.find(selector);
};
@@ -73,7 +73,7 @@ Template.studyTimepointStudy.onRendered(() => {
const instance = Template.instance();
// Keep the study timepoint browser element to manipulate elements even after DOM is removed
instance.$browser = instance.$('.studyTimepointStudy').closest('.studyTimepointBrowser');
instance.$browser = instance.$('.study-browser-item').closest('.studyTimepointBrowser');
instance.initializeStudyWrapper();
});
@@ -87,23 +87,23 @@ Template.studyTimepointStudy.events({
},
// Transfers the active state to the current study
'click .studyQuickSwitchTimepoint .studyModality'(event, instance) {
'click .studyQuickSwitchTimepoint .study-item-container'(event, instance) {
instance.select(true);
},
// Set loading state
'loadStarted .studyTimepointStudy'(event, instance) {
'loadStarted .study-browser-item'(event, instance) {
instance.loading.set(true);
},
// Remove loading state and fix the thumbnails wrappers height
'loadEnded .studyTimepointStudy'(event, instance) {
'loadEnded .study-browser-item'(event, instance) {
instance.loading.set(false);
instance.initializeStudyWrapper();
},
// Changes the current study selection for the clicked study
'click .studyModality'(event, instance) {
'click .study-item-box'(event, instance) {
const studyData = instance.data.study;
const { studyInstanceUid } = studyData;
const isQuickSwitch = instance.isQuickSwitch();
@@ -128,7 +128,7 @@ Template.studyTimepointStudy.events({
}).catch(error => {
OHIF.log.error(`There was an error trying to retrieve the study\'s metadata for studyInstanceUid: ${studyInstanceUid}`);
OHIF.log.error(error.stack);
OHIF.log.trace();
});
} else {
@@ -167,15 +167,15 @@ Template.studyTimepointStudy.helpers({
if (numModalities === 1) {
// If we have only one modality, it should take up the whole div.
return 'font-size: 1vw';
return 'font-size: 1em';
} else if (numModalities === 2) {
// If we have two, let them sit side-by-side
return 'font-size: 0.75vw';
return 'font-size: 0.75em';
} else {
// If we have more than two modalities, change the line height to display multiple rows,
// depending on the number of modalities we need to display.
const lineHeight = Math.ceil(numModalities / 2) * 1.2;
return 'line-height: ' + lineHeight + 'vh';
return 'line-height: ' + lineHeight + 'em';
}
}
});
Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointStudy.styl
-131
View File
@@ -1,131 +0,0 @@
@import "{ohif:design}/app"
$boxBorderColor = transparent
$boxHoverBackgroundColor = #14191E
$boxHoverBorderColor = #2d4660
$boxActiveBorderColor = #131D29
$boxWidth = 50px
$borderThickness = 2px
$boxBorderRadius = 8px
$nestingMargin = 6px
$spacerX = 7px
$spacerY = 12px
.studyTimepointStudy
position: relative
// required transformation to make inner fixed elements relative to this one
transform(scale(1))
.loadingTextDiv
padding: 25px
border-radius: 12px
position: absolute
opacity: 0
z-index: 100
background-color: $boxHoverBackgroundColor
pointer-events: none
margin: 0
&.loading
.loadingTextDiv
height: 100%
left: 0
opacity: 0.75
right: 16px
.studyModality
opacity: 0.2
&.active
.studyModality
.studyModalityBox
theme('color', '$primaryBackgroundColor')
&
&:before
&:after
theme('background-color', '$activeColor')
border-color: $boxActiveBorderColor
&:not(.active) .studyTimepointThumbnails
max-height: 0 !important
.studyTimepointThumbnails
overflow: hidden
transition($sidebarTransition)
.studyModality
border: 1px solid $boxBorderColor
border-radius: 12px
cursor: pointer
padding: $spacerY $spacerX ($spacerY - 1)
position: relative
transition($sidebarTransition)
z-index: 1
&:hover
background-color: $boxHoverBackgroundColor
border-color: $boxHoverBorderColor
&.additional
theme('color', '$textSecondaryColor')
&.additional
theme('color', '$textPrimaryColor')
font-size: 16px
font-weight: normal
height: 91px
line-height: 91px
padding: 0
text-align: center
.studyText
font-size: 13px
left: ($spacerX * 3) + $boxWidth + ($nestingMargin * 3)
line-height: 14px
position: absolute
right: $spacerX
top: $spacerY
.studyDate
margin-top: 8px
theme('color', '$textSecondaryColor')
.studyDescription
margin-top: 8px
theme('color', '$textPrimaryColor')
.studyModalityBox
theme('color', '$textSecondaryColor')
line-height: $boxWidth
margin-left: $nestingMargin * 2
margin-top: $nestingMargin * 2
position: relative
.studyModalityText
text-align: center
text-transform: uppercase
height: 100%
&
&:before
&:after
theme('border', '%s solid $primaryBackgroundColor' % $borderThickness)
theme('background-color', '$boxBackgroundColor')
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