Skip to content

Commit

Permalink
Merge branch 'sandecho-editGraph'
Browse files Browse the repository at this point in the history
  • Loading branch information
@bricaud
bricaud committed Jun 9, 2018
2 parents f3c8b6d + 13c56d7 commit 46a9972
Show file tree
Hide file tree
Showing 3 changed files with 251 additions and 12 deletions.
78 changes: 78 additions & 0 deletions graphexp.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
<script src="scripts/infobox.js"></script>
<script src="scripts/graph_viz.js"></script>
<script src="scripts/graphioGremlin.js"></script>
<script src="scripts/editGraph.js"></script>

<script type="text/javascript">

Expand Down Expand Up @@ -154,6 +155,83 @@ <h1 class="header-heading">Graph Explorer v 0.6</h1>
<option value="GraphSON2">3.2.*</option>
</select>
</div>
<div class="nav input_unit_container">
<button onclick="editGraph()" > Edit Graph </button>
</div>

<div class="nav input_unit_container", id="editGraph" style="display:none;">
<button onclick="addVertexForm()" style="height:25px; width:150px" > Add Vertex </button><br>
<button onclick="editVertexForm()" style="height:25px; width:150px" > Edit Vertex </button><br>
<button onclick="addEditEdgeForm()" style="height:25px; width:150px" > Add/Edit Edge </button><br>
</div>

<div class="nav input_unit_container", id="addVertexForm" style="display:none;">
<table>
<tr>
<td><label for="vertexLabel" style="height:18px; width:200px"> Vertex Label: </label> </td>
<td><input type="text" name="vertexLabel" id="vertexLabel" style="height:18px; width:500px" placeholder="Enter Vertex Label"></td>
</tr>
<tr>
<td><label for="vertexPropertyName" style="height:18px; width:200px"> Vertex Property: </label> </td>
<td><input type="text" name="vertexPropertyName" id="vertexPropertyName" style="height:18px; width:500px" placeholder="Enter Comma Seperated Property Name (e.g. name,age,gender)"> </td>
</tr>
<tr>
<td><label for="vertexPropertyValue" style="height:18px; width:200px"> Property Value: </label> </td>
<td><input type="text" name="vertexPropertyValue" id="vertexPropertyValue" style="height:18px; width:500px" placeholder="Enter Comma Seperated Property Value (e.g. Sandeep,27,male)"> </td>
</tr>
</table>
<button class=Center" style="margin-top:1%" onclick="addVertex()"> Add Vertex </button>
</div>

<div class="nav input_unit_container", id="editVertexForm" style="display:none;">
<table>
<tr>
<td><label for="vertexId" style="height:18px; width:500px" "display: inline-block"> Vertex ID: </label> </td>
<td><input type="text" name="vertexId" id="vertexId" style="height:18px; width:500px" placeholder="Enter Vertex ID (e.g. 123)"> </td>
</tr>
<tr>
<td><label for="vertexPropertyName" style="height:18px; width:500px" "display: inline-block"> Vertex Property: </label> </td>
<td><input type="text" name="vertexPropertyName_1" id="vertexPropertyName_1" style="height:18px; width:500px" placeholder="Enter Comma Seperated Property Name (e.g. name,age)"> </td>
</tr>
<tr>
<td><label for="vertexPropertyValue" style="height:18px; width:200px" "display: inline-block"> Property Value: </label> </td>
<td><input type="text" name="vertexPropertyValue_1" id="vertexPropertyValue_1" style="height:18px; width:500px" placeholder="Enter Comma Seperated Property Value (e.g. Sandeep,25)"> </td>
</tr>
</table>
<button class=Center" style="margin-top:1%" onclick="editVertex()"> Edit Vertex </button>

</div>


<div class="nav input_unit_container", id="addEditEdgeForm" style="display:none;">
<table>
<tr>
<td><label for="edgeLabel" style="height:18px; width:350px" > Edge Label: </label> </td>
<td><input type="text" name="edgeLabel" id="edgeLabel" style="height:18px; width:500px" placeholder="Enter Edge Label"> </td>
</tr>
<tr>
<td><label for="sourceVertexId" style="height:18px; width:350px"> Source Vertex ID: </label> </td>
<td><input type="text" name="sourceVertexId" id="sourceVertexId" style="height:18px; width:500px" placeholder="Enter Source Vertex ID"> </td>
</tr>
<tr>
<td><label for="targetVertexId" style="height:18px; width:350px"> Target Vertex ID: </label> </td>
<td><input type="text" name="targetVertexId" id="targetVertexId" style="height:18px; width:500px" placeholder="Enter Target Vertex ID"> </td>
</tr>
<tr>
<td><label for="edgePropertyName" style="height:18px; width:350px"> Property Name: </label> </td>
<td><input type="text" name="edgePropertyName" id="edgePropertyName" style="height:18px; width:500px" placeholder="Enter Comma Seperated Property Name"> </td>
</tr>
<tr>
<td><label for="edgePropertyValue" style="height:18px; width:350px"> Property Value: </label> </td>
<td><input type="text" name="edgePropertyValue" id="edgePropertyValue" style="height:18px; width:500px" placeholder="Enter Comma Seperated Property Value"> </td>
</tr>
</table>
<button class=Center" style="margin-top:1%" onclick="addEditEdge()"> Add/Edit Edge </button>
</div>




</div>
<a href="http://www.github.com/bricaud/graphexp">Graph Explorer V 0.8.0</a>
</div>
Expand Down
130 changes: 130 additions & 0 deletions scripts/editGraph.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
function editGraph() {
var x = document.getElementById("editGraph")
if(x.style.display == "none"){
x.style.display = "block";
}
else{
x.style.display ="none" ;
}
document.getElementById("addVertexForm").style.display='none';
document.getElementById("editVertexForm").style.display='none';
document.getElementById("addEditEdgeForm").style.display='none';

}

function addVertexForm() {
document.getElementById("addVertexForm").style.display='block';
document.getElementById("editVertexForm").style.display='none';
document.getElementById("addEditEdgeForm").style.display='none';
}

function editVertexForm() {
document.getElementById("addVertexForm").style.display='none';
document.getElementById("editVertexForm").style.display='block';
document.getElementById("addEditEdgeForm").style.display='none';
}


function addEditEdgeForm() {
document.getElementById("addVertexForm").style.display='none';
document.getElementById("editVertexForm").style.display='none';
document.getElementById("addEditEdgeForm").style.display='block';

}

function addVertex() {

let vertexLabel = $('#vertexLabel').val();
let vertexPropertyName = $('#vertexPropertyName').val();
//vertexPropertyName = vertexPropertyName.replace(/\s/g,'');
let vertexPropertyValue = $('#vertexPropertyValue').val();
//vertexPropertyValue = vertexPropertyValue.replace(/\s/g,'');
propertyName = vertexPropertyName.split(",");
propertyValue = vertexPropertyValue.split(",");
var valueLen = propertyValue.length;
var nameLen = propertyName.length;
if(nameLen != valueLen){
alert("Please enter same number of property name and property value")
}
else{
document.getElementById('vertexLabel').value='';
document.getElementById('vertexPropertyName').value='';
document.getElementById('vertexPropertyValue').value='';
var gremlin_query = "g.addV('"+vertexLabel+"')"
for(count =0; count<nameLen; count++){
gremlin_query=gremlin_query+".property('"+propertyName[count]+"' , '" + propertyValue[count]+ "')"
}
var message=""
graphioGremlin.send_to_server(gremlin_query, 'editGraph', null, message);
console.log(gremlin_query)
console.log("Add Vertex")
//window.alert("Vertex Added Succesfully")
editGraph();
}
}

function editVertex() {

let vertexId = $('#vertexId').val();
let vertexPropertyName_1 = $('#vertexPropertyName_1').val();
// vertexPropertyName_1 = vertexPropertyName_1.replace(/\s/g,'');
let vertexPropertyValue_1 = $('#vertexPropertyValue_1').val();
// vertexPropertyValue_1 = vertexPropertyValue_1.replace(/\s/g,'');
propertyName = vertexPropertyName_1.split(",");
propertyValue = vertexPropertyValue_1.split(",");
var valueLen = propertyValue.length;
var nameLen = propertyName.length;
if(nameLen != valueLen){
alert("Please enter same number of property name and property value")
}
else{
document.getElementById('vertexId').value='';
document.getElementById('vertexPropertyName_1').value='';
document.getElementById('vertexPropertyValue_1').value='';
var gremlin_query = "g.V('"+vertexId+"')"
for(count =0; count<nameLen; count++){
gremlin_query=gremlin_query+".property('"+propertyName[count]+"' , '" + propertyValue[count]+ "')"
}
console.log(gremlin_query)
var message=""
graphioGremlin.send_to_server(gremlin_query, 'editGraph', null, message);
console.log("Edit Vertex")
//window.alert("Vertex Edited Succesfully")
editGraph();
}
}

function addEditEdge() {

let edgeLabel = $('#edgeLabel').val();
let sourceVertexId = $('#sourceVertexId').val();
let targetVertexId = $('#targetVertexId').val();
let edgePropertyName = $('#edgePropertyName').val();
//edgePropertyName = edgePropertyName.replace(/\s/g,'');
let edgePropertyValue = $('#edgePropertyValue').val();
//edgePropertyValue = edgePropertyValue.replace(/\s/g,'');
propertyName = edgePropertyName.split(",");
propertyValue = edgePropertyValue.split(",");
var valueLen = propertyValue.length;
var nameLen = propertyName.length;
if(nameLen != valueLen){
alert("Please enter same number of property name and property value")
}
else{
document.getElementById('edgeLabel').value='';
document.getElementById('edgePropertyName').value='';
document.getElementById('edgePropertyValue').value='';
var gremlin_query = "g.V('"+sourceVertexId+"').addE('"+edgeLabel+"').to(V('" +targetVertexId+"'))"
for(count =0; count<nameLen; count++){
gremlin_query=gremlin_query+".property('"+propertyName[count]+"' , '" + propertyValue[count]+ "')"
}
gremlin_query=gremlin_query+".iterate()";
var message="";
graphioGremlin.send_to_server(gremlin_query, 'editGraph', null, message);console.log(gremlin_query)
console.log("Add Edge")
//window.alert("Edge Added Succesfully")
editGraph();
}
}


55 changes: 43 additions & 12 deletions scripts/graphioGremlin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -235,11 +235,19 @@ var graphioGremlin = (function(){
},
error: function(result, status, error){
console.log("Connection failed. "+status);
$('#outputArea').html("<p> Can't access database using REST at "+server_url+"</p>"+
"<p> Message: "+status+ ", "+error+" </p>"+
"<p> Check the server configuration "+
"or try increasing the REST_TIMEOUT value in the config file.</p>");
$('#messageArea').html('');
if (query_type == 'editGraph'){
$('#outputArea').html("<p> Problem accessing the database using REST at "+server_url+"</p>"+
"<p> Message: "+status+ ", "+error+" </p>"+
"<p> Possible cause: creating a edge with bad node ids "+
"(linking nodes not existing in the DB). </p>");
$('#messageArea').html('');
} else {
$('#outputArea').html("<p> Can't access database using REST at "+server_url+"</p>"+
"<p> Message: "+status+ ", "+error+" </p>"+
"<p> Check the server configuration "+
"or try increasing the REST_TIMEOUT value in the config file.</p>");
$('#messageArea').html('');
}
}
});
}
Expand All @@ -266,18 +274,34 @@ var graphioGremlin = (function(){
ws.onerror = function (err){
console.log('Connection error using websocket');
console.log(err);
$('#outputArea').html("<p> Connection error using websocket</p>"
+"<p> Cannot connect to "+server_url+ " </p>");
$('#messageArea').html('');
if (query_type == 'editGraph'){
$('#outputArea').html("<p> Connection error using websocket</p>"
+"<p> Problem accessing "+server_url+ " </p>"+
"<p> Possible cause: creating a edge with bad node ids "+
"(linking nodes not existing in the DB). </p>");
$('#messageArea').html('');
} else {$('#outputArea').html("<p> Connection error using websocket</p>"
+"<p> Cannot connect to "+server_url+ " </p>");
$('#messageArea').html('');
}

};
ws.onmessage = function (event){
var response = JSON.parse(event.data);
var data = response.result.data;
if (data == null){
$('#outputArea').html(response.status.message);
$('#messageArea').html('Server error. No data.');
return 1;}
if (query_type == 'editGraph'){
$('#outputArea').html(response.status.message);
$('#messageArea').html('Could not write data to DB.' +
"<p> Possible cause: creating a edge with bad node ids "+
"(linking nodes not existing in the DB). </p>");
return 1;
} else {
$('#outputArea').html(response.status.message);
$('#messageArea').html('Server error. No data.');
return 1;
}
}
//console.log(data)
if(callback){
callback(data);
Expand All @@ -299,6 +323,12 @@ var graphioGremlin = (function(){
//////////////////////////////////////////////////////////////////////////////////////////////////
function handle_server_answer(data,query_type,active_node,message){
let COMMUNICATION_METHOD = $('#communication_method').val();
if (query_type == 'editGraph'){
//console.log(data)
$('#outputArea').html("<p> Data successfully written to the DB.</p>");
$('#messageArea').html('');
return // TODO handle answer to check if data has been written
}
//console.log(COMMUNICATION_METHOD)
if (COMMUNICATION_METHOD == 'GraphSON3'){
//console.log(data)
Expand Down Expand Up @@ -502,6 +532,7 @@ function get_vertex_prop_in_list(vertexProperty){
get_edge_properties : get_edge_properties,
get_graph_info : get_graph_info,
search_query : search_query,
click_query :click_query
click_query : click_query,
send_to_server : send_to_server
}
})();

0 comments on commit 46a9972

Please sign in to comment.