可视化工具Age-Viewer
Age-Viewer是一个基于Web的可视化前端工具,用于与Apache AGE(A Graph Extension)交互。Age-Viewer提供了一个图形界面,您可以编写并执行Cypher查询、查看和管理图结构等。本文介绍如何使用可视化工具Age-Viewer创建或查询图数据。
前提条件
步骤一:部署Age-Viewer
本文提供了源码部署和镜像构建两种部署方式,您可以根据自身的实际情况选择。
源码部署
使用如下命令克隆代码。
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';
。
构建并启动可视化工具服务。
安装
npm
命令。在age-viewer路径下执行命令:
npm run setup
。在该目录执行
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 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。
步骤二:连接数据库
浏览器成功访问服务后,需要您连接AnalyticDB for PostgreSQL数据库,参数说明如下。
参数名称 | 描述 |
Connect URL | AnalyticDB for PostgreSQL实例的内网地址。 |
Connect Port | AnalyticDB for PostgreSQL实例的端口,固定值为 |
Database Name | AnalyticDB for PostgreSQL实例的数据库名称。 |
User Name | AnalyticDB for PostgreSQL实例数据库的账号和密码。 |
Password |
成功连接后,您将看到以下连接信息。
您可以在右侧Current Graph上方切换当前图。
步骤三:使用Age-Viewer
当数据库中已创建图及其相关的节点、边和标签等信息时,您可以直接查询图数据。
本节示例数据请参见创建和使用图分析引擎。
查询所有标签为Person
的节点。
SELECT * FROM cypher('relation', $$
MATCH (m:Person)
RETURN m
$$) AS (result_a agtype);
查询结果如下。
您可以单击查询框下方的标签,例如EMPLOYED,系统将自动生成查询SQL,单击右侧查询,则将查询该图所有的雇佣信息。