Merge branch 'master' of https://github.com/jrtechs/github-graphs

public/OrgRepoGraph.html

@@ -17,6 +17,12 @@
     <script src="js/createOrgRepoGraph.js"></script>
     <script src="js/utilities.js"></script>
     <script src="js/profileGen.js"></script>
+    <script src="js/createOrgTable.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css"/>
+    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
+
+
 
     <script type="text/javascript" src="js/vis/vis.js"></script>
     <link href="js/vis/vis-network.min.css" rel="stylesheet" type="text/css" />
@@ -57,11 +63,28 @@
             <div class="col-md-2 col-12">
                 <div id="profileGen"></div>
             </div>
-            <div class="col-md-8 col-12">
-                <h2 id="graphLabel"></h2>
+            <div class="col-md-6 col-12">
+                <div id="graphLoading"></div>
                 <div id="myGraph" class="w-100"></div>
                 <pre id="eventSpan"></pre>
             </div>
+            <div class="col-md-4 col-12 bg-light">
+                <div class="w-100"></div>
+                <center><h1>Repositories</h1></center>
+                <table class="table table-striped" id="dataTable">
+                    <thead class="thead-dark">
+                    <tr>
+                        <td>Name</td>
+                        <td>Forks</td>
+                        <td>Language</td>
+                    </tr>
+                    </thead>
+                    <tbody id="repositoryTable">
+
+                    </tbody>
+                </table>
+
+            </div>
         </div>
 
         <script>
@@ -71,7 +94,7 @@
                 options.height = "700px";
 
                 createOrgRepoGraph(orgname, "myGraph", "graphLoading");
-                //orgRepoGen(orgname, "orgRepoGen");
+                createOrgTable(orgname, 'repositoryTable');
             }
         
             if(findGetParameter("name") !== null) {

public/js/createOrgRepoGraph.js

@@ -43,78 +43,6 @@ function alreadyInGraph(userID)
 }
 
 
-/**
- * adds a person to the nodes list
- *
- * @param profileData
- */
-function addSelfAsOrg(orgData) {
-    nodes.push( {
-        id:0,
-        name:orgData.login,
-        image:orgData.avatar_url,
-        background: '#eeeeee',
-        size:100,
-        label: orgData.name,
-    });
-    console.log(orgData.name);
-}
-
-function addSelfAsRepo(repoData) {
-    nodes.push( {
-        id:repoData.id,
-        name:repoData.name,
-        label: repoData.name,
-    });
-
-    edges.push(
-        {
-            to: 0,
-            from: repoData.id
-        });
-}
-
-
-/**
- * Adds the followers/following of a person
- * to the graph
- *
- * @param username
- * @param apiPath
- * @returns {Promise<any>}
- */
-function addRepos(orgName, apiPath, page)
-{
-    console.log(orgName + " page=" + page);
-    updateProgress();
-    return new Promise(function(resolve, reject) {
-        queryAPIByOrg(apiPath + "?page=" + page, orgName, function(data) {
-            console.log(data);
-            console.log(data.length);
-            var prom = [];
-            for(var i = 0; i < data.length; i++) {
-                if(!alreadyInGraph(data[i].id)) {
-                    prom.push(addRepoToGraph(data[i]));
-                }
-            }
-            Promise.all(prom).then( () => {
-                if(data.length === 30) {
-                    addRepos(orgName, apiPath, page+ 1).then(function() {
-                        resolve();
-                    })
-                }
-                else {
-                    resolve();
-                }
-            })
-        },
-        function(error) {
-            reject(error);
-        })
-    });
-}
-
-
 /**
  * Greedy function which checks to see if a edge is in the graphs
  *
@@ -204,11 +132,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();
             })
         })
@@ -244,53 +172,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();
-}
-
-/**
- * Adds the base  person to the graph.
- *
- * @param username
- * @returns {Promise<any>}
- */
-function addOrgToGraph(orgname) {
-    return new Promise(function(resolve, reject) {
-        queryAPIByOrg("", orgname, function(data) {
-            total = (data.public_repos) * 2;
-            addSelfAsOrg(data);
-            resolve();
-        },
-        function(error) {
-           reject(error);
-        });
-
-    });
-}
-
-function addRepoToGraph(repo) {
-    return new Promise(function(resolve, reject) {
-        console.log(repo);
-        addSelfAsRepo(repo);
-        resolve();
-    });
-}
-
-
 function bringUpProfileView(id)
 {
     for(var i = 0; i < nodes.length; i++)
@@ -343,6 +224,7 @@ function addOrgUsers(orgname, page)
             }
             else
             {
+                total = 2*(data.length + (page * 30));
                 resolve();
             }
 
@@ -365,6 +247,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
@@ -377,31 +276,26 @@ function createOrgRepoGraph(orgname, containerName, graphsTitle)
 
     nodes = [];
     edges = [];
-    addOrgToGraph(orgname).then(function() {
-        addRepos(orgname, API_REPOS,1).then(function()
-        {
-            addOrgUsers(orgname, 1).then(function()
-            {
-                $("#" + progressID).html("");
-
-                createConnections().then( () => {
-                    var container = document.getElementById(containerName);
-                    var data = {
-                        nodes: nodes,
-                        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)));
-                        }
-                    });
-                });
+
+    addOrgUsers(orgname, 1).then(function()
+    {
+
+        createConnections().then( () => {
+            var container = document.getElementById(containerName);
+            var data = {
+                nodes: nodes,
+                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/createOrgTable.js

@@ -0,0 +1,60 @@
+function generateHtmlRow(repoData)
+{
+    var html = "<tr class=\"table_row\">";
+    html+="<td><a href='" + repoData.url + "'>" + repoData.name +  "</a></td>";
+    html+="<td>" + repoData.forks +  "</td>";
+    html+="<td>" + repoData.language +  "</td>";
+    html +="</tr>";
+    return html;
+}
+
+
+var repos = [];
+
+function fetchAllRepositories(orgName, page)
+{
+    return new Promise(function(resolve, reject)
+    {
+        queryAPIByOrg(API_REPOSITORIES + "?page=" + page, orgName,
+            function(data)
+            {
+                repos.push(...data);
+
+                if (data.length === 30)
+                {
+                    fetchAllRepositories(orgName, page + 1).then(function ()
+                    {
+                        resolve();
+                    })
+                }
+                else {
+                    resolve();
+                }
+            },
+            function(error)
+            {
+                //console.log("Unable to load table data");
+            });
+    });
+}
+
+
+function createOrgTable(orgName, tableContainer)
+{
+    var html = "";
+
+
+    fetchAllRepositories(orgName, 1).then(function()
+    {
+        for(var i=0; i < repos.length; i++)
+        {
+            html += generateHtmlRow(repos[i]);
+        }
+
+        $("#" + tableContainer).html(html);
+        $('#dataTable').DataTable();
+    }).catch(function(error)
+    {
+        //console.log("Unable to create table");
+    });
+}

public/js/friendsGraph.js

@@ -66,14 +66,11 @@ function addPersonToGraph(profileData)
  */
 function addFriends(username, apiPath, page)
 {
-    console.log(username + " page=" + page);
     updateProgress();
     return new Promise(function(resolve, reject)
     {
         queryAPIByUser(apiPath + "?page=" + page, username, function(data)
         {
-            console.log(data);
-            console.log(data.length);
             for(var i = 0; i < data.length; i++)
             {
                 if(!alreadyInGraph(data[i].id))
@@ -111,7 +108,6 @@ function addFriends(username, apiPath, page)
  */
 function edgeInGraph(id1, id2)
 {
-    console.log("edge check");
     for(var i = 0;i < edges.length; i++)
     {
         if(edges[i].from === id1 && edges[i].to === id2)
@@ -151,7 +147,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 +191,7 @@ function processUserConnections(user)
         {
             processConnections(user, API_FOLLOWERS, 1).then(function()
             {
+                updateProgress();
                 resolve();
             })
         })
@@ -261,7 +257,7 @@ function addSelfToGraph(username)
     {
         queryAPIByUser("", username, function(data)
         {
-            total = (data.followers + data.following) * 2;
+            total = (data.followers + data.following);
             addPersonToGraph(data);
             resolve();
         },
@@ -305,7 +301,6 @@ function createFriendsGraph(username, containerName, graphsTitle)
             {
                 createConnections().then(function()
                 {
-                    console.log("cleared div");
                     $("#" + progressID).html("");
 
                     var container = document.getElementById(containerName);