Browse Source

pls fix

pull/11/head
Bryce Murphy 5 years ago
parent
commit
2d1a8c1737
3 changed files with 421 additions and 0 deletions
  1. +84
    -0
      public/OrgRepoGraph.html
  2. +336
    -0
      public/js/createOrgRepoGraph.js
  3. +1
    -0
      public/js/githubAPI.js

+ 84
- 0
public/OrgRepoGraph.html View File

@ -0,0 +1,84 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css" />
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script src="js/githubAPI.js"></script>
<script src="js/createOrgRepoGraph.js"></script>
<script src="js/utilities.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" />
</head>
<body>
<div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
<div id="header-title">
<a href="./index.html">
<img id="logo" src="./logo.svg" />
</a>
</div>
<div id="navigation">
<ul class="nav">
<li class="nav-item">
<a href="./GraphGenerator.html">
Generate graphs
</a>
</li>
<div class="nav-sep"></div>
<li class="nav-item">
<a href="https://github.com/jrtechs/github-graphs">
View on GitHub
</a>
</li>
<div class="nav-sep"></div>
<li class="nav-item">
<a href="./about.html">
About
</a>
</li>
</ul>
</div>
</div>
<div class="main container">
<div class="row">
<div class="col-md-8 col-12">
<h2 id="graphLabel"></h2>
<div id="myGraph" class="w-100"></div>
<pre id="eventSpan"></pre>
</div>
<div class="col-md-4 col-12 w-100">
<div id="profileGen"></div>
</div>
</div>
<script>
function createGraphs(orgname) {
options.width = $("#myGraph").width() + "px";
options.height = "700px";
createOrgRepoGraph(orgname, "myGraph", "graphLoading");
//orgRepoGen(orgname, "orgRepoGen");
}
if(findGetParameter("name") !== null) {
createGraphs(findGetParameter("name"))
}
</script>
</div>
</body>
</html>

+ 336
- 0
public/js/createOrgRepoGraph.js View File

@ -0,0 +1,336 @@
var nodes;
var edges;
var options = {
nodes: {
borderWidth:4,
size:30,
color: {
border: '#222222',
background: '#666666'
},
font:{color:'#eeeeee'}
},
edges: {
color: 'lightgray'
}
};
/**
* Checks if a user is a node in the graph
*
* @param userID
* @returns {boolean}
*/
function alreadyInGraph(userID)
{
for(var i = 0; i < nodes.length; i++)
{
if(nodes[i].id === userID)
{
return true;
}
}
return false;
}
/**
* adds a person to the nodes list
*
* @param profileData
*/
function addSelfAsOrg(orgData) {
nodes.push( {
id:orgData.id,
name:orgData.login,
image:orgData.avatar_url
});
}
function addSelfAsRepo(repoData) {
nodes.push( {
id:repoData.id,
name:repoData.name,
image:repoData.avatar_url
});
console.log(repoData.name);
}
/**
* 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
*
* @param id1
* @param id2
* @returns {boolean}
*/
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)
{
return true;
}
if(edges[i].to === id1 && edges[i].from === id2)
{
return true;
}
}
return false;
}
/**
* Adds a connection to the graph
*
* @param person1
* @param person2
*/
function addConnection(person1, person2)
{
if(person1.id !== person2.id)
{
if(alreadyInGraph(person2.id) && !edgeInGraph(person1.id, person2.id))
{
edges.push(
{
from: person1.id,
to: person2.id
});
}
}
}
function processConnections(user, apiPoint, page)
{
updateProgress();
return new Promise(function(resolve, reject)
{
queryAPIByUser(apiPoint + "?page=" + page, user.name,
function(data)
{
for(var i = 0; i < data.length; i++)
{
addConnection(user, data[i])
}
if(data.length === 30)
{
processConnections(user, apiPoint, page + 1).then(function()
{
resolve();
});
}
else
{
resolve();
}
}, function(error)
{
console.log(error);
resolve();
})
})
}
/**
* Processes all the connections of a user and adds them to the graph
*
* @param user has .id and .name
* @returns {Promise<any>}
*/
function processUserConnections(user)
{
return new Promise(function(resolve, reject)
{
processConnections(user, API_FOLLOWING, 1).then(function()
{
processConnections(user, API_FOLLOWERS, 1).then(function()
{
resolve();
})
})
});
}
/**
* Creates connections between all the nodes in
* the graph.
*
* @returns {Promise<any>}
*/
function createConnections()
{
return new Promise(function(resolve, reject)
{
var prom = [];
for(var i = 0; i < nodes.length; i++)
{
prom.push(processUserConnections(nodes[i]));
}
Promise.all(prom).then(function()
{
resolve();
}).catch(function(error)
{
console.log(error);
resolve();
});
});
}
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("in repo");
console.log(repo);
addSelfAsRepo(repo);
resolve();
/*
queryAPIByRepo(repo.name, orgname, function(data) {
//total = (data.followers + data.following) * 2;
addSelfAsRepo(data);
resolve();
console.log("did it");
},
function(error) {
reject(error);
});*/
});
}
function bringUpProfileView(id)
{
for(var i = 0; i < nodes.length; i++)
{
if(nodes[i].id === id) {
profileGen(nodes[i].name, "profileGen");
}
}
}
/**
* Creates a graph
* @param username
* @param containerName
* @param graphsTitle
*/
function createOrgRepoGraph(orgname, containerName, graphsTitle)
{
progressID = graphsTitle;
nodes = [];
edges = [];
addOrgToGraph(orgname).then(function() {
addRepos(orgname, API_REPOS,1).then(function() {
$("#" + progressID).html("");
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)));
}
});
})
}).catch(function(error) {
alert("Invalid Organization");
});
}

+ 1
- 0
public/js/githubAPI.js View File

@ -59,6 +59,7 @@ function queryAPIByOrg(apiPath, org, successCallBack, errorCallBack) {
error:errorCallBack,
timeout: 4000
});
console.log("past");
}
/*
function queryAPIByRepo(apiPath, org, successCallBack, errorCallBack) {

Loading…
Cancel
Save