Work towards tabbed panels. Still very broken

OHIFViewer/.meteor/packages

@@ -32,3 +32,4 @@ cornerstone
 dicomweb
 viewerbase
 worklist
+reactive-var

OHIFViewer/client/components/viewer/toolbar/toolbar.html

@@ -1,36 +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}}                    
-        </div>
-    </div>
-</template>

OHIFViewer/client/components/viewer/toolbar/toolbar.js

@@ -1,40 +0,0 @@
-Template.toolbar.helpers({
-  studies : function() {
-    var studies = Session.get('studies');
-    return studies;
-  }
-});
-
-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];
-    }
-});

OHIFViewer/client/components/viewer/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

OHIFViewer/client/components/viewer/viewer.html

@@ -3,7 +3,7 @@
         <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">
     </head>
     <div id="viewer">
-        {{> studyBrowser}}
-        {{> viewerMain}}
+        {{> studyBrowser studies=studies activeViewport=activeViewport}}
+        {{> viewerMain studies=studies activeViewport=activeViewport viewportRows=viewportRows viewportColumns=viewportColumns}}
     </div>
 </template>

OHIFViewer/client/components/viewer/viewer.js

@@ -58,9 +58,11 @@ function resizeViewports() {
     }, 1);
 }
 
-Session.setDefault('ActiveViewport', 0);
-Session.setDefault('viewportRows', 1);
-Session.setDefault('viewportColumns', 1);
+Template.viewer.onCreated(function() {
+     this.data.activeViewport = new ReactiveVar(0);
+     this.data.viewportRows = new ReactiveVar(1);
+     this.data.viewportColumns = new ReactiveVar(1);
+});
 
 // Avoid doing DOM manipulation during the resize handler
 // because it is fired very often.
@@ -71,19 +73,4 @@ $(window).on('resize', function() {
     resizeTimer = setTimeout(function() {
         resizeViewports();
     }, 100);
-});
-
-Template.viewer.onRendered(function() {
-    var imageViewer = $("#viewer");
-    if (imageViewer) {
-        $('.navbar-default').css({
-            'background-color': '#000000',
-            'border-color': '#101010'
-        });
-        document.body.style.overflow = "hidden";
-        document.body.style.height = '100%';
-        document.body.style.width = '100%';
-        document.body.style.minWidth = 0;
-        document.body.style.position = 'fixed'; // Prevent overscroll on mobile devices
-    }
 });

OHIFViewer/client/components/viewer/viewerMain/viewerMain.html

@@ -1,6 +1,6 @@
 <template name="viewerMain">
     <div class='viewerMain'>
-        {{ > toolbar }}
-        {{ > imageViewerViewports }}
+        {{ > toolbar activeViewport=activeViewport viewportRows=viewportRows viewportColumns=viewportColumns}}
+        {{ > imageViewerViewports studies=studies activeViewport=activeViewport viewportRows=viewportRows viewportColumns=viewportColumns}}
     </div>
 </template>

OHIFViewer/client/components/viewer/viewerMain/viewerMain.js

@@ -1,6 +1,6 @@
 Template.viewerMain.helpers({
-  studies : function() {
-    var studies = Session.get('studies');
-    return studies;
-  }
+    studies : function() {
+        var studies = this.studies;
+        return studies;
+    }
 });

OHIFViewer/client/routes.js

@@ -7,27 +7,32 @@ Router.configure({
 
 
 Router.route('/', function () {
-  this.render('worklist', {
-  });
+    this.render('worklist', {});
 });
 
-ViewerStudies = new Mongo.Collection(null);
+tabs = new Meteor.Collection(null);
 
 Router.route('/viewer/:_id', {
-  layoutTemplate: 'layout',
-  name: 'viewer',
-  onBeforeAction: function() {
-    var self = this;
-    Meteor.call('GetStudyMetadata', this.params._id, function(error, study) {
-      //console.log(study);
-      sortStudy(study);
+    layoutTemplate: 'layout',
+    name: 'viewer',
+    onBeforeAction: function() {
+        var self = this;
 
-      var studies = [study];
-      Session.set('studies', studies);
+        Meteor.call('GetStudyMetadata', this.params._id, function(error, study) {
+            sortStudy(study);
 
-      self.render('viewer');
-    });
-  }
-});
+            var studies = [study];
+            var title = study.seriesList[0].instances[0].patientName;
+            var contentid = generateUUID();
 
+            var newTabObject = {
+                title: title,
+                contentid: contentid,
+            };
+            tabs.insert(newTabObject);
+            Session.set('StudiesInTab#' + contentid, studies);
 
+            self.render('worklist');
+        });
+    }
+});