Cleanup to make LesionTracker layout work with refactored packages

LesionTracker/client/compatibility/lesionTool.js

@@ -282,4 +282,9 @@ 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/hidingPanel/hidingPanel.styl

@@ -1,9 +1,6 @@
 .hidingPanel
   width: 12%
   height: 100%
-  margin-top: 35px
+  padding-top: 35px
   position: relative
-  float: left
+  float: left
-  overflow: auto
-  background-color: blue
-  color: black

LesionTracker/client/components/lesionMeasurementContainer/lesionMeasurementContainer.html

@@ -0,0 +1,5 @@
+<template name="lesionMeasurementContainer">
+    <div class="lesionMeasurementContainer">
+        Table of lesion locations goes here
+    </div>
+</template>

LesionTracker/client/components/lesionMeasurementContainer/lesionMeasurementContainer.styl

@@ -0,0 +1,7 @@
+.lesionMeasurementContainer
+  width: 24%
+  float: left
+  height: 100%
+  
+  background-color: white
+  border: 8px solid lightblue

LesionTracker/client/components/lesionTableContainer/lesionTableContainer.html

@@ -0,0 +1,5 @@
+<template name="lesionTableContainer">
+    <div class="lesionTableContainer">
+        Current, Prior, Nadir, Baseline go here
+    </div>
+</template>

LesionTracker/client/components/lesionTableContainer/lesionTableContainer.styl

@@ -0,0 +1,7 @@
+.lesionTableContainer
+  background-color: pink
+  height: 25%
+  max-height: 200px
+  
+  background-color: white
+  border: 8px solid pink

LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.html

@@ -0,0 +1,16 @@
+<template name="lesionTrackerLayout">
+    <nav class="navbar navbar-default" role="navigation">
+        <div class="container-fluid">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+                  <span class="sr-only">Toggle navigation</span>
+                  <span class="icon-bar"></span>
+                  <span class="icon-bar"></span>
+                  <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="/">Lesion Tracker</a>
+            </div>
+        </div>
+    </nav>
+    {{> yield}}
+</template>

LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.styl

@@ -0,0 +1,18 @@
+.navbar
+  margin-bottom: 0
+  border-radius: 0px
+
+.navbar-form
+  margin: 0
+  padding: 15px 3px
+
+.navbar-default
+  -webkit-transition: background-color 200ms linear
+  -moz-transition: background-color 200ms linear
+  -o-transition: background-color 200ms linear
+  -ms-transition: background-color 200ms linear
+  transition: background-color 200ms linear
+  
+@media (min-width: 768px)
+  .navbar
+    border-radius: 0px

LesionTracker/client/components/toolbar/toolbar.css

@@ -1,48 +0,0 @@
-.toolbar {
-    width: 100%;
-    height: 35px;
-    text-align: center;
-}
-
-#toolbar-group button {
-    text-align: center;
-    margin-top: 2px;
-    margin-right: 3px;
-    margin-left: 3px;
-    color: #ffffff;
-    background-color: black;
-    width: 30px;
-    height: 30px;
-    border: 1px solid white;
-}
-
-#toolbar-group button > span {
-    width: 12px;
-    height: 12px;
-    position: absolute;
-    top: 9px;
-    left: 9px;
-    right: 9px;
-    bottom: 9px;
-}
-
-
-#toolbar-group .btn:hover {
-    border-width: 3px;
-    background-color: transparent;
-    color: white;
-}
-#toolbar-group .btn:focus, .btn:active {
-    outline: 0 !important;
-    border-width: 5px;
-    background-color: transparent;
-    color:white;
-    text-align: center;
-}
-
-#toolbar-group .btn:focus > span{
-    top: 6px;
-    left: 6px;
-    right: 6px;
-    bottom: 6px;
-}

LesionTracker/client/components/toolbar/toolbar.html

@@ -1,16 +1,26 @@
 <template name="toolbar">
-    <div id="toolbar" class="toolbar">
+    <div id='toolbar'>
-        <div id="toolbar-group" class="btn-group">
+        <div class="btn-group">
             <!-- WW/WL -->
-            <button id="wwwc" type="button" class="imageViewerTool btn btn-sm btn-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="WW/WC"><span class="fa fa-sun-o"></span></button>
+            <button id="wwwc" type="button" class="imageViewerTool btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="WW/WC"><span class="fa fa-sun-o"></span></button>
             <!-- Invert -->
-            <button id="invert" type="button" class="imageViewerCommand btn btn-sm btn-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Invert"><span class="fa fa-adjust"></span></button>
+            <button id="invert" type="button" class="imageViewerCommand btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Invert"><span class="fa fa-adjust"></span></button>
             <!-- Zoom -->
-            <button id="zoom" type="button" class="imageViewerTool btn btn-sm btn-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Zoom"><span class="fa fa-search"></span></button>
+            <button id="zoom" type="button" class="imageViewerTool btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Zoom"><span class="fa fa-search"></span></button>
             <!-- Pan -->
-            <button id="pan" type="button" class="imageViewerTool btn btn-sm btn-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Pan"><span class="fa fa-arrows"></span></button>
+            <button id="pan" type="button" class="imageViewerTool btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Pan"><span class="fa fa-arrows"></span></button>
             <!-- Stack scroll -->
-            <button id="stackScroll" type="button" class="imageViewerTool btn btn-sm btn-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Stack Scroll"><span class="fa fa-bars"></span></button>
+            <button id="stackScroll" type="button" class="imageViewerTool btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Stack Scroll"><span class="fa fa-bars"></span></button>
+            <!-- Length measurement -->
+            <button id="length" type="button" class="imageViewerTool btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Length Measurement"><span class="fa fa-arrows-v"></span></button>
+            <!-- Angle measurement -->
+            <!--<button id="angle" type="button" class="imageViewerTool btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Angle Measurement"><span class="fa fa-angle-left"></span></button>-->
+            <!-- Pixel probe -->
+            <button id="dragProbe" type="button" class="imageViewerTool btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Pixel Probe"><span class="fa fa-dot-circle-o"></span></button>
+            <!-- Elliptical ROI -->
+            <button id="ellipticalRoi" type="button" class="imageViewerTool btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Elliptical ROI"><span class="fa fa-circle-o"></span></button>
+            <!-- Rectangle ROI -->
+            <button id="rectangleRoi" type="button" class="imageViewerTool btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Rectangle ROI"><span class="fa fa-square-o"></span></button>
             <!-- Play clip -->
             <button id="playClip" type="button" class="imageViewerCommand btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Play/Stop Clip">
                 {{ #if isPlaying }}
@@ -19,16 +29,8 @@
                     <span class="fa fa-play"></span>
                 {{ /if }}
             </button>
-            <!-- Angle measurement -->
+            <!--<button id="layout" type="button" class="btn btn-sm btn-default dropdown-toggle" data-container="body" data-toggle="dropdown" aria-expanded="false" data-placement="right" title="Layout" rel="tooltip"><span class="fa fa-th-large"></span></button>
-            <!--<button id="angle" type="button" class="imageViewerTool btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Angle Measurement"><span class="fa fa-angle-left"></span></button>-->
+            {{> layoutChooser}}-->
-            <!-- Pixel probe -->
-            <button id="dragProbe" type="button" class="imageViewerTool btn btn-sm btn-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Pixel Probe"><span class="fa fa-dot-circle-o"></span></button>
-            <!-- Length measurement -->
-            <button id="length" type="button" class="imageViewerTool btn btn-sm btn-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Length Measurement"><span class="fa fa-arrows-v"></span></button>
-            <!-- Elliptical ROI -->
-            <button id="ellipticalRoi" type="button" class="imageViewerTool btn btn-sm btn-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Elliptical ROI"><span class="fa fa-circle-o"></span></button>
-            <!-- Rectangle ROI -->
-            <button id="rectangleRoi" type="button" class="imageViewerTool btn btn-sm btn-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Rectangle ROI"><span class="fa fa-square-o"></span></button>
             <!-- Lesion Tool -->
             <button id="lesion" type="button" class="imageViewerTool btn btn-sm btn-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Lesion Tool"><span class="fa fa-arrows-v"></span></button>
         </div>

LesionTracker/client/components/toolbar/toolbar.js

@@ -9,13 +9,9 @@ Template.toolbar.events({
         if (!OHIF.viewer.functionList.hasOwnProperty(command)) {
             return;
         }
-
+        var viewportIndex = Session.get('ActiveViewport');
-        // TODO = Add support for active viewports
+        var element = $('.imageViewerViewport').get(viewportIndex);
-        //var element = getActiveViewportElement();
+        OHIF.viewer.functionList[command](element);
-        $('.imageViewer').each(function() {
-            var element = this;
-            OHIF.viewer.functionList[command](element);
-        });
     }
 });
 
@@ -26,9 +22,12 @@ Template.toolbar.onRendered(function() {
     // Enable tooltips for the layout button
     var extraTooltipButtons = $('[rel="tooltip"]');
     extraTooltipButtons.tooltip(OHIF.viewer.tooltipConfig);
+});
 
-    toolManager.addTool('lesion', {
+Template.toolbar.helpers({
-        mouse: cornerstoneTools.lesion,
+    'isPlaying': function() {
-        touch: cornerstoneTools.lesionTouch
+        Session.get('UpdateCINE');
-    });
+        var viewportIndex = Session.get('ActiveViewport');
+        return !!OHIF.viewer.isPlaying[viewportIndex];
+    }
 });

LesionTracker/client/components/viewer.css

@@ -1,7 +1,12 @@
-.viewer{
+.viewer {
     width: 100%;
-    height: 100%;
+    height: calc(100% - 54px);
     margin: 0;
     padding: 0;
     background-color: black;
 }
+
+.navbar {
+    margin-bottom: 0;
+    border-radius: 0;
+}

LesionTracker/client/components/viewer.html

@@ -5,5 +5,6 @@
     <div id="viewer" class="viewer">
         {{ >hidingPanel }}
         {{ >viewerMain }}
+        {{ >lesionMeasurementContainer }}
     </div>
 </template>

LesionTracker/client/components/viewer.js

@@ -60,7 +60,7 @@ function resizeViewports() {
 
 Session.setDefault('ActiveViewport', 0);
 Session.setDefault('viewportRows', 1);
-Session.setDefault('viewportColumns', 1);
+Session.setDefault('viewportColumns', 2);
 
 // Avoid doing DOM manipulation during the resize handler
 // because it is fired very often.

LesionTracker/client/components/viewerMain/viewerMain.css

@@ -1,5 +0,0 @@
-.viewerMain {
-    width: 88%;
-    height: 100%;
-    margin-left: 12%;
-}

LesionTracker/client/components/viewerMain/viewerMain.html

@@ -2,6 +2,7 @@
     <div class="viewerMain">
         {{> toolbar}}
         {{> imageViewerViewports}}
+        {{> lesionTableContainer}}
         <!--TODO: Bottom lesion table container will be here-->
     </div>
 </template>

LesionTracker/client/components/viewerMain/viewerMain.styl

@@ -0,0 +1,8 @@
+.viewerMain
+  width: 64%;
+  height: 100%
+  float: left
+
+#imageViewerViewports
+  height: calc(75% - 30px)
+  width: 100%

LesionTracker/client/route.js

@@ -1,5 +1,5 @@
 Router.configure({
-  layoutTemplate: 'layout',
+  layoutTemplate: 'lesionTrackerLayout',
   //loadingTemplate: '',
   notFoundTemplate: 'notFound'
 });
@@ -14,7 +14,7 @@ Router.route('/', function () {
 ViewerStudies = new Mongo.Collection(null);
 
 Router.route('/viewer/:_id', {
-  layoutTemplate: 'layout',
+  layoutTemplate: 'lesionTrackerLayout',
   name: 'viewer',
   onBeforeAction: function() {
     var self = this;

LesionTracker/client/stylesheets/docking-container.css

@@ -1,16 +1,17 @@
 /*****************************/
 /* Toggle */
 /*****************************/
-* {
-    box-sizing: border-box;
-}
 .dockingContainer, .collapseVertical, .collapseHorizontal {
+    -o-transition: all 0.3s ease-out;
+    -ms-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
     -webkit-transition: all 0.3s ease-out;
     transition: all 0.3s ease-out;
 }
 
 .dockingContainer {
+    -o-transition: all 0.3s ease-out;
+    -ms-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
     -webkit-transition: all 0.3s ease-out;
     transition: all 0.3s ease-out;
@@ -47,6 +48,8 @@
 
 .btnCollapseIcon-collapse{
     -moz-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    -o-transform: rotate(180deg);
     -webkit-transform: rotate(180deg);
     transform: rotate(180deg);
 }

OHIFViewer/client/components/viewer/toolbar/toolbar.styl

@@ -0,0 +1,15 @@
+#toolbar
+  background-color: black
+  text-align: center
+  
+  .btn-group
+    display: inline-block
+    
+    button
+      text-align: center
+      color: #ffffff
+      background-color: #424242
+      border-color: #424242
+      
+      &.active, &:active
+        background-color: #3B678E

Packages/viewerbase/components/studyBrowser/studyBrowser/studyBrowser.styl

@@ -1,6 +1,8 @@
 .studyBrowser
   float: left
   height: 100%
-  width: 120px
+  width: 100%
+  min-width: 120px
   overflow: auto
-  background-color: black
+  background-color: black
+  padding-bottom: 20px