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