0; k--) {
157 | var kp = k - 1;
158 | _svg.selectAll(".old_edge" + kp).classed("old_edge" + k, true);
159 | _svg.selectAll(".old_node" + kp).classed("old_node" + k, true);
160 | _svg.selectAll(".old_edgepath" + kp).classed("old_edgepath" + k, true);
161 | _svg.selectAll(".old_edgelabel" + kp).classed("old_edgelabel" + k, true);
162 | };
163 | }
164 |
165 | function clear_old() {
166 | old_Nodes = [];
167 | old_Links = [];
168 | }
169 |
170 | function update_data(d) {
171 | // Save the data
172 | var previous_nodes = _svg.selectAll("g").filter(".active_node");
173 | var previous_nodes_data = previous_nodes.data();
174 | old_Nodes = updateAdd(old_Nodes, previous_nodes_data);
175 | var previous_links = _svg.selectAll(".active_edge");
176 | var previous_links_data = previous_links.data();
177 | old_Links = updateAdd(old_Links, previous_links_data);
178 |
179 | // handle the pinned nodes
180 | var pinned_Nodes = _svg.selectAll("g").filter(".pinned");
181 | var pinned_nodes_data = pinned_Nodes.data();
182 | // get the node data and merge it with the pinned nodes
183 | _Nodes = d.nodes;
184 | _Nodes = updateAdd(_Nodes, pinned_nodes_data);
185 | // add coordinates to the new active nodes that already existed in the previous step
186 | _Nodes = transfer_coordinates(_Nodes, old_Nodes);
187 | // retrieve the links between nodes and pinned nodes
188 | _Links = d.links.concat(previous_links_data); // first gather the links
189 | _Links = find_active_links(_Links, _Nodes); // then find the ones that are between active nodes
190 |
191 | // Sort links by source, then target, then label
192 | // This is used to set linknum
193 | _Links.sort(function (a, b) {
194 | if (a.source > b.source) { return 1; }
195 | else if (a.source < b.source) { return -1; }
196 | else {
197 | if (a.target > b.target) { return 1; }
198 | if (a.target < b.target) { return -1; }
199 | else {
200 | if (a.label > b.label) { return 1; }
201 | if (a.label < b.label) { return -1; }
202 | else { return 0; }
203 | }
204 | }
205 | });
206 |
207 | // Any links with duplicate source and target get an incremented 'linknum'
208 | for (var i = 0; i < _Links.length; i++) {
209 | if (i != 0 &&
210 | _Links[i].source == _Links[i - 1].source &&
211 | _Links[i].target == _Links[i - 1].target) {
212 | _Links[i].linknum = _Links[i - 1].linknum + 1;
213 | }
214 | else { _Links[i].linknum = 1; };
215 | };
216 | }
217 |
218 | function updateAdd(array1, array2) {
219 | // Update lines of array1 with the ones of array2 when the elements' id match
220 | // and add elements of array2 to array1 when they do not exist in array1
221 | var arraytmp = array2.slice(0);
222 | var removeValFromIndex = [];
223 | array1.forEach(function (d, index, thearray) {
224 | for (var i = 0; i < arraytmp.length; i++) {
225 | if (d.id == arraytmp[i].id) {
226 | thearray[index] = arraytmp[i];
227 | removeValFromIndex.push(i);
228 | }
229 | }
230 | });
231 | // remove the already updated values (in reverse order, not to mess up the indices)
232 | removeValFromIndex.sort();
233 | for (var i = removeValFromIndex.length - 1; i >= 0; i--)
234 | arraytmp.splice(removeValFromIndex[i], 1);
235 | return array1.concat(arraytmp);
236 | }
237 |
238 | function find_active_links(list_of_links, active_nodes) {
239 | // find the links in the list_of_links that are between the active nodes and discard the others
240 | var active_links = [];
241 | list_of_links.forEach(function (row) {
242 | for (var i = 0; i < active_nodes.length; i++) {
243 | for (var j = 0; j < active_nodes.length; j++) {
244 | if (active_nodes[i].id == row.source.id && active_nodes[j].id == row.target.id) {
245 | var L_data = { source: row.source.id, target: row.target.id, type: row.type, value: row.value, id: row.id };
246 | var L_data = row;
247 | L_data['source'] = row.source.id;
248 | L_data['target'] = row.target.id;
249 | active_links = active_links.concat(L_data);
250 | }
251 | else if (active_nodes[i].id == row.source && active_nodes[j].id == row.target) {
252 | var L_data = row;
253 | active_links = active_links.concat(L_data);
254 | }
255 | }
256 | }
257 | });
258 | // the active links are in active_links but there can be some duplicates
259 | // remove duplicates links
260 | var dic = {};
261 | for (var i = 0; i < active_links.length; i++)
262 | dic[active_links[i].id] = active_links[i]; // this will remove the duplicate links (with same id)
263 | var list_of_active_links = [];
264 | for (var key in dic)
265 | list_of_active_links.push(dic[key]);
266 | return list_of_active_links;
267 | }
268 |
269 |
270 | function transfer_coordinates(Nodes, old_Nodes) {
271 | // Transfer coordinates from old_nodes to the new nodes with the same id
272 | for (var i = 0; i < old_Nodes.length; i++) {
273 | var exists = 0;
274 | for (var j = 0; j < Nodes.length; j++) {
275 | if (Nodes[j].id == old_Nodes[i].id) {
276 | Nodes[j].x = old_Nodes[i].x;
277 | Nodes[j].y = old_Nodes[i].y;
278 | Nodes[j].fx = old_Nodes[i].x;
279 | Nodes[j].fy = old_Nodes[i].y;
280 | Nodes[j].vx = old_Nodes[i].vx;
281 | Nodes[j].vy = old_Nodes[i].vy;
282 | }
283 | }
284 | }
285 | return Nodes;
286 | }
287 |
288 | function remove_duplicates(elem_class, elem_class_old) {
289 | // Remove all the duplicate nodes and edges among the old_nodes and old_edges.
290 | // A node or an edge can not be on several layers at the same time.
291 | d3.selectAll(elem_class).each(function (d) {
292 | var ID = d.id;
293 | for (var n = 0; n < nb_layers; n++) {
294 | var list_old_elements = d3.selectAll(elem_class_old + n);
295 | //list_old_nodes_data = list_old_nodes.data();
296 | list_old_elements.each(function (d) {
297 | if (d.id == ID) {
298 | d3.select(this).remove();
299 | //console.log('Removed!!')
300 | }
301 | })
302 | }
303 | });
304 | }
305 |
306 | return {
307 | set_nb_layers: set_nb_layers,
308 | depth: depth,
309 | push_layers: push_layers,
310 | clear_old: clear_old,
311 | update_data: update_data,
312 | remove_duplicates: remove_duplicates
313 | }
314 | })();
315 |
316 | ////////////////////////////////////////////////////////////////////////////////////
317 | function simulation_start(center_f) {
318 | // Define the force applied to the nodes
319 | _simulation = d3.forceSimulation()
320 | .force("charge", d3.forceManyBody().strength(force_strength))
321 | .force("link", d3.forceLink().strength(link_strength).id(function (d) { return d.id; }));
322 |
323 | if (center_f == 1) {
324 | var force_y = force_x_strength;
325 | var force_x = force_y_strength;
326 | _simulation.force("center", d3.forceCenter(_svg_width / 2, _svg_height / 2));
327 | }
328 | else {
329 | var force_y = 0;
330 | var force_x = 0;
331 | }
332 | _simulation.force("y", d3.forceY().strength(function (d) {
333 | return force_y;
334 | }))
335 | .force("x", d3.forceX().strength(function (d) {
336 | return force_x;
337 | }));
338 | return _simulation;
339 | }
340 |
341 |
342 |
343 | //////////////////////////////////////
344 | function refresh_data(d, center_f, with_active_node) {
345 | // Main visualization function
346 | var svg_graph = svg_handle();
347 | layers.push_layers();
348 | layers.update_data(d);
349 |
350 | //////////////////////////////////////
351 | // link handling
352 |
353 | //attach the data
354 | var all_links = svg_graph.selectAll(".active_edge")
355 | .data(_Links, function (d) { return d.id; });
356 | var all_edgepaths = svg_graph.selectAll(".active_edgepath")
357 | .data(_Links, function (d) { return d.id; });
358 | var all_edgelabels = svg_graph.selectAll(".active_edgelabel")
359 | .data(_Links, function (d) { return d.id; });
360 |
361 | // links not active anymore are classified old_links
362 | all_links.exit().classed("old_edge0", true).classed("active_edge", false);
363 | all_edgepaths.exit().classed("old_edgepath0", true).classed("active_edgepath", false);
364 | all_edgelabels.exit().classed("old_edgelabel0", true).classed("active_edgelabel", false);
365 |
366 |
367 | // handling active links associated to the data
368 | var edgepaths_e = all_edgepaths.enter(),
369 | edgelabels_e = all_edgelabels.enter(),
370 | link_e = all_links.enter();
371 | var decor_out = graphShapes.decorate_link(link_e, edgepaths_e, edgelabels_e);
372 | _links = decor_out[0];
373 |
374 | var edgepaths = decor_out[1],
375 | edgelabels = decor_out[2];
376 |
377 |
378 | // previous links plus new links are merged
379 | _links = _links.merge(all_links);
380 | edgepaths = edgepaths.merge(all_edgepaths);
381 | edgelabels = edgelabels.merge(all_edgelabels);
382 |
383 | ///////////////////////////////////
384 | // node handling
385 |
386 | var all_nodes = svg_graph.selectAll("g").filter(".active_node")
387 | .data(_Nodes, function (d) { return d.id; });
388 |
389 | //console.log(data_node);
390 | // old nodes not active any more are tagged
391 | all_nodes.exit().classed("old_node0", true).classed("active_node", false);//;attr("class","old_node0");
392 |
393 |
394 | // nodes associated to the data are constructed
395 | _nodes = all_nodes.enter();
396 |
397 | // add node decoration
398 | var node_deco = graphShapes.decorate_node(_nodes, with_active_node);
399 |
400 | var _nodes = node_deco.merge(all_nodes);
401 |
402 |
403 |
404 |
405 | //////////////////////////////////
406 | // Additional clean up
407 | graphShapes.decorate_old_elements(layers.depth());
408 | svg_graph.selectAll("g").filter(".pinned").moveToFront();
409 |
410 |
411 | layers.remove_duplicates(".active_node", ".old_node");
412 | layers.remove_duplicates(".active_edge", ".old_edge");
413 | layers.remove_duplicates(".active_edgepath", ".old_edgepath");
414 | layers.remove_duplicates(".active_edgelabel", ".old_edgelabel");
415 |
416 |
417 | ///////////////////////////////
418 | // Force simulation
419 | // simulation model and parameters
420 |
421 |
422 | _simulation = simulation_start(center_f);
423 | // Associate the simulation with the data
424 | _simulation.nodes(_Nodes).on("tick", ticked);
425 | _simulation.force("link").links(_Links);
426 | _simulation.alphaTarget(0);
427 |
428 | ////////////////////////
429 | // handling simulation steps
430 | // move the nodes and links at each simulation step, following this rule:
431 | function ticked() {
432 | _links.attr('d', function (d) {
433 | if (use_curved_edges) {
434 | var dx = d.target.x - d.source.x;
435 | var dy = d.target.y - d.source.y;
436 | var dr = Math.sqrt((dx * dx + dy * dy) / d.linknum);
437 | return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
438 | } else {
439 | return "M" + d.source.x + "," + d.source.y + "L" + d.target.x + "," + d.target.y;
440 | }
441 | });
442 | _nodes
443 | .attr("transform", function (d) { return "translate(" + d.x + ", " + d.y + ")"; });
444 |
445 | edgepaths.attr('d', function (d) {
446 | if (use_curved_edges) {
447 | var dx = d.target.x - d.source.x;
448 | var dy = d.target.y - d.source.y;
449 | var dr = Math.sqrt((dx * dx + dy * dy) / d.linknum);
450 | return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
451 | } else {
452 | return "M" + d.source.x + "," + d.source.y + "L" + d.target.x + "," + d.target.y;
453 | }
454 | });
455 |
456 | edgelabels.attr('transform', function (d) {
457 | if (d.target.x < d.source.x) {
458 | var bbox = this.getBBox();
459 |
460 | var rx = bbox.x + bbox.width / 2;
461 | var ry = bbox.y + bbox.height / 2;
462 | return 'rotate(180 ' + rx + ' ' + ry + ')';
463 | }
464 | else {
465 | return 'rotate(0)';
466 | }
467 | });
468 | }
469 |
470 | }
471 |
472 |
473 | function get_node_edges(node_id) {
474 | // Return the in and out edges of node with id 'node_id'
475 | var connected_edges = d3.selectAll(".edge").filter(
476 | function (item) {
477 | if (item.source == node_id || item.source.id == node_id) {
478 | return item;
479 | }
480 | else if (item.target == node_id || item.target.id == node_id) {
481 | return item;
482 | }
483 | });
484 | return connected_edges;
485 | }
486 |
487 |
488 | var graph_events = (function () {
489 | //////////////////////////////////
490 | // Handling mouse events
491 |
492 | function dragstarted(d) {
493 | if (!d3.event.active) _simulation.alphaTarget(0.3).restart();
494 | d.fx = d.x;
495 | d.fy = d.y;
496 | }
497 |
498 | function dragged(d) {
499 | var connected_edges = get_node_edges(d.id);
500 | var f_connected_edges = connected_edges.filter("*:not(.active_edge)")
501 | if (f_connected_edges._groups[0].length == 0) {
502 | d.fx = d3.event.x;
503 | d.fy = d3.event.y;
504 | }
505 | else {
506 | f_connected_edges
507 | .style("stroke-width", function () { return parseInt(d3.select(this).attr("stroke-width")) + 2; })
508 | .style("stroke-opacity", 1)
509 | .classed("blocking", true)
510 | }
511 | }
512 |
513 | function dragended(d) {
514 | if (!d3.event.active) _simulation.alphaTarget(0);
515 | d3.selectAll(".blocking")
516 | .style("stroke-width", function () { return d3.select(this).attr("stroke-width"); })
517 | .style("stroke-opacity", function () { return d3.select(this).attr("stroke-opacity"); })
518 | .classed("blocking", false)
519 | // d.fx = null;
520 | // d.fy = null;
521 | }
522 |
523 | function clicked(d) {
524 | d3.select(".focus_node").remove();
525 | var input = document.getElementById("freeze-in");
526 | var isChecked = input.checked;
527 | if (isChecked) infobox.display_info(d);
528 | else {
529 | _simulation.stop();
530 | // remove the oldest links and nodes
531 | var stop_layer = layers.depth() - 1;
532 | _svg.selectAll(".old_node" + stop_layer).remove();
533 | _svg.selectAll(".old_edge" + stop_layer).remove();
534 | _svg.selectAll(".old_edgepath" + stop_layer).remove();
535 | _svg.selectAll(".old_edgelabel" + stop_layer).remove();
536 | infobox.display_info(d);
537 | graphioGremlin.click_query(d);
538 | console.log('event!!')
539 | }
540 | }
541 |
542 |
543 | function pin_it(d) {
544 | d3.event.stopPropagation();
545 | var node_pin = d3.select(this);
546 | var pinned_node = d3.select(this.parentNode);
547 | //console.log('Pinned!')
548 | //console.log(pinned_node.classed("node"));
549 | if (pinned_node.classed("active_node")) {
550 | if (!pinned_node.classed("pinned")) {
551 | pinned_node.classed("pinned", true);
552 | console.log('Pinned!');
553 | node_pin.attr("fill", "#000");
554 | pinned_node.moveToFront();
555 | }
556 | else {
557 | pinned_node.classed("pinned", false);
558 | console.log('Unpinned!');
559 | node_pin.attr("fill", graphShapes.node_color);
560 | }
561 | }
562 | }
563 |
564 | return {
565 | dragstarted: dragstarted,
566 | dragged: dragged,
567 | dragended: dragended,
568 | clicked: clicked,
569 | pin_it: pin_it
570 | }
571 |
572 | })();
573 |
574 | return {
575 | svg_handle: svg_handle,
576 | nodes: nodes,
577 | links: links,
578 | nodes_data: nodes_data,
579 | node_data: node_data,
580 | links_data: links_data,
581 | init: init,
582 | create_arrows: create_arrows,
583 | addzoom: addzoom,
584 | clear: clear,
585 | get_simulation_handle: get_simulation_handle,
586 | simulation_start: simulation_start,
587 | refresh_data: refresh_data,
588 | layers: layers,
589 | graph_events: graph_events
590 | };
591 |
592 | })();
593 |
--------------------------------------------------------------------------------
/scripts/graphioGremlin.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2017 Benjamin RICAUD
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and
14 | limitations under the License.
15 | */
16 |
17 | // Interface between the visualization and the Gremlin server.
18 |
19 | var traversal_source = getUrlParameter('ts');
20 | if (traversal_source == null) {
21 | traversal_source = "g"
22 | }
23 |
24 | var graphioGremlin = (function(){
25 | "use strict";
26 |
27 | var _node_properties = [];
28 | var _edge_properties = [];
29 |
30 |
31 | function get_node_properties(){
32 | return _node_properties;
33 | }
34 | function get_edge_properties(){
35 | return _edge_properties;
36 | }
37 |
38 | function create_single_command(query){
39 | var equalIndex = query.indexOf("=");
40 | var semiColonIndex = query.indexOf(";");
41 | if( equalIndex >= 0){
42 | if(semiColonIndex < 0){
43 | query = query.substring(equalIndex+1);
44 | } else {
45 | query = query.substring(equalIndex+1,semiColonIndex);
46 | }
47 | }
48 | var returnQuery = query.trim();
49 | // if(returnQuery.endsWith(".toList();")){
50 | // returnQuery = returnQuery+".toList();";
51 | // }
52 | return returnQuery;
53 | }
54 |
55 | function get_graph_info(){
56 | var gremlin_query_nodes = "nodes = " + traversal_source + ".V().limit(" + limit_graphinfo_request + ").groupCount().by(label);"
57 | var gremlin_query_edges = "edges = " + traversal_source + ".E().limit(" + limit_graphinfo_request + ").groupCount().by(label);"
58 | var gremlin_query_nodes_prop = "nodesprop = " + traversal_source + ".V().limit(" + limit_graphinfo_request + ").valueMap().select(keys).groupCount();"
59 | var gremlin_query_edges_prop = "edgesprop = " + traversal_source + ".E().limit(" + limit_graphinfo_request + ").valueMap().select(keys).groupCount();"
60 |
61 | var gremlin_query = gremlin_query_nodes+gremlin_query_nodes_prop
62 | +gremlin_query_edges+gremlin_query_edges_prop
63 | + "[nodes.toList(),nodesprop.toList(),edges.toList(),edgesprop.toList()]"
64 | // while busy, show we're doing something in the messageArea.
65 | $('#messageArea').html('(loading)
');
66 | var message = ""
67 | if(SINGLE_COMMANDS_AND_NO_VARS){
68 | var node_label_query = create_single_command(gremlin_query_nodes);
69 | var edge_label_query = create_single_command(gremlin_query_edges);
70 | var node_prop_query = create_single_command(gremlin_query_nodes_prop);
71 | var edge_prop_query = create_single_command(gremlin_query_edges_prop);
72 | send_to_server(node_label_query, null, null, null, function(nodeLabels){
73 | send_to_server(edge_label_query, null, null, null, function(edgeLabels){
74 | send_to_server(node_prop_query, null, null, null, function(nodeProps){
75 | send_to_server(edge_prop_query, null, null, null, function(edgeProps){
76 | var combinedData = [nodeLabels, nodeProps, edgeLabels, edgeProps];
77 | console.log("Combined data", combinedData);
78 | handle_server_answer(combinedData,'graphInfo',null,message);
79 | });
80 | });
81 | });
82 | });
83 | } else {
84 | send_to_server(gremlin_query,'graphInfo',null,message)
85 | }
86 | }
87 |
88 |
89 |
90 | function search_query() {
91 | // Preprocess query
92 | let input_string = $('#search_value').val();
93 | let input_field = $('#search_field').val();
94 | let label_field = $('#label_field').val();
95 | let limit_field = $('#limit_field').val();
96 | let search_type = $('#search_type').val();
97 | //console.log(input_field)
98 | var filtered_string = input_string;//You may add .replace(/\W+/g, ''); to refuse any character not in the alphabet
99 | if (filtered_string.length>50) filtered_string = filtered_string.substring(0,50); // limit string length
100 | // Translate to Gremlin query
101 | let has_str = "";
102 | if (label_field !== "") {
103 | has_str = ".hasLabel('" + label_field + "')";
104 | }
105 | if (input_field !== "" && input_string !== "") {
106 | has_str += ".has('" + input_field + "',";
107 | switch (search_type) {
108 | case "eq":
109 | if (isInt(input_string)){
110 | has_str += filtered_string + ")"
111 | } else {
112 | has_str += "'" + filtered_string + "')"
113 | }
114 | break;
115 | case "contains":
116 | has_str += "textContains('" + filtered_string + "'))";
117 | break;
118 | }
119 | } else if (limit_field === "" || limit_field < 0) {
120 | limit_field = node_limit_per_request;
121 | }
122 |
123 | let gremlin_query_nodes = "nodes = " + traversal_source + ".V()" + has_str;
124 | if (limit_field !== "" && isInt(limit_field) && limit_field > 0) {
125 | gremlin_query_nodes += ".limit(" + limit_field + ").toList();";
126 | } else {
127 | gremlin_query_nodes += ".toList();";
128 | }
129 | let gremlin_query_edges = "edges = " + traversal_source + ".V(nodes).aggregate('node').outE().as('edge').inV().where(within('node')).select('edge').toList();";
130 | let gremlin_query_edges_no_vars = "edges = " + traversal_source + ".V()"+has_str+".aggregate('node').outE().as('edge').inV().where(within('node')).select('edge').toList();";
131 | //let gremlin_query_edges_no_vars = "edges = " + traversal_source + ".V()"+has_str+".bothE();";
132 | let gremlin_query = gremlin_query_nodes + gremlin_query_edges + "[nodes,edges]";
133 | console.log(gremlin_query);
134 |
135 | // while busy, show we're doing something in the messageArea.
136 | $('#messageArea').html('(loading)
');
137 | // To display the queries in the message area:
138 | //var message_nodes = "Node query: '"+gremlin_query_nodes+"'
";
139 | //var message_edges = "Edge query: '"+gremlin_query_edges+"'
";
140 | //var message = message_nodes + message_edges;
141 | var message = "";
142 | if (SINGLE_COMMANDS_AND_NO_VARS) {
143 | var nodeQuery = create_single_command(gremlin_query_nodes);
144 | var edgeQuery = create_single_command(gremlin_query_edges_no_vars);
145 | console.log("Node query: "+nodeQuery);
146 | console.log("Edge query: "+edgeQuery);
147 | send_to_server(nodeQuery, null, null, null, function(nodeData){
148 | send_to_server(edgeQuery, null, null, null, function(edgeData){
149 | var combinedData = [nodeData,edgeData];
150 | handle_server_answer(combinedData, 'search', null, message);
151 | });
152 | });
153 | } else {
154 | send_to_server(gremlin_query,'search',null,message);
155 | }
156 | }
157 |
158 | function isInt(value) {
159 | return !isNaN(value) &&
160 | parseInt(Number(value)) == value &&
161 | !isNaN(parseInt(value, 10));
162 | }
163 | function click_query(d) {
164 | var edge_filter = $('#edge_filter').val();
165 | // Gremlin query
166 | //var gremlin_query = traversal_source + ".V("+d.id+").bothE().bothV().path()"
167 | // 'inject' is necessary in case of an isolated node ('both' would lead to an empty answer)
168 | var id = d.id;
169 | if(isNaN(id)){ // Add quotes if id is a string (not a number).
170 | id = '"'+id+'"';
171 | }
172 | var gremlin_query_nodes = 'nodes = ' + traversal_source + '.V('+id+').as("node").both('+(edge_filter?'"'+edge_filter+'"':'')+').as("node").select(all,"node").inject(' + traversal_source + '.V('+id+')).unfold()'
173 | var gremlin_query_edges = "edges = " + traversal_source + ".V("+id+").bothE("+(edge_filter?"'"+edge_filter+"'":"")+")";
174 | var gremlin_query = gremlin_query_nodes+'\n'+gremlin_query_edges+'\n'+'[nodes.toList(),edges.toList()]'
175 | // while busy, show we're doing something in the messageArea.
176 | $('#messageArea').html('(loading)
');
177 | var message = "Query ID: "+ d.id +"
"
178 | if(SINGLE_COMMANDS_AND_NO_VARS){
179 | var nodeQuery = create_single_command(gremlin_query_nodes);
180 | var edgeQuery = create_single_command(gremlin_query_edges);
181 | send_to_server(nodeQuery, null, null, null, function(nodeData){
182 | send_to_server(edgeQuery, null, null, null, function(edgeData){
183 | var combinedData = [nodeData,edgeData];
184 | handle_server_answer(combinedData, 'click', d.id, message);
185 | });
186 | });
187 | } else {
188 | send_to_server(gremlin_query,'click',d.id,message);
189 | }
190 | }
191 |
192 | function send_to_server(gremlin_query,query_type,active_node,message, callback){
193 |
194 | let server_address = $('#server_address').val();
195 | let server_port = $('#server_port').val();
196 | let COMMUNICATION_PROTOCOL = $('#server_protocol').val();
197 | if (COMMUNICATION_PROTOCOL == 'REST'){
198 | let server_url = "http://"+server_address+":"+server_port;
199 | run_ajax_request(gremlin_query,server_url,query_type,active_node,message,callback);
200 | }
201 | else if (COMMUNICATION_PROTOCOL == 'websocket'){
202 | let server_url = "ws://"+server_address+":"+server_port+"/gremlin"
203 | run_websocket_request(gremlin_query,server_url,query_type,active_node,message,callback);
204 | }
205 | else {
206 | console.log('Bad communication protocol. Check configuration file. Accept "REST" or "websocket" .')
207 | }
208 |
209 | }
210 |
211 | /////////////////////////////////////////////////////////////////////////////////////////////////
212 | // AJAX request for the REST API
213 | ////////////////////////////////////////////////////////////////////////////////////////////////
214 | function run_ajax_request(gremlin_query,server_url,query_type,active_node,message, callback){
215 | // while busy, show we're doing something in the messageArea.
216 | $('#messageArea').html('(loading)
');
217 |
218 | // Get the data from the server
219 | $.ajax({
220 | type: "POST",
221 | accept: "application/json",
222 | //contentType:"application/json; charset=utf-8",
223 | url: server_url,
224 | //headers: GRAPH_DATABASE_AUTH,
225 | timeout: REST_TIMEOUT,
226 | data: JSON.stringify({"gremlin" : gremlin_query}),
227 | success: function(data, textStatus, jqXHR){
228 | var Data = data.result.data;
229 | //console.log(Data)
230 | //console.log("Results received")
231 | if(callback){
232 | callback(Data);
233 | } else {
234 | handle_server_answer(Data,query_type,active_node,message);
235 | }
236 | },
237 | error: function(result, status, error){
238 | console.log("Connection failed. "+status);
239 |
240 | // This will hold all error messages, to be printed in the
241 | // output area.
242 | let msgs = [];
243 |
244 | if (query_type == 'editGraph'){
245 | msgs.push('Problem accessing the database using REST at ' + server_url);
246 | msgs.push('Message: ' + status + ', ' + error);
247 | msgs.push('Possible cause: creating an edge with bad node ids ' +
248 | '(linking nodes not existing in the DB).');
249 | } else {
250 | msgs.push('Can\'t access database using REST at ' + server_url);
251 | msgs.push('Message: ' + status + ', ' + error);
252 | msgs.push('Check the server configuration ' +
253 | 'or try increasing the REST_TIMEOUT value in the config file.');
254 | }
255 |
256 | // If a MalformedQueryException is received, user might be
257 | // trying to reach an Amazon Neptune DB. Point them to the
258 | // config file as a probable cause.
259 | if (result.status === 400
260 | && SINGLE_COMMANDS_AND_NO_VARS === false
261 | && result.hasOwnProperty('responseJSON')
262 | && result.responseJSON.code === 'MalformedQueryException') {
263 | msgs.push('If connecting to an Amazon Neptune databse, ensure that ' +
264 | 'SINGLE_COMMANDS_AND_NO_VARS is set to true in the config file.');
265 | }
266 |
267 | $('#outputArea').html(msgs.map(function (i) {return '' + i + '
'}).join(''));
268 | $('#messageArea').html('');
269 | }
270 | });
271 | }
272 |
273 | //////////////////////////////////////////////////////////////////////////////////////////////////////
274 | // Websocket connection
275 | /////////////////////////////////////////////////////////////////////////////////////////////////////
276 | function run_websocket_request(gremlin_query,server_url,query_type,active_node,message,callback){
277 | $('#messageArea').html('(loading)
');
278 |
279 | var msg = { "requestId": uuidv4(),
280 | "op":"eval",
281 | "processor":"",
282 | "args":{"gremlin": gremlin_query,
283 | "bindings":{},
284 | "language":"gremlin-groovy"}}
285 |
286 | var data = JSON.stringify(msg);
287 |
288 | var ws = new WebSocket(server_url);
289 | ws.onopen = function (event){
290 | ws.send(data,{ mask: true});
291 | };
292 | ws.onerror = function (err){
293 | console.log('Connection error using websocket');
294 | console.log(err);
295 | if (query_type == 'editGraph'){
296 | $('#outputArea').html(" Connection error using websocket
"
297 | +" Problem accessing "+server_url+ "
"+
298 | " Possible cause: creating a edge with bad node ids "+
299 | "(linking nodes not existing in the DB).
");
300 | $('#messageArea').html('');
301 | } else {$('#outputArea').html(" Connection error using websocket
"
302 | +" Cannot connect to "+server_url+ "
");
303 | $('#messageArea').html('');
304 | }
305 |
306 | };
307 | ws.onmessage = function (event){
308 | var response = JSON.parse(event.data);
309 | var code=Number(response.status.code)
310 | if(!isInt(code) || code<200 || code>299) {
311 | $('#outputArea').html(response.status.message);
312 | $('#messageArea').html("Error retrieving data");
313 | return 1;
314 | }
315 | var data = response.result.data;
316 | if (data == null){
317 | // No response data expected for flush query, so just validate status code.
318 | if (query_type == 'flushGraph' && response.status.code == 204) {
319 | $('#outputArea').html(" Successfully flushed existing DB data.
");
320 | $('#messageArea').html('');
321 | return
322 | }
323 |
324 | if (query_type == 'editGraph'){
325 | $('#outputArea').html(response.status.message);
326 | $('#messageArea').html('Could not write data to DB.' +
327 | " Possible cause: creating a edge with bad node ids "+
328 | "(linking nodes not existing in the DB).
");
329 | return 1;
330 | } else {
331 | //$('#outputArea').html(response.status.message);
332 | //$('#messageArea').html('Server error. No data.');
333 | //return 1;
334 | }
335 | }
336 | //console.log(data)
337 | //console.log("Results received")
338 | if(callback){
339 | callback(data);
340 | } else {
341 | handle_server_answer(data,query_type,active_node,message);
342 | }
343 | };
344 | }
345 |
346 | // Generate uuid for websocket requestId. Code found here:
347 | // https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
348 | function uuidv4() {
349 | return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
350 | var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
351 | return v.toString(16);
352 | });
353 | }
354 |
355 | //////////////////////////////////////////////////////////////////////////////////////////////////
356 | function handle_server_answer(data,query_type,active_node,message){
357 | let COMMUNICATION_METHOD = $('#communication_method').val();
358 | if (query_type == 'editGraph'){
359 | //console.log(data)
360 | $('#outputArea').html(" Data successfully written to the DB.
");
361 | $('#messageArea').html('');
362 | return // TODO handle answer to check if data has been written
363 | }
364 | //console.log(COMMUNICATION_METHOD)
365 | if (COMMUNICATION_METHOD == 'GraphSON3'){
366 | //console.log(data)
367 | data = graphson3to1(data);
368 | var arrange_data = arrange_datav3;
369 | } else if (COMMUNICATION_METHOD == 'GraphSON2'){
370 | var arrange_data = arrange_datav2;
371 | } else {
372 | console.log('Bad communication protocol. Accept "GraphSON2" or "GraphSON3".'
373 | +' Using default GraphSON3.')
374 | data = graphson3to1(data);
375 | var arrange_data = arrange_datav3;
376 | }
377 | if (!(0 in data)) {
378 | message = 'No data. Check the communication protocol. (Try changing Gremlin version to 3.3.*).'
379 | console.log(message)
380 | $('#outputArea').html(message);
381 | $('#messageArea').html('');
382 |
383 | }
384 | if (query_type=='graphInfo'){
385 | infobox.display_graph_info(data);
386 | _node_properties = make_properties_list(data[1][0]);
387 | _edge_properties = make_properties_list(data[3][0]);
388 | change_nav_bar(_node_properties,_edge_properties);
389 | display_properties_bar(_node_properties,'nodes','Node properties:');
390 | display_properties_bar(_edge_properties,'edges','Edge properties:');
391 | display_color_choice(_node_properties,'nodes','Node color by:');
392 | } else {
393 | //console.log(data);
394 | var graph = arrange_data(data);
395 | //console.log(graph)
396 | if (query_type=='click') var center_f = 0; //center_f=0 mean no attraction to the center for the nodes
397 | else if (query_type=='search') var center_f = 1;
398 | else return;
399 | graph_viz.refresh_data(graph,center_f,active_node);
400 | }
401 |
402 | $('#outputArea').html(message);
403 | $('#messageArea').html('');
404 | }
405 |
406 |
407 |
408 | //////////////////////////////////////////////////////////////////////////////////////////////////
409 | function make_properties_list(data){
410 | var prop_dic = {};
411 | for (var prop_str in data){
412 | prop_str = prop_str.replace(/[\[\ \"\'\]]/g,''); // get rid of symbols [,",',] and spaces
413 | var prop_list = prop_str.split(',');
414 | //prop_list = prop_list.map(function (e){e=e.slice(1); return e;});
415 | for (var prop_idx in prop_list){
416 | prop_dic[prop_list[prop_idx]] = 0;
417 | }
418 | }
419 | var properties_list = [];
420 | for (var key in prop_dic){
421 | properties_list.push(key);
422 | }
423 | return properties_list;
424 | }
425 |
426 | ///////////////////////////////////////////////////
427 | function idIndex(list,elem) {
428 | // find the element in list with id equal to elem
429 | // return its index or null if there is no
430 | for (var i=0;i