Lesion Tracker Redesign so far
This commit is contained in:
Erik Ziegler committed
1 parent
b247e89d8b
commit
a9a4f3f82b
109 files changed
+2972
-936
No files matched your search
@@ -1,27 +1,30 @@
|
||||
<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 }}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!--Each measurement as row-->
|
||||
{{ #each measurement }}
|
||||
{{ >lesionTableRow }}
|
||||
{{ /each }}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="lesionTableLayoutChanger viewerRoundedButtonGroup">
|
||||
{{ >roundedButtonGroup buttonGroupData }}
|
||||
</div>
|
||||
<div class="lesionTableTimepointHeaderRow">
|
||||
<div class="spacer">
|
||||
</div>
|
||||
{{ #each timepoints }}
|
||||
{{ >lesionTableTimepointHeader }}
|
||||
{{ /each }}
|
||||
</div>
|
||||
<div class="lesionTableWrapper">
|
||||
{{ >lesionTableHeaderRow id="target" type="Targets" measurements=targets}}
|
||||
{{ #each targets }}
|
||||
{{ >lesionTableRow }}
|
||||
{{ /each }}
|
||||
|
||||
{{ >lesionTableHeaderRow id="nonTarget" type="Non-targets" measurements=nonTargets}}
|
||||
{{ #each nonTargets }}
|
||||
{{ >lesionTableRow }}
|
||||
{{ /each }}
|
||||
|
||||
{{ >lesionTableHeaderRow id="newLesions" type="New lesions" measurements=newLesions}}
|
||||
{{ #each nonTargets }}
|
||||
{{ >lesionTableRow }}
|
||||
{{ /each }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,9 +1,30 @@
|
||||
Template.lesionTable.helpers({
|
||||
measurement: function() {
|
||||
targets: function() {
|
||||
// All Targets shall be listed first followed by Non-Targets
|
||||
return Measurements.find({}, {
|
||||
return Measurements.find({
|
||||
isTarget: true
|
||||
}, {
|
||||
sort: {
|
||||
lesionNumberAbsolute: 1
|
||||
}
|
||||
});
|
||||
},
|
||||
nonTargets: function() {
|
||||
// All Targets shall be listed first followed by Non-Targets
|
||||
return Measurements.find({
|
||||
isTarget: false
|
||||
}, {
|
||||
sort: {
|
||||
lesionNumberAbsolute: 1
|
||||
}
|
||||
});
|
||||
},
|
||||
newLesions: function() {
|
||||
// All Targets shall be listed first followed by Non-Targets
|
||||
return Measurements.find({
|
||||
saved: false
|
||||
}, {
|
||||
sort: {
|
||||
isTarget: -1,
|
||||
lesionNumberAbsolute: 1
|
||||
}
|
||||
});
|
||||
@@ -14,59 +35,43 @@ Template.lesionTable.helpers({
|
||||
latestDate: 1
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
buttonGroupData() {
|
||||
const instance = Template.instance();
|
||||
return {
|
||||
value: instance.lesionTableLayout,
|
||||
options: [{
|
||||
key: 'comparison',
|
||||
text: 'Comparison'
|
||||
}, {
|
||||
key: 'key',
|
||||
text: 'Key Timepoints'
|
||||
}]
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
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');
|
||||
|
||||
// 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);
|
||||
$(document).off('mouseup').off('mousemove');
|
||||
});
|
||||
|
||||
$(document).on('mousemove', function(e) {
|
||||
var topPosition = e.pageY - pY;
|
||||
var newHeight = startHeight - topPosition;
|
||||
|
||||
// Min lesion table height = 5px
|
||||
if (newHeight < 5) {
|
||||
return;
|
||||
}
|
||||
|
||||
draggableParent.css({
|
||||
top: topPosition,
|
||||
height: newHeight
|
||||
});
|
||||
|
||||
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);
|
||||
/**
|
||||
* Retrieve the lesion id from the DOM data for this row
|
||||
*/
|
||||
/*'click table#tblLesion tbody tr': function(e, template) {
|
||||
var measurementId = $(e.currentTarget).data('measurementid');
|
||||
activateLesion(measurementId, template.data);
|
||||
},*/
|
||||
});
|
||||
|
||||
// Temporary until we have a real window manager with events for series/study changed
|
||||
Session.setDefault('NewSeriesLoaded', false);
|
||||
|
||||
Template.lesionTable.onCreated(function() {
|
||||
var instance = this;
|
||||
|
||||
instance.lesionTableLayout = new ReactiveVar();
|
||||
instance.lesionTableLayout.set('comparisonTimepoints');
|
||||
});
|
||||
|
||||
Template.lesionTable.onRendered(function() {
|
||||
// Find the first measurement by Lesion Number
|
||||
var firstLesion = Measurements.findOne({}, {
|
||||
|
||||
@@ -1,93 +1,23 @@
|
||||
@import "{design}/app"
|
||||
|
||||
#lesionTableContainer
|
||||
width: 100%
|
||||
height: 16%
|
||||
background-color: #000000
|
||||
|
||||
#dragbar
|
||||
width: 100%
|
||||
height: 3px
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
background-color: #666666
|
||||
cursor: row-resize
|
||||
|
||||
#lesionTableWrapper
|
||||
position: relative
|
||||
width: 100%
|
||||
height: 100%
|
||||
margin: 0 auto
|
||||
|
||||
.lesionTable
|
||||
.lesionTableTimepointHeaderRow
|
||||
display: flex
|
||||
|
||||
td, th
|
||||
border: 1px solid #FFFFFF
|
||||
border-collapse: collapse
|
||||
width: 100px
|
||||
.spacer
|
||||
width: 20px
|
||||
|
||||
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%
|
||||
padding-bottom: 20px
|
||||
|
||||
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
|
||||
.lesionTableLayoutChanger
|
||||
padding: 5px
|
||||
text-align: center
|
||||
margin: 0 auto
|
||||
Reference in new issue
Block a user