Add some WIP changes to Lesion Tracker dialogs
This commit is contained in:
Erik Ziegler committed
1 parent
e4c24608af
commit
da197368bf
37 files changed
+915
-595
No files matched your search
+37
@@ -0,0 +1,37 @@
|
||||
<template name="lesionLocationDialog">
|
||||
<div id="lesionLocationDialog">
|
||||
<div class="dialogHeader">
|
||||
<h4>Select Lesion Location</h4>
|
||||
</div>
|
||||
<div class="dialogContent">
|
||||
<div class="lesionLocation">
|
||||
<label>Lesion Location</label>
|
||||
<select class="selectLesionLocation">
|
||||
<option value="-1"></option>
|
||||
{{ #each lesionLocations}}
|
||||
<option value='{{_id}}'>{{location}}</option>
|
||||
{{ /each}}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="lesionLocationRelabelDialog">
|
||||
<div class="dialogHeader">
|
||||
<h4>Change Lesion Location</h4>
|
||||
</div>
|
||||
<a></a>
|
||||
<div class="dialogContent">
|
||||
<div class="lesionLocation">
|
||||
<label>Lesion Location</label>
|
||||
<select class="selectLesionLocation">
|
||||
<option value="-1"></option>
|
||||
{{ #each lesionLocations}}
|
||||
<option value='{{_id}}' selected={{selected}}>{{location}}</option>
|
||||
{{ /each}}
|
||||
</select>
|
||||
</div>
|
||||
<button id="removeLesion" class="btn btn-link">Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
+247
@@ -0,0 +1,247 @@
|
||||
function closeHandler(dialog) {
|
||||
// Hide the lesion dialog
|
||||
$(dialog).css('display', 'none');
|
||||
|
||||
// Remove the backdrop
|
||||
$(".removableBackdrop").remove();
|
||||
}
|
||||
|
||||
// This event sets lesion number for new lesion
|
||||
function setLesionNumberCallback(measurementData, eventData, doneCallback) {
|
||||
// Get the current element's timepointID from the study date metadata
|
||||
var element = eventData.element;
|
||||
var enabledElement = cornerstone.getEnabledElement(element);
|
||||
var imageId = enabledElement.image.imageId;
|
||||
|
||||
var study = cornerstoneTools.metaData.get('study', imageId);
|
||||
var timepoint = Timepoints.findOne({timepointName: study.studyDate});
|
||||
if (!timepoint) {
|
||||
return;
|
||||
}
|
||||
|
||||
measurementData.timepointID = timepoint.timepointID;
|
||||
|
||||
// Get a lesion number for this lesion, depending on whether or not the same lesion previously
|
||||
// exists at a different timepoint
|
||||
var lesionNumber = measurementManagerDAL.getNewLesionNumber(measurementData.timepointID, isTarget=true);
|
||||
measurementData.lesionNumber = lesionNumber;
|
||||
|
||||
// Set lesion number
|
||||
doneCallback(lesionNumber);
|
||||
}
|
||||
|
||||
// This event determines whether or not to show the lesion dialog
|
||||
// If there already exists a lesion with this specific lesion number,
|
||||
// related to the chosen location.
|
||||
function getLesionLocationCallback(measurementData, eventData) {
|
||||
Template.lesionLocationDialog.measurementData = measurementData;
|
||||
|
||||
// Reset the doneCallback saved in the template so we don't call the change event's done callback
|
||||
Template.lesionLocationDialog.doneCallback = undefined;
|
||||
|
||||
// Get the lesion location dialog
|
||||
var dialog = $("#lesionLocationDialog");
|
||||
Template.lesionLocationDialog.dialog = dialog;
|
||||
|
||||
// Show the backdrop
|
||||
UI.render(Template.removableBackdrop, document.body);
|
||||
|
||||
// Make sure the context menu is closed when the user clicks away
|
||||
$(".removableBackdrop").one('mousedown touchstart', function() {
|
||||
closeHandler(dialog);
|
||||
});
|
||||
|
||||
// Select the first option for now
|
||||
var selector = dialog.find("select.selectLesionLocation");
|
||||
selector.find("option:first").prop("selected", true);
|
||||
|
||||
// Find out if this lesion number is already added in the lesion manager for another timepoint
|
||||
// If it is, stop here because we don't need the dialog.
|
||||
var locationUID = measurementManagerDAL.lesionNumberExists(measurementData);
|
||||
if (locationUID) {
|
||||
// Add an ID value to the tool data to link it to the Measurements collection
|
||||
measurementData.id = 'notready';
|
||||
|
||||
measurementData.locationUID = locationUID;
|
||||
measurementManagerDAL.updateTimepointData(measurementData);
|
||||
closeHandler();
|
||||
return;
|
||||
}
|
||||
// If it isn't, continue to open the dialog and have the user choose a lesion location
|
||||
|
||||
// Show the lesion location dialog above
|
||||
var dialogProperty = {
|
||||
top: eventData.currentPoints.page.y - dialog.outerHeight() - 40,
|
||||
left: eventData.currentPoints.page.x - dialog.outerWidth() / 2,
|
||||
display: 'block'
|
||||
};
|
||||
|
||||
// Device is touch device or not
|
||||
// If device is touch device, set position center of screen vertically and horizontally
|
||||
if (isTouchDevice()) {
|
||||
// add dialogMobile class to provide a black,transparent background
|
||||
dialog.addClass("dialogMobile");
|
||||
dialogProperty.top = 0;
|
||||
dialogProperty.left = 0;
|
||||
dialogProperty.right = 0;
|
||||
dialogProperty.bottom = 0;
|
||||
}
|
||||
|
||||
dialog.css(dialogProperty);
|
||||
}
|
||||
|
||||
function changeLesionLocationCallback(measurementData, eventData, doneCallback) {
|
||||
Template.lesionLocationDialog.measurementData = measurementData;
|
||||
Template.lesionLocationDialog.doneCallback = doneCallback;
|
||||
|
||||
// Get the lesion location dialog
|
||||
var dialog = $("#lesionLocationRelabelDialog");
|
||||
Template.lesionLocationDialog.dialog = dialog;
|
||||
|
||||
// Show the backdrop
|
||||
UI.render(Template.removableBackdrop, document.body);
|
||||
|
||||
// Make sure the context menu is closed when the user clicks away
|
||||
$(".removableBackdrop").one('mousedown touchstart', function() {
|
||||
closeHandler(dialog);
|
||||
});
|
||||
|
||||
// Show the lesion location dialog above
|
||||
var dialogProperty = {
|
||||
top: eventData.currentPoints.page.y - dialog.outerHeight() - 40,
|
||||
left: eventData.currentPoints.page.x - dialog.outerWidth() / 2,
|
||||
display: 'block'
|
||||
};
|
||||
|
||||
// Device is touch device or not
|
||||
// If device is touch device, set position center of screen vertically and horizontally
|
||||
if (isTouchDevice()) {
|
||||
// add dialogMobile class to provide a black,transparent background
|
||||
dialog.addClass("dialogMobile");
|
||||
dialogProperty.top = 0;
|
||||
dialogProperty.left = 0;
|
||||
dialogProperty.right = 0;
|
||||
dialogProperty.bottom = 0;
|
||||
}
|
||||
|
||||
dialog.css(dialogProperty);
|
||||
|
||||
var measurement = Measurements.findOne(measurementData.id);
|
||||
if (!measurement) {
|
||||
return;
|
||||
}
|
||||
|
||||
var currentLocation = LesionLocations.findOne({
|
||||
id: measurement.locationId
|
||||
});
|
||||
|
||||
LesionLocations.update({},
|
||||
{$set: {selected: false}},
|
||||
{ multi: true });
|
||||
|
||||
LesionLocations.update(currentLocation._id, {
|
||||
$set: {
|
||||
selected: true
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var config = {
|
||||
setLesionNumberCallback: setLesionNumberCallback,
|
||||
getLesionLocationCallback: getLesionLocationCallback,
|
||||
changeLesionLocationCallback: changeLesionLocationCallback
|
||||
};
|
||||
|
||||
cornerstoneTools.lesion.setConfiguration(config);
|
||||
|
||||
Template.lesionLocationDialog.events({
|
||||
'change .selectLesionLocation': function(e) {
|
||||
var measurementData = Template.lesionLocationDialog.measurementData;
|
||||
var doneCallback = Template.lesionLocationDialog.doneCallback;
|
||||
var dialog = Template.lesionLocationDialog.dialog;
|
||||
|
||||
// Get the current value of the selector
|
||||
var selectedOptionId = e.currentTarget.value;
|
||||
|
||||
// If the selected option is still the default (-1)
|
||||
// then stop here
|
||||
if (selectedOptionId < 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get selected location data
|
||||
var locationObj = LesionLocations.findOne({_id: selectedOptionId});
|
||||
|
||||
var id;
|
||||
var existingLocation = PatientLocations.findOne({location: locationObj.location});
|
||||
if (existingLocation) {
|
||||
id = existingLocation._id;
|
||||
} else {
|
||||
// Adds location data to PatientLocation and retrieve the location ID
|
||||
id = PatientLocations.insert({
|
||||
location: locationObj.location,
|
||||
locationId: locationObj._id
|
||||
});
|
||||
}
|
||||
|
||||
// Add an ID value to the tool data to link it to the Measurements collection
|
||||
if (!measurementData.id) {
|
||||
measurementData.id = 'notready';
|
||||
|
||||
// Link locationUID with active lesion measurementData
|
||||
measurementData.locationId = locationObj.id;
|
||||
measurementData.locationUID = id;
|
||||
|
||||
/// Set the isTarget value to true, since this is the target-lesion dialog callback
|
||||
measurementData.isTarget = true;
|
||||
|
||||
// Adds lesion data to timepoints array
|
||||
measurementManagerDAL.addLesionData(measurementData);
|
||||
} else {
|
||||
Measurements.update(measurementData.id, {
|
||||
$set: {
|
||||
location: locationObj.location,
|
||||
locationId: locationObj.id,
|
||||
locationUID: id
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Close the dialog
|
||||
closeHandler(dialog);
|
||||
|
||||
if (doneCallback && typeof doneCallback === 'function') {
|
||||
doneCallback(measurementData);
|
||||
}
|
||||
},
|
||||
'click #removeLesion': function() {
|
||||
var measurementData = Template.lesionLocationDialog.measurementData;
|
||||
var doneCallback = Template.lesionLocationDialog.doneCallback;
|
||||
var dialog = Template.lesionLocationDialog.dialog;
|
||||
|
||||
if (doneCallback && typeof doneCallback === 'function') {
|
||||
var deleteTool = true;
|
||||
doneCallback(measurementData, deleteTool);
|
||||
}
|
||||
|
||||
closeHandler(dialog);
|
||||
},
|
||||
'click #btnCloseLesionPopup': function() {
|
||||
var dialog = Template.lesionLocationDialog.dialog;
|
||||
closeHandler(dialog);
|
||||
},
|
||||
'keypress #lesionLocationDialog, keypress #lesionLocationRelabelDialog': function(e) {
|
||||
var dialog = Template.lesionLocationDialog.dialog;
|
||||
|
||||
// If Enter is pressed, close the dialog
|
||||
if (e.which === 13) {
|
||||
closeHandler(dialog);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Template.lesionLocationDialog.helpers({
|
||||
'lesionLocations': function() {
|
||||
return LesionLocations.find();
|
||||
}
|
||||
});
|
||||
+40
@@ -0,0 +1,40 @@
|
||||
#lesionLocationDialog, #lesionLocationRelabelDialog
|
||||
display: none
|
||||
position: absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
left: 0
|
||||
right: 0
|
||||
z-index: 100
|
||||
width: 300px
|
||||
border-radius: 5px
|
||||
padding: 10px 20px 10px 20px
|
||||
background-color: rgba(255,255,255,1)
|
||||
|
||||
/* dialogMobile is added to #lesionLocationDialog when touchDevices is detected */
|
||||
.dialogMobile
|
||||
margin: 0 auto
|
||||
float: none
|
||||
background-color: rgba(0,0,0,0.5)
|
||||
text-align: center
|
||||
|
||||
#closeLesionPopup
|
||||
outline: none
|
||||
border: none
|
||||
background-color: transparent
|
||||
|
||||
#selectLesionLocation
|
||||
margin-top: 5px
|
||||
|
||||
.dialogContent
|
||||
margin-bottom: 10px
|
||||
|
||||
#removeLesion
|
||||
outline: none
|
||||
text-decoration: none
|
||||
|
||||
#lesionLocationDialog
|
||||
height: 110px
|
||||
|
||||
#lesionLocationRelabelDialog
|
||||
height: 125px
|
||||
@@ -0,0 +1,29 @@
|
||||
<template name="lesionTable">
|
||||
<div id="lesionTableContainer">
|
||||
<div id="dragbar"></div>
|
||||
<div id="lesionTableWrapper">
|
||||
<table class="table table-striped noselect lesionTable" id="tblLesion">
|
||||
<thead>
|
||||
<tr>
|
||||
<th id="thNumber">Lesion #</th>
|
||||
<th id="thLocation">Location</th>
|
||||
<th id="thTarget">Target</th>
|
||||
<!--Each time point name as a column-->
|
||||
{{ #each timepoints }}
|
||||
{{ >lesionTableTimepointHeader }}
|
||||
{{ /each }}
|
||||
<!--What is this for?-->
|
||||
<!--<th id="thSpacer"> </th>-->
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!--Each measurement as row-->
|
||||
{{ #each measurement }}
|
||||
{{ >lesionTableRow }}
|
||||
{{ /each }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,324 @@
|
||||
/**
|
||||
* Activates a set of lesions when lesion table row is clicked
|
||||
*
|
||||
* @param measurementId The unique key for a specific Measurement
|
||||
*/
|
||||
activateLesion = function(measurementId, templateData) {
|
||||
// Find Measurement data for this lesion
|
||||
var measurementData = Measurements.findOne(measurementId);
|
||||
|
||||
// If there is no measurement with this ID, stop here
|
||||
if (!measurementData) {
|
||||
log.warn('No Measurements entry associated to an ID in a lesion table row');
|
||||
return;
|
||||
}
|
||||
|
||||
// Get the timepoint data from this Measurement
|
||||
var timepoints = measurementData.timepoints;
|
||||
|
||||
// Get all non-dummy timepoint entries in the Measurement
|
||||
// TODO=Re-evaluate this approach to populating viewports with timepoints
|
||||
// What is the desired behaviour here?
|
||||
var timepointsWithEntries = [];
|
||||
Object.keys(timepoints).forEach(function(key) {
|
||||
var timepoint = timepoints[key];
|
||||
|
||||
if (timepoint.imageId === "" ||
|
||||
timepoint.studyInstanceUid === "" ||
|
||||
timepoint.seriesInstanceUid === "") {
|
||||
return;
|
||||
}
|
||||
|
||||
timepointsWithEntries.push(timepoint);
|
||||
});
|
||||
|
||||
// If there are no non-dummy timepoint entries, stop here
|
||||
if (!timepointsWithEntries.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Loop through the viewports and display each timepoint
|
||||
$(".imageViewerViewport").each(function(viewportIndex, element) {
|
||||
// Stop if we run out of timepoints before viewports
|
||||
if (viewportIndex >= timepointsWithEntries.length) {
|
||||
// Update the element anyway, to remove any other highlights that are present
|
||||
deactivateAllToolData(element, 'lesion');
|
||||
deactivateAllToolData(element, 'nonTarget');
|
||||
cornerstone.updateImage(element);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// Find measurements related to the Nth timepoint
|
||||
// TODO=Re-evaluate this approach to populating viewports with timepoints
|
||||
// What is the desired behaviour here?
|
||||
var measurementAtTimepoint = timepointsWithEntries[viewportIndex];
|
||||
|
||||
// Find the image that is currently in this viewport
|
||||
var enabledElement = cornerstone.getEnabledElement(element);
|
||||
if (!enabledElement || !enabledElement.image) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If there is no measurement data to display, stop here
|
||||
if (!measurementAtTimepoint) {
|
||||
// Update the element anyway, to remove any other highlights that are present
|
||||
deactivateAllToolData(element, 'lesion');
|
||||
deactivateAllToolData(element, 'nonTarget');
|
||||
cornerstone.updateImage(element);
|
||||
return;
|
||||
}
|
||||
|
||||
// Check which study and series are required to display the measurement at this timepoint
|
||||
var requiredSeriesData = {
|
||||
seriesInstanceUid: measurementAtTimepoint.seriesInstanceUid,
|
||||
studyInstanceUid: measurementAtTimepoint.studyInstanceUid
|
||||
};
|
||||
|
||||
// Check if the study / series we need is already the one in the viewport
|
||||
var currentSeriesData = OHIF.viewer.loadedSeriesData[viewportIndex];
|
||||
if (currentSeriesData.seriesInstanceUid === measurementAtTimepoint.seriesInstanceUid &&
|
||||
currentSeriesData.studyInstanceUid === measurementAtTimepoint.studyInstanceUid) {
|
||||
// If it is, activate the measurements in this viewport and stop here
|
||||
activateMeasurements(element, measurementId, templateData, viewportIndex);
|
||||
return;
|
||||
}
|
||||
|
||||
// Otherwise, re-render the viewport with the required study/series, then
|
||||
// add an onRendered callback to activate the measurements
|
||||
rerenderViewportWithNewSeries(element, requiredSeriesData, function(element) {
|
||||
activateMeasurements(element, measurementId, templateData, viewportIndex);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns timepoint object based on timepoint id of the enabled element
|
||||
*
|
||||
* @param timepoints
|
||||
* @param enabledElement
|
||||
* @returns {*|{}} Timepoint object based on timepoint id of the enabled element (or an empty Object)
|
||||
*/
|
||||
function getTimepointObject(imageId) {
|
||||
var study = cornerstoneTools.metaData.get('study', imageId);
|
||||
return Timepoints.findOne({timepointName: study.studyDate});
|
||||
}
|
||||
|
||||
/**
|
||||
* Switch to the image of the correct image index
|
||||
* Activate the selected measurement on the switched image (color to be green)
|
||||
* Deactivate all other measurements on the switched image (color to be white)
|
||||
*/
|
||||
function activateMeasurements(element, measurementId, templateData, viewportIndex) {
|
||||
// TODO=Switch this to use the new CornerstoneToolMeasurementModified event,
|
||||
// Once it has 'modified on activation' set up
|
||||
|
||||
var enabledElement = cornerstone.getEnabledElement(element);
|
||||
var imageId = enabledElement.image.imageId;
|
||||
var timepointData = getTimepointObject(imageId);
|
||||
var measurementData = Measurements.findOne(measurementId);
|
||||
|
||||
var measurementAtTimepoint = measurementData.timepoints[timepointData.timepointID];
|
||||
if (!measurementAtTimepoint) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If type is active, load image and activate lesion
|
||||
// If type is inactive, update lesions of enabledElement as inactive
|
||||
//TODO: !stackData.currentImageIdIndex returns incorrect value
|
||||
// Get loadedSeriesData currentImageIdIndex from ViewerData
|
||||
var contentId = templateData.contentId;
|
||||
var viewerData = ViewerData[contentId];
|
||||
var elementCurrentImageIdIndex = viewerData.loadedSeriesData[viewportIndex].currentImageIdIndex;
|
||||
|
||||
var stackToolDataSource = cornerstoneTools.getToolState(element, 'stack');
|
||||
var stackData = stackToolDataSource.data[0];
|
||||
var imageIds = stackData.imageIds;
|
||||
var imageIdIndex = imageIds.indexOf(measurementAtTimepoint.imageId);
|
||||
|
||||
if (imageIdIndex < 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (imageIdIndex === elementCurrentImageIdIndex){
|
||||
activateTool(element, measurementData, timepointData.timepointID);
|
||||
} else {
|
||||
cornerstone.loadAndCacheImage(imageIds[imageIdIndex]).then(function(image) {
|
||||
cornerstone.displayImage(element, image);
|
||||
activateTool(element, measurementData, timepointData.timepointID);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Activates a specific tool data instance and deactivates all other
|
||||
* target and non-target measurement data
|
||||
*
|
||||
* @param element
|
||||
* @param measurementData
|
||||
* @param timepointID
|
||||
*/
|
||||
function activateTool(element, measurementData, timepointID) {
|
||||
deactivateAllToolData(element, 'lesion');
|
||||
deactivateAllToolData(element, 'nonTarget');
|
||||
|
||||
var toolType = measurementData.isTarget ? 'lesion' : 'nonTarget';
|
||||
var toolData = cornerstoneTools.getToolState(element, toolType);
|
||||
if (!toolData) {
|
||||
return;
|
||||
}
|
||||
|
||||
var measurementAtTimepoint = measurementData.timepoints[timepointID];
|
||||
|
||||
for (var i = 0; i < toolData.data.length; i++) {
|
||||
data = toolData.data[i];
|
||||
|
||||
// When click a row of table measurements, measurement will be active and color will be green
|
||||
// TODO= Remove this with the measurementId once it is in the tool data
|
||||
if (data.seriesInstanceUid === measurementAtTimepoint.seriesInstanceUid &&
|
||||
data.studyInstanceUid === measurementAtTimepoint.studyInstanceUid &&
|
||||
data.lesionNumber === measurementData.lesionNumber &&
|
||||
data.isTarget == measurementData.isTarget) {
|
||||
|
||||
data.active = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
cornerstone.updateImage(element);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets all tool data entries value for 'active' to false
|
||||
* This is used to remove the active color on entire sets of tools
|
||||
*
|
||||
* @param element The Cornerstone element that is being used
|
||||
* @param toolType The tooltype of the tools that will be deactivated
|
||||
*/
|
||||
function deactivateAllToolData(element, toolType) {
|
||||
var toolData = cornerstoneTools.getToolState(element, toolType);
|
||||
if (!toolData) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (var i = 0; i < toolData.data.length; i++) {
|
||||
var data = toolData.data[i];
|
||||
data.active = false;
|
||||
}
|
||||
}
|
||||
|
||||
Template.lesionTable.helpers({
|
||||
'measurement': function() {
|
||||
return Measurements.find({}, {sort: {number: 1}});
|
||||
},
|
||||
'timepoints': function() {
|
||||
return Timepoints.find({}, {sort: {timepointName: 1}});
|
||||
}
|
||||
});
|
||||
|
||||
Template.lesionTable.events({
|
||||
'click table#tblLesion tbody tr': function(e, template) {
|
||||
// Retrieve the lesion id from the DOM data for this row
|
||||
var measurementId = $(e.currentTarget).data('measurementid');
|
||||
|
||||
// Set background color of selected row
|
||||
$(e.currentTarget).addClass("selectedRow").siblings().removeClass("selectedRow");
|
||||
|
||||
activateLesion(measurementId,template.data);
|
||||
},
|
||||
|
||||
'mousedown div#dragbar': function(e, template) {
|
||||
var pY = e.pageY;
|
||||
var draggableParent = $(e.currentTarget).parent();
|
||||
var startHeight = draggableParent.height();
|
||||
template.dragging.set(true);
|
||||
|
||||
$(document).on('mouseup', function(e) {
|
||||
template.dragging.set(false);
|
||||
console.log(e.pageY);
|
||||
$(document).off('mouseup').off('mousemove');
|
||||
});
|
||||
|
||||
$(document).on('mousemove', function(e) {
|
||||
var topPosition = e.pageY - pY;
|
||||
draggableParent.css({
|
||||
top: topPosition,
|
||||
height: startHeight - topPosition
|
||||
});
|
||||
|
||||
var viewportAndLesionTableHeight = $("#viewportAndLesionTable").height();
|
||||
var newPercentageHeightofLesionTable = (startHeight - topPosition) / viewportAndLesionTableHeight * 100;
|
||||
var newPercentageHeightofViewermain = 100 - newPercentageHeightofLesionTable;
|
||||
$(".viewerMain").height(newPercentageHeightofViewermain+"%");
|
||||
|
||||
// Resize viewport
|
||||
resizeViewportElements();
|
||||
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
Template.lesionTable.onCreated(function(){
|
||||
this.dragging = new ReactiveVar(false);
|
||||
// Bind document mouse events
|
||||
// $(document).on('mousemove', dragbarMove);
|
||||
});
|
||||
|
||||
Template.lesionTable.onDestroyed(function(){
|
||||
|
||||
});
|
||||
|
||||
// Track ViewerData to get active timepoints
|
||||
// Put a visual indicator(<) in timepoint header in lesion table for active timepoints
|
||||
// timepointLoaded property is used to put indicator for loaded timepoints in viewport
|
||||
Tracker.autorun(function () {
|
||||
var allViewerData = Session.get('ViewerData');
|
||||
var contentId = Session.get('activeContentId');
|
||||
if(allViewerData && contentId) {
|
||||
var viewerData = allViewerData[contentId];
|
||||
if (viewerData) {
|
||||
// Get study dates of imageViewerViewport elements
|
||||
var loadedStudyDates = {
|
||||
patientId: "",
|
||||
dates: []
|
||||
};
|
||||
|
||||
$(".imageViewerViewport").each(function(viewportIndex, element) {
|
||||
var enabledElement = cornerstone.getEnabledElement(element);
|
||||
if(enabledElement && enabledElement.image){
|
||||
var imageId = enabledElement.image.imageId;
|
||||
var study = cornerstoneTools.metaData.get('study', imageId);
|
||||
var studyDate = study.studyDate;
|
||||
loadedStudyDates.patientId = study.patientId;
|
||||
// Check studyDate is added before
|
||||
if (loadedStudyDates.dates.indexOf(studyDate) < 0) {
|
||||
loadedStudyDates.dates.push(studyDate);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
// If study date is loaded into viewport, set timepointLoaded property in Timepoints collection as true
|
||||
// Else set timepointLoaded property as false
|
||||
if(loadedStudyDates.dates.length) {
|
||||
var timepoints = Timepoints.find({patientId: loadedStudyDates.patientId}).fetch();
|
||||
timepoints.forEach(function(timepoint){
|
||||
var timepointLoaded = false;
|
||||
if(loadedStudyDates.dates.indexOf(timepoint.timepointName) > -1) {
|
||||
timepointLoaded = true;
|
||||
}
|
||||
|
||||
Timepoints.update(timepoint._id,{
|
||||
$set: {
|
||||
timepointLoaded: timepointLoaded
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
@@ -0,0 +1,94 @@
|
||||
#lesionTableContainer
|
||||
width: 100%
|
||||
height: 16%
|
||||
background-color: #000000
|
||||
|
||||
#dragbar
|
||||
width: 100%
|
||||
height: 3px
|
||||
postion: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
background-color: #666666
|
||||
cursor: col-resize
|
||||
|
||||
#lesionTableWrapper
|
||||
position: relative
|
||||
width: 100%
|
||||
height: 100%
|
||||
margin: 0 auto
|
||||
|
||||
.lesionTable
|
||||
|
||||
td, th
|
||||
border: 1px solid #FFFFFF
|
||||
border-collapse: collapse
|
||||
width: 100px
|
||||
|
||||
td.lesionNumber, th#thNumber
|
||||
width: 70px
|
||||
|
||||
td.location, th#thLocation
|
||||
width: 250px
|
||||
|
||||
td.target, th#thTarget
|
||||
width: 70px
|
||||
|
||||
|
||||
thead
|
||||
width: 100%
|
||||
height: 40px
|
||||
display: block
|
||||
|
||||
tr
|
||||
width: 100%
|
||||
height: 40px
|
||||
|
||||
th
|
||||
border-bottom-width: 0
|
||||
font-weight: normal
|
||||
color: #FFFFFF
|
||||
line-height: 15px
|
||||
text-align: center
|
||||
margin: 0
|
||||
padding: 5px
|
||||
background-color: #424242
|
||||
vertical-align: middle
|
||||
|
||||
tbody
|
||||
display: block
|
||||
position: absolute
|
||||
top: 40px
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
overflow: auto
|
||||
width: 100%
|
||||
|
||||
|
||||
tr.selectedRow
|
||||
background: #F5F5F5 !important
|
||||
color: #000000 !important
|
||||
|
||||
tr.lesionTableRow
|
||||
width: 100%
|
||||
|
||||
&:nth-child(even)
|
||||
background: #888
|
||||
&:nth-child(odd)
|
||||
background: #BBB
|
||||
&:hover
|
||||
cursor: pointer
|
||||
background-color: #009BD2
|
||||
color: white
|
||||
|
||||
td
|
||||
border-bottom-width: 0
|
||||
margin: 0
|
||||
padding: 5px
|
||||
line-height: 15px
|
||||
|
||||
&.lesionNumber, &.target, &.lesionTableTimepointCell
|
||||
text-align: center
|
||||
@@ -0,0 +1,11 @@
|
||||
<template name="lesionTableRow">
|
||||
<tr id="{{lesionNumber}}" class="lesionTableRow" data-measurementid="{{_id}}">
|
||||
<td class='lesionNumber'>{{number}}</td>
|
||||
<td class='location'>{{location}}</td>
|
||||
<td class='target'>{{#if isTarget}} Y {{else}} N {{/if}}</td>
|
||||
<!--Each time point as a column-->
|
||||
{{# each timepoints }}
|
||||
{{> lesionTableTimepointCell}}
|
||||
{{/ each }}
|
||||
</tr>
|
||||
</template>
|
||||
@@ -0,0 +1,5 @@
|
||||
Template.lesionTableRow.helpers({
|
||||
'timepoints': function() {
|
||||
return Timepoints.find({}, {sort: {timepointName: 1}});
|
||||
}
|
||||
});
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
<template name="lesionTableTimepointCell">
|
||||
<td class="lesionTableTimepointCell">{{longestDiameter}}</td>
|
||||
</template>
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
Template.lesionTableTimepointCell.helpers({
|
||||
'longestDiameter': function() {
|
||||
// Search Measurements by lesion and timepoint
|
||||
var lesionData = Template.parentData(1);
|
||||
if (!lesionData ||
|
||||
!lesionData.timepoints ||
|
||||
!lesionData.timepoints[this.timepointID]) {
|
||||
return;
|
||||
}
|
||||
|
||||
return lesionData.timepoints[this.timepointID].longestDiameter;
|
||||
}
|
||||
});
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
<template name="lesionTableTimepointHeader">
|
||||
<th class="lesionTableTimepointCell">
|
||||
{{formatDA timepointName "MM/DD/YYYY"}}
|
||||
{{#if timepointTextFound}}
|
||||
{{timepointText}}
|
||||
{{/if}}
|
||||
{{#if timepointLoaded }}<span class="timepointIndicator"><</span> {{/if}}
|
||||
</th>
|
||||
</template>
|
||||
+104
@@ -0,0 +1,104 @@
|
||||
Template.lesionTableTimepointHeader.events({
|
||||
'click th': function(e, template){
|
||||
|
||||
var parentPosition = getPosition(e.currentTarget);
|
||||
var cellText = e.currentTarget.innerText;
|
||||
// Remove spaces in string
|
||||
cellText = cellText.replace(/\s/g, ''); // Remove spaces
|
||||
cellText = cellText.replace('<', ''); // Remove <
|
||||
var splitCellText = cellText.split('/');
|
||||
var dateStr = splitCellText[2].replace(/\D/g,'') + "" + splitCellText[0].replace(/\D/g,'') + ""+splitCellText[1].replace(/\D/g,''); // Remove non-digit chars
|
||||
|
||||
// Check patient has a timepointText as Baseline
|
||||
var patientId = template.data.patientId;
|
||||
|
||||
// Open popup
|
||||
var timepointTextDialog = $("#timepointTextDialog");
|
||||
var dialogDisplay = timepointTextDialog.css("display");
|
||||
if(dialogDisplay === "none") {
|
||||
|
||||
var isBaselineInCollection = Timepoints.findOne({patientId: patientId, timepointName: dateStr, timepointText: "Baseline"});
|
||||
|
||||
// If isBaselineInCollection is true, "Baseline" is found in collection for patient and set checkbox as checked
|
||||
if (isBaselineInCollection) {
|
||||
// Set checkbox as checked
|
||||
$('#checkBoxBaseline').prop('checked', true);
|
||||
} else {
|
||||
// Set checkbox as unchecked
|
||||
$('#checkBoxBaseline').prop('checked', false);
|
||||
}
|
||||
|
||||
// Open dialog
|
||||
var dialogProperty = {
|
||||
top: parentPosition.y - 30,
|
||||
left: parentPosition.x,
|
||||
display: 'block'
|
||||
};
|
||||
timepointTextDialog.css(dialogProperty);
|
||||
|
||||
} else if(dialogDisplay === "block") {
|
||||
|
||||
// Get timepoints of patient
|
||||
// Set timepointText as Baseline for selected timepoint
|
||||
var timepoints = Timepoints.find({patientId: patientId}).fetch();
|
||||
|
||||
// Check checkbox is selected
|
||||
var checkboxBaselineChecked = $("#checkBoxBaseline").is(":checked");
|
||||
|
||||
timepoints.forEach(function(timepoint) {
|
||||
// timepointText defines a custom text for timepoint such as Baseline, Nadir, Current
|
||||
if (timepoint.timepointName === dateStr) {
|
||||
// If checkbox is selected, set timepointText as Baseline
|
||||
// Else set timepointText as ""
|
||||
var timepointText = "Baseline";
|
||||
if(!checkboxBaselineChecked) {
|
||||
timepointText = "";
|
||||
}
|
||||
|
||||
Timepoints.update(timepoint._id,{
|
||||
$set: {
|
||||
timepointText: timepointText
|
||||
}
|
||||
});
|
||||
} else{
|
||||
// Set timepointText as empty
|
||||
Timepoints.update(timepoint._id,{
|
||||
$set: {
|
||||
timepointText: ""
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Close dialog
|
||||
timepointTextDialog.css("display", "none");
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Template.lesionTableTimepointHeader.helpers({
|
||||
'timepointTextFound': function(){
|
||||
var timepointText = this.timepointText;
|
||||
if(timepointText && timepointText === 'Baseline') {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Gets parent's position of element which mouse pointer is clicked in
|
||||
function getPosition(element) {
|
||||
var xPosition = 0;
|
||||
var yPosition = 0;
|
||||
|
||||
while (element) {
|
||||
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
|
||||
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
|
||||
element = element.offsetParent;
|
||||
}
|
||||
return { x: xPosition, y: yPosition };
|
||||
}
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
.timepointIndicator
|
||||
font-size 12px
|
||||
line-height 12px
|
||||
+40
@@ -0,0 +1,40 @@
|
||||
<template name="nonTargetLesionDialog">
|
||||
<div id="nonTargetLesionLocationDialog">
|
||||
<div class="dialogHeader">
|
||||
<div class="dialogHeader">
|
||||
<div><h4>Select Lesion Location</h4></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialogContent">
|
||||
<div class="lesionLocation">
|
||||
<div class="elementContainer">
|
||||
<label>Lesion Location</label>
|
||||
</div>
|
||||
<div class="elementContainer">
|
||||
<select id="selectNonTargetLesionLocation">
|
||||
<option value="-1"></option>
|
||||
{{ #each lesionLocations}}
|
||||
<option value='{{_id}}'>{{location}}</option>
|
||||
{{ /each}}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="locationResponse">
|
||||
<div class="elementContainer">
|
||||
<label>Response</label>
|
||||
</div>
|
||||
<div class="elementContainer">
|
||||
<select id="selectNonTargetLesionLocationResponse">
|
||||
<option value="-1"></option>
|
||||
{{ #each locationResponses}}
|
||||
<option value='{{code}}'>{{code}} - {{text}}</option>
|
||||
{{ /each}}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="locationOK">
|
||||
<button class="btn btn-primary" id="nonTargetLesionOK">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
+226
@@ -0,0 +1,226 @@
|
||||
function closeHandler(dialog) {
|
||||
// Hide the lesion dialog
|
||||
$(dialog).css('display', 'none');
|
||||
|
||||
// Remove the backdrop
|
||||
$(".removableBackdrop").remove();
|
||||
}
|
||||
|
||||
// This event sets lesion number for new lesion
|
||||
function setLesionNumberCallback(measurementData, eventData, doneCallback) {
|
||||
// Get the current element's timepointID from the study date metadata
|
||||
var element = eventData.element;
|
||||
var enabledElement = cornerstone.getEnabledElement(element);
|
||||
var imageId = enabledElement.image.imageId;
|
||||
|
||||
var study = cornerstoneTools.metaData.get('study', imageId);
|
||||
var timepoint = Timepoints.findOne({timepointName: study.studyDate});
|
||||
if (!timepoint) {
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO: Get patientId
|
||||
// TODO: add measurement data according to patientId to get correct lesion number for each patient
|
||||
|
||||
measurementData.timepointID = timepoint.timepointID;
|
||||
|
||||
// Get a lesion number for this lesion, depending on whether or not the same lesion previously
|
||||
// exists at a different timepoint
|
||||
var lesionNumber = measurementManagerDAL.getNewLesionNumber(measurementData.timepointID, isTarget=false);
|
||||
measurementData.lesionNumber = lesionNumber;
|
||||
|
||||
// Set lesion number
|
||||
doneCallback(lesionNumber);
|
||||
}
|
||||
|
||||
// This event determines whether or not to show the Non-Target lesion dialog
|
||||
// If there already exists a lesion with this specific lesion number,
|
||||
// related to the chosen location.
|
||||
function getNonTargetLesionLocationCallback(measurementData, eventData) {
|
||||
Template.nonTargetLesionDialog.measurementData = measurementData;
|
||||
|
||||
// Get the non-target lesion location dialog
|
||||
var dialog = $("#nonTargetLesionLocationDialog");
|
||||
Template.nonTargetLesionDialog.dialog = dialog;
|
||||
|
||||
// Show the backdrop
|
||||
UI.render(Template.removableBackdrop, document.body);
|
||||
|
||||
// Make sure the context menu is closed when the user clicks away
|
||||
$(".removableBackdrop").one('mousedown touchstart', function() {
|
||||
closeHandler(dialog);
|
||||
|
||||
if (doneCallback && typeof doneCallback === 'function') {
|
||||
var deleteTool = true;
|
||||
doneCallback(measurementData, deleteTool);
|
||||
}
|
||||
});
|
||||
|
||||
// Find the select option box
|
||||
var selectorLocation = dialog.find("select#selectNonTargetLesionLocation");
|
||||
var selectorResponse = dialog.find("select#selectNonTargetLesionLocationResponse");
|
||||
|
||||
selectorLocation.find("option:first").prop("selected", "selected");
|
||||
selectorResponse.find("option:first").prop("selected", "selected");
|
||||
|
||||
// Allow location selection
|
||||
selectorLocation.removeAttr("disabled");
|
||||
|
||||
// Find out if this lesion number is already added in the lesion manager for another timepoint
|
||||
// If it is, disable selector location
|
||||
var locationUID = measurementManagerDAL.lesionNumberExists(measurementData);
|
||||
if (locationUID) {
|
||||
// Add an ID value to the tool data to link it to the Measurements collection
|
||||
measurementData.id = 'notready';
|
||||
|
||||
measurementData.locationUID = locationUID;
|
||||
// Disable the selection of a new location
|
||||
disableLocationSelection(measurementData.locationUID);
|
||||
}
|
||||
|
||||
// Disable selector location to prevent selecting a new location
|
||||
function disableLocationSelection(locationUID) {
|
||||
var locationName = measurementManagerDAL.getLocationName(locationUID);
|
||||
selectorLocation.find('option').each(function() {
|
||||
if ($(this).text() === locationName) {
|
||||
// Select location in locations dropdown list
|
||||
selectorLocation.find('option').eq($(this).index()).prop("selected", true);
|
||||
}
|
||||
});
|
||||
|
||||
selectorLocation.prop("disabled", true);
|
||||
}
|
||||
|
||||
// Show the nonTargetLesion dialog above
|
||||
var dialogProperty = {
|
||||
top: eventData.currentPoints.page.y,
|
||||
left: eventData.currentPoints.page.x,
|
||||
display: 'block'
|
||||
};
|
||||
|
||||
// Device is touch device or not
|
||||
// If device is touch device, set position center of screen vertically and horizontally
|
||||
if (isTouchDevice()) {
|
||||
// add dialogMobile class to provide a black,transparent background
|
||||
dialog.addClass("dialogMobile");
|
||||
dialogProperty.top = 0;
|
||||
dialogProperty.left = 0;
|
||||
dialogProperty.right = 0;
|
||||
dialogProperty.bottom = 0;
|
||||
}
|
||||
|
||||
dialog.css(dialogProperty);
|
||||
}
|
||||
|
||||
function changeNonTargetLesionLocationCallback(measurementData, eventData, doneCallback) {
|
||||
doneCallback(prompt('Change your lesion location:'));
|
||||
}
|
||||
|
||||
var config = {
|
||||
setLesionNumberCallback: setLesionNumberCallback,
|
||||
getNonTargetLesionLocationCallback: getNonTargetLesionLocationCallback,
|
||||
changeNonTargetLesionLocationCallback: changeNonTargetLesionLocationCallback
|
||||
};
|
||||
|
||||
cornerstoneTools.nonTarget.setConfiguration(config);
|
||||
|
||||
Template.nonTargetLesionDialog.events({
|
||||
'click #nonTargetLesionOK': function() {
|
||||
var dialog = Template.nonTargetLesionDialog.dialog;
|
||||
var measurementData = Template.nonTargetLesionDialog.measurementData;
|
||||
|
||||
// Find the select option box
|
||||
var selectorLocation = dialog.find("select#selectNonTargetLesionLocation");
|
||||
var selectorResponse = dialog.find("select#selectNonTargetLesionLocationResponse");
|
||||
|
||||
// Get the current value of the selector
|
||||
var selectedOptionId = selectorLocation.find("option:selected").val();
|
||||
var responseOptionId = selectorResponse.find("option:selected").val();
|
||||
|
||||
// If the selected option is still the default (-1)
|
||||
// then stop here
|
||||
if (selectedOptionId < 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If the selected response option is still the default (-1)
|
||||
// then stop here
|
||||
if (responseOptionId < 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get selected location data
|
||||
var locationObj = LesionLocations.findOne({_id: selectedOptionId});
|
||||
|
||||
var id;
|
||||
var existingLocation = PatientLocations.findOne({location: locationObj.location});
|
||||
if (existingLocation) {
|
||||
id = existingLocation._id;
|
||||
} else {
|
||||
// Adds location data to PatientLocation and retrieve the location ID
|
||||
id = PatientLocations.insert({location: locationObj.location});
|
||||
}
|
||||
|
||||
if (!measurementData.id) {
|
||||
// Add an ID value to the tool data to link it to the Measurements collection
|
||||
measurementData.id = 'notready';
|
||||
|
||||
// Link locationUID with active lesion measurementData
|
||||
measurementData.locationUID = id;
|
||||
|
||||
/// Set the isTarget value to true, since this is the target-lesion dialog callback
|
||||
measurementData.isTarget = false;
|
||||
|
||||
// measurementText is set from location response list
|
||||
measurementData.measurementText = responseOptionId;
|
||||
|
||||
// Adds lesion data to timepoints array
|
||||
measurementManagerDAL.addLesionData(measurementData);
|
||||
} else {
|
||||
Measurements.update(measurementData.id, {
|
||||
$set: {
|
||||
location: locationObj.location,
|
||||
locationId: locationObj.id,
|
||||
locationUID: id
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Close the dialog
|
||||
closeHandler(dialog);
|
||||
},
|
||||
'click #removeLesion': function() {
|
||||
var measurementData = Template.nonTargetLesionDialog.measurementData;
|
||||
var doneCallback = Template.nonTargetLesionDialog.doneCallback;
|
||||
var dialog = Template.nonTargetLesionDialog.dialog;
|
||||
|
||||
if (doneCallback && typeof doneCallback === 'function') {
|
||||
var deleteTool = true;
|
||||
doneCallback(measurementData, deleteTool);
|
||||
}
|
||||
|
||||
closeHandler(dialog);
|
||||
},
|
||||
'click #btnCloseLesionPopup': function() {
|
||||
var dialog = Template.nonTargetLesionDialog.dialog;
|
||||
closeHandler(dialog);
|
||||
},
|
||||
'keypress #lesionLocationDialog, keypress #lesionLocationRelabelDialog': function(e) {
|
||||
var dialog = Template.nonTargetLesionDialog.dialog;
|
||||
|
||||
// If Enter is pressed, close the dialog
|
||||
if (e.which === 13) {
|
||||
closeHandler(dialog);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Template.nonTargetLesionDialog.helpers({
|
||||
'lesionLocations': function() {
|
||||
return LesionLocations.find();
|
||||
},
|
||||
'locationResponses': function() {
|
||||
return LocationResponses.find();
|
||||
}
|
||||
});
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
#nonTargetLesionLocationDialog
|
||||
display: none
|
||||
position: absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
left: 0
|
||||
right: 0
|
||||
z-index: 100
|
||||
width: 300px
|
||||
height: 230px
|
||||
border-radius: 5px
|
||||
padding: 10px 20px 10px 20px
|
||||
background-color: rgba(255,255,255,1)
|
||||
|
||||
/* dialogMobile is added to #nonTargetLesionLocationDialog when touchDevices is detected */
|
||||
.dialogMobile
|
||||
margin: 0 auto
|
||||
float: none
|
||||
background-color: rgba(0,0,0,0.5)
|
||||
text-align: center
|
||||
|
||||
#selectNonTargetLesionLocation, #selectNonTargetLesionLocationResponse
|
||||
width: 100%
|
||||
|
||||
.dialogContent, .lesionLocation, .locationResponse
|
||||
margin-bottom: 20px
|
||||
|
||||
.elementContainer
|
||||
width: 100%
|
||||
margin: 0 auto
|
||||
float: none
|
||||
|
||||
.locationOK
|
||||
text-align: center
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
<template name="studyDateList">
|
||||
<div class="studyDateList">
|
||||
<label>Study Date:</label>
|
||||
<span class="loading"><i class="fa fa-spinner fa-spin"></i></span>
|
||||
<select id="selectStudyDate">
|
||||
{{#each relatedStudies}}
|
||||
<option value="{{studyInstanceUid}}" selected={{selected}}>{{formatDA studyDate}}</option>
|
||||
{{/each}}
|
||||
</select>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,109 @@
|
||||
Template.studyDateList.helpers({
|
||||
/**
|
||||
* Returns an array of studies that are related to the current study by patient ID.
|
||||
* The value for 'selected' for the currently loaded study is set to true, so that
|
||||
* this becomes the current option in the combo box.
|
||||
*
|
||||
* @returns {*}
|
||||
*/
|
||||
relatedStudies: function() {
|
||||
// TODO= Fix this! This won't work to retrieve all studies
|
||||
// related to this patient. We will need to do a real search
|
||||
// since the WorklistStudies Collection only contains the studies on-screen
|
||||
|
||||
// Check which study is currently loaded into the study browser
|
||||
var currentStudyInBrowser = ViewerStudies.findOne({selected: true});
|
||||
|
||||
// Find studies which have the same patientId as the currently selected study
|
||||
var relatedStudies = WorklistStudies.find({patientId: currentStudyInBrowser.patientId}).fetch();
|
||||
|
||||
// Modify the array of related studies so the default option is the currently selected study
|
||||
relatedStudies.forEach(function(study) {
|
||||
// If the studyInstanceUid matches that of the current study in the browser,
|
||||
// Set this to 'selected', so that it becomes the default option
|
||||
if (study.studyInstanceUid === currentStudyInBrowser.studyInstanceUid) {
|
||||
study.selected = true;
|
||||
}
|
||||
});
|
||||
|
||||
// Use this array to populate the combo box
|
||||
return relatedStudies;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Template.studyDateList.events({
|
||||
/**
|
||||
* When the study date selector combo box is changed, we will
|
||||
* hide the select box, temporarily display a loading sign, and grab
|
||||
* the selected study. Once the study has been retrieved it is added
|
||||
* into the ViewerStudies collection and set as selected. This reactively
|
||||
* populated the thumbnail browser.
|
||||
*
|
||||
* @param e The select box change event
|
||||
*/
|
||||
'change select#selectStudyDate': function(e) {
|
||||
var selectBox = $(e.currentTarget);
|
||||
|
||||
var studyInstanceUid = selectBox.val();
|
||||
|
||||
// Hide the select box
|
||||
selectBox.css('display', 'none');
|
||||
|
||||
// Show the loading indicator
|
||||
var loadingIndicator = selectBox.siblings('.loading');
|
||||
loadingIndicator.css('display', 'block');
|
||||
|
||||
Meteor.call('GetStudyMetadata', studyInstanceUid, function(error, study) {
|
||||
sortStudy(study);
|
||||
|
||||
// Hide the loading indicator
|
||||
loadingIndicator.css('display', 'none');
|
||||
|
||||
// Show the select box again
|
||||
selectBox.css('display', 'block');
|
||||
|
||||
// Set "Selected" to false for the entire collection
|
||||
ViewerStudies.update({},
|
||||
{$set: {selected: false}},
|
||||
{ multi: true });
|
||||
|
||||
// Check if this study already exists in the ViewerStudies collection
|
||||
// of loaded studies. If it does, set it's 'selected' value to true.
|
||||
var existingStudy = ViewerStudies.findOne({studyInstanceUid: studyInstanceUid});
|
||||
if (existingStudy) {
|
||||
// Set the current finding in the collection to true
|
||||
ViewerStudies.update(existingStudy._id, {
|
||||
$set: {selected: true}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// If the study does not exist, add the 'selected' key to the object
|
||||
// with the value True, and insert it into the ViewerStudies Collection
|
||||
study.selected = true;
|
||||
ViewerStudies.insert(study);
|
||||
|
||||
var timepointID = uuid.v4();
|
||||
|
||||
var timepoint = Timepoints.findOne({timepointName: study.studyDate});
|
||||
if (timepoint) {
|
||||
log.warn("A timepoint with that study date already exists!");
|
||||
return;
|
||||
}
|
||||
|
||||
var testTimepoint = Timepoints.findOne({});
|
||||
if (testTimepoint && testTimepoint.patientId !== study.patientId) {
|
||||
log.warn("Timepoints collection related to the wrong subject");
|
||||
return;
|
||||
}
|
||||
|
||||
log.info('Inserting a new timepoint');
|
||||
Timepoints.insert({
|
||||
patientId: study.patientId,
|
||||
timepointID: timepointID,
|
||||
timepointName: study.studyDate
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,22 @@
|
||||
#selectStudyDate
|
||||
color: black
|
||||
background-color: #666
|
||||
border-color: #666
|
||||
|
||||
.studyDateList
|
||||
margin: 0 auto 15px
|
||||
text-align: left
|
||||
width: 100%
|
||||
border-top: 2px solid #777
|
||||
|
||||
label
|
||||
font-weight: normal
|
||||
color: #666
|
||||
padding-top: 5px
|
||||
padding-left: 5px
|
||||
|
||||
.loading
|
||||
display: none
|
||||
color: white
|
||||
text-align: center
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
<template name="timepointTextDialog">
|
||||
<div id="timepointTextDialog">
|
||||
<div class="timepointDialogContentWrapper">
|
||||
<div class="dialogContent">
|
||||
<div class="timepointContent">
|
||||
<input type="checkbox" id="checkBoxBaseline" value="ok"><strong >Baseline</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,27 @@
|
||||
|
||||
#timepointTextDialog
|
||||
display: none
|
||||
position: absolute
|
||||
z-index: 99
|
||||
|
||||
.timepointDialogContentWrapper
|
||||
position: absolute
|
||||
width: 100px
|
||||
height: 30px
|
||||
padding: 5px
|
||||
background-color: rgba(255,255,255,1)
|
||||
border-top-left-radius: 5px
|
||||
border-top-right-radius: 5px
|
||||
text-align: left
|
||||
|
||||
.dialogContent
|
||||
margin: 0 auto
|
||||
float: none
|
||||
padding: 0
|
||||
|
||||
.timepointContent
|
||||
font-size: 16px
|
||||
|
||||
#checkBoxBaseline
|
||||
height: 16px
|
||||
width: 16px
|
||||
Reference in new issue
Block a user