Show progress with completion percentage #205

* Add ProgressBar.js library
* Add new progress bar with completion percentage

Signed-off-by: Jillian Daguil <[email protected]>

Author: jdaguil

assets/app/css/main.css

@@ -343,11 +343,14 @@ div.dataTables_scrollHead th:first-child {
   text-align: center;
 }
 
-.progress .indicator {
-  position: relative;
-  width: 50px;
-  height: 50px;
+.progress .progressbar {
+  position: static;
+  width: 100%;
+  height: 100%;
   margin: auto;
+}
+
+.progress .indeterminate {
   border: 6px solid #B4DDF8;
   border-radius: 50%;
   border-top: 6px solid #3498db;

assets/app/js/aboutCodeDB.js

@@ -170,7 +170,7 @@ class AboutCodeDB {
     }
 
     // Add rows to the flattened files table from a ScanCode json object
-    addFromJson(jsonFileName, aboutCodeVersion) {
+    addFromJson(jsonFileName, aboutCodeVersion, onProgressUpdate) {
         if (!jsonFileName) {
             throw new Error("Invalid json file name: " + jsonFileName);
         }
@@ -223,6 +223,7 @@ class AboutCodeDB {
                                 const currProgress = Math.round(index/files_count*100);
                                 if (currProgress > progress) {
                                     progress = currProgress;
+                                    onProgressUpdate(progress);
                                     console.log("Progress: "
                                         + `${progress}% `
                                         + `(${index}/${files_count})`);

assets/app/js/progress.js

@@ -1,8 +1,8 @@
 /*
  #
  # Copyright (c) 2017 nexB Inc. and others. All rights reserved.
- # https://nexb.com and https://github.com/nexB/scancode-toolkit/
- # The ScanCode software is licensed under the Apache License version 2.0.
+ # https://nexb.com and https://github.com/nexB/aboutcode-manager
+ # The AboutCode Manager software is licensed under the Apache License version 2.0.
  # AboutCode is a trademark of nexB Inc.
  #
  # You may not use this software except in compliance with the License.
@@ -16,31 +16,36 @@
 
 class Progress {
     constructor(elementId, options) {
+        this.id = elementId;
         this.container = $(elementId);
         this.options = options;
     }
 
-    show() {
-        if (!this.progressContainer) {
-            this.progress = $("<div>", {
-                class: "progress"
-            });
-            this.progressTitle = $("<h4>", {
-                text: this.options.title,
-                class: "title"
-            });
-            this.progressIndicator = $("<div>", {
-                class: "indicator"
-            });
-
-            this.progress
-                .append(this.progressTitle)
-                .append(this.progressIndicator);
+    showIndeterminate() {
+        this._show(this._createProgressElement('indeterminate'));
+    }
 
-            this.progressContainer =
-                this.container.clone().empty().append(this.progress);
+    showDeterminate() {
+        this._show(this._createProgressElement('determinate'));
+        this.progressBar = new ProgressBar
+            .Circle(`${this.id} .determinate`, {
+                color: '#3D7AFC',
+                strokeWidth: 4,
+                trailWidth: 1,
+                step: function(state, circle) {
+                    const value = Math.round(circle.value() * 100);
+                    if (value === 0) {
+                        circle.setText('');
+                    } else {
+                      circle.setText(`${value}%`);
+                    }
+                }
+            });
+    }
 
-            this.container.before(this.progressContainer);
+    update(progress) {
+        if (this.progressBar) {
+            this.progressBar.animate(progress);
         }
     }
 
@@ -50,6 +55,30 @@ class Progress {
             this.progressContainer = null;
         }
     }
+
+    _show(progressBar) {
+        if (!this.progressContainer) {
+            this.progressContainer =
+                this.container.clone().empty().append(progressBar);
+            this.container.before(this.progressContainer);
+        }
+    }
+
+    _createProgressElement(progressbarClass) {
+        const progressElement = $(
+            `<div class='progress'>
+                 <h4 class='title'>${this.options.title}</h4>
+                 <div class='progressbar ${progressbarClass}'></div>
+             </div>`);
+
+        if (this.options.size) {
+            progressElement.find('.progressbar').css({
+                "width": `${this.options.size}px`,
+                "height": `${this.options.size}px`
+            });
+        }
+        return progressElement;
+    }
 }
 
 module.exports = Progress;

assets/app/js/renderer.js

@@ -245,15 +245,21 @@ $(document).ready(function () {
                         dbStorage: fileName,
                     });
 
-                    const progress =
-                        new Progress("#content", {title: "Creating Database"});
+                    const progressbar =
+                        new Progress("#content", {
+                            title: "Creating Database...",
+                            size: 100,
+                        });
                     aboutCodeDB.db
-                        .then(() => progress.show())
-                        .then(() => aboutCodeDB.addFromJson(jsonFileName, aboutCodeVersion))
-                        .then(() => progress.hide())
+                        .then(() => progressbar.showDeterminate())
+                        .then(() => aboutCodeDB.addFromJson(
+                            jsonFileName,
+                            aboutCodeVersion,
+                            progress => progressbar.update(progress/100)))
+                        .then(() => progressbar.hide())
                         .then(() => loadDataForViews(fileName))
                         .catch((err) => {
-                            progress.hide();
+                            progressbar.hide();
                             if (err instanceof MissingFileInfoError) {
                                 dialog.showErrorBox(
                                     "Missing File Type Information",

assets/thirdparty/js/progressbar.ABOUT

@@ -0,0 +1,11 @@
+about_resource: progressbar.min.js
+download_url: https://github.com/kimmobrunfeldt/progressbar.js/blob/acbe78ba5c341ea9432fb11dfd7464d7ec669c06/dist/progressbar.min.js
+version: acbe78b
+
+name: ProgressBar.js
+description: Responsive and slick progress bars with animated SVG paths
+home_url: https://kimmobrunfeldt.github.io/progressbar.js/
+owner: Kimmo Brunfeldt
+dje_license: mit
+license_text_file: progressbar.LICENSE
+copyright: Copyright (c) 2015 Kimmo Brunfeldt

assets/thirdparty/js/progressbar.LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Kimmo Brunfeldt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.