DEV Community

Talha Munir 🇵🇸
Talha Munir 🇵🇸

Posted on • Edited on

Installing apache age-viewer

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 and part2
  • 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
Enter fullscreen mode Exit fullscreen mode

You will see following output:

Image description

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Image description

Image description

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

When you run npm run start, age-viewer will start running on
localhost:3000

Image description

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

Image description

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 
Enter fullscreen mode Exit fullscreen mode

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

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);
Enter fullscreen mode Exit fullscreen mode

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);

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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/

Top comments (0)