Visualizing TigerGraph & Neo4j databases with "Davraz"
Tags: neo4j, tigergraph, visualization, angular
Published: 2022-06-12 11:12:51

In this post, I will introduce [Davraz](https://github.com/canbax/davraz), a software I created. Firstly, it is deployed on https://canbax.github.io/davraz/. So you can see it in action now. 

This post aims to introduce graph visualization to non-technical people.

## Introduction
_Davraz_ is a [graph database](https://en.wikipedia.org/wiki/Graph_database) visualizer. Currently it supports only [TigerGraph](https://www.tigergraph.com/) and [Neo4j](https://neo4j.com/).

## Background
I created _Davraz_ for [TigerGraph 2020 Graphathon](https://tigergraph2020.devpost.com/). (It got 1st Place Reward YAAAY!) It is a tool for visualizing your [TigerGraph](https://www.tigergraph.com/) and [Neo4j](https://neo4j.com/) databases. TigerGraph and Neo4j are [graph databases](https://en.wikipedia.org/wiki/Graph_database). Usually,  data is stored in SQL databases. Graph databases are a fairly new way to store data.

## Why Graph Database?
In SQL databases, if your data is highly connected, querying data might be time-consuming (due to [join](https://www.w3schools.com/sql/sql_join.asp) operations). In this case, using a graph database might considerably decrease execution time. This depends on how the graph database is implemented at its core. [Creating index](https://www.w3schools.com/SQL/sql_ref_index.asp) in SQL database will also help you execute faster. At its core, creating an index is actually like creating a graph data structure. So we can say SQL is also benefiting from graphs for faster execution.

## Why Graph Visualization?
Visualizing data is one of the most effective ways of understanding data. Graphs are a pretty generic data structure and almost any data can be defined as a graph. So visualizing graphs can be a very generic and effective way to understand any data. Graph visualization can be used for insightful analysis and interpretation. 

![A sample graph visualization with a rich style from my MS thesis](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pzr3ttjxcg59t2rc8czj.png)
 

## Set-up for TigerGraph
From https://tgcloud.io/ you can jump-start creating your own free TigerGraph database. It is very easy, you just need to click "next" etc... But you can find [more guidance](https://medium.com/swlh/getting-started-with-tigergraph-3-0-4aac0ca4fb3d) on the Internet. For visualization, you can also use their embedded system called *"Graph Studio"*. 

After you have a running TigerGraph instance, you can start visualizing it on _Davraz_. If you open https://canbax.github.io/davraz/, at first you should enter database configuration data. ![First opening of Davraz](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/np9mrd39yqofdunz5yx4.png)
 
You need to provide "Database URL", "Graph Name", "Database username", and "Database password" fields. After that, if you click to "Generate Token" button, you are ready to go.

You do **NOT** need to change "Proxy Server URL" if you don't want to use your own proxy. 

If your "Database URL" is wrong or if the TigerGraph instance is not active, you might get an error like the below ![TigerGraph instance is not active error message screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/je3yqm1eaekwxzo74u4y.png)

You might get errors like the below if you don't provide the correct username, password, or graph name.
![username or password is wrong error message screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kv6w9zw9wr2gfqnujj3e.png) ![Graph name is wrong error message screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2o4uox05z6tfitu4qcz.png)
 
If there is no error, you are good to GO! Below is a video showing how it works. Also, note that certain operations might require **"database secret"**. So you should provide or generate the secret of your TigerGraph database as well.

<video width="1200" height="750" controls>
  <source src="https://user-images.githubusercontent.com/8426741/167489419-1a5ef6dc-1b16-4ce9-9cfb-e50b043a473c.mp4" type="video/mp4">
</video>

Also, note that the proxy server (https://tiger-api.herokuapp.com/) might be down for some reason. (It is a free instance) So just refreshing it might help in some cases.

## Set-up for Neo4j
If you use Davraz from the GitHub deployment (https://canbax.github.io/davraz/), you need to serve your Neo4j API from HTTPS. This is because you cannot communicate with an HTTP server from an HTTPS server. Setting up an HTTPS server and setting up the SSL policy seems a bit tedious for me. For this reason, I will run a local version of Davraz on my own machine with HTTP. And also a local Neo4j server again from my own machine with HTTP. Inside Neo4j settings, I set `dbms.security.auth_enabled=false` so I can make HTTP requests and get a response without providing any username and password.

Below are my settings to connect to my local Neo4j instance. The database URL is **http://localhost:7474/db/data/transaction/commit**. Username and password are not necessary, they can be empty.
![Settings for a Neo4j instance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ickc2ic48nacavn28gr8.png)

From below video, you can see how you can visualize Neo4j data.
<video width="1200" height="750" controls>
  <source src="https://user-images.githubusercontent.com/8426741/173191229-3e1d5d43-0221-4ba1-a4ce-d0635d36fce4.mp4" type="video/mp4">
</video>

Here you might see a strange view if the styles are not the default styles. See the below image for example. ![Graph with incompatible styles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2q1fqdo5jjitg3u52tox.png)
To use default graph styles, you can click to _"File"_>_"Clear Graph Style"_.

Like TigerGraph, Neo4j also provides free cloud instances. [Neo4j AuraDB](https://neo4j.com/cloud/platform/aura-graph-database/) looks very cool and nice as well. Up to 50k nodes and 175k edges, it is free. Also, it has a nice visualizer called *"Bloom"*.

## Features
From _"File"_ menu, you can save a graph as JSON file, load back from the file. You can save only the selected elements. You can export graph as an image. You can load different [graph styles](https://js.cytoscape.org/#style).
<video width="1200" height="750" controls>
  <source src="https://user-images.githubusercontent.com/8426741/168469340-ffc320a8-f354-47e2-ba15-6a532e4d1d66.mp4" type="video/mp4">
</video>

From _"Edit"_ menu, you can delete selected elements, hide selected elements, show all the previously hidden elements and observe a history of graph states.
<video width="1200" height="750" controls>
  <source src="https://user-images.githubusercontent.com/8426741/168469711-9c9e8192-594b-4c7d-be96-56fcd930cac0.mp4" type="video/mp4">
</video>

From _"Data"_ menu, you can clear all the data or bring a sample data.
<video width="1200" height="750" controls>
  <source src="https://user-images.githubusercontent.com/8426741/169713544-d80cb3a2-47b1-4353-b45d-a1d40a63be85.mp4" type="video/mp4">
</video>


From _"Layout"_ menu, you can run an incremental or randomized layout. There are many different layout types but the default is [fCoSE](https://github.com/iVis-at-Bilkent/cytoscape.js-fcose) algorithm.
<video width="1200" height="750" controls>
  <source src="https://user-images.githubusercontent.com/8426741/169894364-1b580bc4-8e29-4fb3-b617-78584c6fa86e.mp4" type="video/mp4">
</video>

From _"Highlight"_ menu, elements can be emphasized to distinguish from others.
<video width="1200" height="750" controls>
  <source src="https://user-images.githubusercontent.com/8426741/169894862-12f0ad6d-3ff1-4576-b33f-13db20a370c7.mp4" type="video/mp4">
</video>


From _"Compound"_ menu, compound elements can be created or removed.
<video width="1200" height="750" controls>
  <source src="https://user-images.githubusercontent.com/8426741/169895099-7ea9f1b6-7b8a-4610-89c6-22889c6807e7.mp4" type="video/mp4">
</video>

From _"Table"_ menu, whole data or a part of the existing data can be shown as table(s).
<video width="1200" height="750" controls>
  <source src="https://user-images.githubusercontent.com/8426741/169895482-1400933c-40f9-4eef-851b-992f15e9320a.mp4" type="video/mp4">
</video>

From _"Cluster"_ menu, you can run "Markov Clustering" algorithm or cluster degree-1 nodes.
<video width="1200" height="750" controls>
  <source src="https://user-images.githubusercontent.com/8426741/169896671-bd270f71-a985-4497-9c09-413cca9245a0.mp4" type="video/mp4">
</video>