可视化工具Age-Viewer

更新时间:

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实例所属的VPCIP地址添加至AnalyticDB for PostgreSQL白名单

  • 已为AnalyticDB for PostgreSQL实例安装age插件ag_catalog添加到search_path

  • 提交工单联系技术支持在AnalyticDB for PostgreSQL实例目标数据库中创建图分析引擎。

步骤一:部署Age-Viewer

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

源码部署

  1. 登录ECS实例

  2. 使用如下命令克隆代码。

    git clone https://github.com/apache/age-viewer.git
  3. 修改以下目录下的代码。

    请注意,在注释代码时,请确保“//”和代码之间有一个空格,否则在后续启动服务时会报错。

    • 请修改backend/src/services/databaseService.js文件,将第35await 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文件,将第23import { uuid } from 'cytoscape/src/util';注释掉,并新增import uuid from 'react-uuid';

  4. 构建并启动可视化工具服务。

    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

  5. 本地浏览器输入http://<ECS公网IP>:<端口>访问服务。

    重要
    • 请确保已为ECS实例的安全组添加所需访问端口的入方向规则。

    • 端口信息在步骤4执行完后显示。

镜像构建

  1. age-viewer-image.tar.gz镜像文件上传ECS实例。

  2. 安装Docker并加载镜像。

    docker load < age-viewer-image.tar.gz
  3. 创建容器并使其后台运行。

    docker run -d --name adbpg-age-viewer -p 3000:3000 age-viewer-image
  4. 本地浏览器输入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

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

image

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

步骤三:使用Age-Viewer

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

说明

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

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

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

查询结果如下。

image

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

image