From 4055655c7aa831aca70be1fe58de355b6879bc13 Mon Sep 17 00:00:00 2001
From: Leonardo Campos <leonardoscampos@gmail.com>
Date: Wed, 26 Apr 2017 21:31:07 -0300
Subject: [PATCH] OHIF-26: StudyLoadingListener :: progress bar config (ui)

---
 Packages/ohif-study-list/both/schema/servers.js      |  5 +++++
 .../studyBrowser/imageThumbnail/imageThumbnail.html  |  5 +++++
 .../studyBrowser/imageThumbnail/imageThumbnail.js    | 12 ++++++++----
 .../studyBrowser/imageThumbnail/imageThumbnail.styl  | 12 ++++++++++++
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/Packages/ohif-study-list/both/schema/servers.js b/Packages/ohif-study-list/both/schema/servers.js
index b8f89d8a6..db3a9e348 100644
--- a/Packages/ohif-study-list/both/schema/servers.js
+++ b/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
     }
 });
 
diff --git a/Packages/ohif-viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.html b/Packages/ohif-viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.html
index ec1cddb6f..bae11a1cd 100644
--- a/Packages/ohif-viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.html
+++ b/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>
diff --git a/Packages/ohif-viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.js b/Packages/ohif-viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.js
index 0679e8895..5a857c915 100644
--- a/Packages/ohif-viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.js
+++ b/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;
     }
 });
diff --git a/Packages/ohif-viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.styl b/Packages/ohif-viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.styl
index 02d16d88c..cf05bb241 100644
--- a/Packages/ohif-viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.styl
+++ b/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')