invana / invana-studio

Open source graph visualiser.

Invana Studio

Open source graph visualiser.

Setup Invana Studio

docker run -p 8300:8300 -d --name invana-studio invanalabs/invana-studio

This will start a invana-studio service at 8300 port. ex: http://localhost:8300

Invana Studio uses Invana Engine as the backend to connect to graph databases. Invana Engine is a GraphQL API for Apache TinkerPop supported graph databases.

Refer documentation for more information on how to setup invana-engine and JanusGraph for Invana Studio.

License

Apache License 2.0

Support

For any other assistance, please feel free to get in touch at hi[at]invana.io.

invana-studio's Issues

add tests

properties not shown

I'm using the latest docker containers of graphexplorer & -engine and janusgraph with lucene backend, I can query edges & vertices without any problem, but the UI does show any properties (edges & vertices), but in the database properties are existing, see screenshot. I have tested it with Chrome, Firefox & Safari.

invana-studio doesn't connect to invana-engine using docker compose

This is my docker compose file

version: '3'

volumes: 
    janusgraph-default-data:

services:
    janusgraph:
        image: docker.io/janusgraph/janusgraph:latest
        container_name: janusgraph
        ports:
            - "8182:8182"
        # The mounted volume only makes sense if JanusGraph is being run with the BerekeleyDB storage.
        volumes:
            - "janusgraph-default-data:/var/lib/janusgraph"

    invanaui:
        image: invanalabs/invana-studio
        container_name: invana-studio
        ports:
            - "8888:8888"

    invanaengine:
        image: invanalabs/invana-engine
        container_name: invana-engine
        ports:
            - "8200:8200"
        environment:
            - GREMLIN_SERVER_URL=ws://janusgraph:8182/gremlin

When I try connecting to the invana-engine, I tried both 'http://localhost:8200/graphql' and 'http://invanaengine:8200/graphql'

Both didn't work. The url shows 'http://invana-studio.herokuapp.com/connect?error=Failed%20to%20connect&transporterStatus=999'

Am I doing anything wrong? My janus graph is working and I am able to execute Gremlin queries on it via my node.js app

TypeError: e.connector.requestBuilder is undefined (Uncaught exception)

When accessing the graph explorer in Firefox (83.0) on Windows 10, the page remains black. The console log of the browser prints the following error:

11:53:01.118 connector constructor base.js:31:16
11:53:01.119 ======isLoading null spinner.js:23:16
11:53:01.123 gremlin-component componentDidMount graph-component.js:167:16
11:53:01.124 redirectToConnectIfNeeded utils.js:173:12
11:53:01.124 We will be using ws protocol graph-component.js:171:20
11:53:01.124 setupWebSocket triggered=========================== websocket.js:72:16
11:53:01.126 gremlin-component componentWillUnmount triggered graph-component.js:188:16
11:53:01.126 TypeError: e.connector.requestBuilder is undefined
    value home.js:15
    React 2
    unstable_runWithPriority scheduler.production.min.js:19
    React 9
    <anonymous> index.js:6
    l (index):1
    <anonymous> main.5110d596.chunk.js:1
    l (index):1
    t (index):1
    r (index):1
    <anonymous> main.5110d596.chunk.js:1
react-dom.production.min.js:209:194
    React 5
    unstable_runWithPriority scheduler.production.min.js:19
    React 4
    unstable_runWithPriority scheduler.production.min.js:19
    React 6
    <anonym> index.js:6
    l (index):1
    <anonym> main.5110d596.chunk.js:1
    l (index):1
    t (index):1
    r (index):1
    <anonym> main.5110d596.chunk.js:1
11:53:01.127 Uncaught TypeError: e.connector.requestBuilder is undefined
    value home.js:15
    React 2
    unstable_runWithPriority scheduler.production.min.js:19
    React 9
    <anonymous> index.js:6
    l (index):1
    <anonymous> main.5110d596.chunk.js:1
    l (index):1
    t (index):1
    r (index):1
    <anonymous> main.5110d596.chunk.js:1
home.js:15:8
11:53:01.141 connected websocket.js:34:16
11:53:01.141 received event 
Object { statusMessage: "Connected", isConnected: true }
graph-component.js:236:16
11:53:01.142 ===eventName statusMessage Connected graph-component.js:217:16
11:53:01.142 ===eventName isConnected true graph-component.js:217:16
11:53:01.142 setIsConnected2Gremlin true graph-component.js:161:16

show error message when a query is executed

When a query is made on the studio, if the query failed with non 200 status, the error message should be shown to the user.

Example Data of Graph Data

• investor use case 1 - Startup and Investors Graph (Startup, Projects, Investors, Contributors)
• health care use case 1 - Drug Repurposing Database
• e-commerce use case 1 - Store, User, Product, Sale

Show Query Response elapsed time

Show query elapsed time in

• loading ui
• on response Message.

Review JSON canvas

Note sure if grouping json canvas is useful

Connect to Neo4j

I have installed graph-explorer on the same remote machine (aws ec2 instance) where i have installed neo4j DB.
I can access both graph-explorer UI (home screen alone) and Neo4j UI remotely.
I m unable to connect the graph-explorer via "http" . i tried both via IP & localhost . both doesnt work
http://username:[email protected]:7474/ &
http://username:password@localhost:7474/

But how do i connect the graph-explorer to neo4j database without https. I dont have TLS enabled on my server and neo4j https is disabled . Is there any config that can be adjusted so that i can connect via "bolt" or "http".

one Click deploy button to google run in README

Setup a button to deploy in readme.md

Reference : https://cloud.google.com/blog/products/serverless/introducing-cloud-run-button-click-to-deploy-your-git-repos-to-google-cloud

Implement Automation testing

Discussions on implementation to use for Automation testing

Manage Indexes |

Just like there are views to manage colors of vertices, and view the labels. We need index management view to

• show list of indexes
• create index
• delete index

Add version, branch and commit SHA to build.txt in the generated build

create build.txt in the build/ folder with sha of the git commit used to generate build. This can be either accessed over http://localhost:3000/build.txt or show it the in the view.

add bgImageUrl to vertices <circle> in Management view

Create docker images on PRs, Releases and Master

no UI

Attempting to give graph explorer a try:

docker run -d -p 8182:8182 --name janusgraph-default janusgraph/janusgraph:latest
docker run -p 8888:80 -d --name graph-explorer invanalabs/graph-explorer:test

The UI doesn't appear to render:

This is chrome, but same issue on edge on OSX and safari.

Using Docker desktop community 2.3.0.2 stable on OSX 10.14.6.

Setup greetings for contributors

when the mouseover it didn't works

when submit a query , the mouse move in the graph area , the graph didn't works well,

generate electron builds for Windows, Mac and Ubuntu with Actions

We want to serve this application as standalone apps too, and todo that, we need to generate builds needed for the same.

Reference

• https://medium.com/@duytq94/bundling-your-react-web-to-a-desktop-app-with-electron-1b19ebcf8933

Connect to authentication enabled gremlin server

Check if gremlin accepts basic authentication using connection string like ws://user:pass@localhost:8182/gremlin . If it does graph-explorer automatically supports authentication enabled gremlin server

toggle show/hide legend on the canvas

Are secure websockets supported?

Hi,

firs of allt: awesome work what you did here 👍

I tried the graph explorer with a janusgraph db on my machine (localhost) and everything worked fine.

However, when I tried to do the same setup with a remote janusgraph the app is not able to connect to the remote gremlin server.

Steps I made:

• spun up a new Digital Ocean droplet with docker installed
• installed janusgraph via docker run -it -p 8182:8182 --name janusgraph janusgraph/janusgraph:0.4.1
• opened your app on heroku (https://graph-explorer.herokuapp.com/)
• tried to connect via websocket: ws://<my_ip>:8182/gremlin -> this was not working at all because my browser forbid to connect to non-secured websocket
• tried to connect via websocket secure: wss://<my_ip>:8182/gremlin -> according to debug console the websocket handshake timed out

Should i do anything different for a remote janusgraph?

Any advice is highly appreciated :)

Kind regards,
Thomas

Edge label is not displayed

Hi,

I have created graph data on janusgraph gremlin server. I am able to get the vertices and the edges between them by using gremlin console query.

When I use the invana graph explorer, I am unable to view the edge label by default.

Is there any settings to enable the edge label to be viewed?

Thanks,
Daniel

Setup Production Build.

• remove console.logs
• create build.txt in the build/ folder with sha of the git commit used to generate build - #28

Add Usage Documentation

Add User documentation for things like

• Run a gremlin script to import data
• Learn section in the Build on Basic Queries of Graph
  • Create vertex with properties
  • Create an edge between two nodes and add properties
  • Update vertex properties
  • Update Edge Properties
  • Delete Properties of Vertex
  • Delete Properties of Edges
  • Delete Vertex
  • Delete Edge

Error response from daemon: OCI runtime create failed:

Run command
docker run -p 8000:8000 -d --name invana-engine invanalabs/invana-engine -e GREMLIN_SERVER_URL=ws://localhost:8182

And got this error:
docker: Error response from daemon: OCI runtime create failed: container_linux.go:349: starting container process caused "exec: \"-e\": executable file not found in $PATH": unknown.

docker info

Client:
 Debug Mode: false
 Plugins:
  scan: Docker Scan (Docker Inc., v0.3.4)

 Containers: 8
  Running: 4
  Paused: 0
 Images: 20
 Storage Driver: overlay2
  Backing Filesystem: extfs
  Native Overlay Diff: true
 Logging Driver: json-file
 Cgroup Driver: cgroupfs
  Volume: local
  Log: awslogs fluentd gcplogs gelf journald json-file local logentries splunk syslog
 Swarm: inactive
 Runtimes: runc
 Default Runtime: runc
 Init Binary: docker-init
 containerd version: 8fba4e9a7d01810a393d5d25a3621dc101981175
 runc version: dc9208a3303feef5b3839f4323d9beb36df0a9dd
 init version: fec3683
 Security Options:
  seccomp
   Profile: default
 Kernel Version: 4.19.128-microsoft-standard
 Operating System: Docker Desktop
 OSType: linux
 Architecture: x86_64
 CPUs: 2
 Total Memory: 5.805GiB
 Name: docker-desktop
 ID: ILVR:JMGB:VGZB:ADMZ:2M4J:PRSH:BFNE:4MWU:3XDA:5QUB:D66N:BGEE
 Docker Root Dir: /var/lib/docker
 Debug Mode: true
  File Descriptors: 80
  Goroutines: 86
  System Time: 2020-12-07T13:49:47.7052343Z
  EventsListeners: 6
 Registry: https://index.docker.io/v1/
 Labels:
 Experimental: false
 Insecure Registries:
  127.0.0.0/8
 Live Restore Enabled: false
 Product License: Community Engine

WARNING: bridge-nf-call-iptables is disabled
WARNING: bridge-nf-call-ip6tables is disabled

setup actions for stale issues

Incorrect order of [red, green, blue] in src/core/utils.js function LightenDarkenColor()

In src/core/utils.js, in the function LightenDarkenColor(), we find the following code:

    let r = (num >> 16) + amt;

    if (r > 255) r = 255;
    else if (r < 0) r = 0;

    let b = ((num >> 8) & 0x00FF) + amt;

    if (b > 255) b = 255;
    else if (b < 0) b = 0;

    let g = (num & 0x0000FF) + amt;

    if (g > 255) g = 255;
    else if (g < 0) g = 0;

    return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16);

This is splitting the color into [red, blue, green] components, but it should be [red, green, blue]. Since it's just adding an even amount to each of them, and putting back the color components in the same order, it works correctly, but it would be nice to fix it anyway for clarity, since the actual order of color components is [r, g, b], and this would be confusing.

Looking for Code Contributors and Reviewers

Hello Coders

I'm looking for code reviews and contributors to create a streamlined

[ ] setup CI/CD pipeline for testing on Travis
[ ] generating builds for developer testing, production demo on heroku and Google cloud run, electron builds for generating standalone app.
[ ] review code - code sanity, optimise for performance and longevity of this project.
[ ] write automation tests and setup test coverage standards.

The project status is in close to alpha version now, so wanted to scale the speed of project with help from opensource.

TLDR:

I'm Ravi, an IT consultant based in Hyderabad. I have been exploring Graph Databases for over a year, and found it every fascinated by the way, it can allow us organise data and find solutions for our questions. The best part of Graph Databases are heavily optimised for reads because every connection in always established on the write itself.

Coming back to this project, this is meant to be the User Interface for the Graph Data. This involves features like showing the connected data using data graphs, giving better visual feedback for the queries by users.

While I build the product, I'm looking for few more coding hands with expertise in reactjs development and build life cycle.

Thanks ! Looking forward

CosmosDB Gremlin support

First off, thanks for making this - looks like a very useful tool.

I tried to use it with Gremlin API from Microsoft CosmosDB, but couldn't figure out the authentication.

I have a wss:// URI and tried putting the 'key' from Azure portal as the token, but it wouldn't authenticate.

Anyone know how to use this with CosmosDB?

Thanks!

Is it works with AWS Neptune

Hi

Is GUI works with AWS Neptune behind Gremlin TinkerPop server?

abilitiy to change the gremlin connection URL

Currently, there is no way for use from interface to disconnect from one gremlin server and add another one. Need to give a Disconnect button that would let use to connect to a new server.

Two usecases:

• when server is not able to connect, is should show a button to change server URL
• when is user is already working on something and want to connect to a new server URL

generate master build and deploy to heroku

"Failed to connect. WebSocket connections are not supported at the moment."

First of all thank you very much for maintaining this great project! I've been using it over the last months and it was always a great tool while tinkering around with JanusGraph.

I've encountered the following problem in the last time:
When opening the interface and trying to connect, it presents me the following errors in multiple browsers: Failed to connect. WebSocket connections are not supported at the moment., making it impossible to continue using it.

Is this a known problem? Or is the source of this error found somewhere else?

Thanks in advance!

UI failing in safari Mac

show list of vertices

There should be a way to access list of all the vertices in the graph.

toggle dark mode - light mode in the UI

Retrying connection in /index view not redirecting to /explorer

After attempts to re-connect to server from / view, if the connection if successful, it should automatically redirect to /explorer view. but its not redirecting.

managing multiple gremlin server connection urls

Connect to and Manage multiple connection(gremlin) URLs. Label the connection URL with a verbose name, create a flag that shows the result of last connection attempt.

• Connect to a gremlin server and visualise [P1]
• Disconnect from gremlin server [P1]
• Switch to a new gremlin server connection / url.

Example: Save something like this in the background.

{
   "connectionUrl": "http://localhost:8182/gremlin",
   "connectionName": "Local",
   "authToken": null,
   "isLastConnectionAttemptSuccess":  true
}

Finalise Release Pipeline

Notes of how the release flow should look like for this project.

• on Pull Request (to Master)
  • deploy a graph-explorer-edge application on Heroku
• on Push/Merge (to Master)
  • generate and push build to docker registry
  • deploy latest version to heroku

remove jquery dependencies

add color picker in nodes and links management views

In this view at http://localhost:3000/management/nodes, for the fields, that show colour hex-codes, that should be change that into colour picker.

Please add a license to this repo

First, thank you for sharing this project with us!

Could you please add an explicit LICENSE file to the repo so that it's clear
under what terms the content is provided, and under what terms user
contributions are licensed?

Per GitHub docs on licensing:

[...] without a license, the default copyright laws apply, meaning that you
retain all rights to your source code and no one may reproduce, distribute,
or create derivative works from your work. If you're creating an open source
project, we strongly encourage you to include an open source license.

Thanks!

Load and create example data using queries.

Create example data, that can be loaded on the screen.

Azure CosmosDB support

Hi there and thanks for providing this project!

Are there any plans to be able to connect to an Azure CosmosDB graph database? In comparison to your default Gremlin endpoint ws://ip-address:8182/gremlin it runs under wss://:443/gremlin and requires a key for authentication and the database/collection names, see https://docs.microsoft.com/en-us/azure/cosmos-db/create-graph-gremlin-console#ConnectAppService.

Thanks!

generate testing builds

With a trigger; deploy a build on heroku for developer testing.

Take gremlin server url as input from user on UI first load

currently the explorer can use only local gremlin server, this new feature aims at loading data from remote gremlin servers too

add horizontal scroll to table canvas

when a vertex has too many properties, the width of the table exceeds the viewport of the table canvas, making it unable to view of the rest of the table that is not in the viewport

Graph Explorer Unable to Connect

Following the instruction on the Graph Explorer GitHub page, I'm presented with this error when trying to connect to my TinkerPop Graph DB

I know I can connect to my JanusGraph/TinkerPop Gremlin Server running at http://localhost:8182 as I can remotely connect to it through the gremlin console and perform queries.

Is there a step I might have missed or is there a configuration issue between the latest graph-explorer and invana-engine?

Import graph data from a remote gremlin file.

https://graph-explorer.herokuapp.com/explorer?import-data=http://raw.github.com/invanalabs/graph-explorer/example-file.gremlin

Requirement:
Check if the import-data url param ends with .gremlin.
If no to .gremlin extension, ignore
If Yes to .gremlin extension, ask "If you want to import data from xyz source".
If no from user to import, remove the import-data param from URL, to avoid any accidental re-import request.
If yes from user to import, read the file, make a query to the backend, remove the import-data param from URL. Show successfully imported data