Improved loading indicators. Added % loaded to viewports and thumbnails

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 + '%';
+        }
+    }
 });