Updates to improve reactivity, session storage, logging

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

@@ -1,5 +1,5 @@
 Template.studyBrowser.helpers({
   studies : function() {
-    return this.studies;
+    return Session.get('studies');
   }
 });

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

@@ -6,8 +6,9 @@
  * @param element
  */
 function enablePrefetchOnElement(viewportIndex) {
+    log.info("imageViewerViewport enablePrefetchOnElement");
+
     var element = $('.imageViewerViewport').get(viewportIndex);
-    //console.log('Enabling prefetch on new element');
 
     // Loop through all viewports and disable stackPrefetch
     $('.imageViewerViewport').each(function() {
@@ -25,6 +26,8 @@ function enablePrefetchOnElement(viewportIndex) {
 }
 
 function displayReferenceLines(viewportIndex) {
+    log.info("imageViewerViewport displayReferenceLines");
+
     var element = $('.imageViewerViewport').get(viewportIndex);
 
     $('.imageViewerViewport').each(function(index, element) {
@@ -49,17 +52,22 @@ function displayReferenceLines(viewportIndex) {
 }
 
 function loadSeriesIntoViewport(data) {
+    log.info("imageViewerViewport loadSeriesIntoViewport");
+
     if (!data.series || !data.element) {
         return;
     }
 
-    var contentId = $("#viewer").parents('.tab-pane.active').attr('id');
+    var contentId = Session.get('activeContentId');
+    
 
     var study = data.study;
     var series = data.series;
     var element = data.element;
     var viewportIndex = $(".imageViewerViewport").index(element);
 
+    ViewerData[contentId].loadedSeriesData[viewportIndex] = {};
+
     var allEvents = 'CornerstoneToolsMouseDown CornerstoneToolsMouseDownActivate ' +
         'CornerstoneToolsMouseClick CornerstoneToolsMouseDrag CornerstoneToolsMouseUp ' +
         'CornerstoneToolsMouseWheel CornerstoneToolsTap CornerstoneToolsTouchPress ' +
@@ -115,6 +123,8 @@ function loadSeriesIntoViewport(data) {
             endLoadingHandler(element);
         }
 
+        cornerstone.resize(element, true);
+
         element.classList.remove('empty');
         $(element).siblings('.viewportInstructions').hide();
         $(element).siblings('.imageViewerViewportOverlay').show();
@@ -142,9 +152,11 @@ function loadSeriesIntoViewport(data) {
         cornerstoneTools.magnify.enable(element);
 
         function onImageRendered(e, eventData) {
+            log.info('imageViewerViewport onImageRendered');
+
             Session.set('CornerstoneImageRendered' + viewportIndex, Random.id());
             var viewport = cornerstone.getViewport(element);
-            ViewerData[contentId].viewer.imageViewerLoadedSeriesDictionary[viewportIndex].viewport = viewport;
+            ViewerData[contentId].loadedSeriesData[viewportIndex].viewport = viewport;
             Session.set('ViewerData', ViewerData);
         }
 
@@ -153,6 +165,8 @@ function loadSeriesIntoViewport(data) {
         Session.set('CornerstoneImageRendered' + viewportIndex, Random.id());
 
         function onNewImage(e, eventData) {
+            log.info('imageViewerViewport onNewImage');
+
             // Update the templateData with the new imageId
             // This allows the template helpers to update reactively
             templateData.imageId = eventData.enabledElement.image.imageId;
@@ -161,7 +175,7 @@ function loadSeriesIntoViewport(data) {
             var stack = cornerstoneTools.getToolState(element, 'stack');
             if (stack && stack.data.length && stack.data[0].imageIds.length > 1) {
                 var imageIdIndex = stack.data[0].imageIds.indexOf(templateData.imageId);
-                ViewerData[contentId].viewer.imageViewerLoadedSeriesDictionary[viewportIndex].currentImageIdIndex = imageIdIndex;
+                ViewerData[contentId].loadedSeriesData[viewportIndex].currentImageIdIndex = imageIdIndex;
                 Session.set('ViewerData', ViewerData);
             }
         }
@@ -170,14 +184,17 @@ function loadSeriesIntoViewport(data) {
         $(element).on('CornerstoneNewImage', onNewImage);
 
         function sendActivationTrigger(e, eventData) {
-            var activeViewportIndex = data.activeViewport.curValue;
+            log.info('imageViewerViewport sendActivationTrigger');
+            var activeViewportIndex = Session.get('activeViewport');
             var viewportIndex = $(".imageViewerViewport").index(eventData.element);
             if (viewportIndex === activeViewportIndex) {
                 return;
             }
             eventData.viewportIndex = viewportIndex;
-            var customEvent = jQuery.Event('ActivateViewport', eventData);
-            customEvent.type = 'ActivateViewport'; // Need to overwrite the type set in the touch tools
+            var customEvent = $.Event('ActivateViewport', eventData);
+
+            // Need to overwrite the type set in the original event
+            customEvent.type = 'ActivateViewport';
             $(e.target).trigger(customEvent, eventData);
         }
 
@@ -186,7 +203,7 @@ function loadSeriesIntoViewport(data) {
 
         Session.set('CornerstoneNewImage' + viewportIndex, Random.id());
 
-        OHIF.viewer.imageViewerLoadedSeriesDictionary[viewportIndex] = {
+        OHIF.viewer.loadedSeriesData[viewportIndex] = {
             studyInstanceUid: data.studyInstanceUid,
             seriesInstanceUid: data.seriesInstanceUid,
             currentImageIdIndex: data.currentImageIdIndex,
@@ -206,16 +223,19 @@ function loadSeriesIntoViewport(data) {
 }
 
 Template.imageViewerViewport.onRendered(function() {
-    var studies = this.data.studies;
+    log.info("imageViewerViewport onRendered");
+
+    var studies = Session.get('studies');
+    var activeViewport = Session.get('activeViewport');
     var element = this.find(".imageViewerViewport");
 
     var data = {
         element: element,
         viewport: this.data.viewport,
         currentImageIdIndex: this.data.currentImageIdIndex,
-        activeViewport: this.data.activeViewport,
         studyInstanceUid: this.data.studyInstanceUid,
-        seriesInstanceUid: this.data.seriesInstanceUid
+        seriesInstanceUid: this.data.seriesInstanceUid,
+        activeViewport: activeViewport
     };
 
     if (this.data.seriesInstanceUid === undefined || this.data.studyInstanceUid === undefined) {
@@ -246,18 +266,23 @@ Template.imageViewerViewport.onRendered(function() {
 });
 
 Template.imageViewerViewport.onDestroyed(function() {
+    log.info("imageViewerViewport onDestroyed");
+
     var element = this.find(".imageViewerViewport");
+    
+    try {
+        cornerstoneTools.stopClip(element);
+    } catch(error) {
+    }
+
     cornerstone.disable(element);
 });
 
 Template.imageViewerViewport.events({
     'ActivateViewport .imageViewerViewport': function(e) {
-        if (this.viewportIndex === this.activeViewport.curValue) {
-            return;
-        }
-        Session.set("ActivateViewportIndex", this.viewportIndex);
-        console.log('ActivateViewport index: ' + this.viewportIndex);
-        this.activeViewport.curValue = this.viewportIndex;
+        log.info("imageViewerViewport ActivateViewport");
+
+        Session.set("activeViewport", 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 viewportIndex=viewportIndex studies=studies activeViewport=activeViewport seriesInstanceUid=seriesInstanceUid studyInstanceUid=studyInstanceUid currentImageIdIndex=currentImageIdIndex viewport=viewport}}
+                {{ >imageViewerViewport viewportIndex=viewportIndex seriesInstanceUid=seriesInstanceUid studyInstanceUid=studyInstanceUid currentImageIdIndex=currentImageIdIndex viewport=viewport}}
             </div>
         </div>
         {{ /each }}

Packages/viewerbase/components/viewer/imageViewerViewports/imageViewerViewports.js

@@ -1,49 +1,44 @@
 Template.imageViewerViewports.helpers({
     height: function() {
-        var viewportRows;
-        if (!Template.parentData(1).viewportRows) {
-            viewportRows = 1;
-        } else {
-            viewportRows = Template.parentData(1).viewportRows.curValue; //Having issues with .get(), not sure why?
-        }
+        var viewportRows = this.viewportRows || 1;
         return 100 / viewportRows;
     },
     width: function() {
-        var viewportColumns;
-        if (!Template.parentData(1).viewportColumns) {
-            viewportColumns = 1;
-        } else {
-            viewportColumns = Template.parentData(1).viewportColumns.curValue;  //Having issues with .get(), not sure why?
-        }
+        var viewportColumns = this.viewportColumns || 1;
         return 100 / viewportColumns;
     },
     viewportArray: function() {
-        // This is a really annoying thing to have to do, but Meteor
-        // doesn't want to let me use another type of helper.
-        var viewportRows;
-        if (!this.viewportRows) {
-            viewportRows = 1;
-        } else {
-            viewportRows = this.viewportRows.curValue; //Having issues with .get(), not sure why?
+        log.info("imageViewerViewports viewportArray");
+
+        var studies = Session.get('studies');
+
+        var viewportRows = this.viewportRows || 1;
+        var viewportColumns = this.viewportColumns || 1;
+
+        var contentId = this.contentId || $("#viewer").parents(".tab-pane.active").attr('id');
+        if (this.viewportRows && this.viewportColumns) {
+            viewportRows = this.viewportRows || 1;
+            viewportColumns = this.viewportColumns || 1;
+        } else if (ViewerData[contentId].viewportRows && ViewerData[contentId].viewportColumns) {
+            viewportRows = ViewerData[contentId].viewportRows;
+            viewportColumns = ViewerData[contentId].viewportColumns;
         }
 
-        var viewportColumns;
-        if (!this.viewportColumns) {
-            viewportColumns = 1;
-        } else {
-            viewportColumns = this.viewportColumns.curValue; //Having issues with .get(), not sure why?
-        }
-        
+        // Update viewerData
+        ViewerData[contentId].viewportRows = viewportRows;
+        ViewerData[contentId].viewportColumns = viewportColumns;
+        Session.set("ViewerData", ViewerData);
+
         var viewportData;
-        if (OHIF && OHIF.viewer && !$.isEmptyObject(OHIF.viewer.imageViewerLoadedSeriesDictionary)) {
-            viewportData = OHIF.viewer.imageViewerLoadedSeriesDictionary;
+        if (!$.isEmptyObject(ViewerData[contentId].loadedSeriesData)) {
+            viewportData = ViewerData[contentId].loadedSeriesData;
         }
 
         var hangingProtocol = getHangingProtocol();
         var inputData = {
             viewportColumns: viewportColumns,
             viewportRows: viewportRows,
-            studies: this.studies
+            studies: studies
         };
         var hangingProtocolViewportData = hangingProtocol(inputData);
         
@@ -52,8 +47,10 @@ Template.imageViewerViewports.helpers({
         for (var i=0; i < numViewports; ++i) {
             var data = {
                 viewportIndex: i,
-                studies: this.studies,
-                activeViewport: this.activeViewport
+                // These two are necessary because otherwise the width and height helpers
+                // don't get the right data context. Seems to be related to the "each" loop.
+                viewportColumns: viewportColumns,
+                viewportRows: viewportRows
             };
             if (viewportData && viewportData[i]) {
                 data.seriesInstanceUid = viewportData[i].seriesInstanceUid;

Packages/viewerbase/components/viewer/layoutChooser/layoutChooser.js

@@ -27,31 +27,18 @@ Template.layoutChooser.events({
     },
     'click .layoutChooser table td': function(evt) {
         $('#imageViewerViewports').remove();
-        var container = $(".viewerMain").get(0);
 
         var currentCell = $(evt.currentTarget);
         var rowIndex = currentCell.closest('tr').index();
         var columnIndex = currentCell.index();
 
-        var data = {};
-
         // Add 1 because the indices start from zero
-        if (this.viewportRows) {
-            this.viewportRows.curValue = rowIndex + 1;
-            data.viewportRows = this.viewportRows;
-        } else {
-            data.viewportRows = 1;
-        }
-
-        if (this.viewportColumns) {
-            this.viewportColumns.curValue = columnIndex + 1;
-            data.viewportColumns = this.viewportColumns;
-        } else {
-            data.viewportColumns = 1;
-        }
-
-        data.studies = Template.parentData(2).studies;
-        data.activeViewport = Template.parentData(2).activeViewport;
+        var data = {
+            viewportRows: rowIndex + 1,
+            viewportColumns: columnIndex + 1,
+        };
+        
+        var container = $(".viewerMain").get(0);
         UI.renderWithData(Template.imageViewerViewports, data, container);
     }
 });

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

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

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

@@ -6,11 +6,11 @@
             {{ /each }}
 
             {{ #if includePlayClipButton }}
-                {{ >playClipButton activeViewport=activeViewport}}
+                {{ >playClipButton }}
             {{ /if }}
 
             {{ #if includeLayoutButton }}
-                {{ >layoutButton viewportRows=viewportRows viewportColumns=viewportColumns}}
+                {{ >layoutButton }}
             {{ /if }}
         </div>
     </div>

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

@@ -84,8 +84,8 @@ Template.toolbar.events({
         if (!OHIF.viewer.functionList.hasOwnProperty(command)) {
             return;
         }
-        var viewportIndex = Template.parentData(0).activeViewport.get();
-        var element = $('.imageViewerViewport').get(viewportIndex);
+        var activeViewport = Session.get('activeViewport');
+        var element = $('.imageViewerViewport').get(activeViewport);
         OHIF.viewer.functionList[command](element);
     }
 });

Packages/viewerbase/lib/rerenderViewportWithNewSeries.js

@@ -12,7 +12,7 @@ rerenderViewportWithNewSeries = function(element, data) {
     data.viewportIndex = viewportIndex;
 
     // Update the dictionary of loaded series for the specified viewport
-    OHIF.viewer.imageViewerLoadedSeriesDictionary[viewportIndex] = {
+    OHIF.viewer.loadedSeriesData[viewportIndex] = {
         seriesInstanceUid: data.seriesInstanceUid,
         studyInstanceUid: data.studyInstanceUid,
         currentImageIdIndex: 0

Packages/viewerbase/log.js

@@ -0,0 +1,3 @@
+// Create package logger using loglevel
+// https://atmospherejs.com/spacejamio/loglevel
+log = loglevel.createPackageLogger('viewerbase', defaultLevel = 'warn');

Packages/viewerbase/package.js

@@ -11,9 +11,13 @@ Package.onUse(function (api) {
     api.use('jquery');
     api.use('stylus');
 
+    api.use('practicalmeteor:loglevel');
+
     // Our custom package
     api.use('cornerstone');
 
+    api.addFiles('log.js', 'client');
+
     // ---------- Components ----------
 
     // Basic components