Updates to fix dialogs for non-target lesions.

OHIFViewer/client/components/viewer/viewer.js

@@ -42,17 +42,6 @@ Template.viewer.onCreated(function() {
             toolStateManager.clear(element);
             cornerstone.updateImage(element);
         },
-        playClip: function(element) {
-            var viewportIndex = $('.imageViewerViewport').index(element);
-            var isPlaying = OHIF.viewer.isPlaying[viewportIndex] || false;
-            if (isPlaying === true) {
-                cornerstoneTools.stopClip(element);
-            } else {
-                cornerstoneTools.playClip(element);
-            }
-            OHIF.viewer.isPlaying[viewportIndex] = !OHIF.viewer.isPlaying[viewportIndex];
-            Session.set('UpdateCINE', Random.id());
-        },
         previousPresentationGroup: function() {
             WindowManager.previousPresentationGroup();
         },

Packages/lesiontracker/client/compatibility/nonTargetTool.js

@@ -6,8 +6,8 @@
 
     var configuration = {
         setLesionNumberCallback: setLesionNumberCallback,
-        getNonTargetLesionLocationCallback: getNonTargetLesionLocationCallback,
+        getLesionLocationCallback: getLesionLocationCallback,
-        changeNonTargetLesionLocationCallback: changeNonTargetLesionLocationCallback,
+        changeLesionLocationCallback: changeLesionLocationCallback,
         drawHandles: false,
         drawHandlesOnHover: true,
         arrowFirst: true
@@ -21,11 +21,11 @@
     }
     // Define a callback to get your text annotation
     // This could be used, e.g. to open a modal
-    function getNonTargetLesionLocationCallback(measurementData, eventData, doneCallback) {
+    function getLesionLocationCallback(measurementData, eventData, doneCallback) {
         doneCallback(prompt('Enter your lesion location:'));
     }
 
-    function changeNonTargetLesionLocationCallback(measurementData, eventData, doneCallback) {
+    function changeLesionLocationCallback(measurementData, eventData, doneCallback) {
         doneCallback(prompt('Change your lesion location:'));
     }
 
@@ -71,7 +71,7 @@
                 // delete the measurement
                 cornerstoneTools.removeToolState(mouseEventData.element, toolType, measurementData);
             }else{
-                config.getNonTargetLesionLocationCallback(measurementData, mouseEventData, doneCallback);
+                config.getLesionLocationCallback(measurementData, mouseEventData, doneCallback);
 
             }
 
@@ -268,7 +268,7 @@
                 cornerstoneTools.removeToolState(element, toolType, measurementData);
             }
 
-            config.getNonTargetLesionLocationCallback(measurementData, touchEventData, doneCallback);
+            config.getLesionLocationCallback(measurementData, touchEventData, doneCallback);
 
 
             $(element).on('CornerstoneToolsTouchDrag', cornerstoneTools.nonTargetTouch.touchMoveHandle);
@@ -282,11 +282,10 @@
         var element = eventData.element;
         var data;
 
-        function doneChangingTextCallback(data, updatedText, deleteTool) {
+        function doneCallback(data, deleteTool) {
             if (deleteTool === true) {
                 cornerstoneTools.removeToolState(element, toolType, data);
-            } else {
+                cornerstone.updateImage(element);
-                data.text = updatedText;
             }
 
             data.active = false;
@@ -313,7 +312,7 @@
                 data.active = true;
                 cornerstone.updateImage(element);
                 // Allow relabelling via a callback
-                config.changeTextCallback(data, doneChangingTextCallback);
+                config.changeLesionLocationCallback(data, eventData, doneCallback);
 
                 e.stopImmediatePropagation();
                 return false;
@@ -328,8 +327,8 @@
         createNewMeasurement: createNewMeasurement,
         onImageRendered: onImageRendered,
         pointNearTool: pointNearTool,
-        toolType: toolType
+        toolType: toolType,
-        //mouseDoubleClickCallback: doubleClickCallback
+        mouseDoubleClickCallback: doubleClickCallback
     });
 
     cornerstoneTools.nonTarget.setConfiguration(configuration);

Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.html

@@ -1,40 +1,61 @@
 <template name="nonTargetLesionDialog">
     <div id="nonTargetLesionLocationDialog">
         <div class="dialogHeader">
-            <div class="dialogHeader">
+            <h4>Select Lesion Location</h4>
-                <div><h4>Select Lesion Location</h4></div>
-            </div>
         </div>
         <div class="dialogContent">
             <div class="lesionLocation">
-                <div class="elementContainer">
+                <label>Lesion Location</label>
-                    <label>Lesion Location</label>
+                <select id="selectNonTargetLesionLocation">
-                </div>
+                    <option value="-1"></option>
-                <div class="elementContainer">
+                    {{ #each lesionLocations}}
-                    <select id="selectNonTargetLesionLocation">
+                    <option value='{{_id}}'>{{location}}</option>
-                        <option value="-1"></option>
+                    {{ /each}}
-                        {{ #each lesionLocations}}
+                </select>
-                        <option value='{{_id}}'>{{location}}</option>
-                        {{ /each}}
-                    </select>
-                </div>
             </div>
             <div class="locationResponse">
-                <div class="elementContainer">
+                <label>Response</label>
-                    <label>Response</label>
+                <select id="selectNonTargetLesionLocationResponse">
-                </div>
+                    <option value="-1"></option>
-                <div class="elementContainer">
+                    {{ #each locationResponses}}
-                    <select id="selectNonTargetLesionLocationResponse">
+                    <option value='{{code}}'>{{code}} - {{text}}</option>
-                        <option value="-1"></option>
+                    {{ /each}}
-                        {{ #each locationResponses}}
+                </select>
-                        <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>
+
+    <div id="nonTargetLesionRelabelDialog">
+        <div class="dialogHeader">
+            <h4>Select Lesion Location</h4>
+        </div>
+        <div class="dialogContent">
+            <div class="lesionLocation">
+                <label>Lesion Location</label>
+                <select id="selectNonTargetLesionLocation">
+                    <option value="-1"></option>
+                    {{ #each lesionLocations}}
+                    <option value='{{_id}}'>{{location}}</option>
+                    {{ /each}}
+                </select>
+            </div>
+            <div class="locationResponse">
+                <label>Response</label>
+                <select id="selectNonTargetLesionLocationResponse">
+                    <option value="-1"></option>
+                    {{ #each locationResponses}}
+                    <option value='{{code}}'>{{code}} - {{text}}</option>
+                    {{ /each}}
+                </select>
+            </div>
+            <div class="locationOK">
+                <button class="btn btn-link" id="removeLesion">Remove</button>
+
+                <button class="btn btn-primary" id="nonTargetLesionOK">OK</button>
+            </div>
+        </div>
+    </div>
 </template>

Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.js

@@ -36,7 +36,7 @@ function setLesionNumberCallback(measurementData, eventData, doneCallback) {
 // 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) {
+function getLesionLocationCallback(measurementData, eventData) {
     Template.nonTargetLesionDialog.measurementData = measurementData;
 
     // Get the non-target lesion location dialog
@@ -49,11 +49,6 @@ function getNonTargetLesionLocationCallback(measurementData, eventData) {
     // 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
@@ -112,14 +107,63 @@ function getNonTargetLesionLocationCallback(measurementData, eventData) {
     dialog.css(dialogProperty);
 }
 
-function changeNonTargetLesionLocationCallback(measurementData, eventData, doneCallback) {
+function changeLesionLocationCallback(measurementData, eventData, doneCallback) {
-    doneCallback(prompt('Change your lesion location:'));
+    Template.nonTargetLesionDialog.measurementData = measurementData;
+    Template.nonTargetLesionDialog.doneCallback = doneCallback;
+
+    // Get the non-target lesion location dialog
+    var dialog = $("#nonTargetLesionRelabelDialog");
+    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");
+
+    log.info(measurementData);
+    selectorLocation.find("option:first").prop("selected", "selected");
+    selectorResponse.find("option:first").prop("selected", "selected");
+
+    // Allow location selection
+    selectorLocation.removeAttr("disabled");
+
+    // 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);
 }
 
 var config = {
     setLesionNumberCallback: setLesionNumberCallback,
-    getNonTargetLesionLocationCallback: getNonTargetLesionLocationCallback,
+    getLesionLocationCallback: getLesionLocationCallback,
-    changeNonTargetLesionLocationCallback: changeNonTargetLesionLocationCallback
+    changeLesionLocationCallback: changeLesionLocationCallback
 };
 
 cornerstoneTools.nonTarget.setConfiguration(config);

Packages/lesiontracker/client/components/nonTargetLesionDialog/nonTargetLesionDialog.styl

@@ -1,4 +1,4 @@
-#nonTargetLesionLocationDialog
+#nonTargetLesionLocationDialog, #nonTargetLesionRelabelDialog
   display: none
   position: absolute
   top: 0
@@ -25,11 +25,6 @@
   .dialogContent, .lesionLocation, .locationResponse
     margin-bottom: 20px
 
-  .elementContainer
-    width: 100%
-    margin: 0 auto
-    float: none
-
   .locationOK
     text-align: center
     

Packages/viewerbase/components/viewer/imageViewerViewport/imageViewerViewport.js

@@ -1,59 +1,3 @@
-/**
- * This function enables stack prefetching for a specified element (viewport)
- * It first disables any prefetching currently occurring on any other viewports.
- *
- * @param element {node} DOM Node representing the viewport element
- */
-function enablePrefetchOnElement(element) {
-    log.info("imageViewerViewport enablePrefetchOnElement");
-
-    // Loop through all viewports and disable stackPrefetch
-    $('.imageViewerViewport').each(function() {
-        if (!$(this).find('canvas').length) {
-            return;
-        }
-        cornerstoneTools.stackPrefetch.disable(this);
-    });
-
-    // Make sure there is a stack to fetch
-    var stack = cornerstoneTools.getToolState(element, 'stack');
-    if (stack && stack.data.length && stack.data[0].imageIds.length > 1) {
-        cornerstoneTools.stackPrefetch.enable(element);
-    }
-}
-
-/**
- * This function disables reference lines for a specific viewport element.
- * It also enables reference lines for all other viewports with the 
- * class .imageViewerViewport.
- *
- * @param element {node} DOM Node representing the viewport element
- */
-function displayReferenceLines(element) {
-    log.info("imageViewerViewport displayReferenceLines");
-
-    // Disable reference lines for the current element
-    cornerstoneTools.referenceLines.tool.disable(element);
-
-    // Loop through all other viewport elements and enable reference lines
-    $('.imageViewerViewport').not(element).each(function(index, element) {
-        var imageId;
-        try {
-            var enabledElement = cornerstone.getEnabledElement(element);
-            imageId = enabledElement.image.imageId;
-        } catch(error) {
-            return;
-        }
-
-        if (!imageId || !$(this).find('canvas').length) {
-            return;
-        }
-
-        cornerstoneTools.referenceLines.tool.enable(element, OHIF.viewer.updateImageSynchronizer);
-    });
-}
-
-
 var allCornerstoneEvents = 'CornerstoneToolsMouseDown CornerstoneToolsMouseDownActivate ' +
     'CornerstoneToolsMouseClick CornerstoneToolsMouseDrag CornerstoneToolsMouseUp ' +
     'CornerstoneToolsMouseWheel CornerstoneToolsTap CornerstoneToolsTouchPress ' +
@@ -590,12 +534,7 @@ Template.imageViewerViewport.events({
 
         // Add the 'active' class to the parent container to highlight the active viewport
         $('#imageViewerViewports .viewportContainer').removeClass('active');
-        $(e.currentTarget).parents('.viewportContainer').addClass('active');
 
-        // Finally, enable stack prefetching and hide the reference lines from
+        setActiveViewport(e.currentTarget);
-        // the newly activated viewport
-        var element = e.currentTarget;
-        enablePrefetchOnElement(element);
-        displayReferenceLines(element);
     }
 });

Packages/viewerbase/components/viewer/playClipButton/playClipButton.js

@@ -1,7 +1,27 @@
+toggleCinePlay = function(element) {
+    var viewportIndex = $('.imageViewerViewport').index(element);
+    var isPlaying = OHIF.viewer.isPlaying[viewportIndex] || false;
+    if (isPlaying === true) {
+        cornerstoneTools.stopClip(element);
+    } else {
+        cornerstoneTools.playClip(element);
+    }
+    OHIF.viewer.isPlaying[viewportIndex] = !OHIF.viewer.isPlaying[viewportIndex];
+    Session.set('UpdateCINE', Random.id());
+};
+
 Template.playClipButton.helpers({
     'isPlaying': function() {
         Session.get('UpdateCINE');
         var activeViewport = Session.get('activeViewport');
         return !!OHIF.viewer.isPlaying[activeViewport];
     }
+});
+
+Template.playClipButton.events({
+    'click #playClip': function() {
+        var activeViewport = Session.get('activeViewport');
+        var element = $('.imageViewerViewport').get(activeViewport);
+        toggleCinePlay(element);
+    }
 });

Packages/viewerbase/lib/displayReferenceLines.js

@@ -0,0 +1,30 @@
+/**
+ * This function disables reference lines for a specific viewport element.
+ * It also enables reference lines for all other viewports with the 
+ * class .imageViewerViewport.
+ *
+ * @param element {node} DOM Node representing the viewport element
+ */
+displayReferenceLines = function(element) {
+    log.info("imageViewerViewport displayReferenceLines");
+
+    // Disable reference lines for the current element
+    cornerstoneTools.referenceLines.tool.disable(element);
+
+    // Loop through all other viewport elements and enable reference lines
+    $('.imageViewerViewport').not(element).each(function(index, element) {
+        var imageId;
+        try {
+            var enabledElement = cornerstone.getEnabledElement(element);
+            imageId = enabledElement.image.imageId;
+        } catch(error) {
+            return;
+        }
+
+        if (!imageId || !$(this).find('canvas').length) {
+            return;
+        }
+
+        cornerstoneTools.referenceLines.tool.enable(element, OHIF.viewer.updateImageSynchronizer);
+    });
+};

Packages/viewerbase/lib/enablePrefetchOnElement.js

@@ -0,0 +1,23 @@
+/**
+ * This function enables stack prefetching for a specified element (viewport)
+ * It first disables any prefetching currently occurring on any other viewports.
+ *
+ * @param element {node} DOM Node representing the viewport element
+ */
+enablePrefetchOnElement = function(element) {
+    log.info("imageViewerViewport enablePrefetchOnElement");
+
+    // Loop through all viewports and disable stackPrefetch
+    $('.imageViewerViewport').each(function() {
+        if (!$(this).find('canvas').length) {
+            return;
+        }
+        cornerstoneTools.stackPrefetch.disable(this);
+    });
+
+    // Make sure there is a stack to fetch
+    var stack = cornerstoneTools.getToolState(element, 'stack');
+    if (stack && stack.data.length && stack.data[0].imageIds.length > 1) {
+        cornerstoneTools.stackPrefetch.enable(element);
+    }
+};

Packages/viewerbase/package.js

@@ -107,8 +107,16 @@ Package.onUse(function (api) {
     api.addFiles('lib/sortStudy.js', 'client');
     api.addFiles('lib/toolManager.js', 'client');
     api.addFiles('lib/windowManager.js', 'client');
+    api.addFiles('lib/enablePrefetchOnElement.js', 'client');
+    api.addFiles('lib/displayReferenceLines.js', 'client');
+    api.addFiles('lib/setActiveViewport.js', 'client');
+    //api.addFiles('lib/switchToImageByIndex.js', 'client');
+    //api.addFiles('lib/switchToImageRelative.js', 'client');
 
     //api.export('accountsConfig', 'client');
+    api.export('enablePrefetchOnElement', 'client');
+    api.export('displayReferenceLines', 'client');
+    api.export('setActiveViewport', 'client');
     api.export('createStacks', 'client');
     api.export('encodeQueryData', ['client', 'server']);
     api.export('getImageId', 'client');