137 lines
5.4 KiB
JavaScript
137 lines
5.4 KiB
JavaScript
import { Meteor } from 'meteor/meteor';
|
|
import { Template } from 'meteor/templating';
|
|
import { ReactiveVar } from 'meteor/reactive-var';
|
|
import { Tracker } from 'meteor/tracker';
|
|
import { _ } from 'meteor/underscore';
|
|
import { OHIF } from 'meteor/ohif:core';
|
|
|
|
Template.timepointBrowserQuickSwitch.onCreated(() => {
|
|
const instance = Template.instance();
|
|
const { timepointApi } = OHIF.viewer;
|
|
|
|
instance.hasAdditional = new ReactiveVar(false);
|
|
instance.showAdditional = new ReactiveVar(false);
|
|
instance.selectedTimepoint = new ReactiveVar();
|
|
instance.timepoints = new ReactiveVar([]);
|
|
|
|
instance.updateSelectedTimepoint = studyInstanceUid => {
|
|
const selectedTimepoint = timepointApi.study(studyInstanceUid)[0];
|
|
instance.selectedTimepoint.set(selectedTimepoint);
|
|
};
|
|
|
|
const currentTimepoint = timepointApi.current();
|
|
const filter = { latestDate: { $lte: currentTimepoint.latestDate } };
|
|
instance.keyTimepoints = timepointApi.key(filter);
|
|
|
|
const { viewportIndex } = instance.data;
|
|
instance.autorun(() => {
|
|
OHIF.viewerbase.layoutManager.observer.depend();
|
|
const viewportData = OHIF.viewerbase.layoutManager.viewportData[viewportIndex];
|
|
let { studyInstanceUid } = viewportData;
|
|
if (!studyInstanceUid) {
|
|
Tracker.nonreactive(() => {
|
|
const currentStudy = instance.data.currentStudy.get();
|
|
if (currentStudy) {
|
|
studyInstanceUid = currentStudy.studyInstanceUid;
|
|
}
|
|
});
|
|
}
|
|
|
|
instance.updateSelectedTimepoint(studyInstanceUid);
|
|
});
|
|
|
|
instance.autorun(() => {
|
|
instance.data.currentStudy.dep.depend();
|
|
instance.showAdditional.set(false);
|
|
});
|
|
|
|
instance.autorun(() => {
|
|
const showAdditional = instance.showAdditional.get();
|
|
instance.hasAdditional.set(!showAdditional && instance.keyTimepoints.length > 1);
|
|
});
|
|
|
|
instance.autorun(() => {
|
|
const selectedTimepoint = instance.selectedTimepoint.get();
|
|
const showAdditional = instance.showAdditional.get();
|
|
const timepoints = showAdditional ? instance.keyTimepoints : [selectedTimepoint];
|
|
instance.timepoints.set(timepoints);
|
|
});
|
|
});
|
|
|
|
Template.timepointBrowserQuickSwitch.onRendered(() => {
|
|
const instance = Template.instance();
|
|
|
|
instance.updateActiveStudy = () => {
|
|
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');
|
|
});
|
|
};
|
|
|
|
instance.autorun(() => {
|
|
const selectedTimepoint = instance.selectedTimepoint.get();
|
|
const selectedTimepointId = (selectedTimepoint && selectedTimepoint.timepointId) || '';
|
|
const $allBrowserItems = instance.$('.timepoint-browser-item');
|
|
const $browserItem = $allBrowserItems.filter(`[data-id=${selectedTimepointId}]`);
|
|
if (!$browserItem.hasClass('active')) {
|
|
$browserItem.find('.timepoint-item').trigger('click');
|
|
}
|
|
});
|
|
|
|
instance.autorun(instance.updateActiveStudy);
|
|
});
|
|
|
|
Template.timepointBrowserQuickSwitch.events({
|
|
'ohif.lesiontracker.timepoint.click'(event, instance) {
|
|
const $element = $(event.currentTarget);
|
|
$element.toggleClass('active');
|
|
instance.updateActiveStudy();
|
|
},
|
|
|
|
'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.updateSelectedTimepoint(studyInformation.studyInstanceUid);
|
|
|
|
// Create a hover bridge to prevent quick switch from closing due to scroll height
|
|
Meteor.defer(() => {
|
|
const $scrollable = $studySwitch.find('.study-browser>.scrollable');
|
|
const offsetY = $scrollable.offset().top + $scrollable.outerHeight();
|
|
if (event.clientY > offsetY) {
|
|
const hoverHandler = _.throttle(event => {
|
|
if (event.clientY <= offsetY) {
|
|
$scrollable.css('padding-bottom', '');
|
|
$scrollable.off('mousemove', hoverHandler);
|
|
$scrollable.off('mouseleave', hoverHandler);
|
|
}
|
|
}, 100);
|
|
$scrollable.css('padding-bottom', event.clientY - offsetY + 20);
|
|
$scrollable.on('mousemove', hoverHandler);
|
|
$scrollable.one('mouseleave', () => $scrollable.off('mousemove', hoverHandler));
|
|
}
|
|
});
|
|
},
|
|
|
|
'click .study-item-box.additional'(event, instance) {
|
|
instance.showAdditional.set(true);
|
|
}
|
|
});
|
|
|
|
Template.timepointBrowserQuickSwitch.helpers({
|
|
timepointBrowserData() {
|
|
const instance = Template.instance();
|
|
const { timepointApi } = OHIF.viewer;
|
|
return {
|
|
timepointApi,
|
|
timepoints: instance.timepoints.get(),
|
|
timepointChildTemplate: 'timepointBrowserStudies'
|
|
};
|
|
}
|
|
});
|