AG Viewer Manual

1. Introduction

1.1. Introduction to AG Viewer

  • AG Viewer is a user interface that provides visualization of data loaded in AgensGraph through a web browser.

1.2. System Requirement

Browsers that support ES6, such as Chrome, Edge, Safari, Firefox, etc.

2. Installation

2.1. Environment Setting

  • Node.JS (Version 14.x.x or higher)
  • NPM (Version 6.x.x or higher)
  • Required Package
    • pegjs, express, npm-run-all
      (command: npm -g install pegjs, express, npm-run-all)

2.2. Installation and Startup

2.2.1. Setup and start using command

  $npm run setup
  $npm run start

2.2.2. Set up and start using docker

  1. Install docker in advance, install the version compatible with your OS from the provided link.

  2. Run the command below

  $docker run -d \
    --publish=3001:3001 \
    --name=agviewer \
  1. Once installation is completed via docker, run the container.
  $docker ps -a

3. Screen Layout

3.1 Initial Screen

In the initial screen, a server connect frame for connecting to the database appears.

  • Components of Server Connect Frame
    • connect url
    • connect port
    • database name
    • graph path
    • username
    • password
  • When the database is connected, an alert indicating the success of the database connection to the server status frame is displayed.

  • If the database connection fails, a connection failure alert appears.

3.2. Main Frame

3.2.1. Graph Frame

The graph frame visually shows the searched data. The screen is largely divided into a query editor and a frame.

  • Query Editor

Query Editor is a text box for entering cypher queries or special commands. Special commands are in the format of ‘:(colon) command’, and the special commands currently supported by AG Viewer are as follows: - :play northwind : A tutorial showing how to create and inquire data through a northwind dataset. - :server connect : Create a frame to connect to a database server. If it is already connected to the database, an alert indicating that it has already been connected is displayed. - :server status : Create a frame indicating the database connection status. If not connected to the database, a guide to connecting to the database is provided. - :server disconnect : Disconnect the database connection. After disconnecting the database, an alert indicating that the connection has been disconnected is displayed.

  • Run Query

This button runs a cypher query or special commands.

  • Resizing Editor

Resize the window by dragging the edge of the Query Editor.

  • History

Enter CTRL + ↑ or CTRL + ↓ to reload a previously viewed query.

  • Frame

The frame is a space where the result of the query entered in the Query Editor is shown. The frame format is provided in the form of a graph and table. The default format is graph.

The components of the graph frame are as follows:

  • :Filter: specify the node that needs highlight in the query result.

  • :Remove Filter: Removes the applied filter condition.

  • :Maximize Frame: Maximize the size of the frame.

  • :Resize Frame: Returns the maximized frame to its original size.

  • :Refresh Frame: Reload the frame to its initial inquiry state

  • :Fold Frame: Minimize the frame.

  • : Open Frame: Returns the minimized frame to its original size.

  • : Close Frame: Close the frame.

3.2.2. Frame format

  • Graph frame format type

There are a total of two formats that show the data. The default format is shown in graph.

  • Components of Graph Format

Node list, vertex selector: This is a list of set properties representing nodes displayed as a result of the query and is represented by the label name of the node. When each property is selected, all nodes corresponding to the label are selected, and color, size, and caption can be edited in ⑦.

Edge list, edge selector: This is a list of set properties representing edges displayed as a result of the query and is represented by the label name of the edge. When each property is selected, all edges corresponding to the label are selected, and the color, size, and caption can be edited in ⑦.

Selecting frame format: Select either graph or table format to view the current frame.

Graph frame:A screen that displays data in node and edge as a result of the query. When clicking each node, a unique ID of the selected node and property information of the node is displayed in ⑤Likewise, when clicking an edge, a unique ID and property information of the selected edge is displayed.

Information display window: Summarizes the query result shown on the frame. The result shows the number of nodes and edges, including the information of the selected property in the frame.

Graph frame layout setting: Change the layout of the frame. The layout arrangement of node/edge can be changed. A total of 12 layouts are provided, and cose-bilkent is used as a default. The layout types are as follows: - random - grid - breadth-first - concentric - cola - cose - cose-blikent - dagre - klay - euler - avsdf - spread

Change graph frame chart property: Edit and change the selected property, and features are as follows:
- Change chart properties of node/edge - Change color, size, caption - A caption is a property and cannot be used more than 2 - Chart properties changed in the frame do not affect other frames

  • Handling graph frame
    • Screen in ④ can be moved by dragging an empty space with a mouse.
    • When selecting and right-clicking a node, 4 additional menus appear. The details of the features are as follows:

- ① Fixed/Return node: Relocates the node to the position at the time of initial inquiry

- ② Close menu: Closes the opened menu

- ③ Expand node: If there is a node connected by an edge to the corresponding node, add the adjacent node and edge to the graph frame.

- ④ Hide node: Remove a node from the graph frame. (Actual data is not deleted) If there is a node connected by another node with an edge, only the edge is removed.    
  • Multi-selecting nodes When double-clicking a node, multiple adjacent nodes connected to the edge of the corresponding nodes are selected. When a node double-click is repeated, it is possible to additionally select nodes linked to more edges through the edge relationship. All selected nodes can be dragged with a mouse.

  • Table format

    • ① Header: Header of the executed query result. Alias name specified as Alias in the query is displayed as a header.

    • ② Result: Executed query results are displayed.