Work on refactoring measurements out of Lesion Tracker package

- Removed AssociatedStudies Collection
- Measurement API is generated from configuration files
- Data exchange methods are defined in configuration
This commit is contained in:
Erik Ziegler committed 2016-11-15 08:21:46 +01:00
1 parent c511edd419
commit ab4d4c9008
537 files changed
+5122 -3545

No files matched your search

+2
View File
@@ -0,0 +1,2 @@
body
background-color: black
@@ -0,0 +1,40 @@
<template name="app">
<div class="topBar noselect {{#if onStudyList}}studyList{{/if}}">
<div class="clearfix p-x-1 p-t-1">
<a target='_blank'
class="brandSection pull-left"
href="http://ohif.org">
<svg class="logoImage">
<use xlink:href="/packages/ohif_viewerbase/assets/icons.svg#icon-ohif-logo"></use>
</svg>
<div class="logoText">
Open Health Imaging Foundation
</div>
</a>
{{ #if studyListToggleText }}
<a class="btn studyListLinkSection pull-left m-x-1 p-x-2 p-y-0 js-toggle-studyList">
{{studyListToggleText}}
</a>
{{ /if }}
<div class="userAccountSection pull-right">
{{>userAccountMenu}}
</div>
</div>
</div>
{{ >timeoutCountdownDialog }}
<div id="studylistTabs" class="tab-content">
<div class="tab-pane active" id="studylistTab">
<div class="studylistContainer">
{{> studylistResult }}
</div>
</div>
<div class="tab-pane" id="viewerTab">
</div>
</div>
{{ >associationModal }}
{{ >serverInformationModal }}
{{ >lastLoginModal }}
{{ >studyContextMenu }}
{{ >progressDialog }}
{{ >viewSeriesDetailsModal }}
</template>
@@ -0,0 +1,46 @@
const studylistContentId = 'studylistTab';
const viewerContentId = 'viewerTab';
// Define the ViewerData global object
// If there is currently any Session data for this object,
// use this to repopulate the variable
Template.app.onCreated(() => {
ViewerData = Session.get('ViewerData') || {};
});
Template.app.events({
'click .js-toggle-studyList'() {
const contentId = Session.get('activeContentId');
if (contentId !== studylistContentId) {
switchToTab(studylistContentId);
} else {
switchToTab(viewerContentId);
}
}
});
Template.app.helpers({
studyListToggleText() {
const contentId = Session.get('activeContentId');
// If the Viewer has not been opened yet, 'Back to viewer' should
// not be displayed
const viewerContentExists = !!Object.keys(ViewerData).length;
if (!viewerContentExists) {
return;
}
if (contentId === studylistContentId) {
return 'Back to viewer';
} else if (contentId === viewerContentId) {
return 'Study list';
}
},
onStudyList() {
return (Session.get('activeContentId') === 'studylistTab');
}
});
Session.set('defaultSignInMessage', 'Tumor tracking in your browser.');
@@ -0,0 +1,79 @@
@import "{design}/app"
$expandedHeight = 160px
.logoImage
display: inline-block
height: 100%
float: left
.topBar
height: $topBarHeight
theme('color', '$textPrimaryColor')
theme('background-color', '$primaryBackgroundColor')
transition(all 0.5s ease)
.brandSection
height: 30px
display: inline-block
text-decoration: none
.logoImage
margin: 0 8px
width: 30px
.logoText
display: inline-block
font-family: $logoFontFamily
font-weight: $logoFontWeight
theme('color', '$textPrimaryColor')
line-height: 30px
.studyListLinkSection
theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
.btn
theme('color', '$textSecondaryColor')
cursor: pointer
font-size: 13px
font-weight: 500
line-height: 26px
margin-top: 3px
&:hover
theme('color', '$hoverColor')
&:active
theme('color', '$activeColor')
&.studyList
background-color: rgba(21, 25, 30, 0.7)
height: $expandedHeight
.brandSection
height: 100%
width: 80%
padding-left: 50px
line-height: $expandedHeight
.logoImage
width: 50px
margin: 0 20px
.logoText
font-size: 30px
.studyListLinkSection
position: absolute
border: none
top: 5px
left: 5px
#studylistTabs
height: "calc(100% - %s)" % $topBarHeight
.tab-pane
.viewerContainer
.loadingTextDiv
theme('color', '$textSecondaryColor')
font-size: 30px
@@ -0,0 +1,33 @@
<template name="toolbarSection">
<div class="toolbarSection noselect p-x-2">
<div class="clearfix">
<div class="pull-left m-t-1">
{{>roundedButtonGroup leftSidebarToggleButtonData}}
</div>
{{>toolbarSectionTools toolbarButtons=toolbarButtons extraToolbarButtons=extraToolbarButtons}}
{{#if splitView}}
{{>studySeriesQuickSwitch (clone this side="right" viewportIndex=1)}}
{{>studySeriesQuickSwitch (clone this side="left" viewportIndex=0)}}
{{else}}
{{>studySeriesQuickSwitch (clone this side="middle" viewportIndex=0)}}
{{/if}}
<div class="toolbarSectionEntry pull-right rm-l-1 p-x-1">
{{>caseProgress}}
</div>
<div class="pull-right m-t-1 rm-x-1">
{{>roundedButtonGroup rightSidebarToggleButtonData}}
</div>
<div id="toggleHUD" class="toolbarSectionButton pull-right rp-x-1 m-t-1 rm-r-3 {{#if session 'measurementTableHudOpen'}}active{{/if}}">
<div class="svgContainer">
<svg>
<use xlink:href="/packages/ohif_viewerbase/assets/icons.svg#icon-hud"></use>
</svg>
</div>
<div class="buttonLabel">HUD</div>
</div>
</div>
</div>
</template>
@@ -0,0 +1,143 @@
import { OHIF } from 'meteor/ohif:core';
Template.toolbarSection.helpers({
// Returns true if the view shall be split in two viewports
splitView() {
// Run this computation every time the viewports are updated
Session.get('LayoutManagerUpdated');
// Stops here if layout manager is not defined yet
if (!window.layoutManager) {
return;
}
return window.layoutManager.viewportData.length > 1;
},
leftSidebarToggleButtonData() {
const instance = Template.instance();
return {
toggleable: true,
key: 'leftSidebar',
value: instance.data.state,
options: [{
value: 'studies',
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-studies',
svgWidth: 15,
svgHeight: 13,
bottomLabel: 'Studies'
}]
};
},
rightSidebarToggleButtonData() {
const instance = Template.instance();
return {
toggleable: true,
key: 'rightSidebar',
value: instance.data.state,
options: [{
value: 'measurements',
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-measurements-lesions',
svgWidth: 18,
svgHeight: 10,
bottomLabel: 'Measurements'
}]
};
},
toolbarButtons() {
// Check if the measure tools shall be disabled
const isToolDisabled = false; //!Template.instance().data.timepointApi;
const buttonData = [];
buttonData.push({
id: 'zoom',
title: 'Zoom',
classes: 'imageViewerTool',
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-zoom'
});
buttonData.push({
id: 'wwwc',
title: 'Levels',
classes: 'imageViewerTool',
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-levels'
});
buttonData.push({
id: 'pan',
title: 'Pan',
classes: 'imageViewerTool',
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-pan'
});
buttonData.push({
id: 'ellipticalRoi',
title: 'Ellipse',
classes: 'imageViewerTool',
iconClasses: 'fa fa-circle-o'
});
return buttonData;
},
extraToolbarButtons() {
// Check if the measure tools shall be disabled
const isToolDisabled = false; //!Template.instance().data.timepointApi.currentTimepointId;
const buttonData = [];
// TODO: Get real icons for CR / UN / EX
buttonData.push({
id: 'crTool',
title: 'CR Tool',
classes: 'imageViewerTool toolbarSectionButton',
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp',
disabled: isToolDisabled
});
buttonData.push({
id: 'unTool',
title: 'UN Tool',
classes: 'imageViewerTool toolbarSectionButton',
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp',
disabled: isToolDisabled
});
buttonData.push({
id: 'exTool',
title: 'EX Tool',
classes: 'imageViewerTool toolbarSectionButton',
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-measure-temp',
disabled: isToolDisabled
});
return buttonData;
}
});
Template.toolbarSection.events({
'click #toggleHUD'() {
const state = Session.get('measurementTableHudOpen');
Session.set('measurementTableHudOpen', !state);
}
});
Template.toolbarSection.onRendered(function() {
// Set disabled/enabled tool buttons that are set in toolManager
const states = toolManager.getToolDefaultStates();
const disabledToolButtons = states.disabledToolButtons;
const allToolbarButtons = $('#toolbar').find('button');
if (disabledToolButtons && disabledToolButtons.length > 0) {
for (var i = 0; i < allToolbarButtons.length; i++) {
const toolbarButton = allToolbarButtons[i];
$(toolbarButton).prop('disabled', false);
const index = disabledToolButtons.indexOf($(toolbarButton).attr('id'));
if (index !== -1) {
$(toolbarButton).prop('disabled', true);
}
}
}
});
@@ -0,0 +1,24 @@
@import "{design}/app"
.toolbarSection
theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness)
flex: 0 0 auto
height: $toolbarHeight
overflow: hidden
padding-top: 6px
position: relative
transition(height 300ms ease)
width: 100%
&.expanded
height: $toolbarHeight + $toolbarDrawerHeight
.toolbarSectionEntry
theme('color', '$defaultColor')
cursor: pointer
display: inline-block
theme('fill', '$defaultColor')
margin-top: 3px
min-width: 30px
theme('stroke', '$defaultColor')
text-align: center
@@ -0,0 +1,14 @@
<template name="viewer">
{{#if Template.subscriptionsReady}}
<div class="viewerDialogs">
{{>confirmDeleteDialog}}
{{>measurementTableHUD (clone this)}}
</div>
<div id="viewer">
{{>toolbarSection (clone this)}}
{{>viewerSection (clone this)}}
</div>
{{else}}
{{>loadingText}}
{{/if}}
</template>
@@ -0,0 +1,68 @@
import { OHIF } from 'meteor/ohif:core';
import { MeasurementsConfiguration } from 'meteor/ohif:measurements/both/configuration/measurements';
import { MeasurementHandlers } from 'meteor/ohif:measurements/client/lib/MeasurementHandlers';
Session.set('MeasurementsReady', false);
Template.viewer.onCreated(() => {
const MeasurementApi = MeasurementsConfiguration.getMeasurementsApi();
OHIF.viewer = OHIF.viewer || {};
const instance = Template.instance();
instance.data.state = new ReactiveDict();
instance.data.state.set('leftSidebar', Session.get('leftSidebar'));
instance.data.state.set('rightSidebar', Session.get('rightSidebar'));
const contentId = instance.data.contentId;
if (ViewerData[contentId].loadedSeriesData) {
log.info('Reloading previous loadedSeriesData');
OHIF.viewer.loadedSeriesData = ViewerData[contentId].loadedSeriesData;
} else {
log.info('Setting default ViewerData');
OHIF.viewer.loadedSeriesData = {};
ViewerData[contentId].loadedSeriesData = {};
Session.set('ViewerData', ViewerData);
}
Session.set('activeViewport', ViewerData[contentId].activeViewport || false);
// Update the ViewerStudies collection with the loaded studies
ViewerStudies.remove({});
instance.data.studies.forEach(study => {
study.selected = true;
study.displaySets = createStacks(study);
ViewerStudies.insert(study);
});
instance.data.measurementApi = new MeasurementApi();
const measurementsPromise = instance.data.measurementApi.retrieveMeasurements();
measurementsPromise.then(() => {
Session.set('MeasurementsReady', true);
instance.data.measurementApi.syncMeasurementsAndToolData();
})
});
Template.viewer.helpers({
dataSourcesReady() {
// TODO: Find a better way to do this
return Session.get('MeasurementsReady');
}
})
Template.viewer.events({
'CornerstoneToolsMeasurementAdded .imageViewerViewport'(event, instance, eventData) {
MeasurementHandlers.onAdded(event, instance, eventData);
},
'CornerstoneToolsMeasurementModified .imageViewerViewport'(event, instance, eventData) {
MeasurementHandlers.onModified(event, instance, eventData);
},
'CornerstoneToolsMeasurementRemoved .imageViewerViewport'(event, instance, eventData) {
MeasurementHandlers.onRemoved(event, instance, eventData);
}
});
@@ -0,0 +1,22 @@
@import "{design}/app"
#viewer
background-color: black
height: 100%
width: 100%
#imageViewerViewports
.viewportContainer
border: none !important
outline: 0 !important // Prevent blue outline in Chrome
&:hover
&.active
&:hover.active
border: none !important
outline: 0 !important // Prevent blue outline in Chrome
&:not(:last-child)
.removable
.imageViewerViewport
theme('border-right', '%s solid $uiBorderColor' % $uiBorderThickness)
@@ -0,0 +1,13 @@
<template name="viewerSection">
<div class="viewerSection">
<div class="sidebarMenu sidebar-left {{#if leftSidebarOpen}}sidebar-open{{/if}}">
{{>studyTimepointBrowser (clone this)}}
</div>
<div class="mainContent {{#if leftSidebarOpen}}sidebar-left-open{{/if}} {{#if rightSidebarOpen}}sidebar-right-open{{/if}}">
{{>viewerMain (clone this)}}
</div>
<div class="sidebarMenu sidebar-right {{#if rightSidebarOpen}}sidebar-open{{/if}}">
{{>measurementTable (clone this)}}
</div>
</div>
</template>
@@ -0,0 +1,19 @@
Template.viewerSection.events({
'transitionend .sidebarMenu'(event) {
if (!event.target.classList.contains('sidebarMenu')) {
return;
}
handleResize();
}
});
Template.viewerSection.helpers({
leftSidebarOpen() {
return Template.instance().data.state.get('leftSidebar');
},
rightSidebarOpen() {
return Template.instance().data.state.get('rightSidebar');
}
});
@@ -0,0 +1,78 @@
@import "{design}/app"
.viewerSection
display: flex
flex: 1
flex-flow: row nowrap
align-items: stretch
height: calc(100% - 78px);
width: 100%
.sidebarMenu
height: 100%
// required transformation to make inner fixed elements relative to this one
transform(scale(1))
transition($sidebarTransition)
.sidebar-option
height: 100%
position: fixed
transform(translateX(100%))
transition($sidebarTransition)
width: 100%
&.active
transform(translateX(0%))
.sidebar-left
theme('border-right', '%s solid $uiBorderColor' % $uiBorderThickness)
flex: 1
margin-left: - $studiesSidebarMenuWidth
max-width: $studiesSidebarMenuWidth
order: 1
&.sidebar-open
margin-left: 0
.mainContent
flex: 1
order: 2
width: 100%
height: 100%
overflow: hidden
transition($sidebarTransition)
.sidebar-right
flex: 1
margin-left: -12px
margin-right: - $lesionsSidebarMenuWidth
max-width: $lesionsSidebarMenuWidth
order: 3
padding-left: 6px
position: relative
&[data-timepoints="3"]
margin-right: - ($lesionsSidebarMenuWidth + 135.5px)
max-width: $lesionsSidebarMenuWidth + 135.5px
&[data-timepoints="4"]
margin-right: - ($lesionsSidebarMenuWidth + 270px)
max-width: $lesionsSidebarMenuWidth + 270px
&:before
theme('background-color', '$uiBorderColor')
content: ''
display: block
height: 100%
left: 5px
position: absolute
top: 0
width: $uiBorderThickness
&.sidebar-open
margin-right: 0
.studiesListedChanger
theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness)
padding: 20px 10px
text-align: center
+20
View File
@@ -0,0 +1,20 @@
<head>
<meta charset="utf-8">
<title>Lesion Tracker</title>
<meta name="description" content="Prototype viewer application for oncology">
<!-- Prevents page zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" type="image/png" href="images/logo.png" sizes="16x16 32x32 64x64">
<!--Best display for mobile devices-->
<meta http-equiv="cleartype" content="on">
<meta name="MobileOptimized" content="320">
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Make SVG work on IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Sanchez:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
@@ -0,0 +1,167 @@
// Define Baseline protocol
var proto = new HP.Protocol('LT_Baseline');
proto.locked = true;
var studyDescription = new HP.ProtocolMatchingRule();
studyDescription.required = true;
studyDescription.attribute = 'studyDescription';
studyDescription.constraint = {
contains: {
value: 'CT'
}
};
var isBaseline = new HP.ProtocolMatchingRule();
isBaseline.required = true;
isBaseline.attribute = 'timepointType';
isBaseline.constraint = {
equals: {
value: 'baseline'
}
};
proto.addProtocolMatchingRule(studyDescription);
proto.addProtocolMatchingRule(isBaseline);
var oneByOne = new HP.ViewportStructure('grid', {
rows: 1,
columns: 1
});
// Stage 1
var single = new HP.Viewport();
var baseline = new HP.StudyMatchingRule(true);
baseline.required = true;
baseline.attribute = 'timepointType';
baseline.constraint = {
equals: {
value: 'baseline'
}
};
var body = new HP.SeriesMatchingRule();
body.attribute = 'seriesDescription';
body.weight = 5;
body.constraint = {
contains: {
value: 'Body'
}
};
var chest = new HP.SeriesMatchingRule();
chest.attribute = 'seriesDescription';
chest.constraint = {
contains: {
value: 'CHEST'
}
};
single.studyMatchingRules.push(baseline);
single.seriesMatchingRules.push(body);
single.seriesMatchingRules.push(chest);
var first = new HP.Stage(oneByOne, 'oneByOne');
first.viewports.push(single);
proto.addStage(first);
HP.lesionTrackerBaselineProtocol = proto;
HP.lesionTrackerBaselineProtocol.id = 'lesionTrackerBaselineProtocol';
// Define Followup Protocol
var proto = new HP.Protocol('LT_BaselineFollowup');
proto.locked = true;
var studyDescription = new HP.ProtocolMatchingRule();
studyDescription.required = true;
studyDescription.attribute = 'studyDescription';
studyDescription.constraint = {
contains: {
value: 'CT'
}
};
var isFollowup = new HP.ProtocolMatchingRule();
isFollowup.required = true;
isFollowup.attribute = 'timepointType';
isFollowup.constraint = {
equals: {
value: 'followup'
}
};
proto.addProtocolMatchingRule(studyDescription);
proto.addProtocolMatchingRule(isFollowup);
var oneByTwo = new HP.ViewportStructure('grid', {
rows: 1,
columns: 2
});
// Stage 1
var left = new HP.Viewport();
var right = new HP.Viewport();
var baseline = new HP.StudyMatchingRule(true);
baseline.required = true;
baseline.attribute = 'timepointType';
baseline.constraint = {
equals: {
value: 'baseline'
}
};
var followup = new HP.StudyMatchingRule();
followup.required = true;
followup.attribute = 'timepointType';
followup.constraint = {
equals: {
value: 'followup'
}
};
var body = new HP.SeriesMatchingRule();
body.attribute = 'seriesDescription';
body.weight = 5;
body.constraint = {
contains: {
value: 'Body'
}
};
var chest = new HP.SeriesMatchingRule();
chest.attribute = 'seriesDescription';
chest.constraint = {
contains: {
value: 'CHEST'
}
};
left.studyMatchingRules.push(baseline);
//left.seriesMatchingRules.push(body);
//left.seriesMatchingRules.push(chest);
right.studyMatchingRules.push(followup);
//right.seriesMatchingRules.push(body);
//right.seriesMatchingRules.push(chest);
var first = new HP.Stage(oneByTwo, 'oneByTwo');
first.viewports.push(left);
first.viewports.push(right);
proto.addStage(first);
HP.lesionTrackerFollowupProtocol = proto;
HP.lesionTrackerFollowupProtocol.id = 'lesionTrackerFollowupProtocol';
Meteor.call('removeHangingProtocolByID', HP.lesionTrackerBaselineProtocol.id, function() {
HangingProtocols.insert(HP.lesionTrackerBaselineProtocol);
});
Meteor.call('removeHangingProtocolByID', HP.lesionTrackerFollowupProtocol.id, function() {
HangingProtocols.insert(HP.lesionTrackerFollowupProtocol);
});
HangingProtocols.insert(HP.defaultProtocol);
+3
View File
@@ -0,0 +1,3 @@
// Create application logger using loglevel
// https://atmospherejs.com/spacejamio/loglevel
log = loglevel.createAppLogger('PETSUVMeasurements', defaultLevel = 'info');
+55
View File
@@ -0,0 +1,55 @@
Session.setDefault('ViewerData', {});
// verifyEmail controls whether emailVerification template will be rendered or not
var verifyEmail = Meteor.settings && Meteor.settings.public && Meteor.settings.public.verifyEmail || false;
Router.configure({
layoutTemplate: 'layout',
loadingTemplate: 'layout'
});
Router.onBeforeAction('loading');
var data = {
additionalTemplates: []
};
var routerOptions = {
data: data
};
Router.route('/', function() {
// Check user is logged in
if (Meteor.user() && Meteor.userId()) {
if (verifyEmail && Meteor.user().emails && !Meteor.user().emails[0].verified) {
this.render('emailVerification', routerOptions);
} else {
Session.set('activeContentId', 'studylistTab');
this.render('app', routerOptions);
}
} else {
this.render('entrySignIn', routerOptions);
}
});
Router.route('/viewer/timepoints/:_id', {
layoutTemplate: 'layout',
name: 'viewer',
onBeforeAction: function() {
var timepointId = this.params._id;
this.render('app', routerOptions);
openNewTabWithTimepoint(timepointId);
}
});
Router.onBeforeAction(function() {
if (!Meteor.userId() && !Meteor.loggingIn()) {
this.render('entrySignIn');
} else {
this.next();
}
}, {
except: ['entrySignIn', 'entrySignUp', 'forgotPassword', 'resetPassword']
});