Improved loading indicators. Added % loaded to viewports and thumbnails

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 element = this.find('.imageThumbnail');
-  cornerstone.enable(element);
+    var instance = this.data.stack.instances[0];
+    var element = this.find('.imageThumbnail');
+    cornerstone.enable(element);
 
-  var imageId = getImageId(instance);
+    var imageId = getImageId(instance);
 
-  cornerstone.loadAndCacheImage(imageId).then(function(image) {
-    cornerstone.displayImage(element, image);
-  });
+    var elem = $(element);
+    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 = {
-        studyInstanceUid: imageThumbnail.data('studyInstanceUid'),
-        seriesInstanceUid: imageThumbnail.data('seriesInstanceUid')
-    };
+    OHIF.viewer.dragAndDropData = data;
 
-    $.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 '';
-    }
-    return this.seriesDescription;
+    return this.stack.seriesDescription || '';
   }
 });

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

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