Website for visualizing a persons github network.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

298 lines
6.1 KiB

5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
  1. var nodes;
  2. var edges;
  3. var options = {
  4. nodes: {
  5. shape: 'dot',
  6. size: 40,
  7. borderWidth:4,
  8. color: {
  9. border: '#222222',
  10. background: '#666666'
  11. },
  12. font:{
  13. color:'#eeeeee',
  14. size: 12
  15. },
  16. },
  17. edges: {
  18. color: 'lightgray'
  19. }
  20. };
  21. /**
  22. * Checks if a user is a node in the graph
  23. *
  24. * @param userID
  25. * @returns {boolean}
  26. */
  27. function alreadyInGraph(userID)
  28. {
  29. for(var i = 0; i < nodes.length; i++)
  30. {
  31. if(nodes[i].id === userID)
  32. {
  33. return true;
  34. }
  35. }
  36. return false;
  37. }
  38. /**
  39. * Greedy function which checks to see if a edge is in the graphs
  40. *
  41. * @param id1
  42. * @param id2
  43. * @returns {boolean}
  44. */
  45. function edgeInGraph(id1, id2)
  46. {
  47. for(var i = 0;i < edges.length; i++)
  48. {
  49. if(edges[i].from === id1 && edges[i].to === id2)
  50. {
  51. return true;
  52. }
  53. if(edges[i].to === id1 && edges[i].from === id2)
  54. {
  55. return true;
  56. }
  57. }
  58. return false;
  59. }
  60. /**
  61. * Adds a connection to the graph
  62. *
  63. * @param person1
  64. * @param person2
  65. */
  66. function addConnection(person1, person2)
  67. {
  68. if(person1.id !== person2.id)
  69. {
  70. if(alreadyInGraph(person2.id) && !edgeInGraph(person1.id, person2.id))
  71. {
  72. edges.push(
  73. {
  74. from: person1.id,
  75. to: person2.id
  76. });
  77. }
  78. }
  79. }
  80. function processConnections(user, apiPoint, page)
  81. {
  82. updateProgress();
  83. return new Promise(function(resolve, reject)
  84. {
  85. queryAPIByUser(apiPoint + "?page=" + page, user.name,
  86. function(data)
  87. {
  88. for(var i = 0; i < data.length; i++)
  89. {
  90. addConnection(user, data[i])
  91. }
  92. if(data.length === 30)
  93. {
  94. processConnections(user, apiPoint, page + 1).then(function()
  95. {
  96. resolve();
  97. });
  98. }
  99. else
  100. {
  101. resolve();
  102. }
  103. }, function(error)
  104. {
  105. console.log(error);
  106. resolve();
  107. })
  108. })
  109. }
  110. /**
  111. * Processes all the connections of a user and adds them to the graph
  112. *
  113. * @param user has .id and .name
  114. * @returns {Promise<any>}
  115. */
  116. function processUserConnections(user)
  117. {
  118. return new Promise(function(resolve, reject)
  119. {
  120. processConnections(user, API_FOLLOWING, 1).then(function()
  121. {
  122. processConnections(user, API_FOLLOWERS, 1).then(function()
  123. {
  124. updateProgress();
  125. resolve();
  126. })
  127. })
  128. });
  129. }
  130. /**
  131. * Creates connections between all the nodes in
  132. * the graph.
  133. *
  134. * @returns {Promise<any>}
  135. */
  136. function createConnections()
  137. {
  138. return new Promise(function(resolve, reject)
  139. {
  140. var prom = [];
  141. for(var i = 0; i < nodes.length; i++)
  142. {
  143. prom.push(processUserConnections(nodes[i]));
  144. }
  145. Promise.all(prom).then(function()
  146. {
  147. resolve();
  148. }).catch(function(error)
  149. {
  150. console.log(error);
  151. resolve();
  152. });
  153. });
  154. }
  155. function bringUpProfileView(id)
  156. {
  157. for(var i = 0; i < nodes.length; i++)
  158. {
  159. if(nodes[i].id === id) {
  160. profileGen(nodes[i].name, "profileGen");
  161. }
  162. }
  163. }
  164. function addOrgUserToGraph(profileData)
  165. {
  166. nodes.push(
  167. {
  168. id:profileData.id,
  169. name:profileData.login,
  170. shape: 'circularImage',
  171. image:profileData.avatar_url
  172. });
  173. }
  174. function connectOrgUsers()
  175. {
  176. return new Promise(function(resolve, reject)
  177. {
  178. resolve();
  179. })
  180. }
  181. function addOrgUsers(orgname, page)
  182. {
  183. return new Promise(function(resolve, reject)
  184. {
  185. queryAPIByOrg(API_ORG_MEMBERS + "?page=" + page, orgname, function(data)
  186. {
  187. for(var i = 0;i < data.length; i++)
  188. {
  189. addOrgUserToGraph(data[i]);
  190. }
  191. if(data.length === 30)
  192. {
  193. addOrgUsers(orgname, page + 1).then(function()
  194. {
  195. resolve();
  196. });
  197. }
  198. else
  199. {
  200. total = 2*(data.length + (page * 30));
  201. resolve();
  202. }
  203. }, function(error)
  204. {
  205. console.log(error);
  206. resolve();
  207. })
  208. })
  209. }
  210. function bringUpProfileView(id)
  211. {
  212. for(var i = 0; i < nodes.length; i++)
  213. {
  214. if(nodes[i].id === id)
  215. {
  216. profileGen(nodes[i].name, "profileGen");
  217. }
  218. }
  219. }
  220. var total = 1;
  221. var indexed = 0;
  222. function updateProgress()
  223. {
  224. indexed++;
  225. var percent = parseInt((indexed/total)*100);
  226. $("#graphLoading").html("<div class=\"progress\">\n" +
  227. " <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" +
  228. "</div>");
  229. }
  230. /**
  231. * Creates a graph
  232. * @param username
  233. * @param containerName
  234. * @param graphsTitle
  235. */
  236. function createOrgRepoGraph(orgname, containerName, graphsTitle)
  237. {
  238. progressID = graphsTitle;
  239. nodes = [];
  240. edges = [];
  241. addOrgUsers(orgname, 1).then(function()
  242. {
  243. createConnections().then( () => {
  244. var container = document.getElementById(containerName);
  245. var data = {
  246. nodes: nodes,
  247. edges: edges
  248. };
  249. var network = new vis.Network(container, data, options);
  250. network.on("click", function (params) {
  251. params.event = "[original event]";
  252. if(Number(this.getNodeAt(params.pointer.DOM)) !== NaN) {
  253. bringUpProfileView(Number(this.getNodeAt(params.pointer.DOM)));
  254. }
  255. });
  256. $("#graphLoading").html("");
  257. });
  258. }).catch(function(error) {
  259. alert("Invalid Organization");
  260. });
  261. }