WIP reorganization

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

@@ -0,0 +1,95 @@
+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();
+    instance.lastType = '';
+
+    // Collapse all timepoints but first when timepoint view type changes
+    instance.$browserList = instance.$('.timepoint-browser-list').first();
+    instance.autorun(() => {
+        // Runs this computation every time the timepointViewType is changed
+        const type = instance.timepointViewType.get();
+        if (type !== instance.lastType) {
+            const eventKey = 'ohif.measurements.timepoint.changeViewType';
+            instance.$browserList.trigger(eventKey, type);
+        }
+
+        instance.lastType = type;
+    });
+});
+
+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.measurements.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') {
+            const filter = { latestDate: { $lte: currentTimepoint.latestDate } };
+            timepoints = timepointApi.key(filter);
+        } else {
+            timepoints = timepointApi.all({ patientId });
+        }
+
+        return {
+            timepointApi,
+            timepoints,
+            timepointChildTemplate: 'timepointBrowserStudies',
+            studyChildTemplate: 'studyBrowserSeries'
+        };
+    }
+});