LT-251: Showing only the active timepoint and creating 'Show additional timepoints' button and behavior

Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.html

@@ -22,6 +22,11 @@
                         <hr class="m-y-1">
                     {{/if}}
                 {{/each}}
+                {{#if and this.currentStudy (not showAdditionalTimepoints)}}
+                    <div class="studyModality additional">
+                        Show additional timepoints
+                    </div>
+                {{/if}}
             </div>
         </div>
     </div>

Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.js

@@ -1,6 +1,9 @@
 Template.studyTimepointBrowser.onCreated(() => {
     const instance = Template.instance();
 
+    // Defines whether to show all key timepoints or only the current one
+    instance.showAdditionalTimepoints = new ReactiveVar(true);
+
     // Get the studies for a specific timepoint
     instance.getStudies = timepoint => {
         return timepoint.studyInstanceUids.map(studyInstanceUid => {
@@ -27,6 +30,7 @@ Template.studyTimepointBrowser.onCreated(() => {
 
 Template.studyTimepointBrowser.onRendered(() => {
     const instance = Template.instance();
+
     instance.autorun(() => {
         // Runs this computation everytime the timepointViewType is changed
         const type = instance.data.timepointViewType.get();
@@ -38,6 +42,18 @@ Template.studyTimepointBrowser.onRendered(() => {
             instance.$('.timepointEntry:first').addClass('active');
         }
     });
+
+    let lastStudy;
+    instance.autorun(() => {
+        // Runs this computation everytime the curenty study is changed
+        const currentStudy = instance.data.currentStudy && instance.data.currentStudy.get();
+
+        // Check if the study really changed and update the last study
+        if (currentStudy !== lastStudy) {
+            instance.showAdditionalTimepoints.set(false);
+            lastStudy = currentStudy;
+        }
+    });
 });
 
 Template.studyTimepointBrowser.events({
@@ -49,11 +65,32 @@ Template.studyTimepointBrowser.events({
 
         // Toggle active class to group/ungroup timepoint studies
         $timepoint.toggleClass('active');
+    },
+
+    'click .studyModality.additional'(event, instance) {
+        // Show all key timepoints
+        instance.showAdditionalTimepoints.set(true);
     }
 });
 
 Template.studyTimepointBrowser.helpers({
+    // Defines whether to show all key timepoints or only the current one
+    showAdditionalTimepoints() {
+        return Template.instance().showAdditionalTimepoints.get();
+    },
+
+    // Get the timepoints to be listed
     timepoints() {
+        const instance = Template.instance();
+        // Get the current study
+        const currentStudy = instance.data.currentStudy && instance.data.currentStudy.get();
+        // Build the query
+        const query = {};
+        if (currentStudy && !instance.showAdditionalTimepoints.get()) {
+            query['studyInstanceUids'] = {
+                $in: [currentStudy.studyInstanceUid]
+            };
+        }
         // Sort timepoints based on timeline and type
         const sort = {
             sort: {
@@ -61,12 +98,14 @@ Template.studyTimepointBrowser.helpers({
             }
         };
         // Returns all timepoints with sorting
-        return Timepoints.find({}, sort).fetch().reverse();
+        return Timepoints.find(query, sort).fetch().reverse();
     },
+
     // Get the studies for a specific timepoint
     studies(timepoint) {
         return Template.instance().getStudies(timepoint);
     },
+
     // Decides if a timepoint should be shown or omitted
     shouldShowTimepoint(timepoint, index) {
         const instance = Template.instance();
@@ -79,6 +118,7 @@ Template.studyTimepointBrowser.helpers({
         // Show only the latest timepoints and baseline
         return index < 3 || timepoint.timepointType === 'baseline';
     },
+
     // Build the timepoint title based on its date
     timepointTitle(timepoint, total, index) {
         const timepointName = getTimepointName(timepoint);
@@ -91,6 +131,7 @@ Template.studyTimepointBrowser.helpers({
         const parenthesis = states[index] || '';
         return `${timepointName} ${parenthesis}`;
     },
+
     // Build the modalities summary for all timepoint's studies
     modalitiesSummary(timepoint) {
         const instance = Template.instance();

Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.html

@@ -15,7 +15,7 @@
             </div>
         </div>
         <div class="studyTimepointThumbnails">
-            {{#each thumbnail in (thumbnails this.study)}}
+            {{#each thumbnail in (studyThumbnails this.study)}}
                 {{>thumbnailEntry thumbnail=thumbnail viewportIndex=viewportIndex}}
             {{/each}}
         </div>

Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.js

@@ -56,18 +56,3 @@ Template.studyTimepointStudy.events({
         }
     }
 });
-
-Template.studyTimepointStudy.helpers({
-    thumbnails: function(study) {
-        var stacks = createStacks(study);
-
-        var array = [];
-        stacks.forEach(function(stack, index) {
-            array.push({
-                thumbnailIndex: index,
-                stack: stack
-            });
-        });
-        return array;
-    }
-});

Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl

@@ -53,66 +53,78 @@ $spacerY = 12px
     overflow: hidden
     transition($sidebarTransition)
 
-  .studyModality
-    border: 1px solid $boxBorderColor
-    border-radius: 12px
-    cursor: pointer
-    font-family: Roboto
-    padding: $spacerY $spacerX ($spacerY - 1)
-    position: relative
-    transition($sidebarTransition)
-    z-index: 1
+.studyModality
+  border: 1px solid $boxBorderColor
+  border-radius: 12px
+  cursor: pointer
+  font-family: Roboto
+  padding: $spacerY $spacerX ($spacerY - 1)
+  position: relative
+  transition($sidebarTransition)
+  z-index: 1
 
-    &:hover
-      background-color: $boxHoverBackgroundColor
-      border-color: $boxHoverBorderColor
+  &:hover
+    background-color: $boxHoverBackgroundColor
+    border-color: $boxHoverBorderColor
 
-    .studyModalityText
-      font-size: 13px
-      left: ($spacerX * 3) + $boxWidth + ($nestingMargin * 3)
-      line-height: 14px
-      position: absolute
-      right: $spacerX
-      top: $spacerY
-      .studyModalityDate
-        margin-top: 8px
-        color: $textSecondaryColor
-      .studyModalityDescription
-        margin-top: 8px
-        color: $textPrimaryColor
-
-    .studyModalityBox
+    &.additional
       color: $textSecondaryColor
-      font-size: 22px
-      line-height: $boxWidth
-      margin-left: $nestingMargin * 2
-      margin-top: $nestingMargin * 2
-      position: relative
-      text-align: center
-      text-transform: uppercase
 
-      &
-      &:before
-      &:after
-        background-color: $boxBackgroundColor
-        border: $borderThickness solid $primaryBackgroundColor
-        border-radius: $boxBorderRadius
-        height: $boxWidth + ($borderThickness * 2)
-        transition($sidebarTransition)
-        width: $boxWidth + ($borderThickness * 2)
+  &.additional
+    color: $textPrimaryColor
+    font-size: 16px
+    font-weight: normal
+    height: 91px
+    line-height: 91px
+    padding: 0
+    text-align: center
 
-      &:before
-      &:after
-        display: block
-        content: ''
-        position: absolute
+  .studyModalityText
+    font-size: 13px
+    left: ($spacerX * 3) + $boxWidth + ($nestingMargin * 3)
+    line-height: 14px
+    position: absolute
+    right: $spacerX
+    top: $spacerY
+    .studyModalityDate
+      margin-top: 8px
+      color: $textSecondaryColor
+    .studyModalityDescription
+      margin-top: 8px
+      color: $textPrimaryColor
 
-      &:before
-        top: -($borderThickness + $nestingMargin)
-        left: -($borderThickness + $nestingMargin)
-        z-index: -1
+  .studyModalityBox
+    color: $textSecondaryColor
+    font-size: 22px
+    line-height: $boxWidth
+    margin-left: $nestingMargin * 2
+    margin-top: $nestingMargin * 2
+    position: relative
+    text-align: center
+    text-transform: uppercase
 
-      &:after
-        top: -($borderThickness + ($nestingMargin * 2))
-        left: -($borderThickness + ($nestingMargin * 2))
-        z-index: -2
+    &
+    &:before
+    &:after
+      background-color: $boxBackgroundColor
+      border: $borderThickness solid $primaryBackgroundColor
+      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