AG Viewer Manual

1. 소개

1.1. AG Viewer 소개

  • AG Viewer는 웹 브라우저를 통해 Agensgraph에 적재된 데이터를 시각적으로 보기 편하도록 제공하는 사용자 인터페이스이다.

1.2. 시스템 요구사항

  • ES6을 지원하는 Browser (chrome, edge, safari, firefox 등의 browser)

2. 설치

2.1. 환경 설정

  • Node.JS (버전 14.x.x 이상)
  • NPM (버전 6.x.x 이상)
  • 필수 패키지
  • pegjs, express, npm-run-all
    (command: npm -g install pegjs, express, npm-run-all)

2.2. 설치 및 실행

2.2.1. command 를 이용한 설치 및 실행

  $npm run setup
  $npm run start

2.2.2. docker 를 이용한 설치 및 실행

  1. 사전에 docker 를 설치 https://www.docker.com/get-started 링크에서 사용자의 os 에 맞는 버전으로 설치
  2. 아래 커맨드를 실행
  $docker run -d \
    --publish=3001:3001 \
    --name=agviewer \
    bitnine/agviewer:latest
  1. docker 로 컨테이너 설치 완료되었으면 container 구동 확인
  $docker ps -a

3. 화면

3.1 초기 화면


초기 화면은 database 연결을 위한 server connect frame이 생성된다

  • server connect frame 구성요소

    • connect url
    • connect port
    • database name
    • graph path
    • username
    • password

  • database가 연결된다면 server status frame과 database 연결이 성공했다는 alert이 나타난다.

  • database 연결이 실패했다면 연결 실패 alert이 나타난다.

3.2. Main Frame

3.2.1. Graph Frame


graph frame은 조회된 데이터를 시각적으로 보여주는 기능이다. 화면은 크게 쿼리 입력부와 frame으로 나뉜다.

  • 쿼리 입력 상자

    cypher 쿼리 또는 특수 커맨드를 입력하는 text box이다. 특수커맨드는 ‘:(콜론)명령어’ 포맷으로 되어있으며 현재 AG Viewer에서 지원하는 특수 커맨드는 아래와 같다.

    • :play northwind : northwind 데이터를 통해 데이터의 생성, 조회를 알려주는 튜토리얼이다.
    • :server connect : 데이터베이스 서버 연결을 위한 frame을 생성한다. 이미 데이터베이스에 접속되었다면 이미 접속되었음을 알리는 alert을 표시한다.
    • :server status : 데이터베이스 연결 상태를 나타내는 frame을 생성한다. 데이터베이스에 연결되지 않았다면 데이터베이스 연결을 위한: server connect 가이드를 제공한다.
    • :server disconnect : 데이터베이스 연결을 해제한다. 데이터베이스 연결 해제 후: server disconnect frame이 호출되고 연결이 해제되었음을 알리는 alert을 표시한다.

  • 실행버튼

    cypher 쿼리 또는 특수 커맨드를 실행하는 버튼이다.

  • 에디터 크기 조절

    query editor 가장자리를 드래그 하여 창 크기를 조절 할 수 있습니다.

  • History 기능


    Ctlr + ↑ 또는 Ctlr + ↓ 키를 입력하여 이전에 조회 한 쿼리를 다시 불러 올 수 있습니다.

  • Frame


    Frame 은 쿼리입력부에서 질의한 Query 의 결과가 출력되는 공간이며, Frame 포맷은 graph, table 2가지 형태로 제공한다. 기본적으로 graph화면을 보여준다.

graph frame 구성요소는 아래와 같다.

  • :필터 기능, 쿼리 결과에서 강조하고 싶은 node 를 지정합니다.

  • 필터 기능, 쿼필터 해제 기능, 적용된 필터 조건을 제거합니다.
  • frame 최대화. 해당 frame의 크기를 최대화한다.
  • frame resize. 최대화된 frame을 원래 크기로 되돌린다.
  • frame refresh. frame을 최초 조회 상태로 다시 로드한다.
  • frame 접기. frame을 최소화시킨다.
  • frame 열기. 최소화시킨 frame을 원래 크기로 되돌린다.
  • frame 닫기. frame을 닫는다

3.2.2. Frame format

  • Graph frame format type

데이터를 나타내는 format 은 아래와 같이 총 2가지 이며, 기본으로 나타내어지는 format 은 Graph 이다.

  • Graph format 의 구성

  • ① node 리스트, vertx 선택자: 질의된 결과로 출력된 node 들을 대표하는 집합 요소목록이며, node의 label 명으로 나타낸다. 각 요소를 선택할 시 해당 label 해당하는 node 가 전체 선택되며 ⑦요소에서 색상, 크기, 캡션 편집이 가능하다.

  • ② edge 리스트, edge 선택자: 질의 된 결과로 출력된 edge 리스트를 대표하는 집합 요소 목록이며, edge의 label 명으로 나타낸다. 각 요소를 선택할 시 해당 label 해당하는 edge 가 전체 선택되며 ⑦요소에서 색상, 크기, 캡션 편집이 가능하다.

  • ③ Frame format 선택: 현재 frame을 Graph 형태로 볼지, Table 형태로 볼지 선택 합니다.

  • ④ graph frame: 질의된 결과로 출력된 node 와 edge 요소로 데이터를 나타내는 화면, 각 node를 클릭할 시 ⑤영역에 선택된 node의 고유 id 와 node의 property 정보가 표시된다. edge를 클릭할시 마찬가지로 선택된 edge의 고유 id 와 property 정보가 표시된다.

  • ⑤ 정보 표시 창: frame에 출력된 결과 정보를 요약하는 영역이며 기본적으로 질의된 결과를 요약하고 있으며 node 개수와 edge 개수를 나타낸다, frame에서 선택한 요소에 따라 선택된 요소의 정보를 나타낸다.

  • ⑥ graph frame layout 설정: frame의 layout을 변경한다. graph frame의 node/edge layout 배치를 설정할 수 있다. layout은 12가지를 제공하며 기본값으로 cose-lilkent를 사용한다. layout 종류는 아래와 같다.

    • random
    • grid
    • breadth-first
    • concentric
    • cola
    • cose
    • cose-blikent
    • dagre
    • klay
    • euler
    • avsdf
    • spread

  • ⑦ graph frame 차트 속성 변경: 선택된 요소를 편집하고 변경하는 기능이며, 각 기능은 아래와 같다.

    • node/edge의 차트 속성을 변경 가능
    • 색, 사이즈, Caption 변경 가능
    • Caption 은 property이며 2개이상 사용할 수 없음
    • 해당 frame에서 변경한 차트 속성은 다른 frame에 영향을 주지 않음

  • Graph frame 조작 관련

    • ④ 영역에서 빈공간을 마우스로 드래그 하여 화면이동이 가능하다.
    • node를 선택하여 마우스 우클릭 시 4개의 추가메뉴가 나타난다. 상세 기능 설명은 아래 와 같다.

  • ① node 위치 고정, node 원위치: 차트에서 노드위치를 최초 조회당시 위치로 원위치 시킵니다.

  • ② 추가 메뉴 닫기: 현재 열려진 메뉴창을 닫습니다.

  • ③ node 확장: 해당 node에 edge로 연결된 node가 있다면 인접 node, edge를 graph frame에 추가한다.

  • ④ node Invisible: 해당 node를 graph frame상에서 제거한다. (실제 데이터가 삭제되지 않음), 해당 node와 edge로 연결된 node가 있다면 edge만 삭제된다.

  • Node 다중 선택


차트에서 node를 더블클릭 하면 해당 node 의 edge로 연결된 인접 node들을 다중 선택 할 수 있다. node 더블 클릭을 연속해서 반복할 때마다 edge 관계를 통해서 더 많은 edge 로 연계된 node를 추가로 선택이 가능하다. 선택된 node 들은 마우스 드래그로 전체 이동이 가능하다.

  • Table format의 구성

- ① 헤더 영역: 실행한 쿼리 결과의 header 영역으로 쿼리에서 Alias 로 지정한 alias name 이 header 로 표시된다.
- ②결과 영역: 실행한 쿼리 결과가 표시되는 영역이다.