From 36f92de8f4b48e9c81b27ef25297fe51fde97c5e Mon Sep 17 00:00:00 2001 From: grreeenn Date: Mon, 9 Apr 2018 21:13:32 +0300 Subject: [PATCH 1/4] 19-filter-by-edge-label Adds a functionality to filter the next exploration step by edge label. Works per step, i.e. the value of the edge_filter field may be changed between exploration steps and the change will take effect on the next step, leaving previous steps untouched. Also makes header a CSS grid with auto rows flow as new fields being added. --- css/styles.css | 46 ++++++++++++++++++++++++++++++++---- graphexp.html | 49 +++++++++++++++++++++++++-------------- scripts/graphConf.js | 8 +++---- scripts/graphioGremlin.js | 5 ++-- 4 files changed, 80 insertions(+), 28 deletions(-) diff --git a/css/styles.css b/css/styles.css index 05d3e09..bc82526 100644 --- a/css/styles.css +++ b/css/styles.css @@ -74,11 +74,7 @@ a:active { color: red; } Layout styles ------------------------*/ -.container -{ - padding: 1em 1.25em; - margin: 0 auto; -} + .header { @@ -96,6 +92,46 @@ Layout styles padding: 0; } +.container +{ + padding: 1em 1.25em; + margin: 0 auto; +} + +.nav.container { + display: grid; + grid-template-rows: auto 15%; +} + +.nav.inputs_container { + grid-row: 1 / 2; + + display: grid; + grid-template-columns: 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; +} + +.nav.controls { + grid-row: 2 / 3; + justify-self: center; + padding-top: 5px; +} + + .content { padding: 0em 0em; diff --git a/graphexp.html b/graphexp.html index 1c88fb2..e29da8e 100644 --- a/graphexp.html +++ b/graphexp.html @@ -49,23 +49,38 @@

Graph Explorer v 0.6

-->
-
diff --git a/scripts/graphConf.js b/scripts/graphConf.js index f480fb9..fcef316 100644 --- a/scripts/graphConf.js +++ b/scripts/graphConf.js @@ -9,14 +9,14 @@ const SINGLE_COMMANDS_AND_NO_VARS = false; // The communication protocol with the server can be "REST" or "websocket" -const COMMUNICATION_PROTOCOL = "REST"; -//const COMMUNICATION_PROTOCOL = "websocket"; +// const COMMUNICATION_PROTOCOL = "REST"; +const COMMUNICATION_PROTOCOL = "websocket"; // TODO: configuration for the secure server // 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; diff --git a/scripts/graphioGremlin.js b/scripts/graphioGremlin.js index 2bf2e6f..68a41b6 100644 --- a/scripts/graphioGremlin.js +++ b/scripts/graphioGremlin.js @@ -134,6 +134,7 @@ var graphioGremlin = (function(){ !isNaN(parseInt(value, 10)); } function click_query(d) { + var edge_filter = $('#edge_filter').val(); // Gremlin query //var gremlin_query = "g.V("+d.id+").bothE().bothV().path()" // 'inject' is necessary in case of an isolated node ('both' would lead to an empty answer) @@ -141,8 +142,8 @@ var graphioGremlin = (function(){ if(isNaN(id)){ id = '"'+id+'"'; } - var gremlin_query_nodes = 'nodes = g.V('+id+').as("node").both().as("node").select(all,"node").inject(g.V('+id+')).unfold()' - var gremlin_query_edges = 'edges = g.V('+id+').bothE()' + var gremlin_query_nodes = 'nodes = g.V('+id+').as("node").both('+(edge_filter?'"'+edge_filter+'"':'')+').as("node").select(all,"node").inject(g.V('+id+')).unfold()' + var gremlin_query_edges = "edges = g.V("+id+").bothE("+(edge_filter?"'"+edge_filter+"'":"")+")"; 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('

(loading)

'); From a1290c1db9906e12a0ecc3f6a83a9b26ac5f0e3c Mon Sep 17 00:00:00 2001 From: grreeenn Date: Mon, 9 Apr 2018 21:16:24 +0300 Subject: [PATCH 2/4] 19-filter-by-edge-label Adds a functionality to filter the next exploration step by edge label. Works per step, i.e. the value of the edge_filter field may be changed between exploration steps and the change will take effect on the next step, leaving previous steps untouched. Also makes header a CSS grid with auto rows flow as new fields being added. --- scripts/graphConf.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/scripts/graphConf.js b/scripts/graphConf.js index fcef316..821dff1 100644 --- a/scripts/graphConf.js +++ b/scripts/graphConf.js @@ -9,14 +9,14 @@ const SINGLE_COMMANDS_AND_NO_VARS = false; // The communication protocol with the server can be "REST" or "websocket" -// const COMMUNICATION_PROTOCOL = "REST"; -const COMMUNICATION_PROTOCOL = "websocket"; +const COMMUNICATION_PROTOCOL = "REST"; +// const COMMUNICATION_PROTOCOL = "websocket"; // TODO: configuration for the secure server // 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; From e6da71ec4f297233ae5446a420352acd5bcc6b45 Mon Sep 17 00:00:00 2001 From: grreeenn Date: Mon, 9 Apr 2018 21:17:48 +0300 Subject: [PATCH 3/4] 19-filter-by-edge-label Adds a functionality to filter the next exploration step by edge label. Works per step, i.e. the value of the edge_filter field may be changed between exploration steps and the change will take effect on the next step, leaving previous steps untouched. Also makes header a CSS grid with auto rows flow as new fields being added. --- scripts/graphioGremlin.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/graphioGremlin.js b/scripts/graphioGremlin.js index 68a41b6..8bef7e8 100644 --- a/scripts/graphioGremlin.js +++ b/scripts/graphioGremlin.js @@ -134,7 +134,7 @@ var graphioGremlin = (function(){ !isNaN(parseInt(value, 10)); } function click_query(d) { - var edge_filter = $('#edge_filter').val(); + var edge_filter = $('#edge_filter').val(); // Gremlin query //var gremlin_query = "g.V("+d.id+").bothE().bothV().path()" // 'inject' is necessary in case of an isolated node ('both' would lead to an empty answer) @@ -143,7 +143,7 @@ var graphioGremlin = (function(){ id = '"'+id+'"'; } var gremlin_query_nodes = 'nodes = g.V('+id+').as("node").both('+(edge_filter?'"'+edge_filter+'"':'')+').as("node").select(all,"node").inject(g.V('+id+')).unfold()' - var gremlin_query_edges = "edges = g.V("+id+").bothE("+(edge_filter?"'"+edge_filter+"'":"")+")"; + var gremlin_query_edges = "edges = g.V("+id+").bothE("+(edge_filter?"'"+edge_filter+"'":"")+")"; 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('

(loading)

'); From 6e547cef5d184555d4f8630d2fe4c8f657414588 Mon Sep 17 00:00:00 2001 From: grreeenn Date: Mon, 9 Apr 2018 21:18:48 +0300 Subject: [PATCH 4/4] 19-filter-by-edge-label Adds a functionality to filter the next exploration step by edge label. Works per step, i.e. the value of the edge_filter field may be changed between exploration steps and the change will take effect on the next step, leaving previous steps untouched. Also makes header a CSS grid with auto rows flow as new fields being added. --- scripts/graphConf.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/graphConf.js b/scripts/graphConf.js index 821dff1..f480fb9 100644 --- a/scripts/graphConf.js +++ b/scripts/graphConf.js @@ -10,13 +10,13 @@ const SINGLE_COMMANDS_AND_NO_VARS = false; // The communication protocol with the server can be "REST" or "websocket" const COMMUNICATION_PROTOCOL = "REST"; -// const COMMUNICATION_PROTOCOL = "websocket"; +//const COMMUNICATION_PROTOCOL = "websocket"; // TODO: configuration for the secure server // 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 = "GraphSON3" // Graph configuration const default_nb_of_layers = 3;