OHIF-101: Display Series Details for selected studies

This commit is contained in:
Aysel Afsar 2016-08-26 12:04:34 -04:00
parent 0835c31ba0
commit 0eeb05e72b
14 changed files with 247 additions and 2 deletions

View File

@ -131,6 +131,7 @@ underscore@1.0.9
url@1.0.10
validatejs@0.0.1
viewerbase@0.0.1
wadoproxy@0.0.1
webapp@1.3.10
webapp-hashing@1.0.9
worklist@0.0.1

View File

@ -16,7 +16,8 @@ var data = {
'optionsModal',
'serverInformationModal',
'confirmRemoveTimepointAssociation',
'lastLoginModal'
'lastLoginModal',
'viewSeriesDetailsModal'
]
};

View File

@ -43,3 +43,4 @@ aldeed:simple-schema
johdirr:meteor-git-rev
wadoproxy
aldeed:template-extension
peppelg:bootstrap-3-modal

View File

@ -73,6 +73,7 @@ observe-sequence@1.0.12
ohif:core@0.0.1
ordered-dict@1.0.8
orthanc-remote@0.0.1
peppelg:bootstrap-3-modal@1.0.4
practicalmeteor:chai@2.1.0_1
practicalmeteor:loglevel@1.2.0_2
promise@0.8.3

View File

@ -25,4 +25,5 @@
</div>
{{> worklist }}
{{> aboutModal }}
{{> viewSeriesDetailsModal }}
</template>

View File

@ -38,4 +38,5 @@
{{ >lastLoginModal }}
{{ >studyContextMenu }}
{{ >progressDialog}}
{{ >viewSeriesDetailsModal }}
</template>

View File

@ -24,7 +24,10 @@
Remove Association
</a>
<hr/>
<a class="disabled">View Series Details</a>
<a id="viewSeriesDetails" type="button"
title="View Series Details">
View Series Details
</a>
<a class="disabled">Anonymize</a>
<a class="disabled">Send</a>
<hr/>

View File

@ -0,0 +1,104 @@
<template name="seriesDetailsTable">
{{#unless selectedStudies.length}}
<p align="center">Series details not found</p>
{{/unless}}
{{#each selectedStudies}}
<div class="selectedStudyContainer">
<table class="table table-responsive tblStudyDetails">
<tbody>
<tr>
<td class="center patientID">
<div>
<span>Patient ID</span>
</div>
<input type="text"
class="form-control"
id="patientID"
placeholder="Patient ID"
disabled="disabled"
value="{{ patientId }}">
</td>
<td class="patientName">
<div>
<span>Patient Name</span>
</div>
<input type="text"
class="form-control"
id="patientName"
placeholder="Patient Name"
disabled="disabled"
value="{{ formatPN patientName }}">
</td>
<td class="accessionNumber">
<div>
<span>Accession Number</span>
</div>
<input type="text"
class="form-control"
id="accessionNumber"
placeholder="Accession Number"
disabled="disabled"
value="{{ accessionNumber }}">
</td>
</tr>
<tr>
<td class="studyDescription">
<div>
<span>Study Description</span>
</div>
<input type="text"
class="form-control"
id="studyDescription"
placeholder="Study Description"
disabled="disabled"
value="{{ studyDescription }}">
</td>
<td class="studyDate">
<div>
<span>Study Date</span>
</div>
<input type="text"
class="form-control"
id="studyDate"
placeholder="Study Date"
disabled="disabled"
value="{{ formatDA studyDate }}">
</td>
<td></td>
</tr>
</tbody>
</table>
<table class="table table-responsive tblSeriesDetails">
<thead>
<tr>
<th class="header">Number</th>
<th class="header">Modality</th>
<th class="header">Description</th>
<th class="header">Instances</th>
</tr>
</thead>
<tbody>
{{#if displaySeriesLoadingText}}
<tr>
<td colspan="4" class="center">
{{> loadingText }}
</td>
</tr>
{{/if}}
{{#each seriesList}}
<tr>
<td class="center">{{ seriesNumber }}</td>
<td class="center">{{ modality }}</td>
<td class="center">{{ seriesDescription }}</td>
<td class="center">{{ instances.length }}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
{{/each}}
</template>

View File

@ -0,0 +1,51 @@
Template.seriesDetailsTable.onCreated(() => {
const instance = Template.instance();
// Create selected studies
instance.selectedStudies = new ReactiveDict();
let selectedStudiesData = instance.data.selectedStudies;
if (!selectedStudiesData) {
return;
}
// Display loading text while getting series
_.each(selectedStudiesData, selectedStudy => {
selectedStudy.displaySeriesLoadingText = true;
});
// Set reactive selected studies
instance.selectedStudies.set('studies', selectedStudiesData);
});
Template.seriesDetailsTable.onRendered(() => {
const instance = Template.instance();
const studies = instance.selectedStudies.get('studies');
if (!studies) {
return;
}
// Get series list for the study
_.map(studies, (selectedStudy, index) => {
studies[index].seriesList = [];
getStudyMetadata(selectedStudy.studyInstanceUid, study => {
// Set series list
studies[index].seriesList = study.seriesList;
studies[index].displaySeriesLoadingText = false;
// Update selected studies
instance.selectedStudies.set('studies', studies);
});
});
});
Template.seriesDetailsTable.helpers({
selectedStudies() {
const instance = Template.instance();
return instance.selectedStudies.get('studies');
}
});

View File

@ -0,0 +1,30 @@
@import "{design}/app"
.selectedStudyContainer
margin-bottom: 15px;
.tblStudyDetails
tbody > tr > td > label
color: $textPrimaryColor
tbody > tr > td > input[type="text"]
height: 28px
background-color: $primaryBackgroundColor
color: $textPrimaryColor
width: calc(100% - 10px)
border-radius: 4px
box-sizing: border-box
.tblSeriesDetails
thead > tr > th
text-align: center
tbody > tr
td
text-align: center
color: $textPrimaryColor
.loadingTextDiv
font-size: 13px
color: $textSecondaryColor

View File

@ -6,6 +6,10 @@
onselectstart='return false;'>
<ul>
<li>
<a id="viewSeriesDetails" type="button"
title="View Series Details">
View Series Details
</a>
<a class="disabled">Anonymize</a>
<a class="disabled">Send</a>
<hr/>

View File

@ -13,6 +13,8 @@ function closeHandler(dialog) {
*/
openStudyContextMenu = function(e) {
Worklist.functions['exportSelectedStudies'] = exportSelectedStudies;
Worklist.functions['viewSeriesDetails'] = viewSeriesDetails;
Template.studyContextMenu.study = $(e.currentTarget);
@ -68,6 +70,25 @@ function exportSelectedStudies() {
exportStudies(selectedStudies);
}
/**
* Display series details of study in modal
*/
function viewSeriesDetails() {
var selectedStudies = WorklistSelectedStudies.find({}, {
sort: {
studyDate: 1
}
}).fetch();
if (!selectedStudies) {
return;
}
Modal.show('viewSeriesDetailsModal', {
selectedStudies: selectedStudies
});
}
Template.studyContextMenu.events({
'click a': function(e) {
var study = Template.studyContextMenu.study;

View File

@ -0,0 +1,20 @@
<template name="viewSeriesDetailsModal">
<div class="modal" id="viewSeriesDetailsModal" tabindex="-1" role="dialog" aria-labelledby="viewSeriesDetailsModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="associationModalLabel">Series Details</h4>
</div>
<div class="modal-body">
{{> seriesDetailsTable
selectedStudies=selectedStudies
}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" id='cancelAssociation'>Close</button>
</div>
</div>
</div>
</div>
</template>

View File

@ -74,6 +74,12 @@ Package.onUse(function (api) {
api.addFiles('client/components/worklistPagination/worklistPagination.html', 'client');
api.addFiles('client/components/worklistPagination/worklistPagination.styl', 'client');
api.addFiles('client/components/worklistPagination/worklistPagination.js', 'client');
api.addFiles('client/components/viewSeriesDetailsModal/viewSeriesDetailsModal.html', 'client');
api.addFiles('client/components/seriesDetailsTable/seriesDetailsTable.html', 'client');
api.addFiles('client/components/seriesDetailsTable/seriesDetailsTable.styl', 'client');
api.addFiles('client/components/seriesDetailsTable/seriesDetailsTable.js', 'client');
// Client-side library functions
api.addFiles('client/lib/getStudyMetadata.js', 'client');