Installing age-viewer (Part3: Installing apache and PSQL from Source)
Tags: apacheage, agedb, postgres, database
Published: 2023-03-03 19:45:42

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](https://dev.to/hammadsaleemm/how-to-istall-apache-age-and-psql-from-source-on-ypur-machine-i6h), as well as how to create and add a node to a [graph database using Age and PSQL](https://dev.to/hammadsaleemm/initialization-of-the-cluster-creating-a-graph-and-adding-a-node-part-2-installing-apache-and-psql-from-source-40da). 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
```

## 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
```

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

```
cd age-viewer

```

To start the app, run the following commands:

```

npm run setup
npm run start
```
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;
```

For me it was:

```
url: localhost;

port: 5432;

username: hammad;

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

dbname: demodb;
```
The output is as follows
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2c6yw8ohlix2y88eha0.png)

## 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);
```
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);
```
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);
```
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);
```
This query will return all the Person nodes, the relationships between them and the Country nodes they are born in.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3tkmxtuyevjj0ed842jp.png)


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