javierlc2000 | 920ec50 | 2018-12-24 19:20:07 +0100 | [diff] [blame] | 1 | var s, graf; |
| 2 | |
| 3 | var showYears = new Set(); |
| 4 | var limitYears = false; |
| 5 | |
| 6 | function xhr(method, url, params, callback) { |
| 7 | var http = new XMLHttpRequest(); |
| 8 | if (method == "POST") { |
| 9 | http.open(method, url, true); |
| 10 | } else { |
| 11 | if (params != "") { |
| 12 | http.open(method, url+"?"+params, true); |
| 13 | } else { |
| 14 | http.open(method, url, true); |
| 15 | } |
| 16 | } |
| 17 | http.onload = function() { |
| 18 | if(this.status != 200) { |
| 19 | console.warn("Attention, status code "+this.status+" when loading via xhr url "+url); |
| 20 | } |
| 21 | callback(this.responseText, this.status); |
| 22 | }; |
| 23 | if (method == "POST") { |
| 24 | http.setRequestHeader("Content-type","application/x-www-form-urlencoded"); |
| 25 | http.send(params); |
| 26 | } else { |
| 27 | http.send(); |
| 28 | } |
| 29 | } |
| 30 | |
| 31 | function altSearchBar() { |
| 32 | if (document.querySelector(".md-google-search__metacontainer").style.display == "none") { |
| 33 | document.querySelector(".md-google-search__metacontainer").style.display = "block"; |
| 34 | document.querySelector("#search i").innerText = "fullscreen"; |
| 35 | } else { |
| 36 | document.querySelector(".md-google-search__metacontainer").style.display = "none"; |
| 37 | document.querySelector(".autocomplete-container").style.display = "none"; |
| 38 | document.querySelector("#search i").innerText = "search"; |
| 39 | } |
| 40 | } |
| 41 | |
| 42 | var seq = [38, 38, 40, 40, 37, 39, 37, 39, 65, 66, 13]; |
| 43 | var cur = 0; |
| 44 | |
| 45 | |
| 46 | function repaint() { |
| 47 | if(limitYears) { |
| 48 | s.graph.nodes().forEach(function(n) { |
| 49 | if (!showYears.has("" + n.year)) { |
| 50 | n.hidden = true; |
| 51 | } |
| 52 | else { |
| 53 | n.hidden = false; |
| 54 | } |
| 55 | }); |
| 56 | |
| 57 | s.graph.edges().forEach(function(e) { |
| 58 | if(!showYears.has(""+e.sourceyear) || !showYears.has(""+e.targetyear)){ |
| 59 | e.hidden = true; |
| 60 | } |
| 61 | else e.hidden = false; |
| 62 | }); |
| 63 | } |
| 64 | else { |
| 65 | s.graph.nodes().forEach(function(n) { |
| 66 | n.hidden = false; |
| 67 | }); |
| 68 | |
| 69 | s.graph.edges().forEach(function(e) { |
| 70 | e.hidden = false; |
| 71 | }); |
| 72 | } |
| 73 | } |
| 74 | |
| 75 | function justdoit() { |
| 76 | s.graph.nodes().forEach(function(n) { |
| 77 | switch(n.color) { |
| 78 | case "#d61c08": |
| 79 | n.color = "#0159aa"; |
| 80 | break; |
| 81 | |
| 82 | case "#0159aa": |
| 83 | n.color = "#0ca80a"; |
| 84 | break; |
| 85 | |
| 86 | case "#0ca80a": |
| 87 | n.color = "#d61c08"; |
| 88 | break; |
| 89 | } |
| 90 | }); |
| 91 | |
| 92 | s.refresh(); |
| 93 | setTimeout(justdoit, 333); |
| 94 | } |
| 95 | |
| 96 | var dialog = { |
| 97 | fill: function(data, text, html=false) { |
| 98 | var el = document.querySelectorAll("*[data-fill=\""+data+"\"]"); |
| 99 | for (var i in el) { |
| 100 | if (html === true) { |
| 101 | el[i].innerHTML = text; |
| 102 | } else { |
| 103 | el[i].innerText = text; |
| 104 | } |
| 105 | } |
| 106 | }, |
| 107 | show: function(id, neighbors) { |
| 108 | var neighbors = Object.values(neighbors); |
| 109 | |
| 110 | this.fill("name", graf.nodes[id].name); |
| 111 | this.fill("year", graf.nodes[id].year); |
| 112 | this.fill("sex", graf.nodes[id].sex); |
| 113 | this.fill("id", "#"+id); |
| 114 | this.fill("n-edges", neighbors.length); |
| 115 | |
| 116 | var list = ""; |
| 117 | neighbors.forEach(function (a) { |
| 118 | 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>"; |
| 119 | }); |
| 120 | this.fill("edges", list, true); |
| 121 | |
| 122 | if (window.innerWidth > 700) { |
| 123 | document.querySelector("#dialog").style.display = "block"; |
| 124 | document.querySelector("#backdrop-container").style.display = "block"; |
| 125 | } else { |
| 126 | document.querySelector("#summary-dialog").style.display = "block"; |
| 127 | } |
| 128 | }, |
| 129 | close: function() { |
| 130 | document.querySelector("#dialog").style.display = "none"; |
| 131 | document.querySelector("#summary-dialog").style.display = "none"; |
| 132 | document.querySelector("#backdrop-container").style.display = "none"; |
| 133 | |
| 134 | repaint(); |
| 135 | |
| 136 | s.refresh(); |
| 137 | }, |
| 138 | max: function() { |
| 139 | document.querySelector("#summary-dialog").style.display = "none"; |
| 140 | document.querySelector("#dialog").style.display = "block"; |
| 141 | }, |
| 142 | min: function() { |
| 143 | document.querySelector("#dialog").style.display = "none"; |
| 144 | document.querySelector("#summary-dialog").style.display = "block"; |
| 145 | } |
| 146 | }; |
| 147 | |
| 148 | function init() { |
| 149 | sigma.classes.graph.addMethod("neighbors", function(nodeId) { |
| 150 | var k, |
| 151 | neighbors = {}, |
| 152 | index = this.allNeighborsIndex[nodeId] || []; |
| 153 | |
| 154 | for (k in index) { |
| 155 | neighbors[k] = this.nodesIndex[k]; |
| 156 | } |
| 157 | |
| 158 | return neighbors; |
| 159 | }); |
| 160 | |
| 161 | s = new sigma({ |
| 162 | renderers: [{ |
| 163 | container: "graf", |
| 164 | type: "webgl" |
| 165 | }], |
| 166 | settings: { |
| 167 | defaultEdgeColor: "#fff", |
| 168 | edgeColor: "default", |
| 169 | defaultLabelColor: "#fff", |
| 170 | autoRescale: false, |
| 171 | zoomMax: 10, |
| 172 | //enableEdgeHovering: true, |
| 173 | font: "Roboto", |
| 174 | labelThreshold: 5 |
| 175 | } |
| 176 | }); |
| 177 | |
| 178 | xhr("GET", "api.php", "action=getgraf", function(responseText, status) { |
| 179 | graf = JSON.parse(responseText); |
| 180 | |
| 181 | console.log(graf); |
| 182 | |
| 183 | for (var i in graf.nodes) { |
| 184 | var ncolor = (graf.nodes[i].sex == "F" ? "#d61c08" : (graf.nodes[i].sex == "M" ? "#0159aa" : "#0ca80a")); |
| 185 | |
| 186 | s.graph.addNode({ |
| 187 | id: graf.nodes[i].id, |
| 188 | year: graf.nodes[i].year, |
| 189 | label: graf.nodes[i].name, |
| 190 | x: graf.nodes[i].x, |
| 191 | y: graf.nodes[i].y, |
| 192 | size: 10, |
| 193 | color: ncolor, |
| 194 | originalColor: ncolor |
| 195 | }); |
| 196 | } |
| 197 | |
| 198 | for (var i in graf.edges) { |
| 199 | s.graph.addEdge({ |
| 200 | id: i, |
| 201 | source: graf.edges[i].a, |
| 202 | target: graf.edges[i].b, |
| 203 | sourceyear: graf.nodes[graf.edges[i].a].year, |
| 204 | targetyear: graf.nodes[graf.edges[i].b].year, |
| 205 | size: Math.min(4, Math.max((7/(2*Math.pow(20, 2)))*Math.pow(graf.edges[i].votes, 2) + 1/2, 0.5)) |
| 206 | }); |
| 207 | } |
| 208 | s.bind('clickNode', function(e) { |
| 209 | var nodeId = e.data.node.id, |
| 210 | toKeep = s.graph.neighbors(nodeId); |
| 211 | //toKeep[nodeId] = e.data.node; |
| 212 | |
| 213 | s.graph.nodes().forEach(function(n) { |
| 214 | if (toKeep[n.id] || n.id == nodeId) { |
| 215 | n.color = n.originalColor; |
| 216 | } else { |
| 217 | n.color = '#333'; |
| 218 | } |
| 219 | }); |
| 220 | |
| 221 | s.graph.edges().forEach(function(e) { |
| 222 | if ((e.source == nodeId || e.target == nodeId) && (toKeep[e.source] || toKeep[e.target])) { |
| 223 | e.color = '#fff'; |
| 224 | } else { |
| 225 | e.color = '#333'; |
| 226 | } |
| 227 | }); |
| 228 | |
| 229 | s.refresh(); |
| 230 | |
| 231 | dialog.show(nodeId, toKeep); |
| 232 | }); |
| 233 | |
| 234 | document.querySelector("#quit-dialog").addEventListener("click", dialog.close); |
| 235 | document.querySelector("#quit2-dialog").addEventListener("click", dialog.close); |
| 236 | document.querySelector("#max-dialog").addEventListener("click", dialog.max); |
| 237 | document.querySelector("#min-dialog").addEventListener("click", dialog.min); |
| 238 | |
| 239 | document.querySelector("#zoomin").addEventListener("click", function() { |
| 240 | s.camera.goTo({ |
| 241 | ratio: Math.max(s.camera.settings("zoomMin"), s.camera.ratio / Math.sqrt(2)) |
| 242 | }); |
| 243 | }); |
| 244 | |
| 245 | document.querySelector("#zoomout").addEventListener("click", function() { |
| 246 | s.camera.goTo({ |
| 247 | ratio: Math.min(s.camera.settings("zoomMax"), s.camera.ratio * Math.sqrt(2)) |
| 248 | }); |
| 249 | }); |
| 250 | |
| 251 | var ylist = document.querySelector("#yearlist"); |
| 252 | var enc = document.createElement("span"); |
| 253 | for(var year=2006; year<2019; year++) { |
| 254 | |
| 255 | var yin = document.createElement("input"); |
| 256 | yin.type = "checkbox"; |
| 257 | yin.class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored"; |
| 258 | yin.name = "" + year; |
| 259 | yin.addEventListener("change", function(){ |
| 260 | limitYears = true; |
| 261 | |
| 262 | if(this.checked) { |
| 263 | showYears.add(this.name); |
| 264 | } |
| 265 | else { |
| 266 | showYears.delete(this.name); |
| 267 | } |
| 268 | |
| 269 | if(showYears.size == 0) limitYears = false; |
| 270 | |
| 271 | repaint(); |
| 272 | |
| 273 | s.refresh(); |
| 274 | }); |
| 275 | |
| 276 | var lab = document.createElement("label"); |
| 277 | lab.innerHTML = "" + year + "<br>"; |
| 278 | |
| 279 | enc.appendChild(yin); |
| 280 | enc.appendChild(lab); |
| 281 | } |
| 282 | ylist.appendChild(enc); |
| 283 | |
| 284 | document.querySelector("#settings").addEventListener("click", function() { |
| 285 | var yearlist = document.querySelector("#yearlist"); |
| 286 | |
| 287 | if(yearlist.style.display == "none"){ |
| 288 | yearlist.style.display = "block"; |
| 289 | yearLimits = true; |
| 290 | } |
| 291 | else{ |
| 292 | yearlist.style.display = "none"; |
| 293 | yearLimits = true; |
| 294 | } |
| 295 | }); |
| 296 | |
| 297 | document.addEventListener("keydown", function() { |
| 298 | |
| 299 | if (event.key == "f" && event.target.getAttribute("id") != "search-input") altSearchBar(); |
| 300 | if (event.which == seq[cur]) { |
| 301 | if (cur < seq.length) { |
| 302 | ++cur; |
| 303 | if (cur == seq.length) { |
| 304 | justdoit(); |
| 305 | } |
| 306 | } |
| 307 | } else cur = 0; |
| 308 | }) |
| 309 | document.querySelector("#search").addEventListener("click", altSearchBar); |
| 310 | |
| 311 | if (window.innerWidth > 700) altSearchBar(); |
| 312 | |
| 313 | s.refresh(); |
| 314 | autocomplete(document.querySelector("#search-input"), graf.nodes, "search"); |
| 315 | }); |
| 316 | } |
| 317 | |
| 318 | function cameraGoto(nodeX, nodeY) { |
| 319 | sigma.misc.animation.camera( s.camera, |
| 320 | { x: nodeX, y: nodeY, ratio: 1 }, |
| 321 | { duration: s.settings('animationsTime') || 300 } |
| 322 | ); |
| 323 | } |
| 324 | |
| 325 | window.addEventListener("load", init); |
| 326 | |