Updates to Lesion Tracker lesionTable and Packaging

2015-10-23 18:21:46 +02:00
1 parent 4721400b34
commit e2000480d3
@@ -0,0 +1,3 @@
+<template name="lesionDialog">
+    {{> lesionLocationDialog}}
+</template>
@@ -0,0 +1,31 @@
+Template.lesionDialog.onRendered(function () {
+    // Listen lesionMeaurementCreated Event and when this event is triggered, show lesionLocationDialog Box
+    $(document).on("lesionMeasurementCreated",function(e,eventCaller,data){
+        var element  = data.element;
+        var tabId = data.tabId;
+        var viewports = $("#content"+tabId).find(".imageViewerViewport");
+        var viewportIndex = $(viewports).index($(element));
+        data.viewportIndex = viewportIndex;
+        data.totalViewportCount = viewports.length;
+
+        //Set Lesion Table Data to insert into lesion table
+        setLesionTableData(data);
+
+        // Check popup will shown or not
+        var returnVal = lesionNumberIsAdded(data);
+        if(!returnVal.isFound) {
+            if( !Session.get("lesionLocationSelected") ) {
+                $("#modal-dialog-container").css({
+                    "top": eventCaller.pageY,
+                    "left": eventCaller.pageX
+                });
+
+                $("#lesionDialog").modal("show");
+            }
+        } else {
+            // If lesionNumber is added before:
+            data.rowIndex = returnVal.rowIndex;
+            $(document).trigger("addLesionToExistedRow",data);
+        }
+    });
+});
@@ -0,0 +1,20 @@
+<template name="lesionLocationDialog">
+    <div class="modal fade" id="lesionDialog" style=" background-color: transparent;">
+        <div id="modal-dialog-container" class="modal-dialog modal-sm" style="position: absolute; border: none; ">
+            <div class="modal-content" style="padding: 10px;">
+                 <div class="dialogHeader">
+                        <div style="float:left;"><h4>Select Lesion Location</h4></div>
+                        <div style="float:right;"><button class="btn" id="btnCloseLesionPopup" style="outline: 0; border: none; background-color: transparent;"><i class="fa fa-close"></i></button></div>
+                    </div>
+                    <div class="dialogContent" style="margin-bottom: 20px;">
+                        <div class="lesionLocation">
+                            <label>Lesion Location</label>
+                            <select id="selectLesionLocation" style="margin-top:5px;">
+                                <option value="-1"></option>
+                            </select>
+                        </div>
+                    </div>
+            </div>
+        </div>
+    </div>
+</template>
@@ -0,0 +1,49 @@
+//fill selectLesionLocation element
+var lesionLocationsArray = [
+    {location:"Brain Brainstem",hasDescription:false, description:""},
+    {location:"Brain Cerebellum Left",hasDescription:false, description:""},
+    {location:"Brain Cerebrum Left",hasDescription:false, description:""},
+    {location:"Brain Cerebrum Right",hasDescription:false, description:""},
+    {location:"Brain Multiple Sites",hasDescription:false, description:""}
+];
+
+Template.lesionLocationDialog.onRendered(function () {
+
+    function fillSelectLesionLocation () {
+        var el = $("#selectLesionLocation");
+        el.find('option:not(:first)').remove();
+        $.each(lesionLocationsArray, function(key, value) {
+            el.append("<option value='" + key+ "'>" + value.location + "</option>");
+        });
+    }
+
+    // Fill dropdown
+    fillSelectLesionLocation();
+});
+
+Template.lesionLocationDialog.events({
+    'click button#btnCloseLesionPopup': function (e) {
+        $("#lesionDialog").modal("hide");
+    },
+
+    'change select#selectLesionLocation': function (e) {
+        var el = $(e.target);
+        var selectedLocationIndex = el.val()
+        if(selectedLocationIndex !== "-1"){
+
+            var locationObj = lesionLocationsArray[selectedLocationIndex];
+
+            // Trigger location selected event
+            $(document).trigger("lesionLocationSelected",locationObj);
+
+            // Set activeModule parameters in index.html
+            $("#lesionDialog").modal("hide");
+
+            // Select first option
+            el.val($("#selectLesionLocation option:first").val());
+
+            // Set lesion location selected session to prevent open
+            Session.set("lesionLocationSelected", true);
+        }
+    }
+});
@@ -0,0 +1,24 @@
+<template name="lesionTable">
+    <div id="lesionTableContainer">
+        <table class="table table-bordered lesionTable" id="tblLesion">
+            <thead>
+                <tr>
+                    <th id="thNumber">Lesion #</th>
+                    <th id="thTarget">Target</th>
+                    <th id="thLocation">Location</th>
+                    <!--Each time point name as a column-->
+                    {{ #each timepointNames }}
+                        {{ >lesionTableTimepointHeader }}
+                    {{ /each }}
+                </tr>
+            </thead>
+            <tbody>
+                {{ #each measurement }}
+                    {{ >lesionTableRow }}
+                {{ /each }}
+                <!--Each measurement as row-->
+                <!--Each time point as a column-->
+            </tbody>
+        </table>
+    </div>
+</template>
@@ -0,0 +1,187 @@
+measurements = new Meteor.Collection(null);
+
+var test = {
+    lesionNumber: 1,
+    isTarget: true,
+    location: 'Brain',
+    timepoints: {
+        "now": {
+            imageId: "blah",
+            timepointUid: "timepointX",
+            date: 2010,
+            isDirty: true,
+            longestDiameter: 5
+        },
+        "earlier": {
+            imageId: "blah2",
+            timepointUid: "timepointy",
+            date: 2010,
+            isDirty: true,
+            longestDiameter: 8
+        }
+    }
+};
+
+measurements.insert(test);
+
+Template.lesionTable.helpers({
+    'measurement': function() {
+        return measurements.find();
+    },
+    'timepointNames': function() {
+        return [
+            {name: 'now'},
+            {name: 'earlier'}
+            ];
+    }
+});
+
+/*var lesionTableData;
+setLesionTableData = function (data) {
+    lesionTableData = data;
+};
+
+getLesionTableData = function () {
+    return lesionTableData;
+};
+
+lesionNumberIsAdded = function(data) {
+    var tabId = data.tabId;
+    var returnValue = {isFound: false, rowIndex : -1};
+    $('#content'+tabId+' table tbody tr td.lesionNumber').each( function(){
+        console.log($(this).text());
+        var lesionNumber = parseInt($(this).text());
+
+        if(lesionNumber == data.lesionNumber) {
+            var $tr = $(this).closest('tr');
+            var rowIndex = $tr.index();
+            returnValue.rowIndex = rowIndex;
+            returnValue.isFound =  true;
+        }
+    });
+
+    return returnValue;
+};
+
+returnTblStr = function (obj) {
+    // Get count of lds
+    var tabId = obj.tabId;
+    var lds = $("#content"+tabId).find(".lesionTable th.ld");
+
+    var rowStr = '<tr style="background-color: #b3b3b3;">' +
+        '<td style="text-align:center;"><button  type="button" class="btnRemove fa fa-times fa-lg" title="Remove"></button></td>' +
+        '<td style="text-align:center;" class="lesionNumber">'+obj.lesionNumber+'</td>' +
+        '<td style="text-align:center;">Y</td>';
+
+    // Add measurement to right column
+    if(obj.totalViewportCount) {
+        for(var i=0; i< lds.length; i++) {
+            if(i === obj.viewportIndex) {
+                rowStr += '<td>'+obj.lesionLocationObj.location+'</td><td id='+obj.lineIndex+' class="lesion" style="text-align: left;">'+obj.lesions+'</td>';
+
+            }else{
+                rowStr += '<td>'+obj.lesionLocationObj.location+'</td><td class="lesion" style="text-align: left;"></td>';
+            }
+        }
+    }
+    rowStr += '</tr>';
+
+    return rowStr;
+};
+
+//Link lesionLocationSelected event
+$(document).on("lesionLocationSelected",function(event,data ){
+    var lesionData = getLesionTableData();
+    lesionData.lesionLocationObj = data;
+    var tabId = lesionData.tabId;
+    //var el_index = lesionData.viewportIndex;
+    var tableEl = $("#content"+tabId).find(".lesionTable");
+    var tblStr = returnTblStr(lesionData);
+    $(tableEl).append(tblStr);
+
+});
+
+//Link addLesionToExistedRow event
+$(document).on("addLesionToExistedRow",function(event,data ){
+    // Get count of lds
+    var tabId = data.tabId;
+    var lds = $("#content"+tabId).find(".lesionTable th.ld");
+    // Add measurement to right column
+    for(var i=0; i< lds.length; i++) {
+        if(i === data.viewportIndex) {
+            var rowIndex =  data.rowIndex + 1;
+            var row = $("#content"+tabId).find(".lesionTable tr").eq(rowIndex);
+            var cell = $(row).find("td.lesion").eq(data.viewportIndex);
+            $(cell).attr("id", data.lineIndex);
+            $(cell).html(data.lesions);
+        }
+    }
+});
+
+$(document).on("lesionTextChanged", function(event, data){
+    var cellId = data.index;
+    $("td#"+cellId).html(data.measurementText);
+});
+
+
+Template.lesionTable.onRendered( function () {
+
+    // TODO: Set lesion table as hiding-panel
+    console.log(this);
+    var template = this;
+    var tabId = this.data.tabId;
+    var viewports = $("#content"+tabId).find(".imageViewerViewport");
+    var lesionTable = $("#content"+tabId).find(".lesionTable");
+
+    var viewportCount = viewports.length;
+
+    var lesionTableWidth = $(lesionTable).width();
+    var viewportWidth = viewports.width();
+    var ldColumnRatio = viewportWidth / lesionTableWidth * 100;
+
+    // Add LD column as viewportCount
+    // Set lesion table columns width
+
+    if(viewportCount > 0) {
+        if(viewportCount == 1) {
+            $('#content'+tabId+' thead tr').append( $('<th />', {text : 'Location', width: ldColumnRatio/2+'%', class:'thLocation'}) )
+            $('#content'+tabId+' thead tr').append( $('<th />', {text : 'LD', width: ldColumnRatio/2+'%', class:'ld'}) )
+
+        } else if(viewportCount == 2) {
+
+            for(var i = 0; i< viewportCount; i++) {
+                $('#content'+tabId+' thead tr').append( $('<th />', {text : 'Location'+i, width: ldColumnRatio/2+'%', class:'thLocation'}) )
+                $('#content'+tabId+' thead tr').append( $('<th />', {text : 'LD'+i, width: ldColumnRatio/2+'%', class:'ld'}) )
+            }
+
+        } else if(viewportCount > 2) {
+            // TODO: Set when viewport count is bigger than 2
+        }
+    }
+    // TODO: When layout is changed, add and calculate new columns for measurement
+});
+
+Template.lesionTable.events({
+    'click button.btnRemove': function (e) {
+        var el = $(e.target);
+    },
+    'click table tbody tr': function(e) {
+        console.log(this);
+        var row = e.currentTarget;
+        var lesionCells =  $(row).find("td.lesion");
+        for(var i = 0; i< lesionCells.length; i++) {
+            var cell =  lesionCells[i];
+            var idAttr = $(cell).attr("id");
+            if(idAttr != undefined) {
+               // TODO: Create eventObject and trigger LesionToolModified event
+                var viewports = $(".imageViewerViewport");
+                var eventObject = {
+                    enabledElement: cornerstone.getEnabledElement(viewports[0]),
+                    lineIndex: parseInt(idAttr),
+                    type: "active"
+                };
+                $(viewports[0]).trigger("LesionToolModified", eventObject);
+            }
+        }
+    }
+});*/
@@ -0,0 +1,44 @@
+#lesionTableContainer
+  width: 100%
+  height: 25%
+
+table.lesionTable
+    thead
+        th
+            background-color: #424242
+            font-style: italic
+            color:white
+            text-align: center
+            height: 15px
+            width: 20px
+
+table.lesionTable > thead > tr > th {
+    padding: 4px;
+    margin: 0;
+    height: 25px;
+    line-height: 15px;
+}
+
+table.lesionTable > tbody > tr > td {
+    padding: 4px;
+    margin: 0;
+    height: 25px;
+    line-height: 15px;
+}
+
+table.lesionTable tbody tr:hover{
+    background-color: #d1d1d1;
+}
+
+table.lesionTable tbody tr{
+    background-color: #b3b3b3;
+    color: #424242;
+    line-height: 14px;
+}
+
+
+.btnRemove{
+    border: none;
+    outline:none;
+    background-color: transparent;
+}
@@ -0,0 +1,11 @@
+<template name="lesionTableRow">
+    <tr>
+        <th class='lesionNumber'>{{lesionNumber}}</th>
+        <th class='target'>{{isTarget}}</th>
+        <th class='location'>{{location}}</th>
+        <!--Each time point as a column-->
+        {{ #each timepoints}}
+            {{ >lesionTableTimepointCell}}
+        {{ /each }}
+    </tr>
+</template>
@@ -0,0 +1,10 @@
+Template.lesionTableRow.helpers({
+    'timepoints': function() {
+        var array = [];
+        var timepoints = this.timepoints;
+        Object.keys(timepoints).forEach(function(key) {
+            array.push(timepoints[key]);
+        });
+        return array;
+    },
+});
@@ -0,0 +1,3 @@
+<template name="lesionTableTimepointCell">
+    <td>{{longestDiameter}}</td>
+</template>
@@ -0,0 +1,3 @@
+<template name="lesionTableTimepointHeader">
+    <th>{{name}}</th>
+</template>