Study metadata is added on study browser click

2016-07-22 11:03:01 +02:00
1 parent 757513906c
commit 521de2fad3
@@ -1,8 +1,8 @@
 <template name="studyTimepoint">
    <div class="studyTimepointWrapper">
        <div class="studyTimepoint">
-            {{#each study in this.studies}}
-                {{>studyTimepointStudy study=study}}
+            {{#each studies}}
+                {{>studyTimepointStudy study=this active=isActive}}
            {{/each}}
        </div>
    </div>
@@ -1,3 +1,5 @@
+var isActive = {};
+
 // Initialize the timepoint wrapper max-height to enable CSS transition
 Template.studyTimepoint.onRendered(() => {
    const instance = Template.instance();
@@ -21,19 +23,22 @@ Template.studyTimepoint.onRendered(() => {

 Template.studyTimepoint.events({
    // Changes the selected study
-    'selectionChanged .studyTimepoint'(event, instance, selection) {
-        const $selection = $(selection);
+    'selectionChanged .studyTimepoint'(event, instance, changed) {
+        const $selection = $(changed.selection);
        const $thumbnails = $selection.find('.studyTimepointThumbnails');
        const $timepoint = instance.$('.studyTimepoint');
+        const studyInstanceUid = changed.studyInstanceUid;

        // Set the max-height to inherit to be able to expand the wrapper on its full height
        instance.$('.studyTimepointWrapper').css('max-height', 'inherit');

        // Removes selected state from all studies but the triggered study
-        instance.$('.studyTimepointStudy').not(selection).removeClass('active');
+        instance.$('.studyTimepointStudy').not($selection).removeClass('active');

        // Toggle selected state for the triggered study
+        $selection.removeClass('loading');
        $selection.toggleClass('active');
+        isActive[studyInstanceUid] = $selection.hasClass('active');

        // Recalculates the timepoint height to make CSS transition smoother
        $thumbnails.one('transitionend', () => $timepoint.trigger('displayStateChanged'));
@@ -47,3 +52,13 @@ Template.studyTimepoint.events({
        $wrapper.css('max-height', $timepoint.height());
    }
 });
+
+Template.studyTimepoint.helpers({
+    isActive() {
+        if (!this.studyInstanceUid) {
+            return;
+        }
+
+        return isActive[this.studyInstanceUid];
+    }
+})
@@ -3,10 +3,25 @@ Template.studyTimepointBrowser.onCreated(() => {

    // Get the studies for a specific timepoint
    instance.getStudies = timepoint => {
-        const query = {
-            selected: true
-        };
-        return ViewerStudies.find(query);
+        return timepoint.studyInstanceUids.map(studyInstanceUid => {
+            const query = {
+                patientId: timepoint.patientId,
+                timepointId: timepoint.timepointId,
+                studyInstanceUid: studyInstanceUid
+            };
+
+            var loadedStudy = ViewerStudies.findOne(query);
+            if (loadedStudy) {
+                return loadedStudy;
+            }
+
+            var notYetLoaded = Studies.findOne(query);
+            if (!notYetLoaded) {
+                throw "No study data available for Study: " + studyInstanceUid;
+            }
+
+            return notYetLoaded;
+        });
    };
 });

@@ -1,5 +1,6 @@
 <template name="studyTimepointStudy">
-    <div class="studyTimepointStudy">
+    <div class="studyTimepointStudy {{#if this.active}}active{{/if}}">
+        {{ >loadingText }}
        <div class="studyModality">
            <div class="studyModalityBox">
                {{#if this.study.modalities}}
@@ -6,6 +6,14 @@ Template.studyTimepointStudy.onRendered(() => {
    $study.addClass('active');
    $thumbnails.css('max-height', $thumbnails.height());
    $study.removeClass('active');
+
+    // Here we add, remove, and add the active class again because this way
+    // the max-height animation appears smooth to the user.
+    if (instance.data.active) {
+        Meteor.setTimeout(() => {
+            $study.addClass('active');
+        }, 1);
+    }
 });

 Template.studyTimepointStudy.events({
@@ -20,7 +28,32 @@ Template.studyTimepointStudy.events({
        const $study = $(event.currentTarget).closest('.studyTimepointStudy');
        const $timepoint = $study.closest('.studyTimepoint');
        const study = $study[0];
-        $timepoint.trigger('selectionChanged', [study]);
+
+        const studyInstanceUid = this.study.studyInstanceUid;
+        const selectionChanged = {
+            selection: [study],
+            studyInstanceUid: studyInstanceUid
+        };
+
+        // Check if the study already has series data,
+        // and if not, retrieve it.
+        if (!this.study.seriesList) {
+            var alreadyLoaded = ViewerStudies.findOne({
+                studyInstanceUid: studyInstanceUid
+            });
+
+            if (!alreadyLoaded) {
+                study.classList.add('loading');
+                getStudyMetadata(studyInstanceUid, (studyData) => {
+                    ViewerStudies.insert(studyData);
+                    $timepoint.trigger('selectionChanged', selectionChanged);
+                });
+            } else {
+                this.study.seriesList = alreadyLoaded.seriesList;
+            }
+        } else {
+            $timepoint.trigger('selectionChanged', selectionChanged);
+        }
    }
 });

@@ -14,6 +14,26 @@ $spacerX = 7px
 $spacerY = 12px

 .studyTimepointStudy
+  position: relative
+
+  .loadingTextDiv
+    padding: 25px
+    border-radius: 12px
+    position: absolute
+    opacity: 0
+    z-index: 100
+    background-color: $boxHoverBackgroundColor
+    pointer-events: none
+    margin: 0
+
+  &.loading
+    .loadingTextDiv
+      width: 100%
+      height: 100%
+      opacity: 0.75
+
+    .studyModality
+      opacity: 0.2

  &.active
    .studyModality