Adding studies and timepoints to quickSwitch

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

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

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

@@ -5,8 +5,6 @@ import { $ } from 'meteor/jquery';
 import { _ } from 'meteor/underscore';
 import { OHIF } from 'meteor/ohif:core';
 
-const studySearchPromises = new Map();
-
 Template.timepointBrowserItem.onCreated(() => {
     const instance = Template.instance();
     const { timepoint, timepointApi } = instance.data;
@@ -30,18 +28,7 @@ Template.timepointBrowserItem.onCreated(() => {
     };
 
     const filter = { studyInstanceUid: timepoint.studyInstanceUids };
-    instance.loadStudies = () => {
-        const promiseKey = JSON.stringify(filter);
-        if (studySearchPromises.has(promiseKey)) {
-            return studySearchPromises.get(promiseKey);
-        } else {
-            const promise = instance.performLoad();
-            studySearchPromises.set(promiseKey, promise);
-            return promise;
-        }
-    };
-
-    instance.performLoad = () => OHIF.studies.searchStudies(filter).then(studiesData => {
+    instance.loadStudies = () => OHIF.studies.searchStudies(filter).then(studiesData => {
         timepoint.studiesData = studiesData;
         timepointApi.timepoints.update(timepoint._id, { $set: { studiesData } });
         instance.loaded = true;

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

@@ -0,0 +1,6 @@
+<template name="timepointBrowserQuickSwitch">
+    {{>timepointBrowserList (extend timepointBrowserData)}}
+    {{#unless instance.showAdditional.get}}
+        <div class='show-additional'>Show additional timepoints</div>
+    {{/unless}}
+</template>

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

@@ -0,0 +1,94 @@
+import { Meteor } from 'meteor/meteor';
+import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
+import { Tracker } from 'meteor/tracker';
+import { OHIF } from 'meteor/ohif:core';
+
+Template.timepointBrowserQuickSwitch.onCreated(() => {
+    const instance = Template.instance();
+    instance.showAdditional = new ReactiveVar(false);
+    instance.currentTimepoint = new ReactiveVar();
+
+    instance.updateCurrentTimepoint = studyInstanceUid => {
+        const currentTimepoint = OHIF.viewer.timepointApi.study(studyInstanceUid)[0];
+        instance.currentTimepoint.set(currentTimepoint);
+    };
+
+    const { viewportIndex } = instance.data;
+    instance.autorun(() => {
+        OHIF.viewerbase.layoutManager.observer.depend();
+        const viewportData = OHIF.viewerbase.layoutManager.viewportData[viewportIndex];
+        instance.updateCurrentTimepoint(viewportData.studyInstanceUid);
+    });
+
+    instance.autorun(() => {
+        instance.data.currentStudy.dep.depend();
+        instance.showAdditional.set(false);
+    });
+});
+
+Template.timepointBrowserQuickSwitch.onRendered(() => {
+    const instance = Template.instance();
+
+    instance.autorun(() => {
+        const currentTimepoint = instance.currentTimepoint.get();
+        const currentTimepointId = (currentTimepoint && currentTimepoint.timepointId) || '';
+        const $allBrowserItems = instance.$('.timepoint-browser-item');
+        const $browserItem = $allBrowserItems.filter(`[data-id=${currentTimepointId}]`);
+        if (!$browserItem.hasClass('active')) {
+            $browserItem.find('.timepoint-item').trigger('click');
+        }
+    });
+
+    instance.autorun(() => {
+        const currentStudy = instance.data.currentStudy.get();
+        const studyInstanceUid = (currentStudy && currentStudy.studyInstanceUid) || '';
+        Tracker.afterFlush(() => {
+            const $studyBrowserItems = instance.$('.study-browser-item');
+            $studyBrowserItems.removeClass('active');
+            $studyBrowserItems.filter(`[data-uid="${studyInstanceUid}"]`).addClass('active');
+        });
+    });
+});
+
+Template.timepointBrowserQuickSwitch.events({
+    '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'));
+    },
+
+    'ohif.studies.study.click'(event, instance, studyInformation) {
+        const { studyInstanceUid } = studyInformation;
+        const study = OHIF.viewer.Studies.findBy({ studyInstanceUid });
+        instance.data.currentStudy.set(study);
+        const $studySwitch = $(event.currentTarget).closest('.study-switch');
+        $studySwitch.siblings('.series-switch').trigger('rescale');
+        instance.updateCurrentTimepoint(studyInformation.studyInstanceUid);
+    },
+
+    'click .show-additional'(event, instance) {
+        instance.showAdditional.set(true);
+    },
+});
+
+Template.timepointBrowserQuickSwitch.helpers({
+    timepointBrowserData() {
+        const instance = Template.instance();
+        const { timepointApi } = OHIF.viewer;
+        const currentTimepoint = instance.currentTimepoint.get();
+        let timepoints;
+        if (instance.showAdditional.get()) {
+            timepoints = timepointApi.key();
+        } else {
+            timepoints = [currentTimepoint];
+        }
+
+        return {
+            timepointApi,
+            timepoints,
+            timepointChildTemplate: 'timepointBrowserStudies'
+        };
+    }
+});

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

@@ -5,7 +5,7 @@
                 {{>roundedButtonGroup viewTypeButtonGroupData}}
             </div>
         </div>
-        {{#scrollArea class='flex-grow' class='fit' scrollableClass='p-a-1' scrollStep=191}}
+        {{#scrollArea class='flex-grow fit' scrollableClass='p-a-1' scrollStep=191}}
             {{>timepointBrowserList (extend timepointBrowserData)}}
         {{/scrollArea}}
     </div>