DEV Community

hammadsaleemm
hammadsaleemm

Posted on

Installing age-viewer (Part3: Installing apache and PSQL from Source)

Welcome back to the third installment of our series on the Apache AGE graph database. In my previous two articles, I discussed how to install Age and PSQL, as well as how to create and add a node to a graph database using Age and PSQL. In this article, I will introduce Age-viewer, a web application that allows you to visualize data stored in your graph database. Before we dive into the details of Age-viewer, there are a few prerequisites you need to install.

Installing Dependencies

Before we start with Age-viewer, we need to install nodejs and npm to run the app. We recommend installing node version 14.16.0. You can install the specific version using the nvm install 14.16.0 command. If you do not have nvm, you can download it from https://www.freecodecamp.org/news/node-version-manager-nvm-install-guide/.

sudo apt install nodejs npm

or

# recommended
nvm install 14.16.0
Enter fullscreen mode Exit fullscreen mode

Downloading and Cloning

After installing the necessary dependencies, we need to download and clone Age-viewer. Go back to the root directory and run the following command:

git clone https://github.com/apache/age-viewer.git
Enter fullscreen mode Exit fullscreen mode

Start

Once Age-viewer is downloaded, navigate to the Age-viewer directory using the following command:

cd age-viewer

Enter fullscreen mode Exit fullscreen mode

To start the app, run the following commands:


npm run setup
npm run start
Enter fullscreen mode Exit fullscreen mode

It may take some time to start the app. Once it is up and running, connect it with the database server by entering the login details.

# address (default : localhost)
url: server_url;

# port_num (default 5432)
port: port_num;

# username for the database
username: username;

# password for the user
pass: password;

# database name you wanna connect to
dbname: demodb;
Enter fullscreen mode Exit fullscreen mode

For me it was:

url: localhost;

port: 5432;

username: hammad;

# radom pass as password is not set for this user.
pass: 1234;

dbname: demodb;
Enter fullscreen mode Exit fullscreen mode

The output is as follows
Image description

Graph Visulaslization

Now that Age-viewer is connected to the database, we can start visualizing our data. To create nodes, run the following commands to create PERSON and COUNTRY nodes:

SELECT * FROM cypher('demo_graph', $$ CREATE (n:Person {name : "hammad", bornIn : "Pakistan"}) $$) AS (a agtype);
SELECT * FROM cypher('demo_graph', $$ CREATE (n:Person {name : "sohaib", bornIn : "Pakistan"}) $$) AS (a agtype);
SELECT * FROM cypher('demo_graph', $$ CREATE (n:Person {name : "sadeed", bornIn : "Pakistan"}) $$) AS (a agtype);
SELECT * FROM cypher('demo_graph', $$ CREATE (n:Person {name : "taimoor", bornIn : "Pakistan"}) $$) AS (a agtype);
SELECT * FROM cypher('demo_graph', $$ CREATE (n:Person {name : "adele", bornIn : "US"}) $$) AS (a agtype);
SELECT * FROM cypher('demo_graph', $$ CREATE (n:Person {name : "nandhini", bornIn : "US"}) $$) AS (a agtype);
Enter fullscreen mode Exit fullscreen mode

Once you have created these nodes, you can view them on the age-viewer. To do this, simply refresh the viewer page and you should be able to see the newly created nodes.

Now, let's create some nodes for the COUNTRY label.

SELECT * FROM cypher('demo_graph', $$ CREATE (n:Country{name : "Pakistan"}) $$) AS (a agtype);
SELECT * FROM cypher('demo_graph', $$ CREATE (n:Country{name : "US"}) $$) AS (a agtype);
Enter fullscreen mode Exit fullscreen mode

Again, you can view these nodes on the age-viewer by refreshing the page.

Finally, we will create a relationship between the Person and Country nodes.

SELECT * FROM cypher('demo_graph', $$ MATCH (a:Person), (b:Country) WHERE a.bornIn = b.name CREATE (a)-[r:BORNIN]->(b) RETURN r $$) as (r agtype);
Enter fullscreen mode Exit fullscreen mode

This query will create a relationship between the Person nodes and Country nodes where the "bornIn" property of the Person node matches the "name" property of the Country node.

You can now view the entire graph on the age-viewer by executing the following query:

SELECT * from cypher('demo_graph', $$ MATCH (a:Person)-[r]-(b:Country) WHERE a.bornIn = b.name RETURN a, r, b $$) as (a agtype, r agtype, b agtype);
Enter fullscreen mode Exit fullscreen mode

This query will return all the Person nodes, the relationships between them and the Country nodes they are born in.

Image description

With this, you now know how to use the age-viewer to visualize your data. The age-viewer is a powerful tool that can help you gain insights into your data by allowing you to visually explore the relationships between different entities in your graph.

References

https://age.apache.org/age-manual/master/intro/setup.html
https://www.postgresql.org/docs/current/install-procedure.html

Top comments (0)