blob: 16f86453fcc63db3f12fd495d58fd8c2ae5632aa [file] [log] [blame]
Javier López-Contreras6d1d72d2018-12-27 23:17:18 +01001// *********** HERE STARTS graf.js *************
2
Javier López-Contreras052503f2018-12-26 12:34:42 +01003// s is the sigma graph
4// graf is the JSON graph
5var s, graf;
6
7// query dario JSON for the graph information
8function xhr(method, url, params, callback) {
avm99963027b5b02018-12-28 02:31:46 +01009 var http = new XMLHttpRequest();
10 if (method == "POST") {
11 http.open(method, url, true);
12 } else {
13 if (params != "") {
14 http.open(method, url+"?"+params, true);
15 } else {
16 http.open(method, url, true);
17 }
18 }
19 http.onload = function() {
20 if(this.status != 200) {
21 console.warn("Attention, status code "+this.status+" when loading via xhr url "+url);
22 }
23 callback(this.responseText, this.status);
24 };
25 if (method == "POST") {
26 http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
27 http.send(params);
28 } else {
29 http.send();
30 }
Javier López-Contreras052503f2018-12-26 12:34:42 +010031}
32
33
34function initGraf() {
avm99963027b5b02018-12-28 02:31:46 +010035 // create new methods for sigma library
36 updateSigma();
Javier López-Contreras052503f2018-12-26 12:34:42 +010037
avm99963027b5b02018-12-28 02:31:46 +010038 // create graf, s is the sigma graf
39 s = new sigma({
40 renderers: [{
41 container: "graf",
42 type: "webgl"
43 }],
44 settings: {
45 defaultEdgeColor: "#fff",
46 edgeColor: "default",
47 defaultLabelColor: "#fff",
48 autoRescale: false,
49 zoomMax: 30,
50 // enableEdgeHovering: true,
51 font: "Roboto",
52 labelThreshold: 5
53 }
54 });
Javier López-Contreras052503f2018-12-26 12:34:42 +010055
56
avm99963027b5b02018-12-28 02:31:46 +010057 // query for JSON for graph data
58 xhr("GET", "api.php", "action=getgraf", function(responseText, status) {
59 // graf is the JSON data
60 graf = JSON.parse(responseText);
Javier López-Contreras052503f2018-12-26 12:34:42 +010061
avm99963027b5b02018-12-28 02:31:46 +010062 // does graf.nodes have a size attribute?
63 var rectBorrar = [[0,0], [0,0], [0,0], [0,0]];
64 for (var i in graf.nodes) {
65 if (graf.nodes[i].name == "Erase") rectBorrar[0] = [ graf.nodes[i].x , graf.nodes[i].y ];
66 if (graf.nodes[i].name == "Borrar") rectBorrar[1] = [ graf.nodes[i].x , graf.nodes[i].y ];
67 if (graf.nodes[i].name == "Esborrar") rectBorrar[2] = [ graf.nodes[i].x , graf.nodes[i].y ];
68 if (graf.nodes[i].name == "Delete") rectBorrar[3] = [ graf.nodes[i].x , graf.nodes[i].y ];
69 }
70
71 var sizegraf = 0;
72 for (var i in graf.nodes) {
73 if ( isInRect(graf.nodes[i].x, graf.nodes[i].y, rectBorrar) ) continue;
74 sizegraf++;
75 }
76 var nnode = 0;
77 for (var i in graf.nodes) {
78 var ncolor = null;
79
80 if(graf.nodes[i].sex =="F") ncolor = "#d61c08";
81 else if(graf.nodes[i].sex == "M") ncolor = "#0159aa";
82 else ncolor = "#0ca80a";
83
84 // post-processing for year corrections
85 if(1970 < graf.nodes[i].year && graf.nodes[i].year < 2004) graf.nodes[i].year += 18;
86
87 var newX = 5000*Math.cos( 2*Math.PI*nnode/sizegraf );
88 var newY = 5000*Math.sin( 2*Math.PI*nnode/sizegraf );
89
90 if (isInRect(graf.nodes[i].x, graf.nodes[i].y, rectBorrar) ) continue;
91
92 s.graph.addNode({
93 // we add color, originalColor, size, originalX..Y, circleX..Y atributes
94 id: graf.nodes[i].id,
95 year: graf.nodes[i].year,
96 sex: graf.nodes[i].sex,
97 label: graf.nodes[i].name,
98 x: graf.nodes[i].x,
99 y: graf.nodes[i].y,
100 circleX: newX,
101 circleY: newY,
102 originalX: graf.nodes[i].x,
103 originalY: graf.nodes[i].y,
104 size: 10,
105 color: ncolor,
106 originalColor: ncolor
107 });
108 nnode++;
109
110 }
111
112 for (var i in graf.edges) {
113 if (isInRect(graf.nodes[graf.edges[i].a].x, graf.nodes[graf.edges[i].a].y, rectBorrar)) continue;
114 if (isInRect(graf.nodes[graf.edges[i].b].x, graf.nodes[graf.edges[i].b].y, rectBorrar)) continue;
115
116 s.graph.addEdge({
117 id: i,
118 source: graf.edges[i].a,
119 target: graf.edges[i].b,
120 size: Math.min(4, Math.max((7/(2*Math.pow(20, 2)))*Math.pow(graf.edges[i].votes, 2) + 1/2, 0.5))
121 });
122
123 }
124
125 s.bind('clickNode', function(e) {
126 var nodeId = e.data.node.id,
127 toKeep = s.graph.neighbors(nodeId);
128 // toKeep[nodeId] = e.data.node;
129
130
131 s.graph.nodes().forEach(function(n) {
132 if (toKeep[n.id] || n.id == nodeId) {
133 n.color = n.originalColor;
134 } else {
135 n.color = '#333';
136 }
137 });
138
139 s.graph.edges().forEach(function(e) {
140 if ((e.source == nodeId || e.target == nodeId) && (toKeep[e.source] || toKeep[e.target])) {
141 e.color = '#fff';
142 } else {
143 e.color = '#333';
144 }
145 });
146
147 if (circleMode) {
148 s.graph.nodes().forEach(function (n) {
149 n.x = n.circleX;
150 n.y = n.circleY;
151 n.size = 10;
152 });
153
154 e.data.node.x = 0;
155 e.data.node.y = 0;
156 e.data.node.size = 30;
157 }
158
159 s.refresh();
160
161 dialog.show(nodeId, toKeep);
162 });
163
164 initDialog();
165 initCamera();
166 initSearchBar();
167
168 s.refresh();
169 autocomplete(document.querySelector("#search-input"), graf.nodes, "search");
170 });
Javier López-Contreras052503f2018-12-26 12:34:42 +0100171}
172
173function updateSigma() {
avm99963027b5b02018-12-28 02:31:46 +0100174 // returns set of neighouts
175 sigma.classes.graph.addMethod("neighbors", function(nodeId) {
176 var k,
177 neighbors = {},
178 index = this.allNeighborsIndex[nodeId] || [];
Javier López-Contreras052503f2018-12-26 12:34:42 +0100179
avm99963027b5b02018-12-28 02:31:46 +0100180 for (k in index) {
181 neighbors[k] = this.nodesIndex[k];
182 }
Javier López-Contreras052503f2018-12-26 12:34:42 +0100183
avm99963027b5b02018-12-28 02:31:46 +0100184 return neighbors;
185 });
Javier López-Contreras052503f2018-12-26 12:34:42 +0100186
avm99963027b5b02018-12-28 02:31:46 +0100187 // returns number of neighbours from a set of years
188 sigma.classes.graph.addMethod("numNeighborsFromYears", function(nodeId, showYearsCopy) {
189 var k,
190 neighbors = 0,
191 index = this.allNeighborsIndex[nodeId] || [];
192
193 for (k in index) {
194 if(this.nodesIndex){
195 if (showYearsCopy.has("" + this.nodesIndex[k].year)) neighbors++;
196 else if (this.nodesIndex[k].year == 0) neighbors++;
197 }
198 }
199
200 return neighbors;
201 });
202}