@neo4j-nvl/react 0.2.61-9ad61b94 → 0.2.61-c71c2f1c
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,85 +1 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
Welcome to NVL (Neo4j Visualization Library). NVL is a collection of libraries that can be used to build custom graph visualizations like [Neo4j Bloom](https://neo4j.com/product/bloom/). If you want to use NVL with a different framework than React or what to build your own React wrappers, you can do so by using the NVL core library.
|
|
4
|
-
|
|
5
|
-
## Consuming the library
|
|
6
|
-
|
|
7
|
-
### Installing the library
|
|
8
|
-
|
|
9
|
-
You can install the NVL React wrappers with your preferred package manager, for example
|
|
10
|
-
|
|
11
|
-
```bash
|
|
12
|
-
npm install @neo4j-nvl/react
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
### Using the library
|
|
16
|
-
|
|
17
|
-
This is an example on how to use the BasicReactWrapper component:
|
|
18
|
-
|
|
19
|
-
```tsx
|
|
20
|
-
<BasicNvlWrapper
|
|
21
|
-
nodes={nodes}
|
|
22
|
-
rels={relationships}
|
|
23
|
-
nvlOptions={options}
|
|
24
|
-
nvlCallbacks={callbacks}
|
|
25
|
-
/>
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
When nodes and/or relationships are updated in the React wrapper, the NVL instance will be updated accordingly:
|
|
29
|
-
|
|
30
|
-
```tsx
|
|
31
|
-
const [nodes, setNodes] = useState<Node[]>([{ id: '0' }, { id: '1' }])
|
|
32
|
-
|
|
33
|
-
const addElements = () => {
|
|
34
|
-
const newNodes = [...nodes, { id: nodes.length }]
|
|
35
|
-
setNodes(newNodes)
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
<div>
|
|
39
|
-
<BasicNvlWrapper nodes={nodes} />
|
|
40
|
-
<button onClick={addElements}>Add Graph Elements</button>
|
|
41
|
-
</div>
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
If you want to access the NVL class outside of the React wrapper you can use a reference of NVL to call its methods:
|
|
45
|
-
|
|
46
|
-
```tsx
|
|
47
|
-
const nvlRef = useRef<NVL>()
|
|
48
|
-
|
|
49
|
-
<div>
|
|
50
|
-
<BasicNvlWrapper
|
|
51
|
-
nodes={[{ id: '0' }, { id: '1' }]}
|
|
52
|
-
rels={[{ from: '0', to: '1', id: '10' }]}
|
|
53
|
-
ref={nvlRef}
|
|
54
|
-
/>
|
|
55
|
-
<button onClick={() => nvlRef.current?.zoomToNodes([0, 1])}>Zoom to Nodes</button>
|
|
56
|
-
</div>
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
To easily add common graph interaction, you can make use of the interaction handlers module and the InteractiveNvlWrapper.
|
|
60
|
-
|
|
61
|
-
The InteractiveNvlWrapper is a wrapper component that provides a basic set of interactions for the NVL. It is an extension of the BasicNvlWrapper component and incorporates the interaction handlers to provide a set of interaction events.
|
|
62
|
-
|
|
63
|
-
Events can be turned on and off by passing a callback function or a boolean value to the
|
|
64
|
-
`mouseEventCallbacks` prop. The callback function will be called with the event's arguments when the event is triggered. If a boolean value is passed, the event will be turned on or off accordingly.
|
|
65
|
-
|
|
66
|
-
```tsx
|
|
67
|
-
const [multiSelect, setMultiSelect] = useState(false)
|
|
68
|
-
<>
|
|
69
|
-
<button onClick={() => setMultiSelect(!multiSelect)}>
|
|
70
|
-
{multiSelect ? 'Disable' : 'Enable'} multi-select
|
|
71
|
-
</button>
|
|
72
|
-
<InteractiveNvlWrapper
|
|
73
|
-
nodes={nodes}
|
|
74
|
-
rels={relationships}
|
|
75
|
-
mouseEventCallbacks={{
|
|
76
|
-
onHover: (element) => console.log(element),
|
|
77
|
-
onNodeClick: (node) => console.log(node),
|
|
78
|
-
onMultiSelect: multiSelect
|
|
79
|
-
}}
|
|
80
|
-
/>
|
|
81
|
-
</>
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
You can also find more instructions and examples on how to use NVL in the docs.
|
|
1
|
+
This module exports a collection of React components that are build around the NVL class. They act as wrappers around the NVL class that provide a React interface to the NVL class.
|
|
@@ -107,7 +107,7 @@ export interface BasicReactWrapperProps {
|
|
|
107
107
|
* ```
|
|
108
108
|
*
|
|
109
109
|
* For more about interactivity, check out the {@link NVL}.hittest method,
|
|
110
|
-
* the Interaction Handlers module and the {@link InteractiveNvlWrapper}.
|
|
110
|
+
* the Interaction Handlers module module and the {@link InteractiveNvlWrapper}.
|
|
111
111
|
*/
|
|
112
112
|
export declare const BasicNvlWrapper: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<BasicReactWrapperProps & HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<IncludeMethods<NVL>>>>;
|
|
113
113
|
export {};
|
|
@@ -85,7 +85,7 @@ import { useDeepCompareEffect } from '../utils/hooks';
|
|
|
85
85
|
* ```
|
|
86
86
|
*
|
|
87
87
|
* For more about interactivity, check out the {@link NVL}.hittest method,
|
|
88
|
-
* the Interaction Handlers module and the {@link InteractiveNvlWrapper}.
|
|
88
|
+
* the Interaction Handlers module module and the {@link InteractiveNvlWrapper}.
|
|
89
89
|
*/
|
|
90
90
|
export const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOptions, nvlCallbacks = {}, nvlOptions = {}, onInitializationError, ...nvlEvents }, ref) => {
|
|
91
91
|
const nvlRef = useRef(null);
|
|
@@ -2,15 +2,7 @@ import type { BoxSelectInteraction, BoxSelectInteractionCallbacks, BoxSelectInte
|
|
|
2
2
|
import type { BasicReactWrapperProps } from '../basic-wrapper/BasicNvlWrapper';
|
|
3
3
|
export type MouseInteractionModule = typeof HoverInteraction | typeof ClickInteraction | typeof PanInteraction | typeof ZoomInteraction | typeof DragNodeInteraction | typeof DrawInteraction | typeof BoxSelectInteraction | typeof LassoInteraction;
|
|
4
4
|
export type MouseInteraction = HoverInteraction | ClickInteraction | PanInteraction | ZoomInteraction | DragNodeInteraction | DrawInteraction | BoxSelectInteraction | LassoInteraction;
|
|
5
|
-
/**
|
|
6
|
-
* Collection of mouse event callbacks that can be used with
|
|
7
|
-
* the {@link InteractiveNvlWrapper} component.
|
|
8
|
-
*/
|
|
9
5
|
export type MouseEventCallbacks = ClickInteractionCallbacks & DragNodeInteractionCallbacks & HoverInteractionCallbacks & PanInteractionCallbacks & ZoomInteractionCallbacks & BoxSelectInteractionCallbacks & DrawInteractionCallbacks & LassoInteractionCallbacks;
|
|
10
|
-
/**
|
|
11
|
-
* Collection of interaction options that can be used with
|
|
12
|
-
* the {@link InteractiveNvlWrapper} component.
|
|
13
|
-
*/
|
|
14
6
|
export type InteractionOptions = ClickInteractionOptions & BoxSelectInteractionOptions & HoverInteractionOptions & PanInteractionOptions & LassoInteractionOptions & DrawInteractionOptions;
|
|
15
7
|
/**
|
|
16
8
|
* The events that can be passed to the {@link MouseEventCallbacks} object
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neo4j-nvl/react",
|
|
3
|
-
"version": "0.2.61-
|
|
3
|
+
"version": "0.2.61-c71c2f1c",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"license": "SEE LICENSE IN 'LICENSE.txt'",
|
|
6
6
|
"scripts": {
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
"typescript": "^5.4.5"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@neo4j-nvl/core": "^0.2.63-
|
|
33
|
-
"@neo4j-nvl/interaction-handlers": "^0.2.64-
|
|
32
|
+
"@neo4j-nvl/core": "^0.2.63-c71c2f1c",
|
|
33
|
+
"@neo4j-nvl/interaction-handlers": "^0.2.64-c71c2f1c",
|
|
34
34
|
"lodash": "4.17.21",
|
|
35
35
|
"react": "^18.2.0",
|
|
36
36
|
"react-dom": "^18.2.0"
|