Linked study date to viewports in measurement grid

Packages/lesiontracker/components/lesionLocationDialog/lesionLocationDialog.js

@@ -8,9 +8,15 @@ function getLesionLocationCallback(measurementData, eventData, doneCallback) {
     // Find the select option box
     var selector = lesionDialog.find("select#selectLesionLocation");
 
-    // Get the current element's timepointID
-    // TODO: Change this when we are no longer storing timepointID in the viewport element DOM data
-    measurementData.timepointID = $(eventData.element).data('timepointID');
+    // Get the current element's timepointID from the study date metadata
+    var element = eventData.element;
+    var enabledElement = cornerstone.getEnabledElement(element);
+    var study = cornerstoneTools.metaData.get('study', enabledElement.image.imageId);
+    var timepoint = Timepoints.findOne({timepointName: study.date});
+    if (!timepoint) {
+        return;
+    }
+    measurementData.timepointID = timepoint.timepointID;
 
     // Get a lesion number for this lesion, depending on whether or not the same lesion previously
     // exists at a different timepoint

Packages/lesiontracker/components/lesionTable/lesionTable.js

@@ -55,30 +55,27 @@ function updateLesions(e) {
 }
 
 Template.lesionTable.onRendered(function() {
-    // For the moment we will associate the timepoint
-    // with the viewport element by storing the timepointID
-    // inside the element's DOM data. This is temporary.
-    $(".imageViewerViewport").each(function(index, element) {
-        var timepointID = uuid.v4();
+    // Observe ViewerStudies Collection Changes
+    // Note: This may not be the best place for this
+    ViewerStudies.find().observe({
+        added: function(study) {
+            log.info('ViewerStudies added to');
+            var timepointID = uuid.v4();
 
-        var timepointName = "Baseline";
-        if (index > 0) {
-            timepointName = "Current"; //"Follow Up "+i;
+            var timepoint = Timepoints.findOne({timepointName: study.studyDate});
+            if (timepoint) {
+                log.warn("A timepoint with that study date already exists!");
+                return;
+            }
+
+            Timepoints.insert({
+                timepointID: timepointID,
+                timepointName: study.studyDate
+            });
         }
-
-
-        // FUTURE = On load series data into viewport, create a new timepoint
-        // unless it already exists
-        Timepoints.insert({
-            timepointID: timepointID,
-            timepointName: timepointName
-        });
-
-        $(element).data('timepointID', timepointID);
     });
 });
 
-
 Template.lesionTable.helpers({
     'measurement': function() {
         return Measurements.find();

Packages/lesiontracker/components/lesionTableTimepointHeader/lesionTableTimepointHeader.html

@@ -1,3 +1,3 @@
 <template name="lesionTableTimepointHeader">
-    <th>{{timepointName}}</th>
+    <th>{{formatDA timepointName "MM/DD/YYYY"}}</th>
 </template>

Packages/lesiontracker/components/studyDateList/studyDateList.css

@@ -1,12 +0,0 @@
-.studyDateList {
-    margin: 0px auto;
-    text-align: left;
-    width: 100%;
-    float: none;
-    border-top: 2px solid #777;
-    padding: 10px;
-}
-
-.studyDateList label {
-    color: white;
-}

Packages/lesiontracker/components/studyDateList/studyDateList.html

@@ -1,11 +1,11 @@
 <template name="studyDateList">
     <div class="studyDateList">
         <label>Study Date:</label>
+        <span class="loading"><i class="fa fa-spinner fa-spin"></i></span>
         <select id="selectStudyDate">
-            {{#each patientStudies}}
-                <option value="{{studyInstanceUid}}">{{studyDate}}</option>
+            {{#each relatedStudies}}
+                <option value="{{studyInstanceUid}}" selected={{selected}}>{{formatDA studyDate}}</option>
             {{/each}}
         </select>
     </div>
-
 </template>

Packages/lesiontracker/components/studyDateList/studyDateList.js

@@ -1,66 +1,68 @@
-
-Template.studyDateList.onCreated(function(){
-
-    // All studies of this patient at different dates
-    this.patientStudies = [];
-    this.selectedDate = "";
-});
-
-
-Template.studyDateList.onRendered(function(){
-
-    // Add Study dates to Timepoints
-    this.patientStudies.forEach(function(study) {
-        Timepoints.insert({
-            timepointID: uuid.v4(),
-            timepointName: study.studyDate
-        });
-    });
-
-    // Selected date option in combobox
-    var self = this;
-    $('#selectStudyDate option').filter(function () {
-        if ($(this).html() === self.selectedDate) {
-            $(this).prop('selected', true);
-        }
-    });
-
-});
-
 Template.studyDateList.helpers({
-    patientStudies: function(){
-        var self = Template.instance();
-
-        var studyData = this.studies[0]; // study which is loaded in tab
-        self.selectedDate = studyData.studyDate;
-
+    /**
+     * Returns an array of studies that are related to the current study by patient ID.
+     * The value for 'selected' for the currently loaded study is set to true, so that
+     * this becomes the current option in the combo box.
+     *
+     * @returns {*}
+     */
+    relatedStudies: function() {
         // TODO= Fix this! This won't work to retrieve all studies
         // related to this patient. We will need to do a real search
         // since the WorklistStudies Collection only contains the studies on-screen
 
-        var studies = WorklistStudies.find({}).fetch(); // All studies list
-        var patientStudies = []; // Holds studies of patient
+        // Check which study is currently loaded into the study browser
+        var currentStudyInBrowser = ViewerStudies.findOne({selected: true});
 
-        // Get all studies of patient with patientID
-        studies.forEach(function(study) {
-            if (studyData.patientId === study.patientId) {
-                patientStudies.push(study);
+        // Find studies which have the same patientId as the currently selected study
+        var relatedStudies = WorklistStudies.find({patientId: currentStudyInBrowser.patientId}).fetch();
+
+        // Modify the array of related studies so the default option is the currently selected study
+        relatedStudies.forEach(function(study) {
+            // If the studyInstanceUid matches that of the current study in the browser,
+            // Set this to 'selected', so that it becomes the default option
+            if (study.studyInstanceUid === currentStudyInBrowser.studyInstanceUid) {
+                study.selected = true;
             }
         });
 
-        self.patientStudies = patientStudies;
-        return patientStudies;
+        // Use this array to populate the combo box
+        return relatedStudies;
     }
 });
 
 
 Template.studyDateList.events({
-    'change select#selectStudyDate': function(e, template) {
-        var studyInstanceUid = $(e.currentTarget).val();
+    /**
+     * When the study date selector combo box is changed, we will
+     * hide the select box, temporarily display a loading sign, and grab
+     * the selected study. Once the study has been retrieved it is added
+     * into the ViewerStudies collection and set as selected. This reactively
+     * populated the thumbnail browser.
+     *
+     * @param e The select box change event
+     */
+    'change select#selectStudyDate': function(e) {
+        var selectBox = $(e.currentTarget);
+
+        var studyInstanceUid = selectBox.val();
+
+        // Hide the select box
+        selectBox.css('display', 'none');
+
+        // Show the loading indicator
+        var loadingIndicator = selectBox.siblings('.loading');
+        loadingIndicator.css('display', 'block');
 
         Meteor.call('GetStudyMetadata', studyInstanceUid, function(error, study) {
             sortStudy(study);
 
+            // Hide the loading indicator
+            loadingIndicator.css('display', 'none');
+
+            // Show the select box again
+            selectBox.css('display', 'block');
+
             // Set "Selected" to false for the entire collection
             ViewerStudies.update({},
                 {$set: {selected: false}},

Packages/lesiontracker/components/studyDateList/studyDateList.styl

@@ -0,0 +1,15 @@
+.studyDateList
+  margin: 0px auto
+  text-align: left
+  width: 100%
+  border-top: 2px solid #777
+  padding: 10px
+
+  label
+    font-weight: normal
+    color: white
+
+  .loading
+    display: none
+    color: white
+    text-align: center

Packages/lesiontracker/package.js

@@ -40,7 +40,7 @@ Package.onUse(function (api) {
     api.addFiles('components/nonTargetLesionDialog/nonTargetLesionDialog.js', 'client');
 
     api.addFiles('components/studyDateList/studyDateList.html', 'client');
-    api.addFiles('components/studyDateList/studyDateList.css', 'client');
+    api.addFiles('components/studyDateList/studyDateList.styl', 'client');
     api.addFiles('components/studyDateList/studyDateList.js', 'client');