Baryon

• 

  Baryon gives you a power to build simple ui view of glued Nodes in a intuitive manner

Inspiration

Hidden relationships among things bug me all the time. Node-edge-graph is impressive at first, but hard to inspect deeper. I wanted to visualize relations among EVERYTHING in a fun and intuitive way. I named Baryon after a physics particle. Baryon in physics is a subatomic particle composed with quarks. If you compare graph nodes to quarks, you can think of this react component as a structure composed of multiple quarks, just like a baryon.

What it does

Baryon is a react component to compose organized ui view for your neo4j graph that allows you to inspect simply and intuitively. This enables users to explore further relations from one node to another.

• 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 node-label-properties(*1)
• Relations are categorized depending on relationship-types
  • Each node-label-property is a collection of relationship-types
  • ex: Both BROTHER_OF and SISTER_OF go into sibling node-label-property
• URL path to Baryon ui on your app can be configured

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

To implement Baryon into your own react app, all you need to do is, calling Baryon component in your JSX, and passing name of node in quark_name props. Now Baryon renders your neo4j graph data in a organized ui view.

import Baryon from '@bit/euonymus.baryon.baryon';

function App() {
  return (
    <Baryon quark_name="The Matrix"
            connection={{
              uri: 'bolt://{domain}:{port}',
              user: '{username}',
              password:'{password}'
            }}
            hasSecondLevel={true}
        graphPath={false} />
  );
}

hasSecondLevel and graphPath props are optional

How I built it

I used create-react-app to generate a bootstrap, and divided Baryon part into a folder, so that I can separately work on Baryon component itself and wrapping app to test it. I implemented Storybook so I could work on individual components in baryon one by one, then I used Chromatic, In order to do snapshot test. To isolate baryon component from the wrapping app, I used bit-bin.

When it comes to the data modeling, I designed relationships between node-labels and node-label-properties; node-label-properties and relationship-types. So each node-labels can have node-label-properties, such as Parents, Children or Spouse in Person for instance. Both SON_OF and DAUGHTER_OF relationship-types can be categorized in Children node-label-property. I generalized node data and relationship data by giving consistent properties, such as name, description, image_path, start_date, end_date, start_accuracy, end_accuracy, is_momentary, and url. As long as you keep this criteria, you can visualize any kinds of nodes in Baryon.

Challenges I ran into

To let anyone use Baryon, I struggled with designing generalized data structure, so that any nodes in any situation can be applied. Categorizing node-label-properties was especially hard part, such as.

• What node-labels have what node-label-properties.
• What node-label-properties have what relationship-types.

Another challenge was language translation. Even though I used RDF triple to generate sentences in relationships, it was hard to apply to all the languages at once. Because different languages have different order and constructions.

Accomplishments that I'm proud of

• In this product, I applied "time-oriented graph theory", which I advocate. So now you have power to sort and filter nodes.
• I achieved to design Baryon component being used with a very simple sole parameter, the name of subject node. It was difficult to generalize those diverse data into one formatted view.
• I succeeded to express relations in sentences by the power of RDF triple.

What I learned

This was done with a strong awareness of contributions to HOW I CAN ATTRACT PEOPLE TO USE NEO4J OR THEM INTERESTED IN NEO4J. I assume why graph database is used by analysts or scientists, but not people in general is that the use cases are too academic or businesslike. I would like to push up neo4j to be used in a media like things those people see everyday life.

What's next for Baryon

Right now Baryon is local private use only. Because Baryon connects to neo4j directly, so if you publish your project, your ID / password will be exposed. I'm planning to combine Baryon component with GraphQL backed API and make it possible to publish your project.

Built With

• javascript
• neo4j
• react