react-neo4j-paths

Graph visualization component for Neo4j.

Install

npm install react-neo4j-paths

Example

https://turbo-disco-6030766d.pages.github.io/

Usage

To use react-neo4j-paths you must pass the component an array of Neo4j paths. All other props are optional. Below is an example Cypher query showcasing how paths can be queried in Neo4j.

import React from 'react'
import { Neo4jPaths } from 'react-neo4j-paths'

const App = () => {
  return (
    <div
      style={{
        width: '100%',
        height: '100vh'
      }}
    >
      <Neo4jPaths paths={data} />
    </div>
  )
}

export default App

Data Management Props

Name	Description	Type	Default
setNodeGroup	Function to set node groups (groups influence color, icon etc...).	Function	node.labels[0]
setRelGroup	Set function for relationship groups.	Function	relationship.type

Event Based Props

Name	Description	Type	Default
onNodesChanged	Function that is called each time the nodes in the graph change.	Function	() => {}
onRelsChanged	Function that is called each time the relationships in the graph change.	Function	() => {}

Stylistic Props

Name	Description	Type	Default
showRelTypes	Show or hide relationship type text.	Boolean	true
enableForceLayoutOnDrag	Continue to apply force layout to nodes on drag.	Boolean	false
defaultColor	Defines default color for zoom buttons, rels, legend text etc.	String	#c9c9c9
defaultFontFamily	Default font family applied to all text.	String	Arial
nodeRadius	Radius of nodes.	Integer	30
nodeFontSize	Font size of node text.	String	nodeRadius / 4
nodeFontFamily	Font family of node text.	String	defaultFontFamily
relOpacity	Opacity applied to relationships.	Float	0.5
displayLegend	Boolean to define whether the legend is displayed.	Boolean	true
legendStyle	Style for the legend text. Whatever is defined here will overwrite defaults.	Object	{}
displayZoomControls	Boolean to define whether the zoom controlls are displayed.	Boolean	true
nodeTextMap	Map to define node text based on its group (i.e. { Movie: "title" }).	Object	node.identity
nodeColorMap	Map to define node color based on its group (i.e. { Movie: "#fff" }).	Object	random color
nodeIconMap	Map to define node icon based on its group (i.e. { Movie: "f008" }). Icon codes can be found at https://fontawesome.com/cheatsheet.	Object	no icon
relColorMap	Map to define relationship colors.	Object	defaultColor

Example Cypher Query

MATCH path=(:Person)-[:ACTED_IN]->(:Movie)-[:HAS_GENRE]->(:Genre)
RETURN collect(path) AS paths

License

MIT © HenryBall