Cleanup to make LesionTracker layout work with refactored packages

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
-  overflow: auto
-  background-color: blue
-  color: black
+  float: left

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-group" class="btn-group">
+    <div id='toolbar'>
+        <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="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-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>
+            <!--<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>
+            {{> layoutChooser}}-->
             <!-- 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;
         }
-
-        // TODO = Add support for active viewports
-        //var element = getActiveViewportElement();
-        $('.imageViewer').each(function() {
-            var element = this;
-            OHIF.viewer.functionList[command](element);
-        });
+        var viewportIndex = Session.get('ActiveViewport');
+        var element = $('.imageViewerViewport').get(viewportIndex);
+        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', {
-        mouse: cornerstoneTools.lesion,
-        touch: cornerstoneTools.lesionTouch
-    });
+Template.toolbar.helpers({
+    'isPlaying': function() {
+        Session.get('UpdateCINE');
+        var viewportIndex = Session.get('ActiveViewport');
+        return !!OHIF.viewer.isPlaying[viewportIndex];
+    }
 });

LesionTracker/client/components/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

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%