Baryon the Neo4j React UI Component

Satoshi (euonymus)
Neo4j Developer Blog
6 min readOct 21, 2019

What is Baryon?

Baryon is a react component to compose organized UI view for your Neo4j graph that allows you to inspect simply and intuitively

You can see more about Baryon

Why Baryon?

The reason why I created Baryon is that I wanted to show the power of graph to ordinary people. I thought Graph database like Neo4j is been used in rocket science for years among researchers and scientists, but the foundation of graph lays everywhere in life. Baryon can visualize any kinds of relationships in a media like UI view, so people can easily dig deeper to find surprising connections among things.

What it does

  • Baryon provides you a simple UI to inspect Neo4j graph data
  • Subject node appears in the main area
  • Relationships appear in a list
  • Each relationship is expressed in sentence powered by RDF triple
  • Each node or relationship can have start-date and end-date
  • Relationships are sorted by start-date of relationships, then start-date of nodes
  • Secondary relationships on each connected node is listed below the node
  • Secondary relationship list can be configured to be On / Off
  • Each node-label has their label-properties(*1)
  • Relations are categorized depending on relationship-types
  • Each label-property is a collection of relationship-types(*2)
  • URL path to Baryon UI on your app can be configured

(*1): label-properties are not the properties in Neo4j terms. label-properties are semantic types belong to labels, for instance Person has Parents, Children and so on.

(*2): Both BROTHER_OF and SISTER_OF go into siblings label-property

The key of Baryon is Data Modeling

In order to organize data in a consistent structure, you are required to keep some small rules.

There are two aspects in data modeling on Baryon

  1. Criteria you need to keep
  2. Data Models those Baryon takes care

Criteria you need to keep

When you create nodes and relationships on Baryon, properties are the key.

  • Actionable node properties
  • Actionable relationship properties

Actionable properties are the properties those give some visual effects on Baryon Component. Those are all optional except name property. So you don’t need to worry about filling all the properties at once. It’s just better to have.

Actionable properties on Baryon

You can see what is actionable properties at github repository

Baryon cares about life time of nodes and relationships.

Nodes are the representative of Things in Universe. And things always have birth moment and death moment. Even though sometimes those are vague. So Baryon asks nodes to have start and end property. start represent the birth moment of the Node and end does the death moment. Some nodes happens momentary like a spark, such as Events. In this case you don’t have end property, but set is_momentary True.

Like wise, Relationships have start and end properties. As well, relationship always starts at some point, and ends eventually

Interestingly, both nodes and relationships live in similar time period have stronger relations each other. People live in the same era may know each other. Two people worked at the same company at the same period surely knows each other. So sorting and filtering by the life time does have a lot of meanings. Relationships in Baryon are always sorted by the start property. Unfortunately filtering feature is not yet implemented. It will be in the future.

Data Models those Baryon takes care

The reason why Baryon can organize categories neatly is because Baryon have its own data model inside. Baryon is built with following structures

Baryon’s abstract Data Structure
  • Subject Node (on Neo4j)
  • Label (on Neo4j)
  • Template (on Baryon)
  • Label Property (on Baryon)
  • Type List (on Baryon)
  • Type (on Neo4j)
  • Relationships (on Neo4j)
  • Object Node (on Neo4j)

Node and Label

These are Neo4j Resources. As you know, node is a thing like “John”, “Neo Technology” or anything. Label of course is a role of nodes, such as Person, Company, MusicSong, or stuff.

Template, Label Property and Type List

In the Neo4j world, Types of Relationships are like, IS_SON_OF, IS_DAUGHTER_OF, WORKED_AT, IS_GRADUATED_FROM and STUDIED_AT. Each of them contains individual contexts. You can group relationships by IS_SON_OF type easily, but if you need to group IS_SON_OF and IS_DAUGHTER_OF into the same category, it’s not so simple.

On the other hand, Each Label has its own characteristics. For instance, Person has Spouses, Parents, Children, Siblings, Jobs, Alma maters, Works. Company has Parent Organizations, Sub Organizations, Founders, Employees, Products, Services and so on. Come to think of it. These are not directly the Type of Relationships. So I call them Label Property. Templates represent these characteristics by grouping these Label Properties.

Template

Template is a group of Label Properties on each Label of Node. Every Label has its Template.

Examples of Template

Label Property

Label Properties are properties on each Label. As an example, Person almost always has Parents, Jobs. whereas MusicGroup has Members and Discography.

Person Template with Label Properties

Type List

Label Property also is a group of Types. For example Parents Label Property may have Types like IS_SON_OF, IS_DAUGHTER_OF, IS_CHILD_OF. Because I want to keep the model simple, I always add directed relationship from New generation to Older one. So there is no IS_PARENT_OF Types. Now, all these different Types have to be under Parents or Children Label Property. You may notice that direction of the relationships matter, and that’s what Baryon takes care of.

Example Data Structure in Baryon

Example Data Structure in Baryon

How to Use

To use Baryon, please take a look at Github repository

Future works

I started Baryon when Neo4j announced Global GraphHack. Because this is in the part of a hackathon, I didn’t have time to penetrate many things. I still have a lot of ideas to improve this.

  • Life time filtering
  • Activate GraphQL version, so that you can publish your project without exposing your Neo4j ID/password
  • Login feature to achieve your private graph
  • Create a new style media on Baryon with universal Graph data

Baryon is a derived project from gluons

gluons is my original project before Baryon is started.

“gluons” is a new style media which introduces all the relationships in universe with graph structured data. Current gluons does not use Graph Database, but data structure is exactly same as graph. Baryon is a derived project from gluons, which only represent UI view part of it.

In other words, gluons is a media having its own dataset, and Baryon is a UI view that gluons will also use in the near future.

gluons

I believe gluons can replace Wikipedia.

NOTE1: Because I started Japanese version first, Japanese gluons is much more substantial than English one. But you can still get some feelings from English version hopefully.

NOTE2: gluons is extremely slow, because it does not use graph database behind. I’m planning to migrate to Neo4j soon.

--

--

Satoshi (euonymus)
Neo4j Developer Blog

I am an entrepreneur, a philosopher, an engineer, a photographer, an illustrator, a guitarist and a historical researcher.