1.1.6 • Published 3 years ago
react-neo4j-paths v1.1.6
react-neo4j-paths
Graph visualization component for Neo4j.
Install
npm install react-neo4j-pathsExample
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 AppData Management Props
| Name | Description | Type | Default |
|---|---|---|---|
| setNodeGroup | Function to set node groups (groups influence color, icon etc...). | Function | node.labels0 |
| 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 pathsLicense
MIT © HenryBall