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
@@ -0,0 +1,108 @@
|
||||
LesionLocations = new Meteor.Collection(null);
|
||||
|
||||
LesionLocations.insert({
|
||||
id: 'liverLeft',
|
||||
group: 'liver',
|
||||
location: "Liver Left",
|
||||
hasDescription: false,
|
||||
description: "",
|
||||
selected: false
|
||||
});
|
||||
|
||||
LesionLocations.insert({
|
||||
id: 'liverRight',
|
||||
group: 'liver',
|
||||
location: "Liver Right",
|
||||
hasDescription: false,
|
||||
description: "",
|
||||
selected: false
|
||||
});
|
||||
|
||||
LesionLocations.insert({
|
||||
id: 'liverCaudate',
|
||||
group: 'liver',
|
||||
location: "Liver Caudate",
|
||||
hasDescription: false,
|
||||
description: "",
|
||||
selected: false
|
||||
});
|
||||
|
||||
LesionLocations.insert({
|
||||
id: 'lungLLL',
|
||||
group: 'lung',
|
||||
location: "Lung LLL",
|
||||
hasDescription: false,
|
||||
description: "",
|
||||
selected: false
|
||||
});
|
||||
|
||||
LesionLocations.insert({
|
||||
id: 'lungLUL',
|
||||
group: 'lung',
|
||||
location: "Lung LUL",
|
||||
hasDescription: false,
|
||||
description: "",
|
||||
selected: false
|
||||
});
|
||||
|
||||
LesionLocations.insert({
|
||||
id: 'lungRLL',
|
||||
group: 'lung',
|
||||
location: "Lung RLL",
|
||||
hasDescription: false,
|
||||
description: "",
|
||||
selected: false
|
||||
});
|
||||
|
||||
LesionLocations.insert({
|
||||
id: 'lungRML',
|
||||
group: 'lung',
|
||||
location: "Lung RML",
|
||||
hasDescription: false,
|
||||
description: "",
|
||||
selected: false
|
||||
});
|
||||
|
||||
LesionLocations.insert({
|
||||
id: 'lungRUL',
|
||||
group: 'lung',
|
||||
location: "Lung RUL",
|
||||
hasDescription: false,
|
||||
description: "",
|
||||
selected: false
|
||||
});
|
||||
|
||||
LesionLocations.insert({
|
||||
id: 'pleuraLeft',
|
||||
group: 'pleura',
|
||||
location: "Pleura Left",
|
||||
hasDescription: false,
|
||||
description: "",
|
||||
selected: false
|
||||
});
|
||||
|
||||
LesionLocations.insert({
|
||||
id: 'pleuraRight',
|
||||
group: 'pleura',
|
||||
location: "Pleura Right",
|
||||
hasDescription: false,
|
||||
description: "",
|
||||
selected: false
|
||||
});
|
||||
|
||||
LesionLocations.insert({
|
||||
id: 'kidneyLeft',
|
||||
group: 'kidney',
|
||||
location: "Kidney Left",
|
||||
hasDescription: false,
|
||||
description: "",
|
||||
selected: false
|
||||
});
|
||||
|
||||
LesionLocations.insert({
|
||||
id: 'kidneyRight',
|
||||
group: 'kidney',
|
||||
location: "Kidney Right",
|
||||
hasDescription: false,
|
||||
description: ""
|
||||
});
|
||||
@@ -0,0 +1,55 @@
|
||||
LocationResponses = new Meteor.Collection(null);
|
||||
|
||||
LocationResponses.insert({
|
||||
text: "Complete response",
|
||||
code: "CR",
|
||||
description: ""
|
||||
});
|
||||
|
||||
LocationResponses.insert({
|
||||
text: "Progressive disease",
|
||||
code: "PD",
|
||||
description: ""
|
||||
});
|
||||
|
||||
LocationResponses.insert({
|
||||
text: "Complete response",
|
||||
code: "CR",
|
||||
description: ""
|
||||
});
|
||||
|
||||
LocationResponses.insert({
|
||||
text: "Stable disease",
|
||||
code: "SD",
|
||||
description: ""
|
||||
});
|
||||
|
||||
LocationResponses.insert({
|
||||
text: "Non-measurable",
|
||||
code: "NM",
|
||||
description: ""
|
||||
});
|
||||
|
||||
LocationResponses.insert({
|
||||
text: "Unknown",
|
||||
code: "UN",
|
||||
description: ""
|
||||
});
|
||||
|
||||
LocationResponses.insert({
|
||||
text: "Not Evaluable",
|
||||
code: "NE",
|
||||
description: ""
|
||||
});
|
||||
|
||||
LocationResponses.insert({
|
||||
text: "Non-CR/Non-PD",
|
||||
code: "NN",
|
||||
description: ""
|
||||
});
|
||||
|
||||
LocationResponses.insert({
|
||||
text: "Excluded",
|
||||
code: "EX",
|
||||
description: ""
|
||||
});
|
||||
@@ -0,0 +1,377 @@
|
||||
var cornerstoneTools = (function($, cornerstone, cornerstoneMath, cornerstoneTools) {
|
||||
|
||||
"use strict";
|
||||
|
||||
if (cornerstoneTools === undefined) {
|
||||
cornerstoneTools = {};
|
||||
}
|
||||
|
||||
var configuration = {
|
||||
setLesionNumberCallback: setLesionNumberCallback,
|
||||
getLesionLocationCallback: getLesionLocationCallback,
|
||||
changeLesionLocationCallback: changeLesionLocationCallback
|
||||
};
|
||||
|
||||
// Set lesion number
|
||||
// Get Target lesions on image
|
||||
function setLesionNumberCallback(measurementData, eventData, doneCallback) {
|
||||
var lesionNumber = 1;
|
||||
doneCallback(lesionNumber);
|
||||
}
|
||||
|
||||
// Define a callback to get your text annotation
|
||||
// This could be used, e.g. to open a modal
|
||||
function getLesionLocationCallback(measurementData, eventData, doneCallback) {
|
||||
doneCallback(prompt('Enter your lesion location:'));
|
||||
}
|
||||
|
||||
function changeLesionLocationCallback(measurementData, eventData, doneCallback) {
|
||||
doneCallback(prompt('Change your lesion location:'));
|
||||
}
|
||||
|
||||
var toolType = "lesion";
|
||||
|
||||
///////// BEGIN ACTIVE TOOL ///////
|
||||
|
||||
function addNewMeasurement(mouseEventData) {
|
||||
var element = mouseEventData.element;
|
||||
|
||||
function doneCallback(lesionNumber) {
|
||||
measurementData.lesionName = "Target " + lesionNumber;
|
||||
measurementData.lesionNumber = lesionNumber;
|
||||
measurementData.active = false;
|
||||
cornerstone.updateImage(element);
|
||||
}
|
||||
|
||||
var measurementData = createNewMeasurement(mouseEventData);
|
||||
|
||||
var eventData = {
|
||||
mouseButtonMask: mouseEventData.which
|
||||
};
|
||||
var config = cornerstoneTools.lesion.getConfiguration();
|
||||
|
||||
// associate this data with this imageId so we can render it and manipulate it
|
||||
cornerstoneTools.addToolState(element, toolType, measurementData);
|
||||
|
||||
// since we are dragging to another place to drop the end point, we can just activate
|
||||
// the end point and let the moveHandle move it for us.
|
||||
$(element).off('CornerstoneToolsMouseMove', cornerstoneTools.lesion.mouseMoveCallback);
|
||||
$(element).off('CornerstoneToolsMouseDown', cornerstoneTools.lesion.mouseDownCallback);
|
||||
$(element).off('CornerstoneToolsMouseDownActivate', cornerstoneTools.lesion.mouseDownActivateCallback);
|
||||
|
||||
// Set lesion number and lesion name
|
||||
if (measurementData.lesionNumber === undefined) {
|
||||
config.setLesionNumberCallback(measurementData, mouseEventData, doneCallback);
|
||||
}
|
||||
|
||||
cornerstone.updateImage(element);
|
||||
cornerstoneTools.moveNewHandle(mouseEventData, toolType, measurementData, measurementData.handles.end, function() {
|
||||
if (cornerstoneTools.anyHandlesOutsideImage(mouseEventData, measurementData.handles)) {
|
||||
// delete the measurement
|
||||
cornerstoneTools.removeToolState(element, toolType, measurementData);
|
||||
} else {
|
||||
// Set lesionMeasurementData Session
|
||||
config.getLesionLocationCallback(measurementData, mouseEventData, doneCallback);
|
||||
}
|
||||
|
||||
$(element).on('CornerstoneToolsMouseMove', eventData, cornerstoneTools.lesion.mouseMoveCallback);
|
||||
$(element).on('CornerstoneToolsMouseDown', eventData, cornerstoneTools.lesion.mouseDownCallback);
|
||||
$(element).on('CornerstoneToolsMouseDownActivate', eventData, cornerstoneTools.lesion.mouseDownActivateCallback);
|
||||
cornerstone.updateImage(element);
|
||||
|
||||
updateLesionCollection(measurementData);
|
||||
});
|
||||
}
|
||||
|
||||
function addNewMeasurementTouch(touchEventData) {
|
||||
var element = touchEventData.element;
|
||||
|
||||
function doneCallback(lesionNumber) {
|
||||
measurementData.lesionName = "Target " + lesionNumber;
|
||||
measurementData.lesionNumber = lesionNumber;
|
||||
measurementData.active = false;
|
||||
cornerstone.updateImage(element);
|
||||
}
|
||||
|
||||
var measurementData = createNewMeasurement(touchEventData);
|
||||
|
||||
// associate this data with this imageId so we can render it and manipulate it
|
||||
cornerstoneTools.addToolState(element, toolType, measurementData);
|
||||
|
||||
// since we are dragging to another place to drop the end point, we can just activate
|
||||
// the end point and let the moveHandle move it for us.
|
||||
$(element).off('CornerstoneToolsTouchDrag', cornerstoneTools.lesion.touchMoveHandle);
|
||||
$(element).off('CornerstoneToolsTap', cornerstoneTools.lesion.tapCallback);
|
||||
$(element).off('CornerstoneToolsDragStartActive', cornerstoneTools.lesion.touchDownActivateCallback);
|
||||
|
||||
cornerstone.updateImage(element);
|
||||
cornerstoneTools.moveNewHandleTouch(touchEventData, toolType, measurementData, measurementData.handles.end, function() {
|
||||
if (cornerstoneTools.anyHandlesOutsideImage(touchEventData, measurementData.handles)) {
|
||||
// delete the measurement
|
||||
cornerstoneTools.removeToolState(element, toolType, measurementData);
|
||||
} else {
|
||||
// Set lesionMeasurementData Session
|
||||
var config = cornerstoneTools.lesion.getConfiguration();
|
||||
config.getLesionLocationCallback(measurementData, touchEventData, doneCallback);
|
||||
}
|
||||
|
||||
$(element).on('CornerstoneToolsTouchDrag', cornerstoneTools.lesion.touchMoveHandle);
|
||||
$(element).on('CornerstoneToolsTap', cornerstoneTools.lesion.tapCallback);
|
||||
$(element).on('CornerstoneToolsDragStartActive', cornerstoneTools.lesion.touchDownActivateCallback);
|
||||
cornerstone.updateImage(element);
|
||||
});
|
||||
}
|
||||
|
||||
function createNewMeasurement(mouseEventData) {
|
||||
var imageId = mouseEventData.image.imageId;
|
||||
|
||||
// Get studyInstanceUid
|
||||
var study = cornerstoneTools.metaData.get('study', imageId);
|
||||
var studyInstanceUid = study.studyInstanceUid;
|
||||
var patientId = study.patientId;
|
||||
|
||||
// Get seriesInstanceUid
|
||||
var series = cornerstoneTools.metaData.get('series', imageId);
|
||||
var seriesInstanceUid = series.seriesInstanceUid;
|
||||
|
||||
// Create the measurement data for this tool with the end handle activated
|
||||
var measurementData = {
|
||||
visible: true,
|
||||
active: true,
|
||||
handles: {
|
||||
start: {
|
||||
x: mouseEventData.currentPoints.image.x,
|
||||
y: mouseEventData.currentPoints.image.y,
|
||||
highlight: true,
|
||||
active: false
|
||||
},
|
||||
end: {
|
||||
x: mouseEventData.currentPoints.image.x,
|
||||
y: mouseEventData.currentPoints.image.y,
|
||||
highlight: true,
|
||||
active: true
|
||||
},
|
||||
textBox: {
|
||||
x: mouseEventData.currentPoints.image.x - 50,
|
||||
y: mouseEventData.currentPoints.image.y - 50,
|
||||
pointNearHandle: pointNearTextBox,
|
||||
active: false,
|
||||
movesIndependently: true,
|
||||
drawnIndependently: true,
|
||||
allowedOutsideImage: true
|
||||
}
|
||||
},
|
||||
imageId: imageId,
|
||||
seriesInstanceUid: seriesInstanceUid,
|
||||
studyInstanceUid: studyInstanceUid,
|
||||
patientId: patientId,
|
||||
measurementText: 0,
|
||||
lesionName: '',
|
||||
isDeleted: false,
|
||||
isTarget: true,
|
||||
uid: uuid.v4()
|
||||
};
|
||||
return measurementData;
|
||||
}
|
||||
///////// END ACTIVE TOOL ///////
|
||||
|
||||
function pointNearTool(element, data, coords) {
|
||||
var lineSegment = {
|
||||
start: cornerstone.pixelToCanvas(element, data.handles.start),
|
||||
end: cornerstone.pixelToCanvas(element, data.handles.end)
|
||||
};
|
||||
var distanceToPoint = cornerstoneMath.lineSegment.distanceToPoint(lineSegment, coords);
|
||||
|
||||
if (pointNearTextBox(element, data.handles.textBox, coords)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return (distanceToPoint < 25);
|
||||
}
|
||||
|
||||
function pointNearTextBox(element, handle, coords) {
|
||||
if (!handle.boundingBox) {
|
||||
return;
|
||||
}
|
||||
return cornerstoneMath.point.insideRect(coords, handle.boundingBox);
|
||||
}
|
||||
|
||||
///////// BEGIN IMAGE RENDERING ///////
|
||||
function onImageRendered(e, eventData) {
|
||||
// if we have no toolData for this element, return immediately as there is nothing to do
|
||||
var toolData = cornerstoneTools.getToolState(e.currentTarget, toolType);
|
||||
if (!toolData) {
|
||||
return;
|
||||
}
|
||||
|
||||
// we have tool data for this element - iterate over each one and draw it
|
||||
var context = eventData.canvasContext.canvas.getContext('2d');
|
||||
context.setTransform(1, 0, 0, 1, 0, 0);
|
||||
|
||||
var color;
|
||||
var element = eventData.element;
|
||||
var lineWidth = cornerstoneTools.toolStyle.getToolWidth();
|
||||
var config = cornerstoneTools.lesion.getConfiguration();
|
||||
|
||||
for (var i = 0; i < toolData.data.length; i++) {
|
||||
var data = toolData.data[i];
|
||||
|
||||
context.save();
|
||||
|
||||
// configurable shadow from CornerstoneTools
|
||||
if (config && config.shadow) {
|
||||
context.shadowColor = '#000000';
|
||||
context.shadowOffsetX = 1;
|
||||
context.shadowOffsetY = 1;
|
||||
}
|
||||
|
||||
if (data.active) {
|
||||
color = cornerstoneTools.toolColors.getActiveColor();
|
||||
} else {
|
||||
color = cornerstoneTools.toolColors.getToolColor();
|
||||
}
|
||||
|
||||
// draw the line
|
||||
var handleStartCanvas = cornerstone.pixelToCanvas(element, data.handles.start);
|
||||
var handleEndCanvas = cornerstone.pixelToCanvas(element, data.handles.end);
|
||||
var canvasTextLocation = cornerstone.pixelToCanvas(element, data.handles.textBox);
|
||||
|
||||
context.beginPath();
|
||||
context.strokeStyle = color;
|
||||
context.lineWidth = lineWidth;
|
||||
context.moveTo(handleStartCanvas.x, handleStartCanvas.y);
|
||||
context.lineTo(handleEndCanvas.x, handleEndCanvas.y);
|
||||
context.stroke();
|
||||
|
||||
// draw the handles
|
||||
cornerstoneTools.drawHandles(context, eventData, data.handles, color);
|
||||
|
||||
//Draw linked line as dashed
|
||||
context.beginPath();
|
||||
context.strokeStyle = color;
|
||||
context.lineWidth = lineWidth;
|
||||
context.setLineDash([2, 3]);
|
||||
|
||||
var mid = {
|
||||
x: (handleStartCanvas.x + handleEndCanvas.x) / 2,
|
||||
y: (handleStartCanvas.y + handleEndCanvas.y) / 2
|
||||
};
|
||||
|
||||
context.moveTo(mid.x, mid.y);
|
||||
context.lineTo(canvasTextLocation.x + 20, canvasTextLocation.y + 20);
|
||||
context.stroke();
|
||||
|
||||
// Draw the text
|
||||
var dx = (data.handles.start.x - data.handles.end.x) * (eventData.image.columnPixelSpacing || 1);
|
||||
var dy = (data.handles.start.y - data.handles.end.y) * (eventData.image.rowPixelSpacing || 1);
|
||||
var length = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
var suffix = ' mm';
|
||||
if (!eventData.image.rowPixelSpacing || !eventData.image.columnPixelSpacing) {
|
||||
suffix = ' pixels';
|
||||
}
|
||||
|
||||
var text = '' + length.toFixed(2) + suffix;
|
||||
var textLines = [data.lesionName, text];
|
||||
|
||||
var boundingBox = cornerstoneTools.drawTextBox(context,
|
||||
textLines,
|
||||
canvasTextLocation.x, canvasTextLocation.y, color);
|
||||
|
||||
data.handles.textBox.boundingBox = boundingBox;
|
||||
|
||||
// Set measurement text to show lesion table
|
||||
data.measurementText = length.toFixed(1);
|
||||
|
||||
context.restore();
|
||||
}
|
||||
}
|
||||
|
||||
function updateLesionCollection(lesionData) {
|
||||
// TODO = Remove this in favour of measurement events
|
||||
if (!lesionData.active) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (lesionData.timepointID && lesionData.timepointID !== "") {
|
||||
// Update Measurements Collection
|
||||
measurementManagerDAL.updateTimepointData(lesionData);
|
||||
}
|
||||
}
|
||||
|
||||
function doubleClickCallback(e, eventData) {
|
||||
// Prevent other double click handlers from firing after this one
|
||||
//e.stopImmediatePropagation();
|
||||
|
||||
var element = eventData.element;
|
||||
var data;
|
||||
|
||||
function doneCallback(data, deleteTool) {
|
||||
if (deleteTool === true) {
|
||||
cornerstoneTools.removeToolState(element, toolType, data);
|
||||
cornerstone.updateImage(element);
|
||||
//return;
|
||||
}
|
||||
|
||||
/*// TODO= Find a better way to do this! This is very messy
|
||||
config.setLesionNumberCallback(data, eventData, function(lesionNumber) {
|
||||
data.lesionName = "Target " + lesionNumber;
|
||||
data.lesionNumber = lesionNumber;
|
||||
data.active = false;
|
||||
cornerstone.updateImage(element);
|
||||
});*/
|
||||
}
|
||||
|
||||
if (e.data && e.data.mouseButtonMask && !cornerstoneTools.isMouseButtonEnabled(eventData.which, e.data.mouseButtonMask)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var config = cornerstoneTools.lesion.getConfiguration();
|
||||
|
||||
var coords = eventData.currentPoints.canvas;
|
||||
var toolData = cornerstoneTools.getToolState(element, toolType);
|
||||
|
||||
// now check to see if there is a handle we can move
|
||||
if (!toolData) {
|
||||
return false;
|
||||
}
|
||||
|
||||
for (var i = 0; i < toolData.data.length; i++) {
|
||||
data = toolData.data[i];
|
||||
if (pointNearTool(element, data, coords)) {
|
||||
data.active = true;
|
||||
cornerstone.updateImage(element);
|
||||
// Allow relabelling via a callback
|
||||
config.changeLesionLocationCallback(data, eventData, doneCallback);
|
||||
|
||||
e.stopImmediatePropagation();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return false; // false = causes jquery to preventDefault() and stopPropagation() this event
|
||||
}
|
||||
|
||||
// module exports
|
||||
cornerstoneTools.lesion = cornerstoneTools.mouseButtonTool({
|
||||
createNewMeasurement: createNewMeasurement,
|
||||
addNewMeasurement: addNewMeasurement,
|
||||
onImageRendered: onImageRendered,
|
||||
pointNearTool: pointNearTool,
|
||||
mouseDoubleClickCallback: doubleClickCallback,
|
||||
toolType: toolType
|
||||
});
|
||||
|
||||
cornerstoneTools.lesionTouch = cornerstoneTools.touchTool({
|
||||
createNewMeasurement: createNewMeasurement,
|
||||
addNewMeasurement: addNewMeasurementTouch,
|
||||
onImageRendered: onImageRendered,
|
||||
pointNearTool: pointNearTool,
|
||||
toolType: toolType
|
||||
});
|
||||
|
||||
cornerstoneTools.lesion.setConfiguration(configuration);
|
||||
|
||||
return cornerstoneTools;
|
||||
|
||||
}($, cornerstone, cornerstoneMath, cornerstoneTools));
|
||||
@@ -0,0 +1,167 @@
|
||||
var measurementManagerDAL = (function() {
|
||||
PatientLocations = new Meteor.Collection(null);
|
||||
|
||||
function getLocationName(id) {
|
||||
var locationObject = PatientLocations.findOne(id);
|
||||
return locationObject.location || "";
|
||||
}
|
||||
|
||||
// Add timepoint data to Measurements collection
|
||||
function addTimepointData(lesionData) {
|
||||
var timepoints = Timepoints.find().fetch();
|
||||
|
||||
var timepointsObject = {};
|
||||
|
||||
for (var i = 0; i < timepoints.length; i++) {
|
||||
var timepointId = timepoints[i].timepointID;
|
||||
var lesionTimepointId = lesionData.timepointID;
|
||||
|
||||
var timepointObject;
|
||||
if (timepointId === lesionTimepointId) {
|
||||
// Add real measurement
|
||||
timepointObject = {
|
||||
longestDiameter: lesionData.measurementText,
|
||||
imageId: lesionData.imageId,
|
||||
seriesInstanceUid: lesionData.seriesInstanceUid,
|
||||
studyInstanceUid: lesionData.studyInstanceUid,
|
||||
handles: lesionData.handles
|
||||
};
|
||||
} else {
|
||||
// Add null measurement
|
||||
timepointObject = {
|
||||
longestDiameter: "",
|
||||
imageId: "",
|
||||
seriesInstanceUid: "",
|
||||
studyInstanceUid: "",
|
||||
handles: undefined
|
||||
};
|
||||
}
|
||||
timepointsObject[timepointId] = timepointObject;
|
||||
}
|
||||
|
||||
var lesionDataObject = lesionData;
|
||||
|
||||
lesionDataObject.patientId = timepoints[0].patientId;
|
||||
lesionDataObject.location = getLocationName(lesionData.locationUID);
|
||||
lesionDataObject.timepoints = timepointsObject;
|
||||
|
||||
// Is there a use for this?
|
||||
lesionDataObject.number = Measurements.find().count() + 1;
|
||||
|
||||
lesionDataObject.id = Measurements.insert(lesionDataObject);
|
||||
}
|
||||
|
||||
// Update timepoint data in Measurements collection
|
||||
function updateTimepointData(lesionData) {
|
||||
// Find the specific lesion to be updated
|
||||
var measurement = Measurements.findOne({
|
||||
lesionNumber: lesionData.lesionNumber,
|
||||
isTarget: lesionData.isTarget
|
||||
});
|
||||
|
||||
// If no such lesion exists, stop here
|
||||
if (!measurement) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Update this specific lesion at the given timepoint
|
||||
var timepointID = lesionData.timepointID;
|
||||
|
||||
// Update timepoints from lesion data
|
||||
var timepoints = measurement.timepoints;
|
||||
if (timepoints[timepointID] === undefined) {
|
||||
timepoints[timepointID] = {};
|
||||
}
|
||||
|
||||
timepoints[timepointID].longestDiameter = lesionData.measurementText;
|
||||
timepoints[timepointID].imageId = lesionData.imageId;
|
||||
timepoints[timepointID].seriesInstanceUid = lesionData.seriesInstanceUid;
|
||||
timepoints[timepointID].studyInstanceUid = lesionData.studyInstanceUid;
|
||||
timepoints[timepointID].handles = lesionData.handles;
|
||||
|
||||
lesionData.id = measurement._id;
|
||||
|
||||
Measurements.update(measurement._id, {
|
||||
$set: {
|
||||
timepoints: timepoints
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Check timepointData is found in Measurements collection
|
||||
function hasTimepointData(lesionData) {
|
||||
var timepointData = Measurements.findOne({
|
||||
lesionNumber: lesionData.lesionNumber,
|
||||
isTarget: lesionData.isTarget
|
||||
});
|
||||
|
||||
if (timepointData) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// Adds new timepoint item to timepoints array
|
||||
function addLesionData(lesionData) {
|
||||
if (hasTimepointData(lesionData)) {
|
||||
// Update data
|
||||
updateTimepointData(lesionData);
|
||||
} else {
|
||||
// Insert data
|
||||
addTimepointData(lesionData);
|
||||
}
|
||||
}
|
||||
|
||||
// Returns new lesion number according to timepointID
|
||||
function getNewLesionNumber(timepointID, isTarget) {
|
||||
// Get all current lesion measurements
|
||||
var measurements = Measurements.find({isTarget: isTarget},{sort: {lesionNumber: 1}}).fetch();
|
||||
|
||||
// If no measurements exist yet, start at 1
|
||||
if (!measurements.length) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
// If measurements exist, find the last lesion number
|
||||
// from the given timepoint
|
||||
var lesionNumberCounter = 0;
|
||||
for (var i = 0; i < measurements.length; i++) {
|
||||
var measurement = measurements[i];
|
||||
var timepoints = measurement.timepoints;
|
||||
|
||||
if (!timepoints[timepointID]) {
|
||||
// Find lesion number for this timepointID
|
||||
return measurement.lesionNumber;
|
||||
}
|
||||
|
||||
if (timepoints[timepointID].longestDiameter === '') {
|
||||
return measurement.lesionNumber;
|
||||
} else {
|
||||
lesionNumberCounter = lesionNumberCounter + 1;
|
||||
}
|
||||
}
|
||||
return lesionNumberCounter + 1;
|
||||
}
|
||||
|
||||
// If lesion number is added for any timepoint, returns lesion locationUID
|
||||
function lesionNumberExists(lesionData) {
|
||||
if (!hasTimepointData(lesionData)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var measurement = Measurements.findOne({
|
||||
lesionNumber: lesionData.lesionNumber,
|
||||
isTarget: lesionData.isTarget
|
||||
});
|
||||
|
||||
return measurement.locationUID;
|
||||
}
|
||||
|
||||
return {
|
||||
addLesionData: addLesionData,
|
||||
getNewLesionNumber: getNewLesionNumber,
|
||||
lesionNumberExists: lesionNumberExists,
|
||||
updateTimepointData: updateTimepointData,
|
||||
getLocationName: getLocationName
|
||||
};
|
||||
})();
|
||||
@@ -0,0 +1,347 @@
|
||||
(function($, cornerstone, cornerstoneMath, cornerstoneTools) {
|
||||
|
||||
'use strict';
|
||||
|
||||
var toolType = 'nonTarget';
|
||||
|
||||
var configuration = {
|
||||
setLesionNumberCallback: setLesionNumberCallback,
|
||||
getNonTargetLesionLocationCallback: getNonTargetLesionLocationCallback,
|
||||
changeNonTargetLesionLocationCallback: changeNonTargetLesionLocationCallback,
|
||||
drawHandles: false,
|
||||
drawHandlesOnHover: true,
|
||||
arrowFirst: true
|
||||
};
|
||||
|
||||
// Set lesion number
|
||||
// Get Non-Target lesions on image
|
||||
function setLesionNumberCallback(measurementData, eventData, doneCallback) {
|
||||
var lesionNumber = 1;
|
||||
doneCallback(lesionNumber);
|
||||
}
|
||||
// Define a callback to get your text annotation
|
||||
// This could be used, e.g. to open a modal
|
||||
function getNonTargetLesionLocationCallback(measurementData, eventData, doneCallback) {
|
||||
doneCallback(prompt('Enter your lesion location:'));
|
||||
}
|
||||
|
||||
function changeNonTargetLesionLocationCallback(measurementData, eventData, doneCallback) {
|
||||
doneCallback(prompt('Change your lesion location:'));
|
||||
}
|
||||
|
||||
/// --- Mouse Tool --- ///
|
||||
///////// BEGIN ACTIVE TOOL ///////
|
||||
function addNewMeasurement(mouseEventData) {
|
||||
|
||||
var element = mouseEventData.element;
|
||||
|
||||
function doneCallback(lesionNumber) {
|
||||
measurementData.lesionName = "Non-Target " + lesionNumber;
|
||||
measurementData.lesionNumber = lesionNumber;
|
||||
measurementData.active = true;
|
||||
cornerstone.updateImage(element);
|
||||
}
|
||||
|
||||
var measurementData = createNewMeasurement(mouseEventData);
|
||||
|
||||
var eventData = {
|
||||
mouseButtonMask: mouseEventData.which
|
||||
};
|
||||
|
||||
// associate this data with this imageId so we can render it and manipulate it
|
||||
cornerstoneTools.addToolState(mouseEventData.element, toolType, measurementData);
|
||||
|
||||
// since we are dragging to another place to drop the end point, we can just activate
|
||||
// the end point and let the moveHandle move it for us.
|
||||
$(mouseEventData.element).off('CornerstoneToolsMouseMove', cornerstoneTools.nonTarget.mouseMoveCallback);
|
||||
$(mouseEventData.element).off('CornerstoneToolsMouseDown', cornerstoneTools.nonTarget.mouseDownCallback);
|
||||
$(mouseEventData.element).off('CornerstoneToolsMouseDownActivate', cornerstoneTools.nonTarget.mouseDownActivateCallback);
|
||||
|
||||
var config = cornerstoneTools.nonTarget.getConfiguration();
|
||||
|
||||
// Set lesion number and lesion name
|
||||
if (measurementData.lesionNumber === undefined) {
|
||||
config.setLesionNumberCallback(measurementData, mouseEventData, doneCallback);
|
||||
}
|
||||
|
||||
cornerstone.updateImage(element);
|
||||
|
||||
cornerstoneTools.moveNewHandle(mouseEventData, toolType, measurementData, measurementData.handles.end, function() {
|
||||
if (cornerstoneTools.anyHandlesOutsideImage(mouseEventData, measurementData.handles)) {
|
||||
// delete the measurement
|
||||
cornerstoneTools.removeToolState(mouseEventData.element, toolType, measurementData);
|
||||
}else{
|
||||
config.getNonTargetLesionLocationCallback(measurementData, mouseEventData, doneCallback);
|
||||
|
||||
}
|
||||
|
||||
$(mouseEventData.element).on('CornerstoneToolsMouseMove', eventData, cornerstoneTools.nonTarget.mouseMoveCallback);
|
||||
$(mouseEventData.element).on('CornerstoneToolsMouseDown', eventData, cornerstoneTools.nonTarget.mouseDownCallback);
|
||||
$(mouseEventData.element).on('CornerstoneToolsMouseDownActivate', eventData, cornerstoneTools.nonTarget.mouseDownActivateCallback);
|
||||
|
||||
cornerstone.updateImage(mouseEventData.element);
|
||||
});
|
||||
}
|
||||
|
||||
function createNewMeasurement(mouseEventData) {
|
||||
var imageId = mouseEventData.image.imageId;
|
||||
|
||||
// Get studyInstanceUid
|
||||
var study = cornerstoneTools.metaData.get('study', imageId);
|
||||
var studyInstanceUid = study.studyInstanceUid;
|
||||
var patientId = study.patientId;
|
||||
|
||||
// Get seriesInstanceUid
|
||||
var series = cornerstoneTools.metaData.get('series', imageId);
|
||||
var seriesInstanceUid = series.seriesInstanceUid;
|
||||
|
||||
// create the measurement data for this tool with the end handle activated
|
||||
var measurementData = {
|
||||
visible: true,
|
||||
active: true,
|
||||
handles: {
|
||||
start: {
|
||||
x: mouseEventData.currentPoints.image.x,
|
||||
y: mouseEventData.currentPoints.image.y,
|
||||
highlight: true,
|
||||
active: false
|
||||
},
|
||||
end: {
|
||||
x: mouseEventData.currentPoints.image.x,
|
||||
y: mouseEventData.currentPoints.image.y,
|
||||
highlight: true,
|
||||
active: false
|
||||
},
|
||||
textBox: {
|
||||
x: mouseEventData.currentPoints.image.x - 50,
|
||||
y: mouseEventData.currentPoints.image.y - 50,
|
||||
pointNearHandle: pointNearTextBox,
|
||||
active: false,
|
||||
movesIndependently: true,
|
||||
drawnIndependently: true,
|
||||
allowedOutsideImage: true
|
||||
}
|
||||
},
|
||||
imageId: imageId,
|
||||
seriesInstanceUid: seriesInstanceUid,
|
||||
studyInstanceUid: studyInstanceUid,
|
||||
patientId: patientId,
|
||||
measurementText: '',
|
||||
isTarget: false,
|
||||
uid: uuid.v4()
|
||||
};
|
||||
|
||||
return measurementData;
|
||||
}
|
||||
///////// END ACTIVE TOOL ///////
|
||||
|
||||
function pointNearTool(element, data, coords) {
|
||||
var lineSegment = {
|
||||
start: cornerstone.pixelToCanvas(element, data.handles.start),
|
||||
end: cornerstone.pixelToCanvas(element, data.handles.end)
|
||||
};
|
||||
var distanceToPoint = cornerstoneMath.lineSegment.distanceToPoint(lineSegment, coords);
|
||||
|
||||
if (pointNearTextBox(element, data.handles.textBox, coords)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return distanceToPoint < 25;
|
||||
}
|
||||
|
||||
function pointNearTextBox(element, handle, coords) {
|
||||
if (!handle.boundingBox) {
|
||||
return;
|
||||
}
|
||||
return cornerstoneMath.point.insideRect(coords, handle.boundingBox);
|
||||
}
|
||||
|
||||
///////// BEGIN IMAGE RENDERING ///////
|
||||
function onImageRendered(e, eventData) {
|
||||
var element = eventData.element;
|
||||
|
||||
// if we have no toolData for this element, return immediately as there is nothing to do
|
||||
var toolData = cornerstoneTools.getToolState(element, toolType);
|
||||
if (!toolData) {
|
||||
return;
|
||||
}
|
||||
|
||||
// we have tool data for this element - iterate over each one and draw it
|
||||
var context = eventData.canvasContext.canvas.getContext('2d');
|
||||
context.setTransform(1, 0, 0, 1, 0, 0);
|
||||
|
||||
var color;
|
||||
var lineWidth = cornerstoneTools.toolStyle.getToolWidth();
|
||||
var font = cornerstoneTools.textStyle.getFont();
|
||||
var config = cornerstoneTools.nonTarget.getConfiguration();
|
||||
|
||||
context.font = font;
|
||||
for (var i = 0; i < toolData.data.length; i++) {
|
||||
var data = toolData.data[i];
|
||||
|
||||
context.save();
|
||||
|
||||
// configurable shadow from CornerstoneTools
|
||||
if (config && config.shadow) {
|
||||
context.shadowColor = '#000000';
|
||||
context.shadowOffsetX = +1;
|
||||
context.shadowOffsetY = +1;
|
||||
}
|
||||
|
||||
if (data.active) {
|
||||
color = cornerstoneTools.toolColors.getActiveColor();
|
||||
} else {
|
||||
color = cornerstoneTools.toolColors.getToolColor();
|
||||
}
|
||||
|
||||
// Draw the arrow
|
||||
var handleStartCanvas = cornerstone.pixelToCanvas(element, data.handles.start);
|
||||
var handleEndCanvas = cornerstone.pixelToCanvas(element, data.handles.end);
|
||||
var canvasTextLocation = cornerstone.pixelToCanvas(element, data.handles.textBox);
|
||||
|
||||
cornerstoneTools.drawArrow(context, handleEndCanvas, handleStartCanvas, color, lineWidth);
|
||||
|
||||
if (config.drawHandles) {
|
||||
cornerstoneTools.drawHandles(context, eventData, data.handles, color);
|
||||
} else if (config.drawHandlesOnHover && data.handles.start.active) {
|
||||
cornerstoneTools.drawHandles(context, eventData, [ lesion.handles.start ], color);
|
||||
} else if (config.drawHandlesOnHover && data.handles.end.active) {
|
||||
cornerstoneTools.drawHandles(context, eventData, [ lesion.handles.end ], color);
|
||||
}
|
||||
|
||||
// Draw the text
|
||||
if (data.lesionName && data.lesionName !== '') {
|
||||
//Draw linked line as dashed
|
||||
var mid = {
|
||||
x: (handleStartCanvas.x + handleEndCanvas.x) / 2,
|
||||
y: (handleStartCanvas.y + handleEndCanvas.y) / 2
|
||||
};
|
||||
|
||||
context.beginPath();
|
||||
context.strokeStyle = color;
|
||||
context.lineWidth = lineWidth;
|
||||
context.setLineDash([2, 3]);
|
||||
|
||||
context.moveTo(mid.x, mid.y);
|
||||
context.lineTo(canvasTextLocation.x + 20, canvasTextLocation.y + 20);
|
||||
context.stroke();
|
||||
|
||||
var boundingBox = cornerstoneTools.drawTextBox(context, data.lesionName, canvasTextLocation.x, canvasTextLocation.y, color);
|
||||
data.handles.textBox.boundingBox = boundingBox;
|
||||
}
|
||||
|
||||
context.restore();
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Touch tool ----
|
||||
|
||||
///////// BEGIN ACTIVE TOOL ///////
|
||||
function addNewMeasurementTouch(touchEventData) {
|
||||
var element = touchEventData.element;
|
||||
|
||||
function doneCallback(lesionNumber) {
|
||||
measurementData.lesionName = "Non-Target " + lesionNumber;
|
||||
measurementData.lesionNumber = lesionNumber;
|
||||
measurementData.active = true;
|
||||
cornerstone.updateImage(element);
|
||||
}
|
||||
|
||||
var measurementData = createNewMeasurement(touchEventData);
|
||||
cornerstoneTools.addToolState(element, toolType, measurementData);
|
||||
$(element).off('CornerstoneToolsTouchDrag', cornerstoneTools.nonTargetTouch.touchMoveHandle);
|
||||
$(element).off('CornerstoneToolsDragStartActive', cornerstoneTools.nonTargetTouch.touchDownActivateCallback);
|
||||
$(element).off('CornerstoneToolsTap', cornerstoneTools.nonTargetTouch.tapCallback);
|
||||
var config = cornerstoneTools.nonTarget.getConfiguration();
|
||||
|
||||
// Set lesion number and lesion name
|
||||
if (measurementData.lesionName === undefined) {
|
||||
config.setLesionNumberCallback(measurementData, touchEventData, doneCallback);
|
||||
}
|
||||
cornerstone.updateImage(element);
|
||||
|
||||
cornerstoneTools.moveNewHandleTouch(touchEventData, toolType, measurementData, measurementData.handles.end, function() {
|
||||
cornerstone.updateImage(element);
|
||||
|
||||
if (cornerstoneTools.anyHandlesOutsideImage(touchEventData, measurementData.handles)) {
|
||||
// delete the measurement
|
||||
cornerstoneTools.removeToolState(element, toolType, measurementData);
|
||||
}
|
||||
|
||||
config.getNonTargetLesionLocationCallback(measurementData, touchEventData, doneCallback);
|
||||
|
||||
|
||||
$(element).on('CornerstoneToolsTouchDrag', cornerstoneTools.nonTargetTouch.touchMoveHandle);
|
||||
$(element).on('CornerstoneToolsDragStartActive', cornerstoneTools.nonTargetTouch.touchDownActivateCallback);
|
||||
$(element).on('CornerstoneToolsTap', cornerstoneTools.nonTargetTouch.tapCallback);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function doubleClickCallback(e, eventData) {
|
||||
var element = eventData.element;
|
||||
var data;
|
||||
|
||||
function doneChangingTextCallback(data, updatedText, deleteTool) {
|
||||
if (deleteTool === true) {
|
||||
cornerstoneTools.removeToolState(element, toolType, data);
|
||||
} else {
|
||||
data.text = updatedText;
|
||||
}
|
||||
|
||||
data.active = false;
|
||||
cornerstone.updateImage(element);
|
||||
}
|
||||
|
||||
if (e.data && e.data.mouseButtonMask && !cornerstoneTools.isMouseButtonEnabled(eventData.which, e.data.mouseButtonMask)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var config = cornerstoneTools.nonTarget.getConfiguration();
|
||||
|
||||
var coords = eventData.currentPoints.canvas;
|
||||
var toolData = cornerstoneTools.getToolState(element, toolType);
|
||||
|
||||
// now check to see if there is a handle we can move
|
||||
if (!toolData) {
|
||||
return false;
|
||||
}
|
||||
|
||||
for (var i = 0; i < toolData.data.length; i++) {
|
||||
data = toolData.data[i];
|
||||
if (pointNearTool(element, data, coords)) {
|
||||
data.active = true;
|
||||
cornerstone.updateImage(element);
|
||||
// Allow relabelling via a callback
|
||||
config.changeTextCallback(data, doneChangingTextCallback);
|
||||
|
||||
e.stopImmediatePropagation();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return false; // false = causes jquery to preventDefault() and stopPropagation() this event
|
||||
}
|
||||
|
||||
cornerstoneTools.nonTarget = cornerstoneTools.mouseButtonTool({
|
||||
addNewMeasurement: addNewMeasurement,
|
||||
createNewMeasurement: createNewMeasurement,
|
||||
onImageRendered: onImageRendered,
|
||||
pointNearTool: pointNearTool,
|
||||
toolType: toolType
|
||||
//mouseDoubleClickCallback: doubleClickCallback
|
||||
});
|
||||
|
||||
cornerstoneTools.nonTarget.setConfiguration(configuration);
|
||||
|
||||
cornerstoneTools.nonTargetTouch = cornerstoneTools.touchTool({
|
||||
addNewMeasurement: addNewMeasurementTouch,
|
||||
createNewMeasurement: createNewMeasurement,
|
||||
onImageRendered: onImageRendered,
|
||||
pointNearTool: pointNearTool,
|
||||
toolType: toolType
|
||||
// pressCallback: doubleClickCallback
|
||||
});
|
||||
|
||||
|
||||
})($, cornerstone, cornerstoneMath, cornerstoneTools);
|
||||
+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