apache / age-viewer

Graph database optimized for fast analysis and real-time data processing. It is provided as an extension to PostgreSQL.

What is Apache-Age Viewer

Apache-Age Viewer is a web based user interface that provides visualization of graph data stored in a postgreSQL database with AGE extension. It is graph visualisation tool, for Apache AGE.

This is a sub-project of the Apache AGE project.

Recommend Node Version & install module

• Node version - ^14.16.0

• Node Module - pm2

Install latest pm2 with : npm i pm2

pm2 is an NPM module to run the project in production mode, and hence is optional for getting started with setting up development environment for Age-Viewer

Running Age-Viewer

• Install the required node modules using :
  npm run setup
• Run Age-Viewer using : npm run start

This will start the age-viewer on http://localhost:3000 if port 3000 is free.

How to build using command

• Build the front-end : npm run build-front

• Build the back-end : npm run build-back

• Start the project in production mode :

    pm2 stop ag-viewer-develop
  
    pm2 delete ag-viewer-develop
  
    pm2 start ecosystem.config.js
  
  

  How to start using Age-Viewer

• To start using Age-Viewer we need to have a running postgreSQL database server with Apache Age Extension

  Setting up the PostgreSQL server with AGE extension

  • Easiest way for Windows, Mac-OS and Linux Environment using Docker

  Install docker in advance (https://www.docker.com/get-started), install the version compatible with your OS from the provided link.

  Run Using Docker :

  • Get the docker image - docker pull apache/age

  • Create AGE docker container

  docker run --name myPostgresDb -p 5455:5432 -e POSTGRES_USER=postgresUser \
  -e POSTGRES_PASSWORD=postgresPW -e POSTGRES_DB=postgresDB -d apache/age

  Docker variables	Description
  --name	Assign a name to the container
  -p	Publish a container’s port(s) to the host
  -e	Set environment variables
  -d	Run container in background and print container ID

• To Get the running log of the docker container created - docker logs --follow myPostgresDb

• To Get into postgreSQL Shell (There are two ways this can be done) -

  • First get into docker shell using - docker exec -it myPostgresDb bash
    Then get into postgreSQL shell using - psql -U postgresUser postgresDB

  OR

  • Alternatively postgres shell can also be assessed directly (without getting into the docker shell) - psql -U postgresUser -d postgresDB -p 5455 -h localhost and put in postgresPW when prompted for password.

• After logging into postgreSQL shell follow the Post-Installation instruction to create a graph in the database.

Connect Apache Age-Viewer to PostgreSQL Database

Initial Connection Layout To Connect to postgreSQL server running from Docker Container

• Connect URL - localhost
• Connect Port - 5455
• Database Name - postgresDB
• User Name - postgresUser
• Password - postgresPW

The following field is same as used to make the docker container specified above as flags.

License

Apache AGE Viewer is licensed under the Apache License, Version 2.0. See LICENSE for the full license text.

age-viewer's Issues

Label bug and type error

Describe the bug

I used the example query in apache age document and ag cloud

(https://age.apache.org/age-manual/master/clauses/create.html)
(https://bitnine.net/ag-cloud/)

If I run a query that creates a new node with some properties after creating a new graph, the property name is listed correctly in node label.

but after that, if I run a query that creates a edge between two nodes, all the property names are suddenly moved to edge label.

when a query creates node and edge at the same time and input data is pretty large, then it works fine. Additionally, sometimes the following error is shown when running a query that creates a new node or edge even though the cypher query command has no error and works fine.

Desktop (please complete the following information):

• OS: window 10 pro
• Browser chrome

Additional context
Add any other context about the problem here.

Highlight edges according to a property

Can AGE Viewer highlight an edge according to its property?

For example, we have a starting vertex labeled "Person" with :

{
    "id" : 12345 ,
    "label" : "Person" ,
    "properties" : { "key" : "value" }
}

An edge :

{
    "id" : 12346 ,
    "label" : "bought_product" ,
    "start_id" : 12345 , 
    "end_id" : 12347 ,
    "properties" : 
        {
             "times_bought" : 3
        }
}

And then another vertex (which is the product a person bought) :

{
    "id" : 12347 ,
    "label" : "Product" ,
    "properties" : { "type" : "Cheese Burger" }
}

So according to the "times_bought" property, we could show the edge in a more intense way or maybe in a different color in comparison to other edges where this "times_bought" property is of lesser value.

Developing AGE Viewer desktop application in Python

Change Title in Tab

Change Tittle to AGE Viewer

Age-viewer: Node/edge not displaying labels properly in each label sections

Describe the bug
After 674389a, select box displays graph names properly, but after running query,
(ex:
SELECT *
FROM cypher('graph_name', $$
CREATE (:Person)
$$) as (v agtype);
)

the label Person and the number of nodes are not updated in Node Label.

Desktop (please complete the following information):

• OS: Window 10 Pro
• Browser chrome
• Version 21H2

Problem connecting to postgres/AGE (remote, TLS)

Description
I am trying to connect the agviewer to a remote postgres which is enforcing TLS.

The database connection fails with this error message:

Database Connection Failed

Failed to connect to the database. Are you sure the database is running on the server?
no pg_hba.conf entry for host "<my local IP address>", user "age_user", database "age", SSL off

To Reproduce
Steps to reproduce the behavior:

1. Set up remote postgres running AGE with TLS enabled, use an internal CA or self signed certificate
2. Run ageviewer locally

docker run --publish=3001:3001--name=agviewer bitnine/agviewer

3. Open ageviewer FE in browser and enter data for DB
4. See above error

Expected behavior
The error message should be more informative and propose actionable items. (No pg_hba.conf exists in ageviewer image...)

Ideally the error should not occur and the connection to the DB should be established.

Additional context
To my understanding these factors could play a role:

• TLS (vs. unencrypted)
• internal CA / self signed certificate for DB (How would I inject the new CA in the image)

Docker build failed

Describe the bug
Docker build failed

To Reproduce
docker build .

Expected behavior
Run age viewer on localhost:3000

Screenshots

Go vs Rust

For the red development of AGE viewer, I have deeply studied Go and Rust.
I found Rust more convenient than Go due to it's stability and more libraries.

Everyone please suggest with a little description which one to be chosen.

Cleanup /metaChart

Have the /metaChart api either work or be removed

[documentation] Improvement in Apache Age-Viewer Documentation

The README file should be improved and add sections for contributors guide.
Setting up development environment for Windows using WSL can be added.
I have made some improvement in the README file #100 , so you can take a look to suggest some improvement and submit more improved version by avoiding merge conflict.

An error occurs when the result is null.

Describe the bug
I created the query using optional match of cypher query.

create (p:person {name:'Tom'});
create (m:movie {name:'movie-1'});
create (m:movie {name:'movie-2'});
create (p:person {name:'reviewer'});
match (p:person {name:'Tom'}), (m:movie {name:'movie-1'}) create (p)-[:actied_in]->(m);
match (p:person {name:'Tom'}), (m:movie {name:'movie-2'}) create (p)-[:actied_in]->(m);
match (m:movie {name:'movie-2'}), (p:person {name:'reviewer'}) create (m)-[:review]->(p);

match (p:person {name:'Tom'})-[a:actied_in]->(m:movie) with p,a,m
optional match (m)-[r:review]-(p2:person) return *;

Data in json format looks fine. But I don't see any results in AG Viewer.

To Reproduce
Steps to reproduce the behavior:

1. Run the query attached on.
2. Look at the table results.
3. Look at the graph results.
4. See empty graph results

Expected behavior
Should be able to see 4 nodes and 3 edges.

Screenshots

Desktop (please complete the following information):
It occurs in all environments.

Additional context
NullPointException is expected from the inside.

What are DFS(Depth First Search) and BFS(Breadth First Search) algorithms ?

Result malformed.

diagrams are not drawn following this error:
after this query:

SELECT * from cypher('text_test', $$
          MATCH (V)-[R:connects]-(V2)
          RETURN V,R,V2
$$) as (V agtype, R agtype, V2 agtype);

$ SELECT * from cypher('text_test', $$ MATCH (V)-[R:connects]-(V2) RETURN V,R,V2 $$) as (V agtype, R agtype, V2 agtype);
Converting circular structure to JSON
--> starting at object with constructor 'Object'
--- property 'properties' closes the circle

info: ::ffff:172.17.0.1 - - [22/Nov/2021:13:44:17 +0000] "POST /api/v1/cypher HTTP/1.1" 500 47
 {"timestamp":"2021-11-22 13:44:17"}
info: ::ffff:172.17.0.1 - - [22/Nov/2021:14:06:22 +0000] "GET /api/v1/db HTTP/1.1" 200 134
 {"timestamp":"2021-11-22 14:06:22"}
info: ::ffff:172.17.0.1 - - [22/Nov/2021:14:06:22 +0000] "GET /api/v1/db/metaChart HTTP/1.1" 500 2
 {"timestamp":"2021-11-22 14:06:22"}
info: ::ffff:172.17.0.1 - - [22/Nov/2021:14:06:23 +0000] "GET /api/v1/db/meta HTTP/1.1" 304 -
 {"timestamp":"2021-11-22 14:06:23"}
error: syntax error at or near "MATCH"
    at Parser.parseErrorMessage (/app/backend/node_modules/pg-protocol/dist/parser.js:287:98)
    at Parser.handlePacket (/app/backend/node_modules/pg-protocol/dist/parser.js:126:29)
    at Parser.parse (/app/backend/node_modules/pg-protocol/dist/parser.js:39:38)
    at Socket.<anonymous> (/app/backend/node_modules/pg-protocol/dist/index.js:11:42)
    at Socket.emit (events.js:376:20)
    at addChunk (internal/streams/readable.js:309:12)
    at readableAddChunk (internal/streams/readable.js:284:9)
    at Socket.Readable.push (internal/streams/readable.js:223:10)
    at TCP.onStreamRead (internal/stream_base_commons.js:188:23) {
  length: 93,
  severity: 'ERROR',
  code: '42601',
  detail: undefined,
  hint: undefined,
  position: '1',
  internalPosition: undefined,
  internalQuery: undefined,
  where: undefined,
  schema: undefined,
  table: undefined,
  column: undefined,
  dataType: undefined,
  constraint: undefined,
  file: 'scan.l',
  line: '1129',
  routine: 'scanner_yyerror'
}
info: ::ffff:172.17.0.1 - - [22/Nov/2021:14:14:52 +0000] "POST /api/v1/cypher HTTP/1.1" 500 47
 {"timestamp":"2021-11-22 14:14:52"}
info: ::ffff:172.17.0.1 - - [22/Nov/2021:14:15:41 +0000] "POST /api/v1/cypher HTTP/1.1" 200 137
 {"timestamp":"2021-11-22 14:15:41"}
TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    --- property 'properties' closes the circle
    at JSON.stringify (<anonymous>)
    at stringify (/app/backend/node_modules/express/lib/response.js:1123:12)
    at ServerResponse.json (/app/backend/node_modules/express/lib/response.js:260:14)
    at _callee$ (/app/backend/build/controllers/cypherController.js:59:33)
    at tryCatch (/app/backend/node_modules/regenerator-runtime/runtime.js:63:40)
    at Generator.invoke [as _invoke] (/app/backend/node_modules/regenerator-runtime/runtime.js:293:22)
    at Generator.next (/app/backend/node_modules/regenerator-runtime/runtime.js:118:21)
    at asyncGeneratorStep (/app/backend/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
    at _next (/app/backend/node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
info: ::ffff:172.17.0.1 - - [22/Nov/2021:14:16:03 +0000] "POST /api/v1/cypher HTTP/1.1" 500 154
 {"timestamp":"2021-11-22 14:16:03"}
info: ::ffff:172.17.0.1 - - [22/Nov/2021:14:16:13 +0000] "GET /api/v1/db/meta HTTP/1.1" 200 217
 {"timestamp":"2021-11-22 14:16:13"}

Setting environment package.json of age-viewer desktop app for window

In app folder of age-viewer desktop app, the current scripts in package.json file doesn't support for Windows environment, so the commands need to be modified like below on Windows.

"clean": "New-Item -Force -ItemType directory -Path ./resources/backend/build && New-Item -Force -ItemType directory -Path ./resources/frontend/build && rm -r -fo ./resources/backend/build/ && rm -r -fo ./resources/frontend/build/",
"prebuild": "cd .. && npm run build-back && npm run build-front",
"prebundle": "Copy-Item -r -fo ../backend/build ./resources/backend && Copy-Item -r -fo ../frontend/build ./resources/frontend && Copy-Item -r -fo  ../backend/sql ./resources/backend"

new-item is a powershell command and will only work using powershell. If it shows the following error 'new-item' is not recognized as an internal or external command, operable program or batch file. via powershell, you need to run each command sequentially.

Additionally, Electron needs to be installed as a global dependency on Windows environment. The following commands will install Electron package globally.

npm install -g [email protected]
npm install -g electron-builder

Nodes between edges and vice versa

Describe the bug
Edges are shown and treated as nodes?

To Reproduce
PG admin create node code: Create node 1 and create node 2
Create Edge.

Code used:

SELECT * from cypher('metadata_graph1', $$
CREATE (n:datapipeline {name: 'DP: test' , id: 'DP9' , description : 'sftp from a to b', status: 'In Service'}) RETURN n
$$) as (V agtype)

SELECT * from cypher('metadata_graph1', $$
CREATE (n:datastore {name: 'NLTLD2DW' , id: 'DS6' , description : 'datastore legacy server', status: 'In Service'}) RETURN n
$$) as (V agtype)

SELECT * from cypher('metadata_graph1', $$
MATCH (a: datapipeline{id: 'DP9'}), (b: datastore {id: 'DS6'}) CREATE (a)-[r:IS_LOCATED_ON {weight: 1, tag: 'twamp'}]->(b)
return r
$$) as (V agtype)

Expected behavior
2 nodes in overview (datastore and datapipeline)
1 Edge in edge overview: IS_LOCATED_ON

Screenshots
In the printscreen I ran the create Edge code twice.
You can see clearly the EDGE is shown in the Node section?
When you click on the edge to produce cypher to query it, it treats the EDGE as a Node?

After clicking on IS_LOCATED _ON to query:

Desktop (please complete the following information):

• OS: Windows
• Browser : Chrome and Edge
• Version 107.0.5304.107 (Official Build) (64-bit)

Additional context
AG viewer is the latest code used in a compose with Postgres Apache AGE / PG admin and jupyter lab.
Also the Graph selector is not working properly when creating code with Jupyter lab. It selects the wrong one , or the leading grapgh is undefined?
All in all I think this product is not fit for use in a big company we want to use it in :(
I already created an Edge bug before (not visible) which is still existing.

Age Viewer should work properly with the upgraded Node Versions

As now Age-Viewer is compatible with node version 14.16.1 and cannot work properly with the upgraded version.
It is a good idea to keep up with later versions of Node.

Bug reporting

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Some relations are not showing in AG viewer

Describe the bug
Some relations are not showing in AG viewer when they are clearly in the database You can see the edge in the table). When you play with the weight thickness of the edge then you can see sometimes the edge appearing for a brief moment.
Also when you click on the object it looks like the object is not connected via the edge to the other object. So it is not only a viewing problem it seems?

To Reproduce
it happens randomly so you cannot reproduce

Expected behavior
the viewer needs to to display all the relations in the database

Screenshots

now editing the weight:

now the missing edge appears and the other one dissappears?

another example: Edge missing in Graph View between AP1 and DP12:

In the table this EDGE (Ap1 - DP12) is existing? Wy doesn't it show and act if it is connected in the Graph view? :

MPE:

Desktop (please complete the following information):

• OS: Windows
• Browser : Chrome and Edge
• Version 107.0.5304.107 (Official Build) (64-bit)

Additional context
Add any other context about the problem here.

Age-Viewer: SelectBox not displaying graph names.

Describe the bug
After connecting to age-viewer on my local machine, it doesn't display graph names in select box like below image (already created some graphs).

I'm not sure if this only happens on my local machine since it was tested and working on the other environments.

Desktop (please complete the following information):

• OS: Window 10 Pro
• Browser chrome
• Version 21H2

Add Logo to Title In Tab

Add the AGE Logo.

Frontend frameworks in GO

There are many frontend frameworks in Go.
For desktop I've tried Lorca, it supports good interface but beautifications may get compromised.

Is there any other suggestion for frontend part for AGE-Viewer keeping in mind this would be a DESKTOP application.

Auto query player based on Key strokes

There can be multiple ways to schedule play the query. Need suggestions for it.
1: Using key strokes.
2: Time based.
3: Visual click.

Query Window Auto Rescale

When the user enters newline in the viewer, have the text box auto rescale to show the whole window

Not compatible with AgensGraph?

Describe the bug

The only Database Type available in the menu is Apache AGE.

When I try to connect to AgensGraph 2.12.0, I get the following error:

Database Connection Failed

Failed to connect to the database. Are you sure the database is running on the server?
[ERROR]:(58P01) could not open extension control file "/usr/share/agensgraph/extension/age.control": No such file or directory 

(/usr/share/agensgraph/extension/ is correct, but AgensGraph doesn’t provide age.control)

Does it mean that AGE Viewer is not compatible with AgensGraph anymore?

Desktop (please complete the following information):

• OS: Alpine Linux
• Browser: Firefox
• Version: 103.0.1

To discuss and choose between Electron and Node-Webkit for building a desktop application

Let the query remain in query editor if there is error executing the query

when there is an error executing the query it gets removed from query editor it would be a good user experience if it still remains in the query editor

can't understand query error

I'm embarrassed I can't yet interpret this output. The query was generated by clicking the middle node label.

Should I be asking this somewhere else? If so, please forgive me.

Holding query in the text Area in case Query is not executed.

Observation: The query should not be wiped out from the text Area when the query is not executed i.e. when there is an error. It is quite annoying to write or copy queries again and again in the text area while drafting the correct query.
Possible solution: It can be stored in the Local Storage of the Browser and can be redrafted in the text area in case of error.

As in the following example: I will have to rewrite the query or copy it from the new tab rendered.

Remove Database type from Connection Setup

Remove the Database type option from the connection form

Provide a Dropdown to select which graph to show metadata information for

Provide users with the ability to switch between which graph the metadata information is displayed for.

AGE Viewer Onboarding - Learn Postgres Basics

Read Chapter 1-3: https://www.interdb.jp/

Please go to Apache AGE Discord for help at https://discord.gg/NMsBs9X8Ss

Understanding graph visualization of data

Initial Task to learn about graph data and graph data visualization. Please comment here to be assigned to the project.

Can't connect to my local agensgraph server. Agviewer running locally in container.

On Windows 10, running agensgraph, locally and agviewer locally from docker image built from dockerfile at this repo.
I get the following error message.
The server is definitely running because I can psql to it or run agens,
If the graph name, or user, or password were incorrect should I see a different error message?

New function request

Hi.

I am using AGE Viewer well and thank you.
The "Connection Status" scrolls too fast.
Please Change at a speed similar to scrolling "Query Results".

Thank you.

Problem connecting to age-viewer desktop app

Describe the bug
I'm trying to connect to age-viewer desktop app on Window but I keep getting this message:

C:\Users\mjh19\OneDrive\Desktop\age-viwer-electron\age-viewer\backend\src\tools\AGEParser.js:141
undefined
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\mjh19\OneDrive\Desktop\age-viwer-electron\age-viewer\backend\node_modules\antlr4\src\antlr4\index.js from C:\Users\mjh19\OneDrive\Desktop\age-viwer-electron\age-viewer\backend\src\tools\AGEParser.js not supported.
Instead change the require of index.js in C:\Users\mjh19\OneDrive\Desktop\age-viwer-electron\age-viewer\backend\src\tools\AGEParser.js to a dynamic import() which is available in all CommonJS modules.
at Object. (C:\Users\mjh19\OneDrive\Desktop\age-viwer-electron\age-viewer\backend\node_modules@babel\node\lib_babel-node.js:176:21) {
code: 'ERR_REQUIRE_ESM'
}

Additional context
Adding "type": "commonjs" in package.json doesn't work for me and my current node version is v16.17.0.

Developing AGE Viewer desktop application in Go Language.

Can we guys discuss here about details. Like how we start this and what will be used for backend.

Label (oid) cache corrupted

Describe the bug
This bug happens when refreshing the browser several times.

Screenshots

Desktop (please complete the following information):

• OS: window 10 pro
• Browser chrome

AGE Viewer Onboarding - Set up Developer Environment

1. Understand Graph data visualization
2. Install AGE Viewer from source
3. Create a simple pull request to make AGE Viewer more responsive

• Please go to Apache AGE Discord for help at https://discord.gg/NMsBs9X8Ss

What are the features of Apache AGE Viewer?

Error 'digital envelope' when starting 1.0.0-rc2 AGE Viewer

Describe the bug
Cannot start AGE Viewer 1.0.0-rc2, by following README.md.
According to https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported , I added --openssl-legacy-provider in frontend/package.json script start, but didn't work.

To Reproduce
Steps to reproduce the behavior:

1. npm run setup
2. npm run start

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Node.js v18.12.1
Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (D:\workspace\tools\age-viewer\frontend\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (D:\workspace\tools\age-viewer\frontend\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (D:\workspace\tools\age-viewer\frontend\node_modules\webpack\lib\NormalModule.js:471:10)
    at D:\workspace\tools\age-viewer\frontend\node_modules\webpack\lib\NormalModule.js:503:5
    at D:\workspace\tools\age-viewer\frontend\node_modules\webpack\lib\NormalModule.js:358:12
    at D:\workspace\tools\age-viewer\frontend\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (D:\workspace\tools\age-viewer\frontend\node_modules\loader-runner\lib\LoaderRunner.js:214:10) 
    at iterateNormalLoaders (D:\workspace\tools\age-viewer\frontend\node_modules\loader-runner\lib\LoaderRunner.js:221:10) 
D:\workspace\tools\age-viewer\frontend\node_modules\react-scripts\scripts\start.js:19
  throw err;
  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (D:\workspace\tools\age-viewer\frontend\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (D:\workspace\tools\age-viewer\frontend\node_modules\webpack\lib\NormalModule.js:417:16)
    at D:\workspace\tools\age-viewer\frontend\node_modules\webpack\lib\NormalModule.js:452:10
    at D:\workspace\tools\age-viewer\frontend\node_modules\webpack\lib\NormalModule.js:323:13
    at D:\workspace\tools\age-viewer\frontend\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at D:\workspace\tools\age-viewer\frontend\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (D:\workspace\tools\age-viewer\frontend\node_modules\loader-runner\lib\LoaderRunner.js:111:13)     
    at D:\workspace\tools\age-viewer\frontend\node_modules\babel-loader\lib\index.js:59:103 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.12.1
ERROR: "front" exited with 1.

Desktop (please complete the following information):

• OS: Windows
• Browser: Microsoft Edge
• Version: 108.0.1462.54

Additional context
I use Node.js v18.12.1

Remove Northwind Assets from Project

No edges on the viewer page

I have run the age docker and age-viewer docker.
The viewer connected ok.
I see the graph vertexes but no edges.
I used these test scripts
https://hub.docker.com/r/sorrell/agensgraph-extension
How to see the edges?

Apache AGE Viewer source code structure

Initial Task to learn and review Apache AGE Viewer source code. Please comment here to be assigned to the project.

Node property not being returned in Table view

Describe the bug
match (n) return n.name
does not show the value of the property
match (n) return collect(n.name) works fine!!

To Reproduce
Create a new graph as follows;

-- drop graph for cleanup between tests
SELECT * FROM ag_catalog.drop_graph('test_graph', true);

-- start from a new graph
-- create parent connected to 2 children with multiple properties
SELECT * FROM create_graph('test_graph');
SELECT * FROM cypher('test_graph', $$
    CREATE (p:person {name: 'parent'})
    CREATE (c1:person {name: 'child1', age: 11 })
    CREATE (c2:person {name: 'child2', age: 12 })
    CREATE (p)-[:connect {type: 'is parent'}]->(c1)
    CREATE (p)-[:connect {type: 'is parent'}]->(c2)
    RETURN p
$$) as (p agtype);

run this query

SELECT * from cypher('test_graph', $$
          MATCH (n)
          RETURN n.name
$$) as (n agtype);

Expected behavior
n

"parent"
"child1"
"child2"
(3 rows)

Screenshots
actual behaviour - property not displayed.

Desktop (please complete the following information):

• OS: [e.g. iOS] -
  Edition Windows 10 Home
  Version 20H2
  Installed on ‎27/‎03/‎2021
  OS build 19042.1348
  Experience Windows Feature Experience Pack 120.2212.3920.0

• Browser [e.g. chrome, safari]
  Google chrome

• Version [e.g. 22]
  Version 96.0.4664.45 (Official Build) (64-bit)

Additional context
docker run --publish=3001:3001 --name=agviewer bitnine/agviewer:latest
docker run -it -e POSTGRES_PASSWORD=mypassword -p 5432:5432 joefagan/incubator-age

Remove Graph Path from Connection information

The Graph Path was used by AgensGraph to know which Graph to run the cypher query against.

MATCH (n) RETURN n;

Since AGE, currently makes the user provide the graph in the query, this is no longer relevant.

SELECT * FROM cypher('graph', $$ MATCH (n) RETURN n $$) as (a agtype);

"Run query" button should be disable meanwhile a query is in process.

Observation: I tried clicking the "run query" button multiple times while a query was processing, Meanwhile it processed the empty queries and resulted in "Query not entered!" multiple times.
It can be annoying for the user when a query takes much time to process and the user keeps clicking the button.

Recommendation: "Button should be disabled until the previous query is being processed".
"Procedure": I throttled the browser to 3G, and run a single query, and clicked the "run query" button multiple times.

Result not rendered.

Describe the bug
while following the build, and run procedure, after npm run start I encountered the following error:

Compiled with warnings.

Compiled with warnings.

src/components/cypherresult/containers/CypherResultCytoscapeContainer.js
  Line 35:7:  Unexpected console statement  no-console

src/components/cytoscape/CypherResultCytoscapeChart.jsx
  Line 117:7:  Unexpected alert  no-alert

src/components/cytoscape/CytoscapeStyleSheet.js
  Line 63:7:  Unexpected unnamed method 'background-color'    func-names
  Line 65:7:  Unexpected unnamed method 'border-color'        func-names
  Line 72:7:  Unexpected unnamed method 'text-max-width'      func-names
  Line 97:7:  Unexpected unnamed method 'line-color'          func-names
  Line 98:7:  Unexpected unnamed method 'target-arrow-color'  func-names

src/components/frame/presentations/CypherGraphResultFrame.jsx
  Line 95:7:   Unexpected alert  no-alert
  Line 111:7:  Unexpected alert  no-alert
  Line 126:7:  Unexpected alert  no-alert
  Line 142:7:  Unexpected alert  no-alert

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

Error: Not connected
    at _callee3$ (/home/afidegnum/Documents/incubator-age-viewer/backend/src/controllers/databaseController.js:54:19)
    at tryCatch (/home/afidegnum/Documents/incubator-age-viewer/backend/node_modules/regenerator-runtime/runtime.js:63:40)
    at Generator.invoke [as _invoke] (/home/afidegnum/Documents/incubator-age-viewer/backend/node_modules/regenerator-runtime/runtime.js:294:22)
    at Generator.next (/home/afidegnum/Documents/incubator-age-viewer/backend/node_modules/regenerator-runtime/runtime.js:119:21)
    at asyncGeneratorStep (/home/afidegnum/Documents/incubator-age-viewer/backend/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
    at _next (/home/afidegnum/Documents/incubator-age-viewer/backend/node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)
    at /home/afidegnum/Documents/incubator-age-viewer/backend/node_modules/@babel/runtime/helpers/asyncToGenerator.js:32:7
    at new Promise (<anonymous>)
info: ::ffff:127.0.0.1 - - [02/Feb/2022:07:02:33 +0000] "GET /api/v1/db HTTP/1.1" 500 51
 {"timestamp":"2022-02-02 07:02:33"}

The database and the graph are corrected all right but no result was rendered after running the edge queries.

here is the screenshot of the issue.

Sample JavaScript codes for DFS and BFS algorithms

Improve node label count metadata query

ANALYZE;
SELECT c.relname AS label, c.reltuples AS cnt
FROM pg_catalog.pg_class c
JOIN pg_catalog.pg_namespace n
ON n.oid = c.relnamespace
WHERE c.relkind = 'r'
AND n.nspname = 'test';

https://github.com/apache/age-viewer/blob/main/backend/sql/meta_nodes/AGE.sql

Must use import to load ES Module

Describe the bug

When running npm run start I get the following stack trace error

> [email protected] start /Users/lhinds/age-viewer-1.0.0-rc2/backend
> babel-node src/bin/www

internal/modules/cjs/loader.js:1080
      throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
      ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/lhinds/age-viewer-1.0.0-rc2/backend/node_modules/antlr4/src/antlr4/index.js
require() of ES modules is not supported.
require() of /Users/lhinds/age-viewer-1.0.0-rc2/backend/node_modules/antlr4/src/antlr4/index.js from /Users/lhinds/age-viewer-1.0.0-rc2/backend/src/tools/AGEParser.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/lhinds/age-viewer-1.0.0-rc2/backend/node_modules/antlr4/package.json.

    at Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
    at Object.newLoader [as .js] (/Users/lhinds/age-viewer-1.0.0-rc2/backend/node_modules/pirates/lib/index.js:141:7)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/lhinds/age-viewer-1.0.0-rc2/backend/src/tools/AGEParser.js:20:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Module._compile (/Users/lhinds/age-viewer-1.0.0-rc2/backend/node_modules/pirates/lib/index.js:136:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1092:10) {
  code: 'ERR_REQUIRE_ESM'
}

ProductName:		macOS
ProductVersion:		13.0.1
BuildVersion:		22A400

node --version
v14.16.0

Log file attached

Archive.zip