correct small bugs

README.md

@@ -1,6 +1,6 @@
 # Graphexp: graph explorer with D3.js
 
-Graphexp is a javascript interface to explore and display a graph stored in the Gremlin graphdatabase via the Gremlin server. Graphexp is under the Apache 2.0 licence.
+Graphexp is a web interface to explore and display a graph stored in the Gremlin graph database via the Gremlin server. Graphexp is under the Apache 2.0 licence.
 
 ![graphexp](https://github.com/bricaud/graphexp/blob/master/graphexp2.png "Graph exploration")
 
@@ -18,18 +18,29 @@ If the access to the Gremlin server is not `localhost:8182`, the address can be
 
 ## Getting started
 
-If do nothave already installed a gremlin server, download the last release of the [Gremlin server](http://tinkerpop.apache.org/) and follow the [documentation](http://tinkerpop.apache.org/docs/current/reference/#gremlin-server). In the server folder just run
+### Intalling a Gremlin server
+
+If have not yet installed a gremlin server, download the last release of the [Gremlin server](http://tinkerpop.apache.org/) and follow the [documentation](http://tinkerpop.apache.org/docs/current/reference/#gremlin-server). In the server folder just run
 ```
 bin/gremlin-server.sh conf/gremlin-server-rest-modern.yaml
 ```
 or on windows
 ```
 bin/gremlin-server.bat conf/gremlin-server-rest-modern.yaml
 ```
+This default server comes with a small graph database of 6 nodes.
 The server shoud start on port `8182`.
 
+
+Alternatively, if you have Docker installed on your machine, you may run a Docker container with an already configured Gremlin server. You can find one on [this page](https://hub.docker.com/r/bricaud/gremlin-server-REST/). This server have a graph database containing a demo graph: the tree of life, with 35960 nodes and 35959 edges. You can download it and run it using
+```
+docker pull bricaud/gremlin-server-rest
+docker run -p 8182:8182 -it --name gremlin-server-rest bricaud/gremlin-server-rest
+```
+
+### Graphexp guidelines
 To display a node, type in a property name and value, then click on the search button.
-Leaving a blank field and keyword will display the full graph.
+Leaving a blank field and keyword will display the full graph (do not display the full graph if the graph is large!).
 The node and edge properties can be automatically retrieved using the `get graph info` button. Pushing this button will also display some graph properties on the left side of the page.
 
 When a node of the visualization is clicked, it will become 'active' with a circle surround it and its information will be display on the right side of the page. Moreover, this action will trigger the display of its neighbors.
@@ -59,3 +70,9 @@ The program uses:
 * the D3.js library to visualize a graph in an interactive manner, [API Reference](https://github.com/d3/d3/blob/master/API.md),
 * an ajax request (with Jquery) that query the graph database (Gremlin Tinkerpop via REST).
 
+## Tutorial with the tree of life
+Once your gremlin server is up and running (from the [Docker repository](https://hub.docker.com/r/bricaud/gremlin-server-REST/)), click on the `get graph info` button. Information should appear on the left side of the page, like on the following image.
+![graphexp](https://github.com/bricaud/graphexp/blob/master/graphexp2.png "Graph exploration")
+
+
+

graphShapes.js

@@ -177,7 +177,7 @@ var graphShapes = (function(){
 			.attr("ID",function(d) { return d.id;});
 
 
-		graph_viz.create_arrows();
+		graph_viz.create_arrows(edges_deco);
 		// Attach the arrows
 		edges_deco.attr("marker-end", function(d) {return "url(#marker_" + d.id + ")"})
 		.attr('stroke-width', edge_stroke_width)

graph_viz.js

@@ -19,7 +19,7 @@ var graph_viz = (function(){
 		_svg_width = +d3.select(label).node().getBoundingClientRect().width
 		_svg_height = +d3.select(label).node().getBoundingClientRect().height;
 		_svg.attr("width",_svg_width).attr("height",_svg_height);
-		console.log([_svg_width,_svg_height])
+		//console.log([_svg_width,_svg_height])
 
 	}
 
@@ -60,12 +60,17 @@ var graph_viz = (function(){
 		return _Links;
 	}
 
-	function create_arrows(){
-		_svg.selectAll("marker")
-			.data(_Links)
+	function create_arrows(edge_in){
+		var edge_data = edge_in.data();
+		var arrow_data = _svg.selectAll('.arrow').data();
+		var data = arrow_data.concat(edge_data);
+
+		_svg.selectAll('.arrow')
+			.data(data)
 			.enter()
-			.append('svg:marker')
-			.attr('id', function(d){ return 'marker_' + d.id})
+			.append('marker')			
+			.attr('class','arrow')
+			.attr('id', function(d){return 'marker_' + d.id})
 			.attr('markerHeight', 5)
 			.attr('markerWidth', 5)
 			.attr('markerUnits', 'strokeWidth')

graphexp.html

@@ -32,6 +32,8 @@
 
 	function get_graph_info(){
 		graphioGremlin.get_graph_info();
+		infobox.show_element("#graphInfo");
+		document.getElementById ("showgraphinfo").checked = true;
 	}
 </script>
 <!-- ------------------------------------------------- -->
@@ -73,6 +75,7 @@ <h1 class="header-heading">Graph Explorer v 0.4</h1>
 				<div class="aside left_bar" style="background-color:transparent;pointer-events:none;">
 					<div  id="graphInfoBar" style="background-color:transparent;pointer-events:auto;">
 						<button name="graphInfo" onclick="get_graph_info();">Get graph info</button>
+						<input type="checkbox" name="showgraphinfo" id="showgraphinfo" onchange="show_hide_element('#graphInfo')"/>Show/hide graph info
 					</div>
 					<div  id="graphInfo" style="background-color:transparent;pointer-events:none;">	
 					</div>
@@ -119,6 +122,7 @@ <h1 class="header-heading">Graph Explorer v 0.4</h1>
 	function change_nav_bar(node_data,edge_data){
 		var nav_bar = d3.select("#prop_choice");
 		nav_bar.select("input").remove();
+		nav_bar.select("select").remove();
 		//nav_choices = nav_bar.append("ul");
 		//nav_choices.append("li").append("button").attr("onclick",search_query).text("Search")
 		var select = d3.select('#prop_choice')
@@ -145,6 +149,7 @@ <h1 class="header-heading">Graph Explorer v 0.4</h1>
 
 	function display_properties_bar(prop_list,item,text){
 		var nav_bar = d3.select("#graphInfoBar");
+		nav_bar.select("#property_bar_"+item).remove();
 		var property_bar = nav_bar.append("div").attr("id","property_bar_"+item);
 		property_bar.append('text').text(text).style("font-weight","bold");
 		//d3.select('#property_bar').append('text').text('hello')
@@ -166,6 +171,7 @@ <h1 class="header-heading">Graph Explorer v 0.4</h1>
 	function display_color_choice(prop_list,item,text){
 		prop_list = ['none','label'].concat(prop_list);
 		var nav_bar = d3.select("#graphInfoBar");
+		nav_bar.select("#color_choice_"+item).remove();
 		var color_bar = nav_bar.append("div").attr("id","color_choice_"+item);
 		color_bar.append("text").text(text).style("font-weight","bold");
 		color_bar.append("select").attr("class","select").attr("id","color_select_"+item)
@@ -260,7 +266,13 @@ <h1 class="header-heading">Graph Explorer v 0.4</h1>
 
 	}
 
-
+	function show_hide_element(element_label){
+		element = d3.select(element_label);
+		var input = document.getElementById ("showgraphinfo");
+		var isChecked = input.checked;
+		if (isChecked) element.style("display", "inline");
+		else {element.style("display", "none");}
+	}
 
 
 		</script>

infobox.js

@@ -23,6 +23,7 @@ var infobox = (function(){
 		init_table(_table_IDinfo,["Key","Value"]);
 		_table_DBinfo = graphElem_bar.append("table").attr("id","tableDBDetails");
 		init_table(_table_DBinfo,["Key","Value","Id"]);
+		hide_element(label_graph);
 
 	}
 
@@ -66,6 +67,19 @@ var infobox = (function(){
 		}
 	}
 
+	function hide_element(element_label){
+		var element = d3.select(element_label);
+		element.style('display','none');
+	}
+	function show_element(element_label){
+		var element = d3.select(element_label);
+		element.style('display','inline');
+	}
+
+	function show_graph_info(){
+		show_element(_)
+	}
+
 	function display_info(node_data){
 		// remove previous info		
 		_display_IDinfo(node_data)
@@ -120,7 +134,9 @@ var infobox = (function(){
 	return {
 		create : create,
 		display_info : display_info,
-		display_graph_info : display_graph_info
+		display_graph_info : display_graph_info,
+		hide_element : hide_element,
+		show_element : show_element
 	};
 
 })();