Installing apache age-viewer
Published: 2023-02-09 07:54:04

Age-viewer is a graph visualization tool used for the visualization of the graphs created for your relational databases.
The created graphs consists of set of nodes and edges. Where nodes represent the data entities and the edges represent the directed relationship between those entities.


## Prerequisite:

- Age and PostgreSQL installed from source in your linux virtual machine. You can follow my previous 2 articles on how to install age and PostgreSQL here: [part1] (https://dev.to/talhahahae/installation-of-apache-age-and-postgresql-from-source-in-linux-part-1-gka) and [part2](https://dev.to/talhahahae/initialization-and-creating-a-database-for-testing-the-installation-of-postgres-and-age-part-2-118l)
- NodeJS and npm installed on ubuntu or on a virtual machine.
- It is recommended you install the version of node 14.16.0. 
For installation of nvm follow below steps:

### Run the nvm installer
```
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
```
You will see following output:

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

### Update profile configuration:

```
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
```
Just Restart the shell configuration and nvm is ready to be used 

Now that NVM is installed, you can switch between any versions of node.

Run the following command on the terminal for the installation of node version 14.16.0

```
nvm install 14.16.0
```
## Age-Viewer:
For the installation of apache age-viewer follow the below steps:

```
git clone https://github.com/apache/age-viewer.git
cd apache-age-viewer
npm run setup
npm run start
```


**Note: The command npm run setup can throw some errors like these**


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

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


These errors can be due to the installation of wrong version of node or not proper cloning of the repository.

### Fixing the error:
To fix this error take a look at following steps:
Delete nvm, npm and node and install it all again.
For uninstalling node run following command:

`nvm uninstall 14.16.0
`
The command if executed successfully will return a success message indicating the version of node deleted.

`Uninstalled node v13.10.1`

Type following command in terminal for the deletion of nvm

```
#nvm deactivate will remove the path variables 
nvm deactivate

#nvm unload will uninstall the nvm
nvm unload

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm
```

Now the node and nvm is deleted go above and download both of them again and run those commands as well.


```
npm run setup
npm run start
```
When you run _npm run start_, age-viewer will start running on
`localhost:3000` 

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

You will see a screen like this. Enter the details to start using the age-viewer.

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

In my case:

```
url: localhost

connectport: 5432

#this database we created in the previous demos and articles
Database Name: SampleDatabase 

#your Linux username would be used here
username: talhastinyasylum 

#password can vary according to you
Password: 1234 
```
Also make sure your database is also running along side the age-viewer. After successful connection a success message will be displayed on the screen.


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

Now execute some of the below queries

```
#create a graph
SELECT create_graph('sample_graph');

#create node Car
SELECT * FROM cypher('sample_graph', $$ CREATE (n:Car {name : "Kia Sportage", madeIn : "Pakistan"}) $$) AS (a agtype);
SELECT * FROM cypher('sample_graph', $$ CREATE (n:Car {name : "Honda Civic", madeIn : "Pakistan"}) $$) AS (a agtype);
SELECT * FROM cypher('sample_graph', $$ CREATE (n:Car {name : "Lamborghini", madeIn : "Italian"}) $$) AS (a agtype);
SELECT * FROM cypher('sample_graph', $$ CREATE (n:Car {name : "Ford", madeIn : "America"}) $$) AS (a agtype);
SELECT * FROM cypher('sample_graph', $$ CREATE (n:Car {name : "Bughatti", madeIn : "French"}) $$) AS (a agtype);
```
 
Now lets create a new node country

```
SELECT * FROM cypher('sample_graph', $$ CREATE (n:Country{name : "Pakistan"}) $$) AS (a agtype);
SELECT * FROM cypher('sample_graph', $$ CREATE (n:Country{name : "America"}) $$) AS (a agtype);
SELECT * FROM cypher('sample_graph', $$ CREATE (n:Country{name : "Italian"}) $$) AS (a agtype);
SELECT * FROM cypher('sample_graph', $$ CREATE (n:Country{name : "French"}) $$) AS (a agtype);

```
now create the relationship and visualize the graph created:

```
#create relationship
SELECT * FROM cypher('sample_graph', $$ MATCH (a:Car), (b:Country) WHERE a.madeIn = b.name CREATE (a)-[r:MadeIn]->(b) RETURN r $$) as (r agtype);

#visualize the graph
SELECT * from cypher('sample_graph', $$ MATCH (a:Car)-[r]-(b:Country) WHERE a.madeIn = b.name RETURN a, r, b $$) as (a agtype, r agtype, b agtype
```

The created graph will appear on the `localhost:3000`.

Yayy we installed it :))

## References:
You can take a look at following website that helped me in installation of apache age-viewer.

1. https://www.linode.com/docs/guides/how-to-install-use-node-version-manager-nvm/
2. https://www.freecodecamp.org/news/node-version-manager-nvm-install-guide/
3. https://github.com/apache/age/