From 7f04f962222798d88f703ac3a35ff659a2fc1a4a Mon Sep 17 00:00:00 2001
From: Erik Ziegler <erik.ziegler@ulg.ac.be>
Date: Thu, 22 Oct 2015 11:12:20 +0200
Subject: [PATCH] Fixes for activeViewport reactivity

---
 LesionTracker/client/components/viewer.js     | 12 +++++++---
 .../components/viewerMain/viewerMain.html     |  2 +-
 LesionTracker/client/route.js                 |  7 +++---
 OHIFViewer/client/components/viewer/viewer.js | 20 +++++++++++++---
 OHIFViewer/client/routes.js                   |  7 +++---
 .../thumbnailEntry/thumbnailEntry.js          | 11 +++++----
 .../imageViewerViewport.js                    | 23 ++++++++-----------
 .../imageViewerViewports.html                 |  2 +-
 .../viewer/playClipButton/playClipButton.js   |  2 +-
 .../components/viewer/toolbar/toolbar.html    |  6 ++---
 .../components/viewer/toolbar/toolbar.js      | 14 +++++------
 Packages/worklist/components/worklist.js      |  7 ++----
 12 files changed, 65 insertions(+), 48 deletions(-)

diff --git a/LesionTracker/client/components/viewer.js b/LesionTracker/client/components/viewer.js
index b03c5e16a..8e69c9f3f 100644
--- a/LesionTracker/client/components/viewer.js
+++ b/LesionTracker/client/components/viewer.js
@@ -59,9 +59,15 @@ function resizeViewports() {
 }
 
 Template.viewer.onCreated(function() {
-     this.data.activeViewport = new ReactiveVar(0);
-     this.data.viewportRows = new ReactiveVar(1);
-     this.data.viewportColumns = new ReactiveVar(2);
+    if (this.data.activeViewport === undefined) {
+        this.data.activeViewport = new ReactiveVar(0);
+    }
+    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
diff --git a/LesionTracker/client/components/viewerMain/viewerMain.html b/LesionTracker/client/components/viewerMain/viewerMain.html
index 09b7250f8..2b35ca52b 100644
--- a/LesionTracker/client/components/viewerMain/viewerMain.html
+++ b/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>
diff --git a/LesionTracker/client/route.js b/LesionTracker/client/route.js
index 49ac4c7e1..ab2b4be0d 100644
--- a/LesionTracker/client/route.js
+++ b/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('StudiesInTab#' + contentid, studies);
+            Session.set('DataInTab#' + contentid, data);
             Session.set('OpenNewTabEvent', contentid);
         });
     }
diff --git a/OHIFViewer/client/components/viewer/viewer.js b/OHIFViewer/client/components/viewer/viewer.js
index 824cf27ab..b5c0ff60d 100644
--- a/OHIFViewer/client/components/viewer/viewer.js
+++ b/OHIFViewer/client/components/viewer/viewer.js
@@ -59,9 +59,23 @@ function resizeViewports() {
 }
 
 Template.viewer.onCreated(function() {
-     this.data.activeViewport = new ReactiveVar(0);
-     this.data.viewportRows = new ReactiveVar(1);
-     this.data.viewportColumns = new ReactiveVar(1);
+    if (this.data.activeViewport === undefined) {
+        this.data.activeViewport = new ReactiveVar(0);
+    }
+    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
diff --git a/OHIFViewer/client/routes.js b/OHIFViewer/client/routes.js
index 611da7114..e7681124e 100644
--- a/OHIFViewer/client/routes.js
+++ b/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('StudiesInTab#' + contentid, studies);
+            Session.set('DataInTab#' + contentid, data);
             Session.set('OpenNewTabEvent', contentid);
         });
     }
diff --git a/Packages/viewerbase/components/studyBrowser/thumbnailEntry/thumbnailEntry.js b/Packages/viewerbase/components/studyBrowser/thumbnailEntry/thumbnailEntry.js
index 9e6bbeccf..d2320e174 100644
--- a/Packages/viewerbase/components/studyBrowser/thumbnailEntry/thumbnailEntry.js
+++ b/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,9 +28,10 @@ function thumbnailDragStartHandler(e, studies) {
     // Store this data for use during drag and drop
     OHIF.viewer.dragAndDropData = {
         studyInstanceUid: imageThumbnail.data('studyInstanceUid'),
-        seriesInstanceUid: imageThumbnail.data('seriesInstanceUid'),
-        studies: studies
+        seriesInstanceUid: imageThumbnail.data('seriesInstanceUid')
     };
+
+    $.extend(OHIF.viewer.dragAndDropData, data);
     
     // Clone the image thumbnail
     var targetId = targetThumbnail.id + 'DragClone';
@@ -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;
-        thumbnailDragStartHandler(e, studies);
+        var data = Template.parentData(2);
+        thumbnailDragStartHandler(e, data);
     },
     'touchmove .thumbnailEntry': function(e) {
         thumbnailDragHandler(e, e.currentTarget);
diff --git a/Packages/viewerbase/components/viewer/imageViewerViewport/imageViewerViewport.js b/Packages/viewerbase/components/viewer/imageViewerViewport/imageViewerViewport.js
index 1885314e1..2a42db703 100644
--- a/Packages/viewerbase/components/viewer/imageViewerViewport/imageViewerViewport.js
+++ b/Packages/viewerbase/components/viewer/imageViewerViewport/imageViewerViewport.js
@@ -5,10 +5,9 @@
  *
  * @param element
  */
-function enablePrefetchOnElement() {
-    var viewportIndex = Session.get('ActiveViewport');
+function enablePrefetchOnElement(viewportIndex) {
     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() {
-    console.log("Changing reference line display");
-    var viewportIndex = Session.get('ActiveViewport');
+function displayReferenceLines(viewportIndex) {
     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);
-        Session.set('ActiveViewport', e.viewportIndex);
-        enablePrefetchOnElement();
-        displayReferenceLines();
+        if (this.viewportIndex === this.activeViewport.get()) {
+            return;
+        }
+        console.log('ActivateViewport index: ' + this.viewportIndex);
+        this.activeViewport.set(this.viewportIndex);
+        enablePrefetchOnElement(this.viewportIndex);
+        displayReferenceLines(this.viewportIndex);
     },
 });
\ No newline at end of file
diff --git a/Packages/viewerbase/components/viewer/imageViewerViewports/imageViewerViewports.html b/Packages/viewerbase/components/viewer/imageViewerViewports/imageViewerViewports.html
index 27ee0d511..041b60809 100644
--- a/Packages/viewerbase/components/viewer/imageViewerViewports/imageViewerViewports.html
+++ b/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 }}
diff --git a/Packages/viewerbase/components/viewer/playClipButton/playClipButton.js b/Packages/viewerbase/components/viewer/playClipButton/playClipButton.js
index c34083ce7..e9dd489f4 100644
--- a/Packages/viewerbase/components/viewer/playClipButton/playClipButton.js
+++ b/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];
     }
 });
\ No newline at end of file
diff --git a/Packages/viewerbase/components/viewer/toolbar/toolbar.html b/Packages/viewerbase/components/viewer/toolbar/toolbar.html
index 934e7fc18..12c4ac125 100644
--- a/Packages/viewerbase/components/viewer/toolbar/toolbar.html
+++ b/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>
diff --git a/Packages/viewerbase/components/viewer/toolbar/toolbar.js b/Packages/viewerbase/components/viewer/toolbar/toolbar.js
index e23e203be..77799e35e 100644
--- a/Packages/viewerbase/components/viewer/toolbar/toolbar.js
+++ b/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) {
-            return this.buttonData;
+        if (this.toolbarOptions && this.toolbarOptions.buttonData) {
+            return this.toolbarOptions.buttonData;
         }
         return getDefaultButtonData();
     },
     'includePlayClipButton': function() {
-        if (this.includePlayClipButton !== undefined) {
-            return this.includePlayClipButton;
+        if (this.toolbarOptions && this.toolbarOptions.includePlayClipButton !== undefined) {
+            return this.toolbarOptions.includePlayClipButton;
         }
         return true;
     },
     'includeLayoutButton': function() {
-        if (this.includeLayoutButton !== undefined) {
-            return this.includeLayoutButton;
+        if (this.toolbarOptions && this.toolbarOptions.includeLayoutButton !== undefined) {
+            return this.toolbarOptions.includeLayoutButton;
         }
         return true;
     }
diff --git a/Packages/worklist/components/worklist.js b/Packages/worklist/components/worklist.js
index 1cdefd672..540616c32 100644
--- a/Packages/worklist/components/worklist.js
+++ b/Packages/worklist/components/worklist.js
@@ -13,11 +13,8 @@ Template.worklist.events({
 });
 
 switchToTab = function(contentId) {
-    var studies = Session.get('StudiesInTab' + contentId);
-    var data = {
-        studies: studies
-    };
-
+    var data = Session.get('DataInTab' + contentId);
+    
     var newContentId = contentId.replace("#", "");
     //var tabObject = tabs.findOne({contentid: newContentId});
     //tabObject.active = true;