Improved loading bar of the graphs.

Author: jrtechs

public/OrgRepoGraph.html

@@ -64,7 +64,7 @@
                 <div id="profileGen"></div>
             </div>
             <div class="col-md-6 col-12">
-                <h2 id="graphLabel"></h2>
+                <div id="graphLoading"></div>
                 <div id="myGraph" class="w-100"></div>
                 <pre id="eventSpan"></pre>
             </div>

public/js/createOrgRepoGraph.js

@@ -173,11 +173,11 @@ function processUserConnections(user)
 {
     return new Promise(function(resolve, reject)
     {
-
         processConnections(user, API_FOLLOWING, 1).then(function()
         {
             processConnections(user, API_FOLLOWERS, 1).then(function()
             {
+                updateProgress();
                 resolve();
             })
         })
@@ -213,26 +213,6 @@ function createConnections()
 }
 
 
-var total = 1;
-var indexed = 0;
-var progressID;
-
-
-function updateProgress()
-{
-    indexed++;
-
-    var percent = parseInt((indexed/total)*100);
-
-    $("#" + progressID).html("<div class=\"progress\">\n" +
-        "  <div class=\"progress-bar progress-bar-striped progress-bar-animated\" role=\"progressbar\" style=\"width: " + percent + "%\" aria-valuenow=\"" + percent + "\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n" +
-        "</div>");
-
-    console.log();
-}
-
-
-
 function bringUpProfileView(id)
 {
     for(var i = 0; i < nodes.length; i++)
@@ -285,6 +265,7 @@ function addOrgUsers(orgname, page)
             }
             else
             {
+                total = 2*(data.length + (page * 30));
                 resolve();
             }
 
@@ -307,6 +288,23 @@ function bringUpProfileView(id)
     }
 }
 
+
+var total = 1;
+var indexed = 0;
+
+function updateProgress()
+{
+    indexed++;
+
+    var percent = parseInt((indexed/total)*100);
+
+    $("#graphLoading").html("<div class=\"progress\">\n" +
+        "  <div class=\"progress-bar progress-bar-striped progress-bar-animated\" role=\"progressbar\" style=\"width: " + percent + "%\" aria-valuenow=\"" + percent + "\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n" +
+        "</div>");
+
+    console.log();
+}
+
 /**
  * Creates a graph
  * @param username
@@ -322,7 +320,6 @@ function createOrgRepoGraph(orgname, containerName, graphsTitle)
 
     addOrgUsers(orgname, 1).then(function()
     {
-        $("#" + progressID).html("");
 
         createConnections().then( () => {
             var container = document.getElementById(containerName);
@@ -331,13 +328,14 @@ function createOrgRepoGraph(orgname, containerName, graphsTitle)
                 edges: edges
             };
             var network = new vis.Network(container, data, options);
-
             network.on("click", function (params) {
                 params.event = "[original event]";
                 if(Number(this.getNodeAt(params.pointer.DOM)) !== NaN) {
                     bringUpProfileView(Number(this.getNodeAt(params.pointer.DOM)));
                 }
             });
+
+            $("#graphLoading").html("");
         });
     }).catch(function(error) {
         alert("Invalid Organization");

public/js/friendsGraph.js

@@ -151,7 +151,6 @@ function addConnection(person1, person2)
 
 function processConnections(user, apiPoint, page)
 {
-    updateProgress();
     return new Promise(function(resolve, reject)
     {
         queryAPIByUser(apiPoint + "?page=" + page, user.name,
@@ -196,6 +195,7 @@ function processUserConnections(user)
         {
             processConnections(user, API_FOLLOWERS, 1).then(function()
             {
+                updateProgress();
                 resolve();
             })
         })
@@ -261,7 +261,7 @@ function addSelfToGraph(username)
     {
         queryAPIByUser("", username, function(data)
         {
-            total = (data.followers + data.following) * 2;
+            total = (data.followers + data.following);
             addPersonToGraph(data);
             resolve();
         },