全部產品
Search

搜尋本產品

    AnalyticDB：視覺化檢視Age-Viewer

    文件中心

    AnalyticDB：視覺化檢視Age-Viewer

    更新時間：Nov 20, 2025

    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

    本文提供了源碼部署和鏡像構建兩種部署方式，您可以根據自身的實際情況選擇。

    源碼部署

    1. 登入ECS執行個體。

    2. 使用如下命令複製代碼。

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

    3. 修改以下目錄下的代碼。

      請注意，在注釋代碼時，請確保“//”和代碼之間有一個空格，否則在後續啟動服務時會報錯。

      • 請修改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';。

    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 Compose並載入鏡像。

      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