OHIF-101: Display Series Details for selected studies

LesionTracker/.meteor/versions

@@ -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

LesionTracker/client/routes.js

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

OHIFViewer/.meteor/packages

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

OHIFViewer/.meteor/versions

@@ -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

OHIFViewer/client/components/ohifViewer/ohifViewer.html

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

Packages/lesiontracker/client/components/lesionTracker/lesionTracker.html

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

Packages/lesiontracker/client/components/lesionTrackerWorklistContextMenu/lesionTrackerWorklistContextMenu.html

@@ -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/>

Packages/worklist/client/components/seriesDetailsTable/seriesDetailsTable.html

@@ -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>

Packages/worklist/client/components/seriesDetailsTable/seriesDetailsTable.js

@@ -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');
+    }
+});

Packages/worklist/client/components/seriesDetailsTable/seriesDetailsTable.styl

@@ -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

Packages/worklist/client/components/studyContextMenu/studyContextMenu.html

@@ -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/>

Packages/worklist/client/components/studyContextMenu/studyContextMenu.js

@@ -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;

Packages/worklist/client/components/viewSeriesDetailsModal/viewSeriesDetailsModal.html

@@ -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>

Packages/worklist/package.js

@@ -75,6 +75,12 @@ Package.onUse(function (api) {
     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');
     api.addFiles('client/lib/getStudiesMetadata.js', 'client');