Skip to content

Commit

Permalink
Add more options to filter (#21)
Browse files Browse the repository at this point in the history 
* Allow to filter by label, search with contains instead of equals and limit the results

* Move the semi-colons to the single commands instead of appending them when concatenating the commands

* Change tabs to spaces in search_query to have a consistent indentation

* Reindent SINGLE_COMMANDS_AND_NO_VARS condition and missing semicolons

* Fix merge conflicts
  • Loading branch information
@Erly @bricaud
Erly authored and bricaud committed Apr 13, 2018
1 parent 24baf93 commit 942cbe7
Show file tree
Hide file tree
Showing 4 changed files with 83 additions and 64 deletions.
12 changes: 2 additions & 10 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,6 @@ a:active { color: red; }
Layout styles
------------------------*/



.header
{
color: #000;
Expand Down Expand Up @@ -105,22 +103,16 @@ Layout styles

.nav.inputs_container {
grid-row: 1 / 2;

display: grid;
grid-template-columns: auto auto auto auto;
grid-template-columns: auto auto auto auto auto;
grid-auto-flow: row;

}

.nav.input_unit_container {
padding: 5px;
align-self: center;
}

input[type="number"] {
display:block;
}

.nav.input_label {
white-space:nowrap;
}
Expand All @@ -131,7 +123,6 @@ input[type="number"] {
padding-top: 5px;
}


.content
{
padding: 0em 0em;
Expand Down Expand Up @@ -166,6 +157,7 @@ input[type="number"] {
position: absolute;
right: 0;
margin-right: 1em;
max-width: 25%;
}

.footer
Expand Down
16 changes: 15 additions & 1 deletion graphexp.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,10 @@ <h1 class="header-heading">Graph Explorer v 0.6</h1>
<div class="nav-bar">
<div class="nav container" id="nav_bar">
<div class="nav inputs_container">
<div class="nav input_unit_container">
<label for="label_field">Enter a label:</label>
<input name="label_field" id="label_field" value="" />
</div>
<div class="nav input_unit_container">
<label for="search_field">Enter a field: </label>
<input name="search_field" id="search_field" value="" />
Expand All @@ -59,6 +63,17 @@ <h1 class="header-heading">Graph Explorer v 0.6</h1>
<label class="nav input_label" for="search_value">Enter a Keyword/value: </label>
<input name="search_value" id="search_value" value="" />
</div>
<div class="nav input_unit_container">
<label for="search_type">Type of search:</label>
<select name="search_type" id="search_type">
<option value="eq">Equals</option>
<option value="contains">Contains</option>
</select>
</div>
<div class="nav input_unit_container">
<label for="limit_field">Results limit:</label>
<input name="limit_field" id="limit_field" value="50" min="1" max="1000" type="number" />
</div>
<div class="nav input_unit_container">
<label class="nav input_label" for="edge_filter">Traverse by edge: </label>
<input name="edge_filter" id="edge_filter" value="" />
Expand All @@ -71,7 +86,6 @@ <h1 class="header-heading">Graph Explorer v 0.6</h1>
<input type="checkbox" name="Freeze" id="freeze-in" />
<label class="nav input_label" for="freeze-in">Freeze exploration</label>
</div>

<div class="nav input_unit_container">
<input type="checkbox" name="showName_box" id="showName" onclick="graphShapes.show_names()"/>
<label class="nav input_label" for="showName">Show labels</label>
Expand Down
8 changes: 4 additions & 4 deletions scripts/graphConf.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@

// configuration for the graph database access
const HOST = "localhost"
const PORT = "8182"
const HOST = "localhost";
const PORT = "8182";

// for implementations like Neptune where only single commands are allowed per request
// set to true
Expand All @@ -15,8 +15,8 @@ const COMMUNICATION_PROTOCOL = "REST";

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

// Graph configuration
const default_nb_of_layers = 3;
Expand Down
111 changes: 62 additions & 49 deletions scripts/graphioGremlin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,11 +66,11 @@ var graphioGremlin = (function(){
send_to_server(node_prop_query, null, null, null, function(nodeProps){
send_to_server(edge_prop_query, null, null, null, function(edgeProps){
var combinedData = [nodeLabels, nodeProps, edgeLabels, edgeProps];
console.log("Combined data", combinedData);
console.log("Combined data", combinedData);
handle_server_answer(combinedData,'graphInfo',null,message);
});
});
});
});
});
} else {
send_to_server(gremlin_query,'graphInfo',null,message)
Expand All @@ -79,54 +79,67 @@ var graphioGremlin = (function(){



function search_query() {
// Preprocess query
var input_string = $('#search_value').val();
var input_field = $('#search_field').val();
//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
var gremlin_query_nodes = null;
var gremlin_query_edges = null;
if (input_string==""){
gremlin_query_nodes = "nodes = g.V().limit("+node_limit_per_request+")"
gremlin_query_edges = "edges = g.V().limit("+node_limit_per_request+").aggregate('node').outE().as('edge').inV().where(within('node')).select('edge')"
var gremlin_query = gremlin_query_nodes+"\n"+gremlin_query_edges+"\n"+"[nodes.toList(),edges.toList()]"

}
else{
if (isInt(input_string)){
var has_str = "has('"+input_field+"',"+filtered_string+")"
} else {
var has_str = "has('"+input_field+"','"+filtered_string+"')"
}
var gremlin_query = "g.V()."+has_str
gremlin_query_nodes = "nodes = g.V()."+has_str
gremlin_query_edges = "edges = g.V()."+has_str
+".aggregate('node').outE().as('edge').inV().where(within('node')).select('edge')"
var gremlin_query = gremlin_query_nodes+"\n"+gremlin_query_edges+"\n"+"[nodes.toList(),edges.toList()]"
console.log(gremlin_query)
}
function search_query() {
// Preprocess query
let input_string = $('#search_value').val();
let input_field = $('#search_field').val();
let label_field = $('#label_field').val();
let limit_field = $('#limit_field').val();
let search_type = $('#search_type').val();
//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
let has_str = "";
if (label_field !== "") {
has_str = ".hasLabel('" + label_field + "')";
}
if (input_field !== "" && input_string !== "") {
has_str += ".has('" + input_field + "',";
switch (search_type) {
case "eq":
if (isInt(input_string)){
has_str += filtered_string + ")"
} else {
has_str += "'" + filtered_string + "')"
}
break;
case "contains":
has_str += "textContains('" + filtered_string + "'))";
break;
}
} else if (limit_field === "" || limit_field < 0) {
limit_field = node_limit_per_request;
}

// while busy, show we're doing something in the messageArea.
$('#messageArea').html('<h3>(loading)</h3>');
var message = "<p>Query: '"+ filtered_string +"'</p>"
if(SINGLE_COMMANDS_AND_NO_VARS){
var nodeQuery = create_single_command(gremlin_query_nodes);
var edgeQuery = create_single_command(gremlin_query_edges);
console.log("Node query: "+nodeQuery);
console.log("Edge query: "+edgeQuery);
send_to_server(nodeQuery, null, null, null, function(nodeData){
send_to_server(edgeQuery, null, null, null, function(edgeData){
var combinedData = [nodeData,edgeData];
handle_server_answer(combinedData, 'search', null, message);
});
});
} else {
send_to_server(gremlin_query,'search',null,message)
}
}
let gremlin_query_nodes = "nodes = g.V()" + has_str;
if (limit_field !== "" && isInt(limit_field) && limit_field > 0) {
gremlin_query_nodes += ".limit(" + limit_field + ").toList();";
} else {
gremlin_query_nodes += ".toList();";
}
let gremlin_query_edges = "edges = g.V(nodes).aggregate('node').outE().as('edge').inV().where(within('node')).select('edge').toList();";
let gremlin_query = gremlin_query_nodes + gremlin_query_edges + "[nodes,edges]";
console.log(gremlin_query);

// while busy, show we're doing something in the messageArea.
$('#messageArea').html('<h3>(loading)</h3>');
var message = "<p>Query: '"+ filtered_string +"'</p>";
if (SINGLE_COMMANDS_AND_NO_VARS) {
var nodeQuery = create_single_command(gremlin_query_nodes);
var edgeQuery = create_single_command(gremlin_query_edges);
console.log("Node query: "+nodeQuery);
console.log("Edge query: "+edgeQuery);
send_to_server(nodeQuery, null, null, null, function(nodeData){
send_to_server(edgeQuery, null, null, null, function(edgeData){
var combinedData = [nodeData,edgeData];
handle_server_answer(combinedData, 'search', null, message);
});
});
} else {
send_to_server(gremlin_query,'search',null,message);
}
}

function isInt(value) {
return !isNaN(value) &&
Expand Down

0 comments on commit 942cbe7

Please sign in to comment.