Improved loading indicators. Added % loaded to viewports and thumbnails

LesionTracker/client/head.html

@@ -2,7 +2,7 @@
     <meta charset="utf-8">
     <title>Lesion Tracker</title>
     <meta name="description" content="Prototype viewer application for oncology">
-    <meta name="viewport" content="user-scalable=no, initial-scale=1, minimal-ui, maximum-scale=1, minimum-scale=1" />
+    <meta name="viewport" content="user-scalable=no, initial-scale=1,maximum-scale=1, minimum-scale=1" />
     <link rel="shortcut icon" type="image/png" href="images/logo.png" sizes="16x16 32x32 64x64">
     <!--Best display for mobile devices-->
     <meta http-equiv="cleartype" content="on">

OHIFViewer/client/components/viewer/viewer.js

@@ -23,7 +23,7 @@ Template.viewer.onCreated(function() {
         viewer: {}
     };
 
-    OHIF.viewer.loadIndicatorDelay = 3000;
+    OHIF.viewer.loadIndicatorDelay = 500;
     OHIF.viewer.defaultTool = 'wwwc';
     OHIF.viewer.refLinesEnabled = true;
     OHIF.viewer.isPlaying = {};

OHIFViewer/client/head.html

@@ -2,7 +2,7 @@
     <meta charset="utf-8">
     <title>OHIF Viewer</title>
     <meta name="description" content="Open Health Imaging Foundation DICOM Viewer">    
-    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no, minimal-ui">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">
     <!--Best display for mobile devices-->
     <meta http-equiv="cleartype" content="on">
     <meta name="MobileOptimized" content="320">

Packages/viewerbase/components/studyBrowser/imageThumbnail/imageThumbnail.html

@@ -1,4 +1,10 @@
 <template name="imageThumbnail">
     <div class="imageThumbnail">
+        <div class="imageThumbnailLoadingIndicator thumbnailLoadingIndicator">
+            <p>Loading {{percentComplete}}</p>
+        </div>
+        <div class="imageThumbnailErrorLoadingIndicator thumbnailLoadingIndicator">
+            <p>Error</p>
+        </div>
     </div>
 </template>

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

@@ -1,11 +1,33 @@
 Template.imageThumbnail.onRendered(function() {
-  var instance = this.data.instances[0];
+    var instance = this.data.stack.instances[0];
-  var element = this.find('.imageThumbnail');
+    var element = this.find('.imageThumbnail');
-  cornerstone.enable(element);
+    cornerstone.enable(element);
 
-  var imageId = getImageId(instance);
+    var imageId = getImageId(instance);
 
-  cornerstone.loadAndCacheImage(imageId).then(function(image) {
+    var elem = $(element);
-    cornerstone.displayImage(element, image);
+    elem.find('.imageThumbnailLoadingIndicator').css('display', 'block');
-  });
+
+    var thumbnailIndex = $('.imageThumbnail').index(element);
+    ThumbnailLoading[thumbnailIndex] = imageId;
+
+    this.data.thumbnailIndex = thumbnailIndex;
+
+    cornerstone.loadAndCacheImage(imageId).then(function(image) {
+        cornerstone.displayImage(element, image);
+
+        delete ThumbnailLoading[thumbnailIndex];
+        elem.find('.imageThumbnailLoadingIndicator').css('display', 'none');
+    }, function(error) {
+        elem.find('.imageThumbnailErrorLoadingIndicator').css('display', 'block');
+    });
+});
+
+Template.imageThumbnail.helpers({
+    'percentComplete': function() {
+        var percentComplete = Session.get('CornerstoneThumbnailLoadProgress' + this.thumbnailIndex);
+        if (percentComplete && percentComplete !== 100) {
+            return percentComplete + '%';
+        }
+    }
 });

Packages/viewerbase/components/studyBrowser/imageThumbnail/imageThumbnail.styl

@@ -2,4 +2,22 @@
   width: 90px
   height: 90px
   background-color: black
-  margin: 0 auto
+  margin: 0 auto
+  position: relative
+  
+.thumbnailLoadingIndicator
+  display: none
+  pointer-events: none
+  color: #f8a13f
+  height: 20px
+  width: 100%
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  margin: auto
+  position: absolute
+  
+  p
+    text-align: center
+    font-size: 10pt

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

@@ -1,5 +1,14 @@
 Template.studyBrowser.helpers({
   studies : function() {
-    return Session.get('studies');
+    var studies = Session.get('studies');
+    
+    var array = [];
+    studies.forEach(function(study, index) {
+        array.push({
+            studyIndex: index,
+            study: study
+        });
+    });
+    return array;
   }
 });

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

@@ -26,13 +26,8 @@ function thumbnailDragStartHandler(e, data) {
     var imageThumbnail = $(targetThumbnail);
     
     // Store this data for use during drag and drop
-    OHIF.viewer.dragAndDropData = {
+    OHIF.viewer.dragAndDropData = data;
-        studyInstanceUid: imageThumbnail.data('studyInstanceUid'),
-        seriesInstanceUid: imageThumbnail.data('seriesInstanceUid')
-    };
 
-    $.extend(OHIF.viewer.dragAndDropData, data);
-    
     // Clone the image thumbnail
     var targetId = targetThumbnail.id + 'DragClone';
     var clone = cloneElement(targetThumbnail, targetId);
@@ -204,6 +199,8 @@ Template.thumbnailEntry.events({
     // Touch drag/drop events
     'touchstart .thumbnailEntry, mousedown .thumbnailEntry': function(e) {
         var data = Template.parentData(2);
+        data.studyInstanceUid = this.stack.instances[0].studyInstanceUid;
+        data.seriesInstanceUid = this.stack.seriesInstanceUid;
         thumbnailDragStartHandler(e, data);
     },
     'touchmove .thumbnailEntry': function(e) {
@@ -216,9 +213,6 @@ Template.thumbnailEntry.events({
 
 Template.thumbnailEntry.helpers({
   seriesDescription : function() {
-    if (!this.seriesDescription) {
+    return this.stack.seriesDescription || '';
-        return '';
-    }
-    return this.seriesDescription;
   }
 });

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

@@ -1,6 +1,15 @@
 Template.thumbnails.helpers({
-  thumbnails: function() {
+    thumbnails: function() {
-    var stacks = createStacks(this);
+        var stacks = createStacks(this.study);
-    return stacks;
+        var studyIndex = this.studyIndex;
-  }
+        
+        var array = [];
+        stacks.forEach(function(stack, index) {
+            array.push({
+                thumbnailIndex: index * (studyIndex + 1),
+                stack: stack
+            });
+        });
+        return array;
+    }
 });

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

@@ -104,13 +104,11 @@ function loadSeriesIntoViewport(data) {
     // If you have problems, replace it with this line instead:
     // cornerstone.enable(element);
 
-    var startLoadingHandler = cornerstoneTools.loadHandlerManager.getStartLoadHandler();
+
     var endLoadingHandler = cornerstoneTools.loadHandlerManager.getEndLoadHandler();
     var errorLoadingHandler = cornerstoneTools.loadHandlerManager.getErrorLoadingHandler();
 
-    if (startLoadingHandler) {
+    ViewportLoading[viewportIndex] = imageId;
-        startLoadingHandler(element);
-    }
 
     cornerstone.loadAndCacheImage(imageId).then(function(image) {
         if (data.viewport) {
@@ -118,10 +116,9 @@ function loadSeriesIntoViewport(data) {
         } else {
             cornerstone.displayImage(element, image);
         }
+        delete ViewportLoading[viewportIndex];
         
-        if (endLoadingHandler) {
+        endLoadingHandler(element);
-            endLoadingHandler(element);
-        }
 
         cornerstone.resize(element, true);
 
@@ -216,18 +213,42 @@ function loadSeriesIntoViewport(data) {
         }
 
     }, function(error) {
-        if (errorLoadingHandler) {
+        errorLoadingHandler(element, imageId, error);
-            errorLoadingHandler(element, imageId, error);
-        }
     });
 }
 
+function getKeysByValue(object, value) {
+    // http://stackoverflow.com/questions/9907419/javascript-object-get-key-by-value
+    return Object.keys(object).filter(function(key) {
+        return object[key] === value;
+    });
+}
+
+Meteor.startup(function() {
+    ViewportLoading = {};
+    ThumbnailLoading = {};
+
+    $(cornerstone).on('CornerstoneImageLoadProgress', function(e, eventData) {
+        viewportIndices = getKeysByValue(ViewportLoading, eventData.imageId);
+        viewportIndices.forEach(function(viewportIndex) {
+            Session.set('CornerstoneLoadProgress' + viewportIndex, eventData.percentComplete);
+        });
+
+        thumbnailIndices = getKeysByValue(ThumbnailLoading, eventData.imageId);
+        thumbnailIndices.forEach(function(thumbnailIndex) {
+            Session.set('CornerstoneThumbnailLoadProgress' + thumbnailIndex, eventData.percentComplete);
+        });
+    });
+});
+
 Template.imageViewerViewport.onRendered(function() {
     log.info("imageViewerViewport onRendered");
 
+    var element = this.find(".imageViewerViewport");
+    $(element).siblings('.imageViewerLoadingIndicator').css('display', 'block');
+
     var studies = Session.get('studies');
     var activeViewport = Session.get('activeViewport');
-    var element = this.find(".imageViewerViewport");
 
     var data = {
         element: element,
@@ -240,6 +261,7 @@ Template.imageViewerViewport.onRendered(function() {
 
     if (this.data.seriesInstanceUid === undefined || this.data.studyInstanceUid === undefined) {
         element.classList.add('empty');
+        $(element).siblings('.imageViewerLoadingIndicator').css('display', 'none');
         $(element).siblings('.viewportInstructions').show();
         return;
     }

Packages/viewerbase/components/viewer/loadingIndicator/loadingIndicator.html

@@ -1,7 +1,7 @@
 <template name="loadingIndicator">
     <div class="imageViewerLoadingIndicator loadingIndicator">
         <div class="indicatorContents">
-            <p>Loading...</p>
+            <p>Loading... {{percentComplete}}</p>
         </div>
     </div>
     <div class="imageViewerErrorLoadingIndicator loadingIndicator">

Packages/viewerbase/components/viewer/loadingIndicator/loadingIndicator.js

@@ -58,4 +58,13 @@ errorLoadingHandler = function(element, imageId, error, source) {
     if (error) {
         errorLoadingIndicator.find('.details').text("Details: " + error);
     }
-};
+};
+
+Template.loadingIndicator.helpers({
+    'percentComplete': function(e) {
+        var percentComplete = Session.get('CornerstoneLoadProgress' + this.viewportIndex);
+        if (percentComplete && percentComplete !== 100) {
+            return percentComplete + '%';
+        }
+    }
+});

Packages/viewerbase/log.js

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