Updated with Aysel's LesionTracker changes

LesionTracker/client/compatibility/docking-container.js

@@ -1,33 +1,39 @@
-//Collapse the container
+(function($) {
-function collapseContainer ( container ) {
-    container.toggleClass("collapseHorizontal");
-}
 
-//function add collapse button
-function addButtonCollapse ( container ) {
-    var btnCollapse = document.createElement("button");
-    btnCollapse.innerHTML = ">";
-    btnCollapse.classList.add('btnCollapse');
 
-    btnCollapse.onclick = function() { // Note this is a function
+    //Collapse the container
-        collapseContainer(container);
+    function collapseContainer ( container ) {
+        container.toggleClass("collapseHorizontal");
+        var btnCollapse = container.find(".btnCollapse");
+    }
+
+    //function add collapse button
+    function addButtonCollapse ( container ) {
+        var btnCollapse = document.createElement("button");
+        btnCollapse.innerHTML = ">";
+        $(btnCollapse).addClass ("btnCollapse");
+
+        btnCollapse.onclick = function() { // Note this is a function
+            collapseContainer(container);
+        };
+        container.append(btnCollapse);
+    }
+
+    $.fn.dockingContainer = function(options) {
+        var self = this;
+        var opts = $.extend( {}, $.fn.dockingContainer.defaults, options);
+
+        //Set container class
+        this.addClass("dockingContainer");
+
+        //Add btnCollapse
+        addButtonCollapse(this);
+        return this;
     };
-    container.append(btnCollapse);
-}
 
-$.fn.dockingContainer = function(options) {
+    //Defaults
-    var self = this;
+    $.fn.dockingContainer.defaults = {
-    var opts = $.extend( {}, $.fn.dockingContainer.defaults, options);
+      background: "black"
+    };
 
-    //Set container class
+}(jQuery));
-    this.addClass("dockingContainer");
-
-    //Add btnCollapse
-    addButtonCollapse(this);
-    return this;
-};
-
-//Defaults
-$.fn.dockingContainer.defaults = {
-    background: "black"
-};

LesionTracker/client/compatibility/lesionTool.js

@@ -22,7 +22,7 @@ var cornerstoneTools = (function ($, cornerstone, cornerstoneMath, cornerstoneTo
 
         //Listens LesionToolModified event and calls measurementModified function when lesion measurement is changed or updated.
         $(element).on("LesionToolModified", measurementModified);
-        $(element).trigger("LesionMeasurementCreated");
+        $(element).trigger("LesionMeasurementCreated", mouseEventData);
 
         // create the measurement data for this tool with the end handle activated
         var measurementData = {
@@ -282,9 +282,4 @@ var cornerstoneTools = (function ($, cornerstone, cornerstoneMath, cornerstoneTo
         toolType: toolType
     });
     return cornerstoneTools;
-}($, cornerstone, cornerstoneMath, cornerstoneTools));
+}($, cornerstone, cornerstoneMath, cornerstoneTools));
-
-toolManager.addTool('lesion', {
-    mouse: cornerstoneTools.lesion,
-    touch: cornerstoneTools.lesionTouch
-});

LesionTracker/client/components/init.js

@@ -0,0 +1,6 @@
+Meteor.startup(function() {
+    toolManager.addTool('lesion', {
+        mouse: cornerstoneTools.lesion,
+        touch: cornerstoneTools.lesionTouch
+    });
+});

LesionTracker/client/components/lesionDialog/lesionDialog.html

@@ -0,0 +1,3 @@
+<template name="lesionDialog">
+    {{> lesionLocationDialog}}
+</template>

LesionTracker/client/components/lesionDialog/lesionDialog.js

@@ -0,0 +1,23 @@
+Template.lesionDialog.onRendered(function () {
+    // Listen lesionMeaurementCreated Event and when this event is triggered, show lesionLocationDialog Box
+    var viewportIndex = this.data.activeViewport.get();
+
+    $(document).on("LesionMeasurementCreated",function(e, eventData){
+
+        console.log("lesionMeasurementCreated");
+        var data = {};
+        data.viewportIndex = viewportIndex;
+
+        //Set Lesion Table Data to insert into lesion table
+        setLesionTableData(data);
+
+        if( !Session.get("lesionLocationSelected") ) {
+            $("#modal-dialog-container").css({
+                "top": eventData.currentPoints.page.y,
+                "left": eventData.currentPoints.page.x
+            });
+
+            $("#lesionDialog").modal("show");
+        }
+    });
+});

LesionTracker/client/components/lesionLocationDialog/lesionLocationDialog.html

@@ -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>

LesionTracker/client/components/lesionLocationDialog/lesionLocationDialog.js

@@ -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);
+        }
+    }
+});

LesionTracker/client/components/lesionMeasurementContainer/lesionMeasurementContainer.html

@@ -1,5 +1,15 @@
 <template name="lesionMeasurementContainer">
     <div class="lesionMeasurementContainer">
-        Table of lesion locations goes here
+        <table class="lesionTable" id="tblLesion">
+            <thead>
+            <tr class="headRow">
+                <th>#</th>
+                <th>Location</th>
+                <th>LD</th>
+                <th style="text-align: center;"><i class="fa fa-times fa-lg"></i></th>
+            </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
     </div>
 </template>

LesionTracker/client/components/lesionMeasurementContainer/lesionMeasurementContainer.js

@@ -0,0 +1,28 @@
+var lesionTableData;
+
+setLesionTableData = function (data) {
+    lesionTableData = data;
+};
+
+getLesionTableData = function () {
+    return lesionTableData;
+};
+
+returnTblStr = function (obj) {
+    return '<tr id="' + obj.lineIndex + '" toolType="' + obj.toolType + '"><td class="tblRow">1</td><td class="tblRow">' + obj.lesionLocationObj.location + '</td><td class="tblRow">' + obj.lesions + '</td><td id="' + obj.lineIndex + '" toolType="' + obj.toolType + '"><button  type="button" class="btnRemove fa fa-times fa-lg" title="Remove"></button></td></tr>';
+};
+
+Template.lesionMeasurementContainer.onRendered( function () {
+    console.log("rendered lesion");
+    //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 lesionTables = $(".lesionTable");
+        var tableEl = lesionTables.get(el_index);
+        var tblStr = returnTblStr(lesionData);
+        $(tableEl).append(tblStr);
+    });
+});

LesionTracker/client/components/lesionMeasurementContainer/lesionMeasurementContainer.styl

@@ -3,5 +3,19 @@
   float: left
   height: 100%
   
-  background-color: white
+#tblLesion {
-  border: 8px solid lightblue
+    overflow: auto;
+    border: solid 1px white;
+    padding: 0;
+    margin: 0 auto;
+    font-size: 14px;
+    cursor: pointer;
+    color: white;
+    width: 100%;
+    height:100%;
+    background-color: black;
+}
+
+#tblLesion > tr {background-color: #545454;border-bottom: solid 1px black; width: 100%;}
+#tblLesion > tr.headRow{background-color: #424242;width: 100%; line-height: 15px;}
+#tblLesion > tr.headRow th{padding:5px;text-align: left;font-style: italic;font-size:14px;}

LesionTracker/client/components/viewer.html

@@ -1,5 +1,6 @@
 <template name="viewer">
     <div id="viewer" class="viewer">
+        {{ >lesionDialog studies=studies activeViewport=activeViewport}}
         {{ >hidingPanel studies=studies activeViewport=activeViewport}}
         {{ >viewerMain studies=studies activeViewport=activeViewport viewportRows=viewportRows viewportColumns=viewportColumns}}
         {{ >lesionMeasurementContainer studies=studies activeViewport=activeViewport}}

LesionTracker/client/route.js

@@ -4,8 +4,6 @@ Router.configure({
     notFoundTemplate: 'notFound'
 });
 
-
-
 Router.route('/', function () {
     this.render('worklist', {});
 });