How to use the Age-Viewer visualization tool - AnalyticDB

Age-Viewer is a web-based frontend visualization tool that interacts with Apache AGE (A Graph Extension). Age-Viewer provides a graphical interface that you can use to write and run Cypher queries, and to view and manage graph structures. This topic describes how to use Age-Viewer to create or query graph data.

Prerequisites

Your AnalyticDB for PostgreSQL instance and ECS instance are in the same VPC.
- AnalyticDB for PostgreSQL instances run on kernel version V7.2.1.1 or later.
- The ECS instance uses a Linux operating system.
The IP address of the VPC for your ECS instance is added to the whitelist of your AnalyticDB for PostgreSQL instance.
The age extension is installed and configured:
- The age extension is installed for an AnalyticDB for PostgreSQL instance.
- Use the ALTER DATABASE <database_name> SET "$user", public, ag_catalog; command to add ag_catalog to the search_path. Otherwise, query errors may occur in Age-Viewer.
A graph analysis engine has been created by technical support in the AnalyticDB for PostgreSQL instance's target database.

Step 1: Deploy Age-Viewer

This topic provides two deployment methods: deploying from source code and building from an image. Choose the method that best suits your needs.

Deploy from source code

Log on to the ECS instance.

Run the following command to clone the code.

git clone https://github.com/apache/age-viewer.git

Modify the code in the following directories.
Note: When you comment out code, make sure that there is a space between // and the code. Otherwise, an error occurs when you start the service.
- Modify the backend/src/services/databaseService.js file and comment out line 35, await DatabaseService.analyzeGraph(gr);, using the // symbol.
- Modify the backend/src/tools/AGEParser.js file. Comment out lines 39 to 43.
```
async function setAGETypes(client, types) {
 // await client.query(`
 //     CREATE EXTENSION IF NOT EXISTS age;
 //     LOAD 'age';
 //     SET search_path = ag_catalog, "$user", public;
// `)
```
- Modify the frontend/src/components/cypherresult/presentations/CypherResultTable.jsx file. Comment out line 23, import { uuid } from 'cytoscape/src/util';, and add import uuid from 'react-uuid';.
Build and start the visualization tool service.
1. Install the npm command.
2. In the age-viewer path, run the command: npm run setup.
3. In the same directory, run npm run start.
  Note
  - If the error error:0308010C:digital envelope routines::unsupported occurs, run export NODE_OPTIONS=--openssl-legacy-provider, and then run npm run start again.
  - If the error Error: Cannot find module '@babel/runtime/helpers/interopRequireDefault' occurs, run npm add @babel/runtime, and then run npm run start again.
In your local browser, enter http://<Public IP address of the ECS instance>:<Port> to access the service.
Important
- Make sure that you have added an inbound rule for the required access port to the security group of the ECS instance.
- The port information is displayed after you complete Step 4.

Build from an image

Upload the age-viewer-image.tar.gz image file to the ECS instance.
Install and use Docker and Docker Compose, and then load the image.
```
docker load < age-viewer-image.tar.gz
```

Create a container and run it in the background.

docker run -d --name adbpg-age-viewer -p 3000:3000 age-viewer-image

In your local browser, enter http://<Public IP address of the ECS instance>:3000 to access the service.
Important
- Make sure that you have added an inbound rule for the required access port to the security group of the ECS instance.
- You can find the public IP address of the ECS instance under Instance Details > Configuration Information > Public IP Address.

Step 2: Connect to the database

After you access the service in your browser, connect to the AnalyticDB for PostgreSQL database. The following table describes the connection parameters.

Parameter	Description
Connect URL	The internal endpoint of the AnalyticDB for PostgreSQL instance.
Connect Port	The port of the AnalyticDB for PostgreSQL instance. The value is fixed at `5432`.
Database Name	The database name of the AnalyticDB for PostgreSQL instance.
User Name	The username and password for the AnalyticDB for PostgreSQL database.
Password

After the connection is successful, the following connection information is displayed.

You can switch the current graph under Current Graph on the right.

Step 3: Use Age-Viewer

If a graph and its related information, such as nodes, edges, and labels, already exist in the database, you can directly query the graph data.

Note

For the sample data used in this section, see Create and use a graph analysis engine.

Query all nodes that have the label Person.

SELECT * FROM cypher('relation', $$
  MATCH (m:Person)
  RETURN m
$$) AS (result_a agtype);

The query result is as follows.

You can click a label, such as EMPLOYED, below the query box. The system automatically generates the corresponding SQL query. Then, click Query on the right to query all employment information in the graph.