Design

This page contains some key guidelines for design of the application. This entails code architecture, as well as UX/UI design.

File Structure

The source code of NeoDash is organized as a flat file structure based on components. Given a component ABC is to be added, you should create a directory called abc with the following files:

  • ABC.tsx (component renderer)

  • ABCActions.ts (objects defining state manipulation)

  • ABCReducer.ts (handling state changes based on actions)

  • ABCSelectors.ts (used by components to retrieve part of the state)

  • ABCThunks.ts (Complex state handling logic, to fire one or more actions)

Structure of the other folders

conf: nginx configuration for Docker image.
dist: directory for generated webpack files.
node_modules: downloaded dependencies
public: style files/images. Runtime app config.
scripts: utility scripts for deployment.
src: source code.
target: compiled package as tgz file.
.babelrc: javascript compiled settings.
.gitignore: gitignore files.
Dockerfile: docker image definition.

UX Design

At it’s core, NeoDash aims to be a tool that is easy to learn, but hard to master. This translates into the following five design principles in mind:

  1. Use a limited set of core visualizations, with high customizability.

  2. It should be easy to get started without reading documentation.

  3. The tool should be self-documenting.

  4. Complex data transformations should be done by dashboard builders in Cypher, and not by the application.

  5. The tool should be easy to extend with custom visualizations.