Work towards tabbed panels. Still very broken

LesionTracker/client/components/toolbar/toolbar.html

@@ -1,38 +0,0 @@
-<template name="toolbar">
-    <div id='toolbar'>
-        <div class="btn-group">
-            <!-- WW/WL -->
-            <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-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-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-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-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 }}
-                    <span class="fa fa-stop"></span>
-                {{ else }}
-                    <span class="fa fa-play"></span>
-                {{ /if }}
-            </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>
-    </div>
-</template>

LesionTracker/client/components/toolbar/toolbar.js

@@ -1,33 +0,0 @@
-Template.toolbar.events({
-    'click .imageViewerTool': function(e) {
-        var tool = e.currentTarget.id;
-        console.log('Setting active tool to: ' + tool);
-        toolManager.setActiveTool(tool);
-    },
-    'click .imageViewerCommand': function(e) {
-        var command = e.currentTarget.id;
-        if (!OHIF.viewer.functionList.hasOwnProperty(command)) {
-            return;
-        }
-        var viewportIndex = Session.get('ActiveViewport');
-        var element = $('.imageViewerViewport').get(viewportIndex);
-        OHIF.viewer.functionList[command](element);
-    }
-});
-
-Template.toolbar.onRendered(function() {
-    var tooltipButtons = $('[data-toggle="tooltip"]');
-    tooltipButtons.tooltip(OHIF.viewer.tooltipConfig);
-
-    // Enable tooltips for the layout button
-    var extraTooltipButtons = $('[rel="tooltip"]');
-    extraTooltipButtons.tooltip(OHIF.viewer.tooltipConfig);
-});
-
-Template.toolbar.helpers({
-    'isPlaying': function() {
-        Session.get('UpdateCINE');
-        var viewportIndex = Session.get('ActiveViewport');
-        return !!OHIF.viewer.isPlaying[viewportIndex];
-    }
-});

LesionTracker/client/components/toolbar/toolbar.styl

@@ -1,15 +0,0 @@
-#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/viewerMain/viewerMain.html

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

LesionTracker/client/components/viewerMain/viewerMain.js

@@ -0,0 +1,75 @@
+Template.viewerMain.helpers({
+    'toolbarOptions': function() {
+        var toolbarOptions = {};
+
+        var buttonData = [];
+
+        buttonData.push({
+            id: 'wwwc',
+            title: 'WW/WC',
+            classes: 'imageViewerTool',
+            iconClasses: 'fa fa-sun-o'
+        });
+
+        buttonData.push({
+            id: 'invert',
+            title: 'Invert',
+            classes: 'imageViewerCommand',
+            iconClasses: 'fa fa-adjust'
+        });
+
+        buttonData.push({
+            id: 'zoom',
+            title: 'Zoom',
+            classes: 'imageViewerTool',
+            iconClasses: 'fa fa-search'
+        });
+
+        buttonData.push({
+            id: 'pan',
+            title: 'Pan',
+            classes: 'imageViewerTool',
+            iconClasses: 'fa fa-arrows'
+        });
+
+        buttonData.push({
+            id: 'stackScroll',
+            title: 'Stack Scroll',
+            classes: 'imageViewerTool',
+            iconClasses: 'fa fa-bars'
+        });
+
+        buttonData.push({
+            id: 'length',
+            title: 'Length Measurement',
+            classes: 'imageViewerTool',
+            iconClasses: 'fa fa-arrows-v'
+        });
+
+        buttonData.push({
+            id: 'angle',
+            title: 'Angle Measurement',
+            classes: 'imageViewerTool',
+            iconClasses: 'fa fa-angle-left'
+        });
+
+        buttonData.push({
+            id: 'dragProbe',
+            title: 'Pixel Probe',
+            classes: 'imageViewerTool',
+            iconClasses: 'fa fa-dot-circle-o'
+        });
+
+        buttonData.push({
+            id: 'lesion',
+            title: 'Lesion Tool',
+            classes: 'imageViewerTool',
+            iconClasses: 'fa fa-arrows-v'
+        });
+
+        toolbarOptions.buttonData = buttonData;
+        toolbarOptions.includePlayClipButton = true;
+        toolbarOptions.includeLayoutButton = false;
+        return toolbarOptions;
+    }
+});

LesionTracker/client/route.js

@@ -11,8 +11,6 @@ Router.route('/', function () {
   });
 });
 
-ViewerStudies = new Mongo.Collection(null);
-
 Router.route('/viewer/:_id', {
   layoutTemplate: 'lesionTrackerLayout',
   name: 'viewer',
@@ -29,6 +27,7 @@ Router.route('/viewer/:_id', {
       //Session.set(activeTabId, studies);
       //Session.set('showContentInTab', true);
       //self.render('viewer');
+      openNewTab(studies);
     });
   }
 });