Gremlin-Visualizer

This project is to visualize and edit the graph network corresponding to a gremlin query.

Setting Up Gremlin Visualizer

To set up gremlin visualizer, you need to have node.js and npm installed in your system.

• Clone the project

git clone https://github.com/SRI-International/gremlin-visualizer.git

• Install dependencies

npm install

• Run the project

npm start

• Open the browser and navigate to

http://localhost:3000

Note - Frontend starts on port 3000 and simple Node.js server also starts on port 3001. If you need to change the ports, configure in package.json, proxy-server.js, src/constants.js

Setting up with Docker

You can build a Docker image of the gremlin visualizer with the included Dockerfile. This will use the current version of the master branch of the source GitHub repository. The Docker image can be built by calling the docker build command, for example:

docker build --tag=gremlin-visualizer:latest .

The Docker image can then be run by calling docker run and exposing the necessary ports for communication. See Docker's documentation for more options on how to run the image.

docker run --rm -d -p 3000:3000 -p 3001:3001 --name=gremlin-visualizer --add-host=host.docker.internal:host-gateway gremlin-visualizer:latest

Note that --add-host=host.docker.internal:host-gateway is not needed if you don't run your gremlin server in the host machine. If trying to access a gremlin server on localhost, set host.docker.internal in the gremlin-visualizer settings instead.

The Docker container can be stopped by calling docker stop gremlin-visualizer.

Usage

• Start Gremlin-Visualizer as mentioned above
• Start or tunnel a gremlin server
• Specify the host and port of the gremlin server
• Write a gremlin query to retrieve a set of nodes (eg. g.V())

Adding Nodes and Edges

Shift-clicking in empty space will open a dialog to add a new node to the graph.

Shift-click-drag between two nodes will add an edge.

Adding Custom Icons

Add icons into the src/assets/icons folder. Edit src/assets/icons.ts to add a mapping for node type to icon.

Example:

const icons: Record<string, string> = {
  person: require("./icons/person.jpg"),
};

This would render person.jpg for all nodes with the 'person' type label. Capitalization matters.

Custom Node Labels

To configure the initial displayed node labels, edit INITIAL_LABEL_MAPPINGS in src/constants.js. Maps the value of the given node property to the display label of the given node type. Example:

export const INITIAL_LABEL_MAPPINGS = {
  person: 'name'
}

This would set the default display label to the name property on nodes with type 'person'. Capitalization matters.

Changing Graph Visualization Implementation

The graph can be rendered with vis-network, cytoscapejs, or sigmajs. The default is vis-network. To change the graph implementation, edit src/constants.js and change GRAPH_IMPL. The possible values are 'vis', 'cytoscape', or 'sigma'. Available layouts algorithms are specific to each graph implementation.

Features

• If you don't clear the graph and execute another gremlin query, results of previous query and new query will be merged and be shown.
• Node and edge properties are shown once you click on a node/edge
• Change the labels of nodes to any property
• View the set of queries executed to generate the graph
• Traverse in/out from the selected node
• Edit, add, or remove properties to existing nodes and edges
• Add new nodes and edges
• Change layout algorithm
• Save and restore node positions into layout
• Customize node icons and labels base on node types
• Vis-network, cytoscape, and sigma graph rendering engines