blob: 5d7a5e47e077a42a35a4937300339641daa33403 [file] [log] [blame]
avm99963f0d15212017-10-08 17:03:22 +02001function xhr(method, url, params, callback) {
2 var http = new XMLHttpRequest();
3 if (method == "POST") {
4 http.open(method, url, true);
5 } else {
6 if (params != "") {
7 http.open(method, url+"?"+params, true);
8 } else {
9 http.open(method, url, true);
10 }
11 }
12 http.onload = function() {
13 if(this.status != 200) {
14 console.warn("Attention, status code "+this.status+" when loading via xhr url "+url);
15 }
16 callback(this.responseText, this.status);
17 };
18 if (method == "POST") {
19 http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
20 http.send(params);
21 } else {
22 http.send();
23 }
24}
25
26var dialog = {
27 fill: function(data, text, html=false) {
28 var el = document.querySelectorAll("*[data-fill=\""+data+"\"]");
29 for (var i in el) {
30 if (html === true) {
31 el[i].innerHTML = text;
32 } else {
33 el[i].innerText = text;
34 }
35 }
36 },
37 show: function(id, neighbors) {
38 var neighbors = Object.values(neighbors);
39
40 this.fill("name", graf.nodes[id].name);
41 this.fill("year", graf.nodes[id].year);
42 this.fill("sex", graf.nodes[id].sex);
43 this.fill("id", "#"+id);
44 this.fill("n-edges", neighbors.length);
45
46 var list = "";
47 neighbors.forEach(function (a) {
48 list += "<li><b>"+graf.nodes[id].name+" - "+a.label+":</b> "+(graf.edges[id+"_"+a.id] ? graf.edges[id+"_"+a.id].votes : graf.edges[a.id+"_"+id].votes)+" vots</li>";
49 });
50 this.fill("edges", list, true);
51
52 if (window.innerWidth > 700) {
53 document.querySelector("#dialog").style.display = "block";
54 document.querySelector("#backdrop-container").style.display = "block";
55 } else {
56 document.querySelector("#summary-dialog").style.display = "block";
57 }
58 },
59 close: function() {
60 document.querySelector("#dialog").style.display = "none";
61 document.querySelector("#summary-dialog").style.display = "none";
62 document.querySelector("#backdrop-container").style.display = "none";
63
64 s.graph.nodes().forEach(function(n) {
65 n.color = n.originalColor;
66 });
67
68 s.graph.edges().forEach(function(e) {
69 e.color = "#fff";
70 });
71
72 s.refresh();
73 },
74 max: function() {
75 document.querySelector("#summary-dialog").style.display = "none";
76 document.querySelector("#dialog").style.display = "block";
77 },
78 min: function() {
79 document.querySelector("#dialog").style.display = "none";
80 document.querySelector("#summary-dialog").style.display = "block";
81 }
82};
83
84function init() {
85 sigma.classes.graph.addMethod("neighbors", function(nodeId) {
86 var k,
87 neighbors = {},
88 index = this.allNeighborsIndex[nodeId] || [];
89
90 for (k in index) {
91 neighbors[k] = this.nodesIndex[k];
92 }
93
94 return neighbors;
95 });
96
97 s = new sigma({
98 renderers: [{
99 container: "graf",
100 type: "webgl"
101 }],
102 settings: {
103 defaultEdgeColor: "#fff",
104 edgeColor: "default",
105 defaultLabelColor: "#fff",
106 autoRescale: false,
107 zoomMax: 10,
108 //enableEdgeHovering: true,
109 font: "Roboto",
110 labelThreshold: 5
111 }
112 });
113
114 xhr("GET", "api.php", "action=getgraf", function(responseText, status) {
115 graf = JSON.parse(responseText);
116
117 console.log(graf);
118
119 for (var i in graf.nodes) {
120 var ncolor = (graf.nodes[i].sex == "F" ? "#d61c08" : (graf.nodes[i].sex == "M" ? "#0159aa" : "#0ca80a"));
121
122 s.graph.addNode({
123 id: graf.nodes[i].id,
124 label: graf.nodes[i].name,
125 x: graf.nodes[i].x,
126 y: graf.nodes[i].y,
127 size: 10,
128 color: ncolor,
129 originalColor: ncolor
130 });
131 }
132
133 for (var i in graf.edges) {
134 s.graph.addEdge({
135 id: i,
136 source: graf.edges[i].a,
137 target: graf.edges[i].b,
138 size: Math.min(4, Math.max((7/(2*Math.pow(20, 2)))*Math.pow(graf.edges[i].votes, 2) + 1/2, 0.5))
139 });
140 }
141
142 s.bind('clickNode', function(e) {
143 var nodeId = e.data.node.id,
144 toKeep = s.graph.neighbors(nodeId);
145 //toKeep[nodeId] = e.data.node;
avm999632d35c5a2018-09-26 17:05:20 +0200146
147 s.graph.nodes().forEach(function(n) {
148 if (toKeep[n.id] || n.id == nodeId) {
149 n.color = n.originalColor;
150 } else {
151 n.color = '#333';
152 }
153 });
154
155 s.graph.edges().forEach(function(e) {
156 if ((e.source == nodeId || e.target == nodeId) && (toKeep[e.source] || toKeep[e.target])) {
157 e.color = '#fff';
158 } else {
159 e.color = '#333';
160 }
161 });
162
163 s.refresh();
164
165 dialog.show(nodeId, toKeep);
avm99963f0d15212017-10-08 17:03:22 +0200166 });
167
168 document.querySelector("#quit-dialog").addEventListener("click", dialog.close);
169 document.querySelector("#quit2-dialog").addEventListener("click", dialog.close);
170 document.querySelector("#max-dialog").addEventListener("click", dialog.max);
171 document.querySelector("#min-dialog").addEventListener("click", dialog.min);
172
173 document.querySelector("#zoomin").addEventListener("click", function() {
174 s.camera.goTo({
175 ratio: Math.max(s.camera.settings("zoomMin"), s.camera.ratio / Math.sqrt(2))
176 });
177 });
178
179 document.querySelector("#zoomout").addEventListener("click", function() {
180 s.camera.goTo({
181 ratio: Math.min(s.camera.settings("zoomMax"), s.camera.ratio * Math.sqrt(2))
182 });
183 });
184
185 s.refresh();
Huguet57f02e8c02018-07-23 16:48:47 +0200186 autocomplete(document.getElementById("searchInput"), graf.nodes, "search");
avm99963f0d15212017-10-08 17:03:22 +0200187 });
188}
189
Huguet57004b1552018-07-23 03:29:12 +0200190function cameraGoto(nodeX, nodeY) {
191 sigma.misc.animation.camera( s.camera,
192 { x: nodeX, y: nodeY, ratio: 1 },
193 { duration: s.settings('animationsTime') || 300 }
194 );
195}
196
avm99963f0d15212017-10-08 17:03:22 +0200197window.addEventListener("load", init);