Fixes for activeViewport reactivity

LesionTracker/client/components/viewer.js

@@ -59,9 +59,15 @@ function resizeViewports() {
 }
 
 Template.viewer.onCreated(function() {
-     this.data.activeViewport = new ReactiveVar(0);
+    if (this.data.activeViewport === undefined) {
-     this.data.viewportRows = new ReactiveVar(1);
+        this.data.activeViewport = new ReactiveVar(0);
-     this.data.viewportColumns = new ReactiveVar(2);
+    }
+    if (this.data.viewportRows === undefined) {
+        this.data.viewportRows = new ReactiveVar(1);
+    }
+    if (this.data.viewportColumns === undefined) {
+        this.data.viewportColumns = new ReactiveVar(2);
+    }
 });
 
 // Avoid doing DOM manipulation during the resize handler

LesionTracker/client/components/viewerMain/viewerMain.html

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

LesionTracker/client/route.js

@@ -19,7 +19,9 @@ Router.route('/viewer/:_id', {
         Meteor.call('GetStudyMetadata', this.params._id, function(error, study) {
             sortStudy(study);
 
-            var studies = [study];
+            var data = {
+                studies: [study]
+            };
             var title = study.seriesList[0].instances[0].patientName;
             var contentid = generateUUID();
 
@@ -30,8 +32,7 @@ Router.route('/viewer/:_id', {
             tabs.insert(newTabObject);
 
             self.render('worklist');
-            console.log('Setting studesInTab');
+            Session.set('DataInTab#' + contentid, data);
-            Session.set('StudiesInTab#' + contentid, studies);
             Session.set('OpenNewTabEvent', contentid);
         });
     }

OHIFViewer/client/components/viewer/viewer.js

@@ -59,9 +59,23 @@ function resizeViewports() {
 }
 
 Template.viewer.onCreated(function() {
-     this.data.activeViewport = new ReactiveVar(0);
+    if (this.data.activeViewport === undefined) {
-     this.data.viewportRows = new ReactiveVar(1);
+        this.data.activeViewport = new ReactiveVar(0);
-     this.data.viewportColumns = new ReactiveVar(1);
+    }
+    if (this.data.viewportRows === undefined) {
+        this.data.viewportRows = new ReactiveVar(1);
+    }
+    if (this.data.viewportColumns === undefined) {
+        this.data.viewportColumns = new ReactiveVar(1);
+    }
+
+    var viewportColumns = this.data.viewportColumns.get();
+    var viewportRows = this.data.viewportRows.get();
+    var activeViewport = this.data.activeViewport.get();
+    console.log('Reactive changes!');
+    console.log('viewportColumns: ' + viewportColumns);
+    console.log('viewportRows: ' + viewportRows);
+    console.log('activeViewport: ' + activeViewport);
 });
 
 // Avoid doing DOM manipulation during the resize handler

OHIFViewer/client/routes.js

@@ -21,7 +21,9 @@ Router.route('/viewer/:_id', {
         Meteor.call('GetStudyMetadata', this.params._id, function(error, study) {
             sortStudy(study);
 
-            var studies = [study];
+            var data = {
+                studies: [study]
+            };
             var title = study.seriesList[0].instances[0].patientName;
             var contentid = generateUUID();
 
@@ -32,8 +34,7 @@ Router.route('/viewer/:_id', {
             tabs.insert(newTabObject);
 
             self.render('worklist');
-            console.log('Setting studesInTab');
+            Session.set('DataInTab#' + contentid, data);
-            Session.set('StudiesInTab#' + contentid, studies);
             Session.set('OpenNewTabEvent', contentid);
         });
     }

Packages/viewerbase/components/studyBrowser/thumbnailEntry/thumbnailEntry.js

@@ -17,7 +17,7 @@ function cloneElement(element, targetId) {
     return clone;
 }
 
-function thumbnailDragStartHandler(e, studies) {
+function thumbnailDragStartHandler(e, data) {
     // Prevent any scrolling behaviour normally caused by the original event
     e.originalEvent.preventDefault();
 
@@ -28,10 +28,11 @@ function thumbnailDragStartHandler(e, studies) {
     // Store this data for use during drag and drop
     OHIF.viewer.dragAndDropData = {
         studyInstanceUid: imageThumbnail.data('studyInstanceUid'),
-        seriesInstanceUid: imageThumbnail.data('seriesInstanceUid'),
+        seriesInstanceUid: imageThumbnail.data('seriesInstanceUid')
-        studies: studies
     };
 
+    $.extend(OHIF.viewer.dragAndDropData, data);
+    
     // Clone the image thumbnail
     var targetId = targetThumbnail.id + 'DragClone';
     var clone = cloneElement(targetThumbnail, targetId);
@@ -202,8 +203,8 @@ Template.thumbnailEntry.onRendered(function() {
 Template.thumbnailEntry.events({
     // Touch drag/drop events
     'touchstart .thumbnailEntry, mousedown .thumbnailEntry': function(e) {
-        var studies = Template.parentData(2).studies;
+        var data = Template.parentData(2);
-        thumbnailDragStartHandler(e, studies);
+        thumbnailDragStartHandler(e, data);
     },
     'touchmove .thumbnailEntry': function(e) {
         thumbnailDragHandler(e, e.currentTarget);

Packages/viewerbase/components/viewer/imageViewerViewport/imageViewerViewport.js

@@ -5,10 +5,9 @@
  *
  * @param element
  */
-function enablePrefetchOnElement() {
+function enablePrefetchOnElement(viewportIndex) {
-    var viewportIndex = Session.get('ActiveViewport');
     var element = $('.imageViewerViewport').get(viewportIndex);
-    console.log('Enabling prefetch on new element');
+    //console.log('Enabling prefetch on new element');
 
     // Loop through all viewports and disable stackPrefetch
     $('.imageViewerViewport').each(function() {
@@ -25,9 +24,7 @@ function enablePrefetchOnElement() {
     }
 }
 
-function displayReferenceLines() {
+function displayReferenceLines(viewportIndex) {
-    console.log("Changing reference line display");
-    var viewportIndex = Session.get('ActiveViewport');
     var element = $('.imageViewerViewport').get(viewportIndex);
 
     $('.imageViewerViewport').each(function(index, element) {
@@ -157,9 +154,6 @@ function loadSeriesIntoViewport(data) {
         if (OHIF.viewer.refLinesEnabled && imagePlane && imagePlane.frameOfReferenceUID) {
             OHIF.viewer.updateImageSynchronizer.add(element);
         }
-        
-        //enablePrefetchOnElement();
-        displayReferenceLines();
     });
 }
 
@@ -222,9 +216,12 @@ Template.imageViewerViewport.onDestroyed(function() {
 
 Template.imageViewerViewport.events({
     'ActivateViewport .imageViewerViewport': function(e) {
-        console.log('ActivateViewport: ' + e.viewportIndex);
+        if (this.viewportIndex === this.activeViewport.get()) {
-        Session.set('ActiveViewport', e.viewportIndex);
+            return;
-        enablePrefetchOnElement();
+        }
-        displayReferenceLines();
+        console.log('ActivateViewport index: ' + this.viewportIndex);
+        this.activeViewport.set(this.viewportIndex);
+        enablePrefetchOnElement(this.viewportIndex);
+        displayReferenceLines(this.viewportIndex);
     },
 });

Packages/viewerbase/components/viewer/imageViewerViewports/imageViewerViewports.html

@@ -3,7 +3,7 @@
         {{ #each viewportArray }}
         <div class="viewportContainer" style="height:{{height}}%;width:{{width}}%;">
             <div class="removable">
-                {{ >imageViewerViewport studies=studies activeViewport=activeViewport}}
+                {{ >imageViewerViewport viewportIndex=viewportIndex studies=studies activeViewport=activeViewport}}
             </div>
         </div>
         {{ /each }}

Packages/viewerbase/components/viewer/playClipButton/playClipButton.js

@@ -1,7 +1,7 @@
 Template.playClipButton.helpers({
     'isPlaying': function() {
         Session.get('UpdateCINE');
-        var viewportIndex = Session.get('ActiveViewport');
+        var viewportIndex = this.activeViewport.get();
         return !!OHIF.viewer.isPlaying[viewportIndex];
     }
 });

Packages/viewerbase/components/viewer/toolbar/toolbar.html

@@ -2,15 +2,15 @@
     <div id='toolbar'>
         <div class="btn-group">
             {{ #each button }}
-                {{ >simpleToolbarButton }}
+                {{ >simpleToolbarButton}}
             {{ /each }}
 
             {{ #if includePlayClipButton }}
-                {{ > playClipButton activeViewport=activeViewport}}
+                {{ >playClipButton activeViewport=activeViewport}}
             {{ /if }}
 
             {{ #if includeLayoutButton }}
-                {{ > layoutButton viewportRows=viewportRows viewportColumns=viewportColumns}}
+                {{ >layoutButton viewportRows=viewportRows viewportColumns=viewportColumns}}
             {{ /if }}
         </div>
     </div>

Packages/viewerbase/components/viewer/toolbar/toolbar.js

@@ -84,7 +84,7 @@ Template.toolbar.events({
         if (!OHIF.viewer.functionList.hasOwnProperty(command)) {
             return;
         }
-        var viewportIndex = Session.get('ActiveViewport');
+        var viewportIndex = Template.parentData(0).activeViewport.get();
         var element = $('.imageViewerViewport').get(viewportIndex);
         OHIF.viewer.functionList[command](element);
     }
@@ -101,20 +101,20 @@ Template.toolbar.onRendered(function() {
 
 Template.toolbar.helpers({
     'button': function() {
-        if (this.buttonData) {
+        if (this.toolbarOptions && this.toolbarOptions.buttonData) {
-            return this.buttonData;
+            return this.toolbarOptions.buttonData;
         }
         return getDefaultButtonData();
     },
     'includePlayClipButton': function() {
-        if (this.includePlayClipButton !== undefined) {
+        if (this.toolbarOptions && this.toolbarOptions.includePlayClipButton !== undefined) {
-            return this.includePlayClipButton;
+            return this.toolbarOptions.includePlayClipButton;
         }
         return true;
     },
     'includeLayoutButton': function() {
-        if (this.includeLayoutButton !== undefined) {
+        if (this.toolbarOptions && this.toolbarOptions.includeLayoutButton !== undefined) {
-            return this.includeLayoutButton;
+            return this.toolbarOptions.includeLayoutButton;
         }
         return true;
     }

Packages/worklist/components/worklist.js

@@ -13,10 +13,7 @@ Template.worklist.events({
 });
 
 switchToTab = function(contentId) {
-    var studies = Session.get('StudiesInTab' + contentId);
+    var data = Session.get('DataInTab' + contentId);
-    var data = {
-        studies: studies
-    };
     
     var newContentId = contentId.replace("#", "");
     //var tabObject = tabs.findOne({contentid: newContentId});