Added hotkey support to viewerbase

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

@@ -0,0 +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/client/components/studyBrowser/imageThumbnail/imageThumbnail.js

@@ -0,0 +1,37 @@
+Template.imageThumbnail.onRendered(function() {
+    var instance = this.data.stack.instances[0];
+    var element = this.find('.imageThumbnail');
+
+    cornerstone.disable(element);
+    $(element).find('canvas').remove();
+
+    cornerstone.enable(element);
+
+    var imageId = getImageId(instance);
+
+    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/client/components/studyBrowser/imageThumbnail/imageThumbnail.styl

@@ -0,0 +1,23 @@
+.imageThumbnail
+  width: 90px
+  height: 90px
+  background-color: black
+  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