top of page

Neo4J Cypher EZ-Button: Simplifying Data Transformation

  • spectric-labs
  • Sep 13
  • 3 min read

In the world of data management, handling large and highly interconnected datasets can be a daunting task. Enter the Neo4J Cypher EZ-Button, a Vue and BaklavaJs-based tool designed to visually transform CSV files and construct Cypher code with ease. 


The following blog post is from work performed during Spectric’s Summer Intern Program. For more information on our Intern Program please reach out to info@spectric.com. 



ree

The Problem Statement


One of our customers faced a significant challenge: a team of analysts was processing a large dataset into a Neo4J database. The data, handed to different individuals, ended up in slightly different formats. For instance, phone numbers were not standardized, and names were split into first and last name fields instead of a single name field. The team needed to transform these datasets to match the structure of the existing database and other datasets. Handwriting all the Cypher code for these transformations was a tedious and error-prone task. .


ree

The Solution: Neo4J Cypher EZ-Button


Spectric saw an opportunity to create a tool that would simplify this process. The Neo4J Cypher EZ-Button allows users to input CSV files, visually add transformations on individual headers, design Neo4J nodes and relationships to receive the data, and construct the Cypher code to add the data. 


Understanding Neo4J


Neo4J is an open-source noSQL graph database that excels in handling large, highly interconnected datasets. Data is represented by nodes and relationships. Nodes have labels and properties, while relationships must have a single relationship type but can have as many or as few properties as needed. 


ree

The User Interface


The UI of the Neo4J Cypher EZ-Button is built using Vue, an open-source JavaScript framework, and Baklava.js, a node/graph editor that extends Vue. This combination allows for the creation of a free-form, customizable node-based workflow to represent data transformations. The UI layout is divided into four major parts: 

  1. Node Workspace: Where nodes are placed and connected, visually displaying the transformations. 

  2. Toolbar: Allows users to save and load the graph state, copy and paste nodes, and center their view on the graph. 

  3. Node Palette: Holds all nodes registered to the Baklava Editor. Nodes can be dragged from the palette and dropped into the workspace. 

  4. Toasts: Communicate successful actions or errors to the user. 


ree

How It Works


When nodes are connected, they pass their outputs to another node’s inputs. Transformations happen on each individual node, and the original file is not modified. For example, a CSV file is opened, and its headers are added as outputs on the far-left node (Input File Data). The “name” output is connected to a SplitTextNode, which splits the name into first and last names. These are then connected to a Neo4JNode, which sets up the node to receive the data.


ree

Baklava Complexity


Each transformation step, or node, is handled in its own JavaScript file. Nodes take in some number of inputs, perform a calculate() function using those inputs, and return the values to set the outputs. Dynamic nodes, like the file input node, have an onUpdate() function that handles the addition and removal of inputs/outputs. 


Static Interfaces 

Dynamic Interfaces 

Dropdowns (SelectInterface) 

Connecting to another node (NodeInterface) 

Checkbox (CheckBoxInterface) 

Custom Vue component overrides a NodeInterface. 

Text display or textbox (TextInterface, TextInputInterface, TextAreaInputInterface) 

 

Number input (NumberInterface or IntegerInterface) 

 

Button (ButtonInterface) 

 


Next Steps


The Neo4J Cypher EZ-Button already constructs Cypher code visually. To further enhance the project, new nodes can be added to aid a user’s workflow. For instance, a Neo4JPreviewNode could display a random subset of nodes before they are added to the database. Additionally, the UI could be given a folder to monitor and a saved graph state to execute on any new files. 


Summary


By focusing on the customer's needs and not just their current workflow, we delivered a solution that provides robust, reproducible data entry and validation.  


Spectric Labs Github: https://github.com/spectriclabs 

For more information/questions contact info@spectric.com 

bottom of page