OHIF-26: StudyLoadingListener :: progress bar config (ui)

Packages/ohif-study-list/both/schema/servers.js

@@ -163,6 +163,11 @@ export const UISettings = new SimpleSchema({
         type: Number,
         label: 'Number of days to be used on Study List date filter',
         min: 1
+    },
+    showStackLoadingProgressBar: {
+        type: Boolean,
+        label: 'Show a progress bar closest to the thumbnail showing how much the stack has loaded',
+        defaultValue: true
     }
 });
 

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

@@ -7,5 +7,10 @@
         <div class="imageThumbnailErrorLoadingIndicator thumbnailLoadingIndicator">
             <p>Error</p>
         </div>
+        {{#if showStackLoadingProgressBar}}
+            <div class="imageThumbnailProgressBar">
+                <div class="imageThumbnailProgressBarInner" style="width:{{stackPercentComplete}}%"></div>
+            </div>
+        {{/if}}
     </div>
 </template>

Packages/ohif-viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.js

@@ -97,7 +97,7 @@ Template.imageThumbnail.onDestroyed(() => {
 });
 
 Template.imageThumbnail.helpers({
-    // Executed every time the image loading progress is changed
+    // Executed every time the thumbnail image loading progress is changed
     percentComplete() {
         const instance = Template.instance();
 
@@ -113,14 +113,18 @@ Template.imageThumbnail.helpers({
         }
     },
 
-    // Return how much the displaySet has already been loaded (%)
+    // Return how much the stack has already loaded
     stackPercentComplete() {
         const instance = Template.instance();
         const stack = instance.data.thumbnail.stack;
         const displaySetInstanceUid = stack.displaySetInstanceUid;
         const progress = Session.get('DisplaySetProgress:' + displaySetInstanceUid);
-        const percentComplete = parseFloat(progress ? progress.percentComplete : 0) * 100;
+        const percentComplete = progress && progress.percentComplete;
 
-        return percentComplete.toFixed(2);
+        return percentComplete;
+    },
+
+    showStackLoadingProgressBar() {
+        return OHIF.uiSettings.showStackLoadingProgressBar;
     }
 });

Packages/ohif-viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.styl

@@ -47,3 +47,15 @@
   p
     text-align: center
     font-size: 10pt
+
+.imageThumbnailProgressBar
+  position: relative
+  width: 100%
+  height: 3px
+  top: -5px
+
+  .imageThumbnailProgressBarInner
+    height: 100%
+    width: 0
+    border-radius: 5px
+    theme('background-color', '$activeColor')