如何使用可视化工具Age-Viewer-云原生数据仓库AnalyticDB(AnalyticDB)-阿里云帮助中心

Age-Viewer是一个基于Web的可视化前端工具，用于与Apache AGE（A Graph Extension）交互。Age-Viewer提供了一个图形界面，您可以编写并执行Cypher查询、查看和管理图结构等。本文介绍如何使用可视化工具Age-Viewer创建或查询图数据。

前提条件

AnalyticDB for PostgreSQL实例和ECS实例位于同一VPC。
- AnalyticDB for PostgreSQL实例的内核版本为V7.2.1.1及以上。
- ECS实例需在购买时选择Linux操作系统。
已将ECS实例所属的VPC的IP地址添加至AnalyticDB for PostgreSQL的白名单。
age插件安装与配置：
- 已为实例安装age插件。
  内核版本为7.2.1.4及以上的AnalyticDB for PostgreSQL7.0版实例已自动安装age插件。
- 需使用ALTER DATABASE <database_name> SET "$user", public, ag_catalog;将ag_catalog添加到search_path，否则age viewer可能会出现查询错误。
已联系技术支持在AnalyticDB for PostgreSQL实例目标数据库中创建图分析引擎。

步骤一：部署Age-Viewer

本文提供了源码部署和镜像构建两种部署方式，您可以根据自身的实际情况选择。

源码部署

登录ECS实例。

使用如下命令克隆代码。

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

修改以下目录下的代码。

请注意，在注释代码时，请确保“//”和代码之间有一个空格，否则在后续启动服务时会报错。
- 请修改backend/src/services/databaseService.js文件，将第35行await DatabaseService.analyzeGraph(gr);使用“//”符号注释掉。
- 请修改backend/src/tools/AGEParser.js文件，将第39行至第43行注释掉。
```
async function setAGETypes(client, types) {
 // await client.query(`
 //     CREATE EXTENSION IF NOT EXISTS age;
 //     LOAD 'age';
 //     SET search_path = ag_catalog, "$user", public;
// `)
```
- 请修改frontend/src/components/cypherresult/presentations/CypherResultTable.jsx文件，将第23行import { uuid } from 'cytoscape/src/util';注释掉，并新增import uuid from 'react-uuid';。
构建并启动可视化工具服务。
1. 安装npm命令。
2. 在age-viewer路径下执行命令：npm run setup。
3. 在该目录执行npm run start。
  说明
  - 如果遇到报错error:0308010C:digital envelope routines::unsupported，请执行export NODE_OPTIONS=--openssl-legacy-provider，然后再次执行npm run start。
  - 如果遇到报错Error: Cannot find module '@babel/runtime/helpers/interopRequireDefault'，请执行npm add @babel/runtime，然后再次执行npm run start。
本地浏览器输入http://<ECS公网IP>:<端口>访问服务。
重要
- 请确保已为ECS实例的安全组添加所需访问端口的入方向规则。
- 端口信息在步骤4执行完后显示。

镜像构建

将age-viewer-image.tar.gz镜像文件上传至ECS实例。
安装并使用Docker和Docker Compose并加载镜像。
```
docker load < age-viewer-image.tar.gz
```

创建容器并使其后台运行。

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

本地浏览器输入http://<ECS公网IP>:3000访问服务。
重要
- 请确保已为ECS实例的安全组添加所需访问端口的入方向规则。
- 您可在当前ECS实例的实例详情 > 配置信息 > 公网IP查看公网IP。

步骤二：连接数据库

浏览器成功访问服务后，需要您连接AnalyticDB for PostgreSQL数据库，参数说明如下。

参数名称	描述
Connect URL	AnalyticDB for PostgreSQL实例的内网地址。
Connect Port	AnalyticDB for PostgreSQL实例的端口，固定值为`5432`。
Database Name	AnalyticDB for PostgreSQL实例的数据库名称。
User Name	AnalyticDB for PostgreSQL实例数据库的账号和密码。
Password	AnalyticDB for PostgreSQL实例数据库的账号和密码。

成功连接后，您将看到以下连接信息。

您可以在右侧Current Graph上方切换当前图。

步骤三：使用Age-Viewer

当数据库中已创建图及其相关的节点、边和标签等信息时，您可以直接查询图数据。

说明

本节示例数据请参见创建和使用图分析引擎。

查询所有标签为Person的节点。

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

查询结果如下。

您可以单击查询框下方的标签，例如EMPLOYED，系统将自动生成查询SQL，单击右侧查询，则将查询该图所有的雇佣信息。