Connecting to JanusGraph

This tutorial describes the process of loading data from JanusGraph and displaying it with Ogma.

JanusGraph is a scalable graph database optimized for storing and querying graphs containing hundreds of billions of vertices and edges distributed across a multi-machine cluster. JanusGraph is a transactional database that can support thousands of concurrent users executing complex graph traversals in real time.

JanusGraph is a project under The Linux Foundation, and includes participants from Expero, Google, GRAKN.AI, Hortonworks, IBM and Amazon.

Connecting to JanusGraph

JanusGraph is TinkerPop compliant, and ships with Gremlin-Server. This means that you can communicate with JanusGraph using the Gremlin query language.

To communicate with JanusGraph via its embedded Gremlin-Server, we are going to use the gremlin-client library.

You can also pass in the raw GraphSON response from Gremlin TinkerPop client.

const host = 'localhost'; // hostname of your JanusGraph installation
const port = 8182; // by default Gremlin-Server starts on port 8182
const Gremlin = require('gremlin-client/gremlin');
const client = Gremlin.createClient(port, host, {});

Send a Gremlin query

Gremlin-Server expects requests written in the Gremlin query language. Gremlin queries represent sequences of functional steps to retrieve vertices (or nodes) and edges. Gremlin queries usually start with the g keyword, which represents the graph. For instance, g.V() represents all the vertices of the graph and g.E() all its edges.

In this example we retrieve the first 10 vertices of the graph, all the edges of these vertices and return these nodes and vertices to display them with Ogma.

// The Gremlin query
g
 .V().limit(10).store("v") // retrieve the 10 first vertices, store them in "v"
 .bothE().store("e") // retrieve both incoming and outgoing edges for these vertices, store them in "e"
 .cap("e", "v")  // wait until the "e" and "v" streams are fully traversed

For more details about the Gremlin query language, please refer to the Gremlin language reference.

To run this query on our webpage with our Gremlin client, we use the following code:

const query = 'g.V().limit(10).store("v").bothE().store("e").cap("e", "v")';
client.execute(query, {}, function (error, janusResponse) {
  if (err) {
    console.log('Gremlin query error: ' + error.message);
  }
  console.log('Response from Gremlin server: ', janusResponse);
});

The response should look like this:

[
  {
    "e": [
      {
        "id": "odxc8-37k-27th-3a8",
        "label": "WORKS_FOR",
        "type": "edge",
        "inVLabel": "COMPANY",
        "outVLabel": "PERSON",
        "inV": 4256,
        "outV": 4160,
        "properties": {
          "since": 2016
        }
      }
    ],
    "v": [
      {
        "id": 4160,
        "label": "PERSON",
        "type": "vertex",
        "properties": {
          "name": [
            {
              "id": "16w-37k-1l1",
              "value": "Maxime"
            }
          ],
          "age": [
            {
              "id": "1l4-37k-4qt",
              "value": 36
            }
          ]
        }
      },
      {
        "id": 4256,
        "label": "COMPANY",
        "type": "vertex",
        "properties": {
          "country": [
            {
              "id": "1zo-3a8-35x",
              "value": "France"
            }
          ],
          "city": [
            {
              "id": "1lg-3a8-2dh",
              "value": "Paris"
            }
          ],
          "name": [
            {
              "id": "178-3a8-1l1",
              "value": "Linkurious"
            }
          ]
        }
      }
    ]
  }
]

Parsing the Gremlin-server's response

We now need to transform the response from the Gremlin server into a format understood by Ogma. Ogma embeds a JanusGraph translator, so parsing and importing the response into Ogma is a simple as this:

Ogma.parse.janus(janusResponse).then(function (rawGraph) {
  return ogma.this.ogma.addGraph(rawGraph, { locate: {} });
});

Applying styles and layout to the graph

To make our graph more readable, we apply some styles and a layout. For more information about styling, please refer to the Styling Tutorial.

// add a Rule so style the nodes
ogma.styles.addNodeRule({
  // the caption of a node is the content of "property.name"
  text: {
    content: this.ogma.rules.template('{{properties.name}}'),
    color: '#333333'
  },

  color: this.ogma.rules.map({
    field: ['categories'],
    values: {
      COMPANY: '#ffbb55', // companies in orange
      PERSON: '#4488ff' // persons in blue
    },
    fallback: '#666666' // other nodes in gray
  }),

  radius: this.ogma.rules.map({
    field: ['categories'],
    values: {
      COMPANY: 7, // companies: bigger size
      PERSON: 5 // persons: regular size
    },
    fallback: 5
  })
});

// Apply a force-directed layout
ogma.layouts.forceLink({});