Install Apache AGE Viewer
Tags: postgres, apacheage, apache, age
Published: 2023-03-15 08:26:05

## What is Apache AGE Viewer
Apache AGE Viewer is a web user interface for the visualization of graphs created in AGE - A multi-model database that supports graph database on top of the already existing relational database while also supporting JSON and key-value data.

AGE Viewer has the following prospects:

- Provides data visualization
- Supports complex graph queries
- Helps users discover the relationships among strongly connected entities in the graph 

## Prerequisites
You should have the following installed on your system.
- git
- postgreSQL 
- Apache AGE

If you are on linux, follow the [guide](https://dev.to/zainabsaad/install-postgresql-and-age-from-source-code-5dk7) on _How to install postgreSQL and Apache AGE from source code_

## Installing AGE Viewer

**Step 1** Go to the directory postgres_age
`cd postgres_age`

**Step 2** Install node.js and npm. It is recommened to install using node version manager. _nvm manages different versions of node on your system and thus prevents any clashes between the different projects using different node version_. Install nvm following the guide [here](https://www.freecodecamp.org/news/node-version-manager-nvm-install-guide/)
You can check if nvm is installed correctly using `nvm --version`
Check if the specified version of node is installed using `node --version`

**Step 3** Clone the AGE Viewer GitHub repository
`git clone https://github.com/apache/age-viewer.git`

**Step 4** Start the database server for the database cluster named _pg_age_
```
cd postgres/postgresql-11.18
bin/pg_ctl -D pg_age -l logfile start
```

**Step 5** Go to directory age-viewer
```
cd ../../
cd age-viewer
```

**Step 6** Setup AGE Viewer development server on local system. 

```
npm run setup
npm run start
```
This takes you to AGE Viewer running on localhost

**Step 7** Configure Viewer with the database you want to connect. Provide the details as here:

```
Connect URL : 127.0.0.1
Connect Port: 5432
Database Name: practicedb
Username: your_username_on_linux
Password: your_system_password
```

## Start querying the database
Make sure you have the database server running. Example queries:

Create graph
```
SELECT create_graph('country');
```
Create vertices with the label City and property name
```
SELECT * FROM cypher('country', $$
CREATE (a: City {name: "A"}),
(b: City {name : "B"}),
(c : City {name : "C"}),
(d: City {name : "D"}),
(e : City {name : "E"})
$$) AS (result agtype);
```
View all the cities(verices)
```
SELECT * FROM cypher('country', $$
MATCH (u : City)
RETURN u
$$) AS (result agtype);
```

It shows the 5 vertices created as

![Vertices](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysfhelgmeknu5faek4cv.png)

Create edges between nodes as
```
SELECT * FROM cypher('country', $$
MATCH (a: City {name: "A"}), (b: City {name : "B"})
CREATE (a)-[e1: CONNECTED {time : 2}]->(b)
$$) AS (result agtype);

SELECT * FROM cypher('country', $$
MATCH (b: City {name: "B"}), (c: City {name : "C"})
CREATE (b)-[e1: CONNECTED {time : 1}]->(c)
$$) AS (result agtype);

SELECT * FROM cypher('country', $$
MATCH (a: City {name: "A"}), (d: City {name : "D"})
CREATE (a)-[e1: CONNECTED {time : 4}]->(d)
$$) AS (result agtype);

SELECT * FROM cypher('country', $$
MATCH (d: City {name: "D"}), (e: City {name : "E"})
CREATE (d)-[e1: CONNECTED {time : 3}]->(e)
$$) AS (result agtype);
```
View the graph
```
SELECT * FROM cypher('country', $$
MATCH(u : City)-[e : CONNECTED]->(v : City)
RETURN u, e, v
$$) AS (u agtype, e agtype, v agtype);
```

![Graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zkxzpehdd7gcmpoj22ei.png)
Try something interesting here
You can notice that there is a variable length edge from A to C and A to D i.e; A is indirectly connected to C and E
```
SELECT * FROM cypher('country', $$
MATCH(a : City {name : "A"})-[e : CONNECTED* ]->(x : City)
RETURN a, e, x
$$) AS (a agtype, e agtype, x agtype);
```

![Variable length edge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fpxfcsyucog8iw934y97.png)

## References:

- [Create CLAUSE](https://age.apache.org/age-manual/master/clauses/create.html#)
- [MATCH CLAUSE](https://age.apache.org/age-manual/master/clauses/create.html#)
- [RETURN CLAUSE](https://age.apache.org/age-manual/master/clauses/return.html)
- [AGE GitHub Repository](https://github.com/apache/age)