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.
bricaud · Apr 9, 2018 · 36f92de · 36f92de
1 parent 47cf25d
commit 36f92de
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 28 deletions.
diff --git 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
@@ -49,23 +49,38 @@ <h1 class="header-heading">Graph Explorer v 0.6</h1>
 		</div>
 		-->
 		<div class="nav-bar">
-			<div class="container" id="nav_bar">
-				<ul class="nav">
-					<li>
-						Enter a field: <span id="prop_choice"><input name="search_field" id="search_field" value="" /></span>
-					</li>
-					<li>
-						Enter a Keyword/value: <input name="search_value" id="search_value" value="" />
-					</li>
-					<li><button name="search query" onclick="search_query();">Search</button></li>
-					<li><button name="clear" onclick="graph_viz.clear();">Clear</button></li>
-					<li><input type="checkbox" name="Freeze" id="freeze-in" />Freeze exploration</li>
-					<li>
-						<input type="checkbox" name="showName_box" id="showName" onclick="graphShapes.show_names()"/>Show labels
-					</li>
-					<li><input type="number" id="nbLayers" min="1" max="128" onclick="set_nb_layers()"> Nb of layers.
-					</li>
-				</ul>
+			<div class="nav container" id="nav_bar">
+				<div class="nav inputs_container">
+					<div class="nav input_unit_container">
+						<label for="search_field">Enter a field: </label>
+						<input name="search_field" id="search_field" value="" />
+					</div>
+					<div class="nav input_unit_container">
+						<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 class="nav input_label" for="edge_filter">Traverse by edge: </label>
+						<input name="edge_filter" id="edge_filter" value="" />
+					</div>
+					<div class="nav input_unit_container">
+						<label class="nav input_label" for="nbLayers">Nb of layers </label>
+						<input type="number" id="nbLayers" min="1" max="128" onclick="set_nb_layers()">
+					</div>
+					<div class="nav input_unit_container">
+						<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>
+					</div>
+				</div>
+				<div class="nav controls">
+					<button name="search query" onclick="search_query();">Search</button>
+					<button name="clear" onclick="graph_viz.clear();">Clear</button>
+				</div>
 			</div>
 		</div>
 		<div class="content">

diff --git 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
@@ -134,15 +134,16 @@ 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)
                 var id = d.id;
                 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('<h3>(loading)</h3>');