Creating sidebar templates for studies/timepoints browsers

Packages/ohif-lesiontracker/client/components/timepointBrowser/index.js

@@ -1,6 +1,8 @@
 import './item.html';
 import './item.js';
-import './item.styl';
 import './list.html';
+import './list.styl';
+import './sidebar.html';
+import './sidebar.js';
 import './studies.html';
 import './studies.js';

Packages/ohif-lesiontracker/client/components/timepointBrowser/item.js

@@ -1,4 +1,3 @@
-import { Meteor } from 'meteor/meteor';
 import { Template } from 'meteor/templating';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { Tracker } from 'meteor/tracker';
@@ -28,23 +27,16 @@ Template.timepointBrowserItem.onCreated(() => {
         instance.summary.set(summary.join(', '));
     };
 
-    instance.loadStudies = () => new Promise((resolve, reject) => {
-        const filter = { studyInstanceUid: timepoint.studyInstanceUids };
-        instance.summary.set('Loading...');
-        Meteor.call('StudyListSearch', filter, (error, studiesData) => {
-            if (error) {
-                const text = 'An error has occurred while retrieving studies information';
-                OHIF.ui.notifications.danger({ text });
-                OHIF.log.error(error);
-                reject(error);
-            } else {
-                timepoint.studiesData = studiesData;
-                timepointApi.timepoints.update(timepoint._id, { $set: { studiesData } });
-                instance.loaded = true;
-                instance.loading.set(false);
-                resolve(studiesData);
-            }
-        });
+    const filter = { studyInstanceUid: timepoint.studyInstanceUids };
+    instance.loadStudies = () => OHIF.studies.searchStudies(filter).then(studiesData => {
+        timepoint.studiesData = studiesData;
+        timepointApi.timepoints.update(timepoint._id, { $set: { studiesData } });
+        instance.loaded = true;
+        instance.loading.set(false);
+    }).catch(error => {
+        const text = 'An error has occurred while retrieving studies information';
+        OHIF.ui.notifications.danger({ text });
+        OHIF.log.error(error);
     });
 
     if (instance.loaded) {
@@ -62,6 +54,7 @@ Template.timepointBrowserItem.events({
         };
 
         if (!instance.loaded) {
+            instance.summary.set('Loading...');
             instance.loadStudies().then(() => {
                 Tracker.afterFlush(triggerClick);
                 instance.setModalitiesSummary();

Packages/ohif-lesiontracker/client/components/timepointBrowser/list.styl

@@ -1,5 +1,8 @@
 @require '{ohif:design}/app'
 
+.timepoint-switch
+  theme('border-bottom', '1px solid $uiBorderColor')
+
 .timepoint-browser-item
 
   .timepoint-item

Packages/ohif-lesiontracker/client/components/timepointBrowser/sidebar.html

@@ -0,0 +1,12 @@
+<template name="timepointBrowserSidebar">
+    <div class="full-height flex-v">
+        <div class="p-x-1">
+            <div class="timepoint-switch p-y-2">
+                {{>roundedButtonGroup viewTypeButtonGroupData}}
+            </div>
+        </div>
+        {{#scrollArea class='flex-grow' scrollableClass='p-a-1'}}
+            {{>timepointBrowserList (extend timepointBrowserData)}}
+        {{/scrollArea}}
+    </div>
+</template>

Packages/ohif-lesiontracker/client/components/timepointBrowser/sidebar.js

@@ -0,0 +1,93 @@
+import { Meteor } from 'meteor/meteor';
+import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
+
+Template.timepointBrowserSidebar.onCreated(() => {
+    const instance = Template.instance();
+
+    // Reactive variable to control the view type for all or key timepoints
+    instance.timepointViewType = new ReactiveVar(instance.data.timepointViewType);
+});
+
+Template.timepointBrowserSidebar.onRendered(() => {
+    const instance = Template.instance();
+
+    // Collapse all timepoints but first when timepoint view type changes
+    instance.autorun(() => {
+        // Runs this computation every time the timepointViewType is changed
+        const type = instance.timepointViewType.get();
+
+        // Removes all active classes to collapse the timepoints and studies
+        instance.$('.timepoint-browser-item, .study-browser-item').removeClass('active');
+        if (type === 'key') {
+            // Show only first timepoint expanded for key timepoints
+            instance.$('.timepoint-browser-item:first .timepoint-item').trigger('click');
+        }
+    });
+});
+
+Template.timepointBrowserSidebar.events({
+    'ohif.studies.study.click'(event, instance) {
+        const $element = $(event.currentTarget);
+
+        // Defer the active class toggling to wait for child template rendering
+        Meteor.defer(() => {
+            // Remove max height restriction from studies browser
+            const $studiesBrowser = $element.closest('.timepoint-browser-studies');
+            $studiesBrowser.css('max-height', '');
+
+            // Remove active class from sibling studies
+            $element.siblings().removeClass('active');
+
+            // Toggle the active class on clicked study
+            $element.toggleClass('active');
+
+            // Adjust the max height for studiesBrowser when series transition is finished
+            const $seriesBrowser = $element.find('.study-browser-series');
+            $seriesBrowser.one('transitionend', () => $studiesBrowser.adjustMax('height'));
+        });
+    },
+
+    'ohif.lesiontracker.timepoint.click'(event, instance) {
+        const $element = $(event.currentTarget);
+
+        // Defer the active class toggling to wait for child template rendering
+        Meteor.defer(() => $element.toggleClass('active'));
+    }
+});
+
+Template.timepointBrowserSidebar.helpers({
+    viewTypeButtonGroupData() {
+        return {
+            value: Template.instance().timepointViewType,
+            options: [{
+                value: 'key',
+                text: 'Key Timepoints'
+            }, {
+                value: 'all',
+                text: 'All Timepoints'
+            }]
+        };
+    },
+
+    timepointBrowserData() {
+        const instance = Template.instance();
+        const { timepointApi } = instance.data;
+
+        const currentTimepoint = timepointApi.current();
+        const { patientId } = currentTimepoint;
+        let timepoints = [];
+        if (instance.timepointViewType.get() === 'key') {
+            timepoints = timepointApi.key();
+        } else {
+            timepoints = timepointApi.all({ patientId });
+        }
+
+        return {
+            timepointApi,
+            timepoints,
+            timepointChildTemplate: 'timepointBrowserStudies',
+            studyChildTemplate: 'studyBrowserSeries'
+        };
+    }
+});