LT-242: Sharing same timepoints source among all the sub-templates that use it

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

@@ -1,10 +1,10 @@
 <template name="flexboxLayout">
     <div class="viewerSection">
         <div class="sidebarMenu sidebar-left {{#if leftSidebarOpen}}sidebar-open{{/if}}">
-            {{>studyTimepointBrowser}}
+            {{>studyTimepointBrowser (extend this)}}
         </div>
         <div class="mainContent {{#if leftSidebarOpen}}sidebar-left-open{{/if}} {{#if rightSidebarOpen}}sidebar-right-open{{/if}}">
-            {{>viewerMain}}
+            {{>viewerMain (extend this)}}
         </div>
         <div class="sidebarMenu sidebar-right {{#if or lesionSidebarOpen additionalFindingsSidebarOpen}}sidebar-open{{/if}}">
             <div class="sidebar-option {{#if lesionSidebarOpen}}active{{/if}}">

Packages/lesiontracker/client/components/lesionTable/lesionTable.html

@@ -4,10 +4,10 @@
             {{>roundedButtonGroup buttonGroupData}}
         </div>
         <div class="lesionTableTimepointHeaderRow">
-            {{#each timepoints.get}}
+            {{#each this.timepoints.get}}
                 {{>lesionTableTimepointHeader}}
             {{/each}}
         </div>
-        {{>lesionTableView this}}
+        {{>lesionTableView (extend this)}}
     </div>
 </template>

Packages/lesiontracker/client/components/lesionTable/lesionTable.js

@@ -4,23 +4,16 @@ Template.lesionTable.onCreated(() => {
     instance.data.lesionTableLayout = new ReactiveVar('comparison');
     instance.data.timepoints = new ReactiveVar([]);
 
+    // Run this computation everytime table layout changes
     instance.autorun(() => {
         // Get the current table layout
         const tableLayout = instance.data.lesionTableLayout.get();
 
-        // Get all the timepoints
-        const allTimepoints = Timepoints.find({}, {
-            sort: {
-                latestDate: -1
-            }
-        }).fetch();
-
-        // Get the last 2 timepoints
-        let timepoints = allTimepoints.slice(0, 2);
-
-        // Concatenate the baseline if the table layout is for key timepoints
-        if (tableLayout === 'key' && allTimepoints.length > 2) {
-            timepoints = timepoints.concat(_.last(allTimepoints));
+        let timepoints;
+        if (tableLayout === 'key') {
+            timepoints = instance.data.timepointApi.key();
+        } else {
+            timepoints = instance.data.timepointApi.latest();
         }
 
         // Return key timepoints
@@ -35,7 +28,7 @@ Template.lesionTable.onRendered(() => {
         // Run this computation everytime the lesion table layout is changed
         instance.data.lesionTableLayout.dep.depend();
 
-        if(instance.data.state.get('rightSidebar') !== 'lesions') {
+        if (instance.data.state.get('rightSidebar') !== 'lesions') {
             // Remove the amount attribute from sidebar element tag
             instance.$('#lesionTableContainer').closest('.sidebarMenu').removeAttr('data-timepoints');
             return;
@@ -82,10 +75,6 @@ Template.lesionTable.events({
 });
 
 Template.lesionTable.helpers({
-    dataContainer() {
-        return {};
-    },
-
     buttonGroupData() {
         const instance = Template.instance();
         return {

Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.html

@@ -6,7 +6,7 @@
                 <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-ui-close"></use>
             </svg>
         </div>
-        {{>lesionTableView}}
+        {{>lesionTableView (extend this)}}
         <div class="footer">
             {{#each toolbarButton in toolbarButtons}}
                 {{>toolbarSectionButton toolbarButton}}

Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.js

@@ -1,3 +1,9 @@
+Template.lesionTableHUD.onCreated(() => {
+    const instance = Template.instance();
+
+    instance.data.timepoints = new ReactiveVar(instance.data.timepointApi.latest());
+});
+
 Template.lesionTableHUD.onRendered(() => {
     const instance = Template.instance();
     instance.$('#lesionTableHUD').resizable().draggable();

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='key' currentStudy=this.currentStudy viewportIndex=this.viewportIndex}}
+                            {{>studyTimepointBrowser (extend this timepointViewType='key')}}
                         </div>
                     </div>
                 </div>

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

@@ -8,24 +8,22 @@
                 <div class="p-l-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 class="timepointEntry p-y-2">
+                                <div class="timepointHeader">
+                                    <div class="timepointDetails clearfix">
+                                        <div class="timepointFollowupTitle pull-left">
+                                            {{timepointApi.title timepoint}}
                                         </div>
-                                        <div class="timepointModalities">{{modalitiesSummary timepoint}}</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>
-                                    {{>studyTimepoint studies=(studies timepoint) index=@index viewportIndex=this.viewportIndex currentStudy=this.currentStudy}}
+                                    <div class="timepointModalities">{{modalitiesSummary timepoint}}</div>
                                 </div>
-                                <hr>
-                            {{/if}}
+                                {{>studyTimepoint studies=(studies timepoint) index=@index viewportIndex=this.viewportIndex currentStudy=this.currentStudy}}
+                            </div>
+                            <hr>
                         {{/each}}
                         {{#if and this.currentStudy (not showAdditionalTimepoints)}}
                             <div class="studyModality additional">

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

@@ -116,21 +116,22 @@ Template.studyTimepointBrowser.helpers({
         const instance = Template.instance();
         // Get the current study
         const currentStudy = instance.getCurrentStudy();
-        // Build the query
-        const query = {};
+        // Declare the timepoints
+        let timepoints;
         if (currentStudy && !instance.showAdditionalTimepoints.get()) {
-            query['studyInstanceUids'] = {
-                $in: [currentStudy.studyInstanceUid]
-            };
-        }
-        // Sort timepoints based on timeline and type
-        const sort = {
-            sort: {
-                latestDate: 1
+            // Show only the current study's timepoint
+            timepoints = instance.data.timepointApi.study(currentStudy.studyInstanceUid);
+        } else {
+            if (instance.timepointViewType.get() === 'all') {
+                // Show all timepoints
+                timepoints = instance.data.timepointApi.all();
+            } else {
+                // Show only key timepoints
+                timepoints = instance.data.timepointApi.key();
             }
-        };
-        // Returns all timepoints with sorting
-        return Timepoints.find(query, sort).fetch().reverse();
+        }
+        // Returns the timepoints
+        return timepoints;
     },
 
     // Get the studies for a specific timepoint
@@ -138,38 +139,6 @@ Template.studyTimepointBrowser.helpers({
         return Template.instance().getStudies(timepoint);
     },
 
-    // Decides if a timepoint shall be shown or omitted
-    shallShowTimepoint(timepoint, index) {
-        const instance = Template.instance();
-
-        // Show all timepoints when view type is all
-        if (instance.timepointViewType.get() === 'all') {
-            return true;
-        }
-
-        // Always Show the timepoint for current study
-        const currentStudy = instance.getCurrentStudy();
-        if (currentStudy && _.contains(timepoint.studyInstanceUids, currentStudy.studyInstanceUid)) {
-            return true;
-        }
-
-        // 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);
-
-        const states = {
-            0: '(Current)',
-            1: '(Prior)'
-        };
-        // TODO: [design] find out how to define the nadir timepoint
-        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/toolbarSection/toolbarSection.html

@@ -27,10 +27,10 @@
             </div>
 
             {{#if splitView}}
-                {{>studySeriesQuickSwitch side="right" viewportIndex=1}}
-                {{>studySeriesQuickSwitch side="left" viewportIndex=0}}
+                {{>studySeriesQuickSwitch (extend this side="right" viewportIndex=1)}}
+                {{>studySeriesQuickSwitch (extend this side="left" viewportIndex=0)}}
             {{else}}
-                {{>studySeriesQuickSwitch side="middle" viewportIndex=0}}
+                {{>studySeriesQuickSwitch (extend this side="middle" viewportIndex=0)}}
             {{/if}}
 
             <div class="toolbarSectionEntry pull-right rm-l-1 p-x-1">

Packages/lesiontracker/client/components/viewer/viewer.html

@@ -5,12 +5,12 @@
             {{>lesionLocationDialog}}
             {{>nonTargetLesionDialog}}
             {{>nonTargetResponseDialog}}
-            {{>lesionTableHUD}}
+            {{>lesionTableHUD (extend this)}}
             {{! >conformanceCheckFeedback}}
         </div>
         <div id="viewer">
-            {{>toolbarSection}}
-            {{>flexboxLayout}}
+            {{>toolbarSection (extend this)}}
+            {{>flexboxLayout (extend this)}}
         </div>
     {{else}}
         {{>loadingText}}

Packages/lesiontracker/client/components/viewer/viewer.js

@@ -1,21 +1,26 @@
+import { TimepointApi } from 'meteor/lesiontracker/lib/api/timepoint';
+
 Session.setDefault('activeViewport', false);
 Session.setDefault('leftSidebar', null);
 Session.setDefault('rightSidebar', null);
 
-Template.viewer.onCreated(function() {
+Template.viewer.onCreated(() => {
+    const instance = Template.instance();
+
+    instance.data.timepointApi = new TimepointApi();
+
     // Attach the Window resize listener
     $(window).on('resize', handleResize);
 
     ValidationErrors.remove({});
 
-    var instance = this;
     instance.data.state = new ReactiveDict();
     instance.data.state.set('leftSidebar', Session.get('leftSidebar'));
     instance.data.state.set('rightSidebar', Session.get('rightSidebar'));
 
     Session.set('currentTimepointId', instance.data.currentTimepointId);
 
-    var contentId = this.data.contentId;
+    var contentId = instance.data.contentId;
 
     OHIF = OHIF || window.OHIF || {
             viewer: {}
@@ -92,11 +97,11 @@ Template.viewer.onCreated(function() {
         ViewerData[contentId].loadedSeriesData = OHIF.viewer.loadedSeriesData;
 
         // Update the viewer data object
-        if (!this.data.timepointIds || this.data.timepointIds.length <= 1) {
+        if (!instance.data.timepointIds || instance.data.timepointIds.length <= 1) {
             // Update the viewer data object
             ViewerData[contentId].viewportColumns = 1;
             ViewerData[contentId].viewportRows = 1;
-        } else if (this.data.timepointIds.length > 1) {
+        } else if (instance.data.timepointIds.length > 1) {
             ViewerData[contentId].viewportColumns = 2;
             ViewerData[contentId].viewportRows = 1;
         }
@@ -113,12 +118,12 @@ Template.viewer.onCreated(function() {
     // Update the ViewerStudies collection with the loaded studies
     ViewerStudies.remove({});
 
-    this.data.studies.forEach(function(study) {
+    instance.data.studies.forEach(function(study) {
         study.selected = true;
         ViewerStudies.insert(study);
     });
 
-    var patientId = this.data.studies[0].patientId;
+    var patientId = instance.data.studies[0].patientId;
     Session.set('patientId', patientId);
 
     instance.autorun(function() {