• US HQ
  • 3945 Freedom Cir., Suite 260
  • Santa Clara, CA 95054
  • TEL. +1 (408) 352-5165
  • KR HQ
  • A1201 GangSeo Hangang Xi Tower, 401,
  • Yangcheon-ro, Gangseo-gu, Seoul, South Korea
  • TEL. +82-70-4800-3517
  • FAX. +82-70-8677-2552
Github Download

Introduction

AgensBrowser

AgensBrowser is a user interface which allows users to manage AgensGraph on web. AgensBrowser users can monitor and control the status of each component of AgensGraph DB.  
Main features are listed below.

  • RESTful-API Support
  • Meta Information Provided with Self-Updating
  • Labeling/Unlabeling
  • Cypher & Ansi-SQL (Send/Execute/Save)
  • Project Management (Load/Save/Delete)
  • Enhanced Graph Experience
  • Image Data Export
  • Query History

System Requirements

System Requirements for AgensBrowser are listed below.

  • Server

    • OS: MS Windows 8 or higher, Mac OS X 10 or higher, All Linux and UNIX distributions
    • CPU: Dual core or higher (Intel i5 Series)
    • Memory: 8GB or more
    • Java: 1.8
  • Client

    • Browsers: Javascript ES6 Browsers (Chrome, Firefox, Edge, Safari etc.)
      • Internet Explorer is NOT available

Installation

Environment Setting

  • Install Java 1.8
  • Install AgensGraph (AgensGraph ≥1.3)
    • AgensBrowser Management DB Installation
    • Create AgensBrowser Admin account
  • Prepare Binary

    agens-browser-web-1.0

Installation and Startup

  1. Unzipping and Checking for Files

    • agens-browser-web-1.0.jar
    • agens-browser.config.yml
  2. Configuring .yml
    Open agens-browser.config.yml and modify connection information for your environment. The connection will be established on graph_path in .yml file, and your login account MUST be the owner of graph_path. Once AgensBrowser is launched, you cannot change default graph_path by using set command in query statements.

  • server
    • port: Port of AgensBrowser Web Server
  • logging
    • config: On AgensBrowser you can configure logging to create and save logs by dates in the logs directory under the current directory.
  • agens
    • config:
      • query_timeout: You can set query timeout (Default: 600,000, 10 Minutes).
    • inner:
      • url: You can use url to save query logs and projects, and agens-db.db will be created under the current directory (regenerated with default data upon deletion).
    • outer:
      • url
        • IP: IP Address of Database Server
        • Port: Port of Database Server
        • Database: Name of Database
      • graph_path: Name of the Graph Created in AgensGraph
      • username: Username in Database
      • password: Password for Username
      • max_rows: Maximum Number of Rows Returned (≤1000 Rows Recommended)
    • jwt:
      • expiration: Configuration for Client Connection Timeout (Default: 43200, 12 Hours)
    ## config context path to "/" by setting an empty string
    server:
       port: 8085 -- AgensBrowser Web Server Port
    logging:
       config: classpath:logback-agens.xml
    spring:
       pid:
         file: agensbrowser.pid
       main:
         banner-mode: "off"
    agens:
       product:
         name: AgensBrowser-web
         version: 1.0
         hello_msg: AgensBrowser web v1.0 -- hello massage
    config:
       base_path: /api
       query_timeout: 600000 # 1000 ms = 1 sec -- Timeout: 10 Minutes  
    inner:
       datasource:
         -- H2 embedded DB for saving logs and projects       
         url: jdbc:h2:file:./agens-h2;DB_CLOSE_DELAY=-1;MODE=MySQL 
         username: sa
         password:
         driverClassName: org.h2.Driver
    outer:
       datasource:
         driverClassName: org.postgresql.Driver
         url: jdbc:postgresql://127.0.0.1:6179/northwind?ApplicationName=AgensBrowser
         graph_path: northwind_graph
         username: agraph
         password: agraph
         max_rows: 1000 -- maximum number of rows returned
    jwt:
       header: Authorization # not used -- header where Token value is saved
       secret: agensBrowserKey -- NOT USED
       expiration: 43200 # unit: sec (12 Hour = 43200 sec) -- Token Timeout
  1. Generating AgensBrowser Launch File

    Write the following line(s) into the text file and save it with an extension of .sh(unix) or .bat(window).

    java -jar agens-browser-web-1.0.jar --spring.config.name=agens-browser.config
  2. Launch AgensBrowser

    $ sh agensbrowser.sh  -- linux
    $ agensbrowser.bat    -- windows

Login

You will automatically get logged in with the AgensGraph ID and Password described in the config file, based on the token authorization.
The user account to connect to the database must be the administrator.

To connect to AgensBrowser, type this URL in the address bar of your web browser.

http://DB_SERVER_IP_ADDRESS:WEB_SERVER_PORT/index.html

For example, if you use local database and designate web server port as 8085, then you should type.

http://localhost:8085/index.html    

Logout

You will get logged out upon your closing of the browser window. You can modify client connection timeout by changing expiration value in config file.

Screen Layout

After your login on the browser, you can see the main screen as shown below. In the main screen you can find information on things such as database connection, meta information, menus and much more.

Main screen consists of two areas as follows:

  • Menu Area (①)
    Menu of functions organized by purpose.
  • Main Area (②)
    Panel on which you view, and control results from your execution of functions on menus.

Functions Detail

Main Area

Meta-graph of Graph DB

When you click Meta-graph of Graph DB, you can see information about user connections and the meta-graph data from AgensGraph.

Meta-graph of Graph DB includes the following panels:

  • DATABASE
  • META GRAPH
  • LABEL LIST
  • PROPERTIES OF LABEL

Database

On the DATABASE panel, you can check connection information. Total NodeTypes and Total EdgeTypes refer to the total number of labels, and the number in the parentheses is the number of data in the vertex and edge label each.

Meta Graph

On the META GRAPH panel, you can view the graph, relationships of vertices and edges from the meta data. Any changes made to the meta data will be automatically reflected in the graph every three minutes, five minutes after the starting up of the database.

You can click and select each vertex and edge to get more detailed information.

The following image is an example view when you select the vertex labeled as person.

  • Labeling

    You can create labels by clicking CREATE LABEL button, with showing up of a new window as below:

    1. Label Type*
      • Select vertex/edge.
    2. Name*
      • Fill in with name of the label.
        (*Name is Required, and it should be from 3 to 30 characters, begins with a-zA-Z )
    3. DESC (description)
      • Describe the information about label.

Label List

You can check the status of vertices and edges. Click bin icons in the Remove column to delete the vertex or edge.

  • Removing Label
    If you want to remove a label, just click the bin icon in the corresponding row and in Remove column. Then, a new window will pop up, showing label information and asking your confirmation to proceed for the deletion of the label. Removing label is followed by erasing the related data, so be careful with removal of the label. You can confirm/cancel the removal of the label by clicking OK/CANCEL button as below.

Properties of Label

You can check the label properties on the PROPERTIES OF LABEL panel.

Query to Graph DB

With AgensBrowser, you can send SQL & Cypher queries to AgensGraph database. The result of the query statements will be visualized in the graph ─ supports exporting image to file ─ with table, and you can also change the layout and the label style of the shown graph.

Note: If you move into another screen when you are using functions in Query to Graph DB, you will lose all information you are working on.

Query to Graph DB consists of following panel objects.

  • QUERY
  • GRAPH RESULT
  • TABLE RESULT
  • CELL VALUE

Query

On the QUERY panel, you can write and send SQL or Cypher query statements to AgensGraph database. For writing comments start the line with --. You can see the result of query on the GRAPH RESULT and TABLE RESULT panel.

Note: You are logged in through graph_path designated in .yml file when you connect to Agensbrowser, and the command to modify graph_path (set_graph_path) is NOT available.

The following explains about icons on the QUERY panel:

  • Run ( )

    Execute query statements. Click this icon to run your query and the result of the query or the error message will appear on the Result sub-panel.

    • Execution of Query Statements

    • Execution Completed

    • Error

  • Stop ( )

    Stop the current execution of the query statements.

  • New ( )

    Create new graph file.
    Click this icon to initialize editor and result sub-panel (Query).

  • Open ( )

    Load sample projects.
    Load sample projects that could be checked on the spot and help you understand the graph more easily.

    If you click button in the Title column, you can see simple description of the project, click bin icon () in Remove column to delete the project, and refresh the result by clicking the Refresh icon ().Furthermore, you can look up projects by using the search bar. Click CLOSE to close the project opening window.

  • Save ( )

    Save graph file.
    Fill in the title, description of project, and save it by clicking SUBMIT button. Saved graph file ONLY contains query statements and the graph itself. You can check saved projects in User Projects.

    *Title cannot exceed 400 characters, Description 900 characters.

    After you modify your projects and try to save it again, a new window shows up and asks if you want to overwrite existing query statements or not. If you do not wish to overwrite existing query statements, click Cancel to proceed without overwriting.

Graph Result

Visualize the result of the query in the form of graph.

Graph editor (GRAPH RESULT panel) supports following features:

  • Zoom In/Zoom Out
  • Highlighting Neighborhood Vertex
  • Various Layouts for the Entire/Selected Part of Graph
  • Label-wise Styling
  • Exporting Graph into Image File (PNG) & Watermark
  • Pretty Format Output of JSON Objects in the Table

You can pan left, right, up, down, and zoom in/out with the Controller (①) at the upper left of the GRAPH RESULT panel. Also, you can initialize your view with button.

  
Following contents describe the menu (②) of GRAPH RESULT in more detail.

  • Mouse Wheel Zoom ( )

    Activate/Deactivate zoom in/out with Mouse Wheel Zoom.

  • Highlight Neighbors ( )

    Activate/Deactivate highlighting to identify neighboring vertices.
    This function allows to select adjacent vertices (maxHops=3) except vertices with the same edge label.

  • Layout ( )

    Change the layout of the visualized graph. Click vertex label (③) to change layout of each label, separately. Hold down the shift key and drag the mouse to select subset (vertex/edge) of the graph.

    In this example, CIRCLE and BREADTHFIRST layouts are applied to the product and category label, each.

    The following describes the LAYOUT function in more detail.

  1. GRID: Organize the graph in a grid.

  1. RANDOM: Organize the graph randomly for users to discover unexpected pattern in the data.

  2. BREADTHFIRST: Organize the graph in Bread-first layout style: Place nodes with more predecessors (nodes) than others at the top of the screen and nodes with less at the bottom.

  3. CIRCLE: Organize the graph in a circle.

  1. CONCENTRIC: Place nodes with more edges than others at the center of the graph and nodes with less at the outside.

  2. COSE: Place nodes in a way that highlights the distances between node clusters to clearly show the distribution of clusters.

  3. COSE-BILKENT(COSE2): Organize the graph in a modified version of COSE layout

  1. DAGRE: Place node groups horizontally to make them distinguishable by their types.
  • Styling Label ( )

    Change the title, color, size of the selected label.

    1. Title
      Select the title of the label. Title is set to BLANK if it were not described.

    2. Color
      Choose color of the label.

    3. Size
      Choose size, thickness of the label.

  • Export ( )

    Save the graph as an image file (PNG)(Watermark Available). You can simply use this saved image as a presentation material, for it has transparent background.

    * Watermark is up to 30 characters, and file name should be from 3 to 30 characters, begins with `a-zA-Z`
  • Refresh ( )

    You can refresh the result of selected area.

  • Location Lock
    Location Lock If you want to fix the location of any specific node, select vertex and set the location lock, and then the locked vertex will be represented in luteous. If you wish to release the lock, select vertex and unlock it with the lock slide.

The following describes the label (③) at the bottom side, in more detail. Here we can see the name and the number of each vertex/edge label.

  • Select the vertex label

  • Select the edge label

Right click at the blank area of the GRAPH RESULT panel to display the advanced menu. You can lock, expand, remove, and hide graph results in the advanced menu.

  1. Reverse select: Invert your selection.

  2. Remove expands: Erase the expanded results of vertex/edge.

    On the other hand, you can select vertex to see expanded vertex/edge. It is recommended to follow the limit in your query statements for the maximum number of vertex/edge to be expanded.

  3. Unlock all: Unlock all locked vertices.

  4. Hide unselected: Hide every vertex/edge except the selected ones. Edge represents the relationship between vertices, so when you select an edge, right click at the blank area, click hide unselected in the advanced menu, then selected edge is hided with connected vertices.

  5. show all: Show every hidden element on GRAPH RESULT panel.

Table Result

Show table result from the result of query execution.

Cell Value

On the CELL VALUE panel, you can go through values in the JSON object by clicking values in path or properties column of the TABLE RESULT. With icon, you can copy the contents of CELL VALUE.

History

You can check the result and history of execution of a query statement. Type User IP in the search bar to discover query statements that are executed by a specific user.