Skip to content

Commit

Permalink
add compatibility with gremlin server 3.3
Browse files Browse the repository at this point in the history 
Now handle GraphSON v3.0 (in addition to Graphson v2.0)
  • Loading branch information
@bricaud
bricaud committed Oct 25, 2017
1 parent 5d537da commit 656bdab
Show file tree
Hide file tree
Showing 5 changed files with 208 additions and 36 deletions.
25 changes: 16 additions & 9 deletions graphexp.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ <h1 class="header-heading">Graph Explorer v 0.6</h1>
</div>
<div class="footer">
<div class="container">
<a href="http://www.github.com/bricaud/graphexp">Graph Explorer V 0.6</a>
<a href="http://www.github.com/bricaud/graphexp">Graph Explorer V 0.7</a>
</div>
</div>
<!-- INITIALIZATION -->
Expand Down Expand Up @@ -196,14 +196,14 @@ <h1 class="header-heading">Graph Explorer v 0.6</h1>
var text_base_offset = 10;
var text_offset = 10;
var prop_name = prop_id.slice(prop_id.indexOf("_")+1);
var item = prop_id.slice(0,prop_id.indexOf("_"));
var item = prop_id.slice(0,prop_id.indexOf("_"));
console.log(prop_id,item)
if(d3.select("#"+prop_id).property("checked")){
if (item=='nodes'){
var elements_text = d3.selectAll('.node');
}
else if (item=='edges'){
var elements_text = d3.selectAll('.edgelabel');
}
var elements_text = d3.selectAll('.node');
} else if (item=='edges'){
var elements_text = d3.selectAll('.edgelabel');
}
attach_property(elements_text,prop_name,prop_id_nb,item)
}
else{
Expand Down Expand Up @@ -235,7 +235,9 @@ <h1 class="header-heading">Graph Explorer v 0.6</h1>
//.text(function (d) {return d.label});
prop_id_nb = prop_id_nb + 1;
}
else { console.log('Bad item name.'); return 1;}
else {
console.log('Bad item name.'); return 1;
}
elements_text.classed("prop_details",true).classed(prop_id,true)
//.attr("x", 12)
.attr("dy",function(d){return graphShapes.node_size(d)+text_base_offset+text_offset*parseInt(prop_id_nb);})
Expand All @@ -247,7 +249,11 @@ <h1 class="header-heading">Graph Explorer v 0.6</h1>
function get_prop_value(d,prop_name,item){
if (prop_name in d.properties){
if (item=='nodes'){
return d.properties[prop_name][0].value;
if (COMMUNICATION_METHOD == 'GraphSON3') {
return d.properties[prop_name];
} else if (COMMUNICATION_METHOD == 'GraphSON2') {
return d.properties[prop_name][0].value;
}
}
else if (item=='edges'){
console.log(d.properties[prop_name])
Expand All @@ -259,6 +265,7 @@ <h1 class="header-heading">Graph Explorer v 0.6</h1>
}
}


function set_nb_layers(){
var nb_layers = parseInt(document.getElementById('nbLayers').value);
//var nb_layers = parseInt(layer_input.getAttribute("value"));
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@
<title>Page Redirection</title>
</head>
<body>
If you are not redirected automatically, follow this <a href="graphep.html">link to example</a>.
If you are not redirected automatically, follow this <a href="graphexp.html">link to example</a>.
</body>
</html>
7 changes: 6 additions & 1 deletion scripts/graphConf.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@ const COMMUNICATION_PROTOCOL = "REST";
//const COMMUNICATION_PROTOCOL = "websocket";
// TODO: configuration for the secure server

// The communication method can be GraphSON 2.0 (used by Gremlin 3.2)
// or GraphSON 3.0 (used by Gremlin 3.3)
const COMMUNICATION_METHOD = "GraphSON2"
//const COMMUNICATION_METHOD = "GraphSON3"

// Graph configuration
const default_nb_of_layers = 3;
const node_limit_per_request = 50;
Expand All @@ -25,4 +30,4 @@ const active_node_margin_opacity = 0.3;
// Edges
const default_edge_stroke_width = 3;
const default_edge_color = "#CCC";
const edge_label_color = "#111";
const edge_label_color = "#111";
165 changes: 146 additions & 19 deletions scripts/graphioGremlin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ var graphioGremlin = (function(){
// Preprocess query
var input_string = $('#search_value').val();
var input_field = $('#search_field').val();
console.log(input_field)
//console.log(input_field)
var filtered_string = input_string;//You may add .replace(/\W+/g, ''); to refuse any character not in the alphabet
if (filtered_string.length>50) filtered_string = filtered_string.substring(0,50); // limit string length
// Translate to Gremlin query
Expand Down Expand Up @@ -88,7 +88,10 @@ var graphioGremlin = (function(){
}
function click_query(d) {
// Gremlin query
var gremlin_query = "g.V("+d.id+").bothE().bothV().path()"
//var gremlin_query = "g.V("+d.id+").bothE().bothV().path()"
var gremlin_query_nodes = "nodes = g.V("+d.id+").as('node').both().as('node').select(all,'node').unfold()"
var gremlin_query_edges = "edges = g.V("+d.id+").bothE()"
var gremlin_query = gremlin_query_nodes+"\n"+gremlin_query_edges+"\n"+"[nodes.toList(),edges.toList()]"
// while busy, show we're doing something in the messageArea.
$('#messageArea').html('<h3>(loading)</h3>');
var message = "<p>Query ID: "+ d.id +"</p>"
Expand Down Expand Up @@ -185,27 +188,31 @@ var graphioGremlin = (function(){

//////////////////////////////////////////////////////////////////////////////////////////////////
function handle_server_answer(data,query_type,active_node,message){
if (query_type=='click'){
var graph = arrange_data_path(data);
//console.log(graph)
var center_f = 0;
graph_viz.refresh_data(graph,center_f,active_node); //center_f=0 mean no attraction to the center for the nodes
if (COMMUNICATION_METHOD == 'GraphSON3'){
data = graphson3to2(data);
var arrange_data = arrange_datav3;
} else{
var arrange_data = arrange_datav2;
}
else if (query_type=='search'){
var graph = arrange_data(data);
//console.log(graph)
var center_f = 1;
graph_viz.refresh_data(graph,center_f,active_node);
}
else if (query_type=='graphInfo'){
if (query_type=='graphInfo'){
infobox.display_graph_info(data);
_node_properties = make_properties_list(data[1][0]);
_edge_properties = make_properties_list(data[3][0]);
change_nav_bar(_node_properties,_edge_properties);
display_properties_bar(_node_properties,'nodes','Node properties:');
display_properties_bar(_edge_properties,'edges','Edge properties:');
display_color_choice(_node_properties,'nodes','Node color by:');
} else {
console.log(data);
var graph = arrange_data(data);
console.log(graph)
if (query_type=='click') var center_f = 0; //center_f=0 mean no attraction to the center for the nodes
else if (query_type=='search') var center_f = 1;
else return;
graph_viz.refresh_data(graph,center_f,active_node);
}


$('#outputArea').html(message);
$('#messageArea').html('');
}
Expand All @@ -216,9 +223,9 @@ var graphioGremlin = (function(){
function make_properties_list(data){
var prop_dic = {};
for (var prop_str in data){
prop_str = prop_str.slice(0,-1);
prop_str = prop_str.replace(/[\[\ \"\'\]]/g,''); // get rid of symbols [,",',] and spaces
var prop_list = prop_str.split(',');
prop_list = prop_list.map(function (e){e=e.slice(1); return e;});
//prop_list = prop_list.map(function (e){e=e.slice(1); return e;});
for (var prop_idx in prop_list){
prop_dic[prop_list[prop_idx]] = 0;
}
Expand All @@ -241,7 +248,7 @@ var graphioGremlin = (function(){
}

/////////////////////////////////////////////////////////////
function arrange_data(data) {
function arrange_datav2(data) {
// Extract node and edges from the data returned for 'search' request
// Create the graph object
var nodes=[], links=[];
Expand All @@ -256,6 +263,43 @@ var graphioGremlin = (function(){
return {nodes:nodes, links:links};
}

function arrange_datav3(data) {
// Extract node and edges from the data returned for 'search' request
// Create the graph object
var nodes=[], links=[];
for (var key in data){
data[key].forEach(function (item) {
if (!("inV" in item) && idIndex(nodes,item.id) == null){ // if vertex and not already in the list
item.type = "vertex";
nodes.push(extract_infov3(item));
}
if (("inV" in item) && idIndex(links,item.id) == null){
item.type = "edge";
links.push(extract_infov3(item));
}
});
}
return {nodes:nodes, links:links};
}
/*
function arrange_datav3(data) {
// Extract node and edges from the data returned for 'search' request
// Create the graph object
var nodes=[], links=[];
data[0].forEach(function (item) {
item.type = "vertex";
//console.log(item);
if (idIndex(nodes,item.id) == null) // if vertex and not already in the list
nodes.push(extract_infov3(item));
});
data[1].forEach(function (item) {
item.type = "edge";
if (idIndex(links,item.id) == null)
links.push(extract_infov3(item));
});
return {nodes:nodes, links:links};
}
*/
function arrange_data_path(data) {
// Extract node and edges from the data returned for 'click' request
// Create the graph object
Expand All @@ -271,12 +315,32 @@ var graphioGremlin = (function(){
return {nodes:nodes, links:links};
}

function arrange_data_pathv3(data) {
// Extract node and edges from the data returned for 'search' request
// Create the graph object
var nodes=[], links=[];
for (var key in data){
data[key].objects.forEach(function (item) {
if (!("inV" in item) && idIndex(nodes,item.id) == null){ // if vertex and not already in the list
item.type = "vertex";
nodes.push(extract_infov3(item));
}
if (("inV" in item) && idIndex(links,item.id) == null){
item.type = "edge";
links.push(extract_infov3(item));
}
});
}
return {nodes:nodes, links:links};
}

function extract_info(data) {
var data_dic = {id:data.id, label:data.label, type:data.type, properties:{}}
var prop_dic = data.properties
for (var key in prop_dic) {
if (prop_dic.hasOwnProperty(key)) {
data_dic.properties[key] = prop_dic[key]}
data_dic.properties[key] = prop_dic[key]
}
}
if (data.type=="edge"){
data_dic.source = data.outV
Expand All @@ -285,7 +349,70 @@ var graphioGremlin = (function(){
return data_dic
}


function extract_infov3(data) {
var data_dic = {id:data.id, label:data.label, type:data.type, properties:{}}
var prop_dic = data.properties
console.log(prop_dic)
for (var key in prop_dic) {
if (prop_dic.hasOwnProperty(key)) {
if (data.type == 'vertex'){
var property = get_vertex_prop_in_list(prop_dic[key]);
} else {
var property = prop_dic[key]['value'];
}
property = property.toString();
data_dic.properties[key] = property;
}
}
if (data.type=="edge"){
data_dic.source = data.outV
data_dic.target = data.inV
}
return data_dic
}

function get_vertex_prop_in_list(property){
var prop_value_list = [];
for (var vertexprop in property){
//console.log(vertexprop);
prop_value_list.push(property[vertexprop]['value']);
}
return prop_value_list;
}

function graphson3to2(data){
if (!(Array.isArray(data) || ((typeof data === "object") && (data !== null)) )) return data;
if ('@type' in data) {
if (data['@type']=='g:List'){
data = data['@value'];
return graphson3to2(data);
} else if (data['@type']=='g:Set'){
data = data['@value'];
return data;
} else if(data['@type']=='g:Map'){
var data_tmp = {}
for (var i=0;i<data['@value'].length;i+=2){
var data_key = data['@value'][i];
if( (typeof data_key === "object") && (data_key !== null) ) data_key = graphson3to2(data_key);
//console.log(data_key);
if (Array.isArray(data_key)) data_key = JSON.stringify(data_key).replace(/\"/g,' ');//.toString();
data_tmp[data_key] = graphson3to2(data['@value'][i+1]);
}
data = data_tmp;
return data;
} else {
data = data['@value'];
if ( (typeof data === "object") && (data !== null) ) data = graphson3to2(data);
return data;
}
} else if (Array.isArray(data) || ((typeof data === "object") && (data !== null)) ){
for (var key in data){
data[key] = graphson3to2(data[key]);
}
return data;
}
return data;
}

return {
get_node_properties : get_node_properties,
Expand Down
45 changes: 39 additions & 6 deletions scripts/infobox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,12 +123,7 @@ var infobox = (function(){
var info_table = _table_DBinfo.append("tbody");
if (d.type=='vertex'){
for (var key in d.properties){
for (var subkey in d.properties[key]){
var new_info_row = info_table.append("tr");
new_info_row.append("td").text(key).style("font-size",_font_size);
new_info_row.append("td").text(d.properties[key][subkey].value).style("font-size",_font_size);
new_info_row.append("td").text(d.properties[key][subkey].id).style("font-size",_font_size);// TODO: handle VertexProperty
}
_display_vertex_properties(key,d.properties[key],info_table)
}
}
else {
Expand All @@ -141,6 +136,44 @@ var infobox = (function(){
}
}

function _display_vertex_properties(key,value,info_table) {// TODO: truely handle VertexProperty
if (COMMUNICATION_METHOD == 'GraphSON2'){
for (var subkey in value){
var new_info_row = info_table.append("tr");
new_info_row.append("td").text(key).style("font-size",_font_size);
new_info_row.append("td").text(value[subkey].value).style("font-size",_font_size);
new_info_row.append("td").text(value[subkey].id).style("font-size",_font_size);
}
} else {
var new_info_row = info_table.append("tr");
new_info_row.append("td").text(key);
new_info_row.append("td").text(value).style("font-size",_font_size);
new_info_row.append("td").text("");
}
}
/*
function _display_DBinfo(d){
_table_DBinfo.select("tbody").remove();
var info_table = _table_DBinfo.append("tbody");
if (d.type=='vertex'){
for (var key in d.properties){
var new_info_row = info_table.append("tr");
new_info_row.append("td").text(key).style("font-size",_font_size);
new_info_row.append("td").text(d.properties[key]).style("font-size",_font_size);
new_info_row.append("td").text("");
}
}
else {
for (var key in d.properties){
var new_info_row = info_table.append("tr");
new_info_row.append("td").text(key);
new_info_row.append("td").text(d.properties[key]);
new_info_row.append("td").text("");
}
}
}
*/

return {
create : create,
display_info : display_info,
Expand Down

0 comments on commit 656bdab

Please sign in to comment.