avm99963 | f0d1521 | 2017-10-08 17:03:22 +0200 | [diff] [blame] | 1 | function 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 | |
| 26 | var 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; |
Huguet57 | ac6d0c5 | 2018-07-23 18:37:16 +0200 | [diff] [blame] | 66 | n.label = n.originalLabel; |
avm99963 | f0d1521 | 2017-10-08 17:03:22 +0200 | [diff] [blame] | 67 | }); |
| 68 | |
| 69 | s.graph.edges().forEach(function(e) { |
| 70 | e.color = "#fff"; |
| 71 | }); |
| 72 | |
| 73 | s.refresh(); |
| 74 | }, |
| 75 | max: function() { |
| 76 | document.querySelector("#summary-dialog").style.display = "none"; |
| 77 | document.querySelector("#dialog").style.display = "block"; |
| 78 | }, |
| 79 | min: function() { |
| 80 | document.querySelector("#dialog").style.display = "none"; |
| 81 | document.querySelector("#summary-dialog").style.display = "block"; |
Huguet57 | ac6d0c5 | 2018-07-23 18:37:16 +0200 | [diff] [blame] | 82 | }, |
| 83 | addEdge: function() { |
| 84 | document.querySelector("#addedge-input").style.display = "block"; |
| 85 | document.querySelector("#edge-list").style.display = "none"; |
| 86 | autocomplete(document.getElementById("addedge-input"), graf.nodes, "addEdge"); |
| 87 | // Focus on the addEdge input bar |
| 88 | document.getElementById("addedge-input").focus(); |
avm99963 | f0d1521 | 2017-10-08 17:03:22 +0200 | [diff] [blame] | 89 | } |
| 90 | }; |
| 91 | |
| 92 | function init() { |
| 93 | sigma.classes.graph.addMethod("neighbors", function(nodeId) { |
| 94 | var k, |
| 95 | neighbors = {}, |
| 96 | index = this.allNeighborsIndex[nodeId] || []; |
| 97 | |
| 98 | for (k in index) { |
| 99 | neighbors[k] = this.nodesIndex[k]; |
| 100 | } |
| 101 | |
| 102 | return neighbors; |
| 103 | }); |
| 104 | |
| 105 | s = new sigma({ |
| 106 | renderers: [{ |
| 107 | container: "graf", |
| 108 | type: "webgl" |
| 109 | }], |
| 110 | settings: { |
| 111 | defaultEdgeColor: "#fff", |
| 112 | edgeColor: "default", |
| 113 | defaultLabelColor: "#fff", |
| 114 | autoRescale: false, |
| 115 | zoomMax: 10, |
| 116 | //enableEdgeHovering: true, |
| 117 | font: "Roboto", |
| 118 | labelThreshold: 5 |
| 119 | } |
| 120 | }); |
| 121 | |
| 122 | xhr("GET", "api.php", "action=getgraf", function(responseText, status) { |
| 123 | graf = JSON.parse(responseText); |
| 124 | |
| 125 | console.log(graf); |
| 126 | |
| 127 | for (var i in graf.nodes) { |
| 128 | var ncolor = (graf.nodes[i].sex == "F" ? "#d61c08" : (graf.nodes[i].sex == "M" ? "#0159aa" : "#0ca80a")); |
| 129 | |
| 130 | s.graph.addNode({ |
| 131 | id: graf.nodes[i].id, |
| 132 | label: graf.nodes[i].name, |
Huguet57 | ac6d0c5 | 2018-07-23 18:37:16 +0200 | [diff] [blame] | 133 | originalLabel: graf.nodes[i].name, |
avm99963 | f0d1521 | 2017-10-08 17:03:22 +0200 | [diff] [blame] | 134 | x: graf.nodes[i].x, |
| 135 | y: graf.nodes[i].y, |
| 136 | size: 10, |
| 137 | color: ncolor, |
| 138 | originalColor: ncolor |
| 139 | }); |
| 140 | } |
| 141 | |
| 142 | for (var i in graf.edges) { |
| 143 | s.graph.addEdge({ |
| 144 | id: i, |
| 145 | source: graf.edges[i].a, |
| 146 | target: graf.edges[i].b, |
| 147 | size: Math.min(4, Math.max((7/(2*Math.pow(20, 2)))*Math.pow(graf.edges[i].votes, 2) + 1/2, 0.5)) |
| 148 | }); |
| 149 | } |
| 150 | |
| 151 | s.bind('clickNode', function(e) { |
| 152 | var nodeId = e.data.node.id, |
| 153 | toKeep = s.graph.neighbors(nodeId); |
| 154 | //toKeep[nodeId] = e.data.node; |
Huguet57 | ac6d0c5 | 2018-07-23 18:37:16 +0200 | [diff] [blame] | 155 | clickNode(s, nodeId, toKeep); |
avm99963 | f0d1521 | 2017-10-08 17:03:22 +0200 | [diff] [blame] | 156 | }); |
| 157 | |
| 158 | document.querySelector("#quit-dialog").addEventListener("click", dialog.close); |
| 159 | document.querySelector("#quit2-dialog").addEventListener("click", dialog.close); |
| 160 | document.querySelector("#max-dialog").addEventListener("click", dialog.max); |
| 161 | document.querySelector("#min-dialog").addEventListener("click", dialog.min); |
Huguet57 | ac6d0c5 | 2018-07-23 18:37:16 +0200 | [diff] [blame] | 162 | document.querySelector("#addedge-button").addEventListener("click", dialog.addEdge); |
avm99963 | f0d1521 | 2017-10-08 17:03:22 +0200 | [diff] [blame] | 163 | |
| 164 | document.querySelector("#zoomin").addEventListener("click", function() { |
| 165 | s.camera.goTo({ |
| 166 | ratio: Math.max(s.camera.settings("zoomMin"), s.camera.ratio / Math.sqrt(2)) |
| 167 | }); |
| 168 | }); |
| 169 | |
| 170 | document.querySelector("#zoomout").addEventListener("click", function() { |
| 171 | s.camera.goTo({ |
| 172 | ratio: Math.min(s.camera.settings("zoomMax"), s.camera.ratio * Math.sqrt(2)) |
| 173 | }); |
| 174 | }); |
| 175 | |
| 176 | s.refresh(); |
Huguet57 | f02e8c0 | 2018-07-23 16:48:47 +0200 | [diff] [blame] | 177 | autocomplete(document.getElementById("searchInput"), graf.nodes, "search"); |
avm99963 | f0d1521 | 2017-10-08 17:03:22 +0200 | [diff] [blame] | 178 | }); |
| 179 | } |
| 180 | |
Huguet57 | 004b155 | 2018-07-23 03:29:12 +0200 | [diff] [blame] | 181 | function cameraGoto(nodeX, nodeY) { |
| 182 | sigma.misc.animation.camera( s.camera, |
| 183 | { x: nodeX, y: nodeY, ratio: 1 }, |
| 184 | { duration: s.settings('animationsTime') || 300 } |
| 185 | ); |
| 186 | } |
| 187 | |
Huguet57 | ac6d0c5 | 2018-07-23 18:37:16 +0200 | [diff] [blame] | 188 | function clickNode(s, nodeId, toKeep) { |
| 189 | s.graph.nodes().forEach(function(n) { |
| 190 | if (toKeep[n.id] || n.id == nodeId) { |
| 191 | n.color = n.originalColor; |
| 192 | n.label = n.originalLabel; |
| 193 | console.log("Hola"); |
| 194 | } else { |
| 195 | n.color = '#333'; |
| 196 | n.label = ''; |
| 197 | } |
| 198 | }); |
| 199 | |
| 200 | s.graph.edges().forEach(function(e) { |
| 201 | if ((e.source == nodeId || e.target == nodeId) && (toKeep[e.source] || toKeep[e.target])) { |
| 202 | e.color = '#fff'; |
| 203 | } else { |
| 204 | e.color = '#333'; |
| 205 | } |
| 206 | }); |
| 207 | |
| 208 | s.refresh(); |
| 209 | |
| 210 | dialog.show(nodeId, toKeep); |
| 211 | } |
| 212 | |
avm99963 | f0d1521 | 2017-10-08 17:03:22 +0200 | [diff] [blame] | 213 | window.addEventListener("load", init); |