LT-251: Showing patient studies even if there are no timepoints

Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.html

@@ -1,11 +1,7 @@
 <template name="flexboxLayout">
     <div class="viewerSection">
         <div class="sidebarMenu sidebar-left {{#if leftSidebarOpen}}sidebar-open{{/if}}">
-            <div class="timepointButtonContainer p-t-2">
+            {{>studyTimepointBrowser}}
-                {{>roundedButtonGroup sidebarButtonGroupData}}
-            </div>
-            <hr class="m-y-0">
-            {{>studyTimepointBrowser timepointViewType=timepointViewType}}
         </div>
         <div class="mainContent {{#if leftSidebarOpen}}sidebar-left-open{{/if}} {{#if rightSidebarOpen}}sidebar-right-open{{/if}}">
             {{>viewerMain }}

Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.js

@@ -1,7 +1,6 @@
 Template.flexboxLayout.onCreated(() => {
     const instance = Template.instance();
     instance.state = instance.data.state;
-    instance.timepointViewType = new ReactiveVar();
 });
 
 let resizeTimeout;
@@ -22,24 +21,6 @@ Template.flexboxLayout.onRendered(() => {
 });
 
 Template.flexboxLayout.helpers({
-    timepointViewType() {
-        return Template.instance().timepointViewType;
-    },
-
-    sidebarButtonGroupData() {
-        const instance = Template.instance();
-        return {
-            value: instance.timepointViewType,
-            options: [{
-                value: 'key',
-                text: 'Key Timepoints'
-            }, {
-                value: 'all',
-                text: 'All Timepoints'
-            }]
-        };
-    },
-
     leftSidebarOpen() {
         const instance = Template.instance();
         return instance.state.get('leftSidebar');

Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html

@@ -7,7 +7,7 @@
                     <div class="studyBox"></div>
                     <div class="switchHover studyHover clearfix">
                         <div class="scrollArea">
-                            {{>studyTimepointBrowser timepointViewType=this.timepointViewType currentStudy=this.currentStudy viewportIndex=this.viewportIndex}}
+                            {{>studyTimepointBrowser timepointViewType='key' currentStudy=this.currentStudy viewportIndex=this.viewportIndex}}
                         </div>
                     </div>
                 </div>

Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.js

@@ -4,9 +4,6 @@ Template.studySeriesQuickSwitch.onCreated(() => {
     // Defines the study being shown in the current viewport
     instance.data.currentStudy = new ReactiveVar();
 
-    // Shows only the key timepoints
-    instance.data.timepointViewType = new ReactiveVar('key');
-
     // Gets the viewport data for the given viewport index
     instance.getViewportData = viewportIndex => {
         const layoutManager = window.layoutManager;
@@ -20,7 +17,7 @@ Template.studySeriesQuickSwitch.onCreated(() => {
         return;
     }
 
-    // Fins the current study and return it
+    // Finds the current study and return it
     const study = ViewerStudies.findOne({
         studyInstanceUid: viewportData.studyInstanceUid
     });

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

@@ -1,33 +1,47 @@
 <template name="studyTimepointBrowser">
-    <div class="studyTimepointBrowser noselect">
+    {{#let timepointList=timepoints}}
-        <div class="studyTimepointScrollArea">
+        <div class="studyTimepointBrowser noselect">
-            <div class="p-x-1">
+            {{#if shallShowViewType timepointList}}
-                {{#each timepoint in timepoints}}
+                <div class="timepointButtonContainer p-t-2">
-                    {{#if shouldShowTimepoint timepoint @index}}
+                    {{>roundedButtonGroup viewTypeButtonGroupData}}
-                        <div class="timepointEntry p-y-2">
+                </div>
-                            <div class="timepointHeader">
+                <hr class="m-y-0">
-                                <div class="timepointDetails clearfix">
+            {{/if}}
-                                    <div class="timepointFollowupTitle pull-left">
+            <div class="studyTimepointScrollArea">
-                                        {{timepointTitle timepoint timepoints.count @index}}
+                <div class="p-x-1">
+                    {{#if timepointList.length}}
+                        {{#each timepoint in timepointList}}
+                            {{#if shallShowTimepoint timepoint @index}}
+                                <div class="timepointEntry p-y-2">
+                                    <div class="timepointHeader">
+                                        <div class="timepointDetails clearfix">
+                                            <div class="timepointFollowupTitle pull-left">
+                                                {{timepointTitle timepoint timepoints.count @index}}
+                                            </div>
+                                            <div class="expandIcon pull-right">
+                                                <i class="fa fa-chevron-down"></i>
+                                            </div>
+                                            <div class="timepointDate pull-right m-r-1">{{formatDA timepoint.earliestDate 'D-MMM-YYYY'}}</div>
+                                        </div>
+                                        <div class="timepointModalities">{{modalitiesSummary timepoint}}</div>
                                     </div>
-                                    <div class="expandIcon pull-right">
+                                    {{>studyTimepoint studies=(studies timepoint) index=@index viewportIndex=this.viewportIndex currentStudy=this.currentStudy}}
-                                        <i class="fa fa-chevron-down"></i>
-                                    </div>
-                                    <div class="timepointDate pull-right m-r-1">{{formatDA timepoint.earliestDate 'D-MMM-YYYY'}}</div>
                                 </div>
-                                <div class="timepointModalities">{{modalitiesSummary timepoint}}</div>
+                                <hr class="m-y-1">
+                            {{/if}}
+                        {{/each}}
+                        {{#if and this.currentStudy (not showAdditionalTimepoints)}}
+                            <div class="studyModality additional">
+                                Show additional timepoints
                             </div>
-                            {{>studyTimepoint studies=(studies timepoint) index=@index viewportIndex=this.viewportIndex currentStudy=this.currentStudy}}
+                        {{/if}}
+                    {{else}}
+                        <div class="p-t-2">
+                            {{>studyTimepoint studies=studies viewportIndex=this.viewportIndex currentStudy=this.currentStudy}}
                         </div>
-                        <hr class="m-y-1">
                     {{/if}}
-                {{/each}}
+                </div>
-                {{#if and this.currentStudy (not showAdditionalTimepoints)}}
-                    <div class="studyModality additional">
-                        Show additional timepoints
-                    </div>
-                {{/if}}
             </div>
         </div>
-    </div>
+    {{/let}}
 </template>

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

@@ -1,6 +1,9 @@
 Template.studyTimepointBrowser.onCreated(() => {
     const instance = Template.instance();
 
+    // Reactive variable to control the view type for all or key timepoints
+    instance.timepointViewType = new ReactiveVar(instance.data.timepointViewType);
+
     // Defines whether to show all key timepoints or only the current one
     instance.showAdditionalTimepoints = new ReactiveVar(true);
 
@@ -11,6 +14,10 @@ Template.studyTimepointBrowser.onCreated(() => {
 
     // Get the studies for a specific timepoint
     instance.getStudies = timepoint => {
+        if (!timepoint) {
+            return ViewerStudies.find().fetch();
+        }
+
         return timepoint.studyInstanceUids.map(studyInstanceUid => {
             const query = {
                 patientId: timepoint.patientId,
@@ -38,7 +45,7 @@ Template.studyTimepointBrowser.onRendered(() => {
 
     instance.autorun(() => {
         // Runs this computation everytime the timepointViewType is changed
-        const type = instance.data.timepointViewType.get();
+        const type = instance.timepointViewType.get();
 
         // Removes all active classes to collapse the timepoints and studies
         instance.$('.timepointEntry, .studyTimepointStudy').removeClass('active');
@@ -79,6 +86,26 @@ Template.studyTimepointBrowser.events({
 });
 
 Template.studyTimepointBrowser.helpers({
+    // Decides if the timepoint view type switch shall be shown or omitted
+    shallShowViewType(timepointList) {
+        const instance = Template.instance();
+        return timepointList.length && !instance.data.timepointViewType;
+    },
+
+    // Returns the button group data for switching between timepoint view types
+    viewTypeButtonGroupData() {
+        return {
+            value: Template.instance().timepointViewType,
+            options: [{
+                value: 'key',
+                text: 'Key Timepoints'
+            }, {
+                value: 'all',
+                text: 'All Timepoints'
+            }]
+        };
+    },
+
     // Defines whether to show all key timepoints or only the current one
     showAdditionalTimepoints() {
         return Template.instance().showAdditionalTimepoints.get();
@@ -111,12 +138,12 @@ Template.studyTimepointBrowser.helpers({
         return Template.instance().getStudies(timepoint);
     },
 
-    // Decides if a timepoint should be shown or omitted
+    // Decides if a timepoint shall be shown or omitted
-    shouldShowTimepoint(timepoint, index) {
+    shallShowTimepoint(timepoint, index) {
         const instance = Template.instance();
 
         // Show all timepoints when view type is all
-        if (instance.data.timepointViewType.get() === 'all') {
+        if (instance.timepointViewType.get() === 'all') {
             return true;
         }