Cedrick Lunven

This post is the second and last part of a series digging into integration of Graph Databases with web applications. In <a href="/blog/2018/08/work-dse-graph-your-web-applications-part-12-crud-operations">Part 1</a>, we created a data access object (DAO) to implement basic CRUD operations for both vertices and edges. Here, we will have a closer look at graph visualization in user interfaces. One of the coolest features of graph is the capability to browse the data to identiy patterns and extract information from relationships. DataStax Studio provides with great visual&nbsp;rendering but, why not having the same visualization in your own applications?

<h2>What's the idea?</h2>

For an overview of the solution, please look at the diagram on the left. When it comes to architecture, a picture is worth a thousand words.

Here are the steps and components we will review.

<ol>
	<li>User POSTs a Gremlin query to the REST API</li>
	<li>The query is converted from String to <code>GraphStatement</code> and executed at the DAO level</li>
	<li>Driver returns a <code>GraphResultSet</code></li>
	<li>Mapper translates the result set to web beans with the structure expected by the front end</li>
	<li>Graph is rendered using the Javascript library VisJs</li>
	<li>Specialisation and customisation can be done in both Mapper and CSS.</li>
</ol>

<h2>Implementation</h2>

<h3>Rendering charts in user interface</h3>

When you need to deal with rich user interfaces, Javascript is a no brainer, alternative solutions like Flash or applets are long since obsolete. You can find dozens of frameworks to render charts with JS. I have used a couple myself in the past &nbsp;and am very keen on <a href="https://d3js.org/">D3js</a> and <a href="https://www.highcharts.com/">HighCharts</a>. You can see and run my experiments on github if interested using the following :

<code>git clone https://github.com/clun/sandboxes.git 
cd clu-dataviz 
mvn jetty:run</code>

Then accessing <code>http://localhost:8181</code> you should get something like :

But when it comes to rendering graphs and networks, I've found nothing better than <a href="http://visjs.org/">VisJS</a> (which is also used in DataStax studio). It provides tons of options to customize exactly as you wish. It is also aware of events coming from users (such as mouse clicks), allowing you to implement cool features like interactive graph browsing (c.f. Datastax Studio). This framework expects JSON data provided with a specific structure such as this:

<code>var nodes = new vis.DataSet([ 
&nbsp; &nbsp; {id: 1, label: 'Node 1'}, 
&nbsp; &nbsp; {id: 2, label: 'Node 2'}, 
&nbsp; &nbsp; {id: 3, label: 'Node 3'}, 
&nbsp; &nbsp; {id: 4, label: 'Node 4'}, 
&nbsp; &nbsp; {id: 5, label: 'Node 5'} 
&nbsp; ]);</code>

<code>&nbsp; // create an array with edges 
&nbsp; var edges = new vis.DataSet([ 
&nbsp; &nbsp; {from: 1, to: 3}, 
&nbsp; &nbsp; {from: 1, to: 2}, 
&nbsp; &nbsp; {from: 2, to: 4}, 
&nbsp; &nbsp; {from: 2, to: 5}, 
&nbsp; &nbsp; {from: 3, to: 3} 
&nbsp; ]);</code>

<h3>Creating a REST API</h3>

For the backend our objective is to create a REST API accepting a Gremlin Query as input and generating the JSON Format expected by VisJS. The first thing to do is to create plain old java objects (POJOs) to reflect the Json structure. Here is a UML representation generated by <a href="http://objectaid.com/">ObjectAid</a> available for Eclipse.

We chose to use SpringMVC included in SpringBoot (what else ?). The DAO generated in first blogpost can be reused and injected into the REST resources.

<code>@RestController 
@RequestMapping("/api/v1/graphs") 
public class GraphResource { 
&nbsp; &nbsp; 
&nbsp; &nbsp; @Autowired 
&nbsp; &nbsp; protected GraphDao graphDao;</code>

<code>&nbsp; &nbsp; @RequestMapping(value = "/{graphName}/{gremlinQuery}", method = GET, &nbsp;produces = APPLICATION_JSON_VALUE) 
&nbsp; &nbsp; public ResponseEntity&lt;VizJsGraph&gt; executeGremlinQuery( 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @PathVariable(value = "graphName") String graphName,&nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @PathVariable(value = "gremlinQuery") String gremlinQuery) { 
&nbsp; &nbsp; &nbsp; &nbsp; return new ResponseEntity&lt;VizJsGraph&gt;( 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; graphDao.executeGremlinQuery(graphName, gremlinQuery, true),&nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; HttpStatus.ACCEPTED); 
&nbsp; &nbsp; }</code>

} 
 
Note :&nbsp;<code>executeGremlinQuery</code> has not been defined yet, we will do this in the next section.

<h3>Implementing the DAO</h3>

As we have seen in the previous post, the DataStax Java driver accepts Gremlin queries as raw Strings (how convenient). The driver will convert each query into a <code>GraphStatement</code> and execute against DSE Graph.

This is what it looks like :

<code>public VizJsGraph executeGremlinQuery(String graphName, String gremlinQuery, boolean populateEdges) { 
&nbsp; Assert.hasText(graphName, "'graphName' is required here"); 
&nbsp; Assert.hasText(gremlinQuery, "'gremlinQuery' is required here"); 
&nbsp; LOGGER.info("Executing query {} on graph {}", gremlinQuery, graphName); 
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; 
&nbsp; // QUERY FOR VERTICES 
&nbsp; GraphStatement graphStatement = new SimpleGraphStatement(gremlinQuery).setGraphName(graphName); 
&nbsp; GraphResultSet gras = dseSession.executeGraph(graphStatement); 
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; 
&nbsp; // MAPPING AS VERTICES IN UI 
&nbsp; VizJsGraph vizGraph &nbsp; &nbsp;= new VizJsGraph(); 
&nbsp; List&lt;Object&gt; vertexIds = new ArrayList&lt;&gt;(); 
&nbsp; for (GraphNode gn : gras) { 
&nbsp; &nbsp; &nbsp;if (populateEdges &amp;&amp; gn.isVertex()) vertexIds.add(gn.asVertex().getId()); 
&nbsp; &nbsp; &nbsp;populateGraphVizJs(gn, vizGraph); 
&nbsp; &nbsp;} 
&nbsp; &nbsp; 
&nbsp; &nbsp;// SOMETHING IS MISSING&nbsp; 
&nbsp; &nbsp;//--&gt; HERE &lt;-- 
&nbsp; &nbsp;return vizGraph; 
}</code>

This works quite well, but there is more. Have you ever try to execute the <code>g.V()</code> query in DataStax Studio ? It will display the whole graph (both vertices and edges)...but it shouldn't. The gremlin query returns Vertices (V for Vertices) and only the Vertices so, what is the trick for how to collect edges as well?

The way to retrieve edges between vertices in Gremlin is described in the <a href="https://tinkerpop.apache.org/docs/current/recipes/#between-vertices">following documentation</a>. If we want to display a nice graph with the edges in the user interface, we need to fire an extra query <code<:g.v(ids.toarray()).oute().where(inv().id().is(within(ids)))< code="">where <code>ids</code> are the unique identifier of your vertices.&nbsp;</code<:g.v(ids.toarray()).oute().where(inv().id().is(within(ids)))<>

Here is the code. I inlined the code a bit, YOU are an expert now after all.

<code>// Add Edges to the results 
dseSession.executeGraph(new SimpleGraphStatement("g.V(ids.toArray()).outE().where(inV().id().is(within(ids)))") 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .set("ids", vertexIds) 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .setGraphName(graphName)) 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .all() 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .stream() 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .forEach(gn -&gt; populateGraphVizJs(gn, vizGraph));</code>

<h2>Populating the visualization via Mappers</h2>

Last missing part to have our sample running is mapping of <code>GraphResultSet</code> to <code>VizJsGraph</code>. Straightforward, this is what it looks like:

<code>private void populateGraphVizJs(GraphNode gn, VizJsGraph graph) { 
&nbsp; if (gn.isVertex()) { 
&nbsp; &nbsp; &nbsp;Vertex v = gn.asVertex(); 
&nbsp; &nbsp; &nbsp;graph.addVertex(new GraphVertex().id(v.getId().toString()).label(v.getLabel());); 
&nbsp; } else if (gn.isEdge()) { 
&nbsp; &nbsp; Edge e = gn.asEdge(); 
&nbsp; &nbsp; &nbsp;graph.addEdge(new GraphEdge(e.getOutV().toString(), e.getInV().toString())); 
&nbsp; } 
}</code>

As usual, the full working application can be found <a href="https://github.com/DataStax-Academy/sample-application-yasa">on github</a> please have a look and run a sample command. And the result is ....

This....is... a bit disapointing, isn't it? After all we have done it is still quite ugly, and it's pretty difficult to extract value from that representation. You cannot give that to the business can you?

Don't worry, we are not finished yet.

<h3>Customisation (Mappers, part 2)</h3>

First, update the mapper to select which properties will be displayed in the graph, and how they will be displayed. You can use the label of the vertex or any business condition to filter. Then, define which group each Vertex will be part of. The concept of a group is used by the VisJs library in order to apply specific CSS styles for rendering. This is what it looks like in our example :

Update the Mapper :

<code>if ("video".equals(v.getLabel())) { 
&nbsp; VertexProperty videoName = v.getProperty("name"); 
&nbsp; if (videoName != null) { 
&nbsp; &nbsp; gv.setLabel(videoName.getValue().asString()); 
&nbsp; } 
} else if ("tag".equals(v.getLabel())) { 
&nbsp; VertexProperty videoName = v.getProperty("name"); 
&nbsp; if (videoName != null) { 
&nbsp; &nbsp; gv.setLabel(videoName.getValue().asString()); 
&nbsp; } &nbsp;&nbsp; 
} else if ("user".equals(v.getLabel())) { 
&nbsp; VertexProperty email = v.getProperty("email"); 
&nbsp; if (email != null) { 
&nbsp; &nbsp; gv.setLabel(email.getValue().asString()); 
&nbsp; }&nbsp; 
} // Important 
gv.setGroup(v.getLabel());</code>,

Update Javascript Function &amp; apply CSS styles :

<code>function executeGremlin(graphName) { 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$.get('api/v1/graphs/' + graphName + '/' + document.getElementById('query').value, 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;function(graph) { 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var container = document.getElementById('mynetwork'); 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var data &nbsp; &nbsp; &nbsp;= { nodes: graph.nodes, edges: graph.edges }; 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var options = { 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;groups: { 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;video: { 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;shape: 'icon', 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;icon: { 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;face: 'FontAwesome', 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;code: '\uf03d', 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;size: 50, 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;color: '#57169a' 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}, 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;user: { 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;shape: 'icon', 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;icon: { 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;face: 'FontAwesome', 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;code: '\uf007', 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;size: 50, 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;color: '#0890D0' 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}, 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tag: { 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;shape: 'icon', 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;icon: { 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; face: 'FontAwesome', 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;code: '\uf02b', 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;size: 50, 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;color: '#00ab8b' 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}; 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var network = new vis.Network(container, data, options); 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}); 
&nbsp;&nbsp; &nbsp;}</code>

If now we execute the same query we get:

Isn't that cool?

<h2>Conclusion and takeaways</h2>

In this series of two articles, we have seen how simple it was to connect, interact and render data coming from graph databases. From this template and the code provided <a href="https://github.com/DataStax-Academy/sample-application-yasa">on github</a> we expect you to build AWESOME applications.

If you want to improve with Gremlin Language or Graph data modeling please consider taking the FREE courses <a href="https://academy.datastax.com/resources/ds330-datastax-enterprise-graph">DS330</a> and <a href="https://academy.datastax.com/resources/gremlin-recipes">Gremlin Recipes</a> available here on DataStax Academy.

Happy coding!

Build and scale cloud native apps

Discover the benefits of DBaaS and why your apps deserve an upgrade.

Learn about NoSQL Databases

Learn about NoSQL databases with Apache Cassandra and Astra DB.

2022 Recap: A Year for Customers, Community, and Real-Time Data

Highlights from 2022 and a glimpse into the year ahead.

ViewingTechnical How To’s

Work with DSE Graph in Your Web Applications Part (2/2) : Visualization

Sign up for our Developer Newsletter