The ExecuteQuery component contains the Neo4jProvider which manages the driver state and a CypherQuery component which is a text form that allows a user to key in her query and submits it to the database. If successful, we store that driver instance in the state of our parent component. On submission of the form, we create a driver and tests its connection. While use-neo4j hooks comes with a built-in login form, we want to have greater control of the styling and use our own form component for that to allow the user to key in her database connection details (host, port, username & password). The ConnectDatabase component is responsible for initializing the driver and we use the createDriver function to set up a bolt connection with Neo4j. In the parent connector, we keep track of the driver settings and the step which the user is on. We use them in the ConnectDatabase and ExecuteQuery components. Use-neo4j hooks provides a set of functions and React hooks to manage the database connections and querying process. The pseudo-code to achieve this is outlined below: A user can just connect Motif to their desired database for the first time and can then execute multiple queries without needing to re-authenticate. To create a good user experience, we wanted to separate the database connection step from the querying step. Since we were already building a React application, the library made it very easy to speed up the development process and create an integration with Neo4j. This is a package intended to speed up the development by reducing the amount of boilerplate code required. What Is use-neo4j Hooks?įrom its Github repository: A set of components and hooks for building React applications that communicate to Neo4j. The libraries require a graph data input to be specified as a node and edge JSON file, similar to D3, visjs and many other popular javascript graphing libraries. We use G6 and its React binding library Graphin as they contain many out of the box styling and layout options. Currently, it supports importing data as JSON files, edge-list CSVs, node-edge CSVs and from a Neo4j database directly.Īs it is built on top of React, it is easy to customize and add in new data connectors. It makes analyzing financial transactions easy with multiple layout options, filtering panels and edge bundling. Motif is a graph visualization and investigation application built on top of React, D3 and G6. In this post, we document how we used use-neo4j hooks to quickly create a connector with Motif, our graph investigation software. Building a connector to Neo4j was one of our most requested features with its popularity within the financial services space. This calls for a custom graph application to provide additional time series and investigative functionalities. At Cylynx, we build tools and solutions to help financial crime investigators connect the dots between their data points.

Cytoscape neo4j