NeoDash: Build Neo4j dashboards without writing any front-end code

November 16, 2020 - Neo4j Projects - 5 minute read

NeoDash is a lightweight React-based web app that hooks directly into Neo4j, supporting a variety of reports...

headerneodash

Working in the Neo4j professional services team, I frequently build front-end applications on top of graph databases. Luckily, a ton of tools exist to make the life of a Neo4j front-end developer easier: the GrandStack, Neode to name a few.

Even though frameworks like the GrandStack provide a great basis for setting up a production-grade front-end, they take some effort to set up, especially if you are not familiar with front-end development. Enter NeoDash, a tool that allows you to build a dashboard in minutes.

NeoDash is a lightweight React-based web app that hooks directly into Neo4j, letting you build a front-end without touching any code. It supports a variety of reports that natively work with Neo4j data types. For easy storage and version control, dashboards can be exported as JSON files.

This post will give a quick runthrough on how to get started with building your own NeoDash dashboards. Want to give it a spin right away instead? Try out the demo here and get your hands dirty.

Building a dashboard

To get started, run the latest web-app online, or clone the repository yourself. Using Neo4j Desktop? You can also add NeoDash as a graph app directly, just use the url https://nielsdejong.nl/neodash/ when adding a graph app.

1. Connecting to Neo4j

When first starting up the application, you are required to set up the credentials for your database. The Neo4j JavaScript driver uses your specified connection to run queries and populate your reports. NeoDash works with all flavours of Neo4j: Desktop, Neo4j Aura, clusters, and single instances. Credentials are stored locally in your browser cache (so no one else can see them).

neodashlogin

Want to restrict the type of queries in your reports to exclusively perform read queries? Create a read-only Neo4j user and use those credentials to connect.

2. Creating your dashboard

Dashboards consist of a variable number of reports (cards) you create independently. For each report you specify a Cypher query - the results of this query will populate your report. Reports sit together in a responsive grid layout, allowing them to be resized and moved around. When reordered, reports try to fit together to fill available space. The image below contains an example of four reports fitting together.

neodashlogin

The current version of NeoDash supports five types of reports:

  • Graph visualizations
  • Table views
  • Bar charts
  • Line charts
  • JSON output

Graph visualizations

For almost all use-cases, a force-directed graph is your go-to choice of visualization. In NeoDash, you’ll be able to visualize your graph similar to the Neo4j browser: for each node label you choose a style and the property to be displayed. Any query returning nodes, relationships, or paths can be visualized as a graph. Doing some graph exploration? Clicking a node will show all properties of that node.

neodashgraph

Some style properties of the visualization can be changed by passing in extra parameters to your Cypher query. To use custom colors for the graph nodes, add the following to the Cypher Parameters in the settings:

{
    "nodeColors": ["navy","green","red"]
}

Table views

The table view renders Neo4j native types in a standard table format. Columns are ordered in the order they are returned by Neo4j, column names are set to the names of your returned variables. Graph data types such as nodes, relationships or paths can also be rendered in a table.

neodashtable

The colors of the nodes and relationships in the table can be set using the Cypher Parameters setting , for example:

{
    "nodeColor": "orange",
    "relColor": "black"
}

Bar charts

Bar charts can be used to visualize categorical data. Naturally, a bar chart will need a numeric value to plot on the y-axis. The properties to visualize can be dynamically select based on the returned values of your Cypher query.

neodashbar

The color of a bar chart can be customized by setting the following value in the Cypher Parameters:

{
    "color": "red"
}

Line charts

Line charts can be used to visualize the relationship between two numeric variables. Just like the bar chart, you’ll select two of the result properties to be plotted on the x and y axis.

neodashline

The Cypher Parameters setting can be used to customize several style properties of your line chart. Add the following parameters, to create a red curved line chart, with a line width of 4 and a marker radius of 4:

{
    "curve": true,
    "radius": 4, 
    "color": "red", 
    "width": 4
}

Report settings

Each report has a settings screen that can be accessed by clicking the (⋮) icon on the top right of the report. The settings menu can be used to set the Cypher query as well as other configuration parameters:

  • The type of report,
  • The size of the report,
  • Parameters for your Cypher query,
  • A refresh interval for the report.

neodasheditor

3. Saving your dashboard

Reports are automatically saved in your browser when edited. To share/store your reports externally, you can export it as JSON. Load it up again by pasting your dashboard code into the textbox. Want to save a dashboard with your Neo4j prototype? Just paste that JSON into your Git repo!

neodashexport

Performing a hard reset

If you’d like to start over fresh you can consider performing a hard reset. The easiest way to reset the application is to clear your browser cache. Alternatively, if you want to have a chance to save your latest dashboard, you can navigate to:

https://nielsdejong.nl/neodash/?reset=true

This will clear the application cache, restore the default dashboard and output the latest cached dashboard for you.

Wrapping up

This tool is really a base for those getting started with Neo4j reporting, or those looking to build a quick proof-of-concept. On the other hand, if you are looking for something highly customizable with a ton of features, there are many sophisticated tools out there.

In the short term, I’m looking to add more report types, specifically geographic visualizations. More customization options for the existing reports are also on the horizon. If you are enjoying the tool, found bugs, or have any suggested improvements, get in touch!

Updated: