Added rudimentary HUD

Packages/lesiontracker/client/components/lesionTable/lesionTable.html

@@ -10,21 +10,6 @@
             {{ >lesionTableTimepointHeader }}
             {{ /each }}
         </div>
-        <div class="lesionTableWrapper">
+        {{ >lesionTableView }}
-            {{ >lesionTableHeaderRow id="target" type="Targets" measurements=targets}}
-            {{ #each targets }}
-            {{ >lesionTableRow }}
-            {{ /each }}
-
-            {{ >lesionTableHeaderRow id="nonTarget" type="Non-targets" measurements=nonTargets}}
-            {{ #each nonTargets }}
-            {{ >lesionTableRow }}
-            {{ /each }}
-
-            {{ >lesionTableHeaderRow id="newLesions" type="New lesions" measurements=newLesions}}
-            {{ #each nonTargets }}
-            {{ >lesionTableRow }}
-            {{ /each }}
-        </div>
     </div>
 </template>

Packages/lesiontracker/client/components/lesionTable/lesionTable.js

@@ -1,34 +1,4 @@
 Template.lesionTable.helpers({
-    targets: function() {
-        // All Targets shall be listed first followed by Non-Targets
-        return Measurements.find({
-            isTarget: true
-        }, {
-            sort: {
-                lesionNumberAbsolute: 1
-            }
-        });
-    },
-    nonTargets: function() {
-        // All Targets shall be listed first followed by Non-Targets
-        return Measurements.find({
-            isTarget: false
-        }, {
-            sort: {
-                lesionNumberAbsolute: 1
-            }
-        });
-    },
-    newLesions: function() {
-        // All Targets shall be listed first followed by Non-Targets
-        return Measurements.find({
-            saved: false
-        }, {
-            sort: {
-                lesionNumberAbsolute: 1
-            }
-        });
-    },
     timepoints: function() {
         return Timepoints.find({}, {
             sort: {

Packages/lesiontracker/client/components/lesionTable/lesionTable.styl

@@ -2,15 +2,9 @@
 
 #lesionTableContainer
   width: 100%
-  height: 16%
+  height: calc(100% - 105px)
   background-color: #000000
 
-  #lesionTableWrapper
-    position: relative
-    width: 100%
-    height: 100%
-    margin: 0 auto
-
 .lesionTableTimepointHeaderRow
   display: flex
 

Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.html

@@ -0,0 +1,13 @@
+<template name="lesionTableHUD">
+    <div id="lesionTableHUD">
+        <div class="header">
+            Measurements
+        </div>
+        {{ >lesionTableView }}
+        <div class="footer">
+            {{ #each toolbarButtons }}
+                {{ >toolbarSectionButton }}
+            {{ /each }}
+        </div>
+    </div>
+</template>

Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.js

@@ -0,0 +1,33 @@
+Template.lesionTableHUD.helpers({
+    toolbarButtons() {
+        var buttonData = [];
+
+        buttonData.push({
+            id: 'bidirectional',
+            title: 'Target',
+            classes: 'imageViewerTool',
+            svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-measure-target'
+        });
+
+        buttonData.push({
+            id: 'nonTarget',
+            title: 'Non-Target',
+            classes: 'imageViewerTool toolbarSectionButton',
+            svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-measure-non-target'
+        });
+
+        buttonData.push({
+            id: 'length',
+            title: 'Temp',
+            classes: 'imageViewerTool toolbarSectionButton',
+            svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-measure-temp'
+        });
+
+        return buttonData;
+    }
+});
+
+Template.lesionTableHUD.onRendered(function() {
+    var dialog = $('#lesionTableHUD');
+    dialog.draggable();
+});

Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.styl

@@ -0,0 +1,86 @@
+@import "{design}/app"
+
+$borderColor = rgba(77, 99, 110, 0.81)
+$backgroundColor = #14191e
+
+#lesionTableHUD
+  display: none
+  position: absolute
+  top: auto
+  left: auto
+  bottom: 3px
+  right: 3px
+
+  z-index: 10000
+  width: 318px
+  height: 326px
+  opacity: 0.95
+  background: black
+  border-radius: 8px
+  border: solid 1px $borderColor;
+
+  .header
+    width: 100%
+    height: 55px
+    line-height: 55px
+    background: $backgroundColor
+    border-bottom: $uiBorderThickness solid $borderColor
+    text-align: center
+    font-weight: 200
+    font-size: 20px
+    color: $textSecondaryColor
+
+  .lesionTableView.scrollArea
+    height: calc(100% - 55px - 70px)
+    padding-bottom: 20px
+
+  .footer
+    width: 100%
+    height: 70px
+    position: absolute
+    bottom: 0
+    background: $backgroundColor
+    border-top: $uiBorderThickness solid $borderColor
+    padding: 10px
+
+    .toolbarSectionButton
+      display: inline-block
+      color: $defaultColor
+      fill: $defaultColor
+      stroke: $defaultColor
+      padding: 0 10px
+      height: $toolbarHeight
+      min-width: 30px
+      cursor: pointer
+      text-align: center
+
+      &.disabled
+        opacity: 0.5
+        cursor: not-allowed
+
+      .buttonLabel
+        font-size: 12px
+
+      .svgContainer
+        margin: 0 auto
+        text-align: center
+
+      svg
+        background-color: transparent
+        margin: 2px
+        width: 21px
+        height: 21px
+
+      &:active, &.active
+        color: $activeColor
+
+        svg
+          fill: $activeColor
+          stroke: $activeColor
+
+      &:hover
+        color: $hoverColor
+
+        svg
+          fill: $hoverColor
+          stroke: $hoverColor

Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl

@@ -7,7 +7,7 @@ $headerRowHeight = 63px
   background: #151a1f
   color: $textSecondaryColor
   fill: $textSecondaryColor
-  width: 100%
+  width: 316px
   height: $headerRowHeight
   display: flex
   line-height: $headerRowHeight
@@ -40,7 +40,7 @@ $headerRowHeight = 63px
     color:  #6fbde2
     font-weight: 100
     font-size: 40px
-    max-width: 30px
+    max-width: 50px
     margin-right: 5px
     height: $headerRowHeight
     line-height: $headerRowHeight

Packages/lesiontracker/client/components/lesionTableView/lesionTableView.html

@@ -0,0 +1,18 @@
+<template name="lesionTableView">
+    <div class="lesionTableView scrollArea">
+        {{ >lesionTableHeaderRow id="target" type="Targets" measurements=targets}}
+        {{ #each targets }}
+        {{ >lesionTableRow }}
+        {{ /each }}
+
+        {{ >lesionTableHeaderRow id="nonTarget" type="Non-targets" measurements=nonTargets}}
+        {{ #each nonTargets }}
+        {{ >lesionTableRow }}
+        {{ /each }}
+
+        {{ >lesionTableHeaderRow id="newLesions" type="New lesions" measurements=newLesions}}
+        {{ #each nonTargets }}
+        {{ >lesionTableRow }}
+        {{ /each }}
+    </div>
+</template>

Packages/lesiontracker/client/components/lesionTableView/lesionTableView.js

@@ -0,0 +1,32 @@
+Template.lesionTableView.helpers({
+    targets: function () {
+        // All Targets shall be listed first followed by Non-Targets
+        return Measurements.find({
+            isTarget: true
+        }, {
+            sort: {
+                lesionNumberAbsolute: 1
+            }
+        });
+    },
+    nonTargets: function () {
+        // All Targets shall be listed first followed by Non-Targets
+        return Measurements.find({
+            isTarget: false
+        }, {
+            sort: {
+                lesionNumberAbsolute: 1
+            }
+        });
+    },
+    newLesions: function () {
+        // All Targets shall be listed first followed by Non-Targets
+        return Measurements.find({
+            saved: false
+        }, {
+            sort: {
+                lesionNumberAbsolute: 1
+            }
+        });
+    }
+});

Packages/lesiontracker/client/components/lesionTableView/lesionTableView.styl

@@ -0,0 +1,13 @@
+.lesionTableView.scrollArea
+  width: 100%
+  height: 100%
+  overflow-x: hidden
+  overflow-y: auto
+  margin-right: -16px
+  padding-bottom: 100px
+  padding-right: 16px
+
+  -webkit-overflow-scrolling: touch
+
+  &::-webkit-scrollbar
+    display: none

Packages/lesiontracker/client/components/lesionTracker/lesionTracker.html

@@ -15,7 +15,7 @@
             {{>userAccountMenu}}
         </div>
     </div>
-    {{>timeoutCountdownDialog}}
+    {{ >timeoutCountdownDialog }}
     <div id="worklistTabs" class="tab-content">
         <div class="tab-pane active" id="worklistTab">
             <div class="worklistContainer">
@@ -32,4 +32,5 @@
     {{ >lastLoginModal }}
     {{ >studyContextMenu }}
     {{ >progressDialog}}
+    {{ >lesionTableHUD }}
 </template>

Packages/lesiontracker/client/components/lesionTracker/lesionTracker.js

@@ -49,6 +49,9 @@ Template.lesionTracker.events({
         switchToTab(contentId);
     },
     'click #loadStudyList': function() {
+        // TODO: Make some set of 'closing study' callbacks
+        $('#lesionTableHUD').display('none');
+
         switchToTab('worklistTab');
     }
 });

Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html

@@ -55,7 +55,7 @@
                 </div>
             </div>
         </div>
-        <div class="pull-right toolbarSectionButton">
+        <div id="toggleHUD" class="pull-right toolbarSectionButton">
             <div class="svgContainer">
                 <svg>
                     <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-hud"></use>

Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js

@@ -105,6 +105,10 @@ Template.toolbarSection.events({
         var activeViewport = Session.get('activeViewport');
         var element = $('.imageViewerViewport').get(activeViewport);
         OHIF.viewer.functionList[command](element);
+    },
+    'click #toggleHUD': function(e) {
+        var lesionTableHUD = document.getElementById('lesionTableHUD');
+        toggleDialog(lesionTableHUD);
     }
 });
 

Packages/lesiontracker/package.js

@@ -125,10 +125,18 @@ Package.onUse(function(api) {
     api.addFiles('client/components/lesionLocationDialog/lesionLocationDialog.js', 'client');
     api.addFiles('client/components/lesionLocationDialog/lesionLocationDialog.styl', 'client');
 
+    api.addFiles('client/components/lesionTableView/lesionTableView.html', 'client');
+    api.addFiles('client/components/lesionTableView/lesionTableView.styl', 'client');
+    api.addFiles('client/components/lesionTableView/lesionTableView.js', 'client');
+
     api.addFiles('client/components/lesionTable/lesionTable.html', 'client');
     api.addFiles('client/components/lesionTable/lesionTable.styl', 'client');
     api.addFiles('client/components/lesionTable/lesionTable.js', 'client');
 
+    api.addFiles('client/components/lesionTableHUD/lesionTableHUD.html', 'client');
+    api.addFiles('client/components/lesionTableHUD/lesionTableHUD.styl', 'client');
+    api.addFiles('client/components/lesionTableHUD/lesionTableHUD.js', 'client');
+
     api.addFiles('client/components/lesionTableRow/lesionTableRow.html', 'client');
     api.addFiles('client/components/lesionTableRow/lesionTableRow.styl', 'client');
     api.addFiles('client/components/lesionTableRow/lesionTableRow.js', 'client');

Packages/viewerbase/package.js

@@ -156,6 +156,7 @@ Package.onUse(function(api) {
     api.export('getInstanceClassDefaultViewport', 'client');
     api.export('showConfirmDialog', 'client');
     api.export('applyWLPreset', 'client');
+    api.export('toggleDialog', 'client');
 
     // Export the ValidateJS Library with our added validators
     //api.export('validate', 'client');