@neo4j-nvl/react 0.3.1-dd1304e0 → 0.3.1-ebba99bf

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.
Files changed (5) hide show
  1. package/lib/basic-wrapper/BasicNvlWrapper.d.ts +27 -17
  2. package/lib/basic-wrapper/BasicNvlWrapper.js +27 -17
  3. package/lib/interactive-nvl-wrapper/InteractiveNvlWrapper.d.ts +17 -15
  4. package/lib/interactive-nvl-wrapper/InteractiveNvlWrapper.js +17 -15
  5. package/package.json +3 -3
package/lib/basic-wrapper/BasicNvlWrapper.d.ts CHANGED
@@ -48,25 +48,31 @@ export interface BasicReactWrapperProps {
48
48
  * When nodes and/or relationships are updated in the React wrapper, the NVL instance will be updated accordingly:
49
49
  *
50
50
  * ```tsx
51
- * const [nodes, setNodes] = useState<Node[]>([{ id: '0' }, { id: '1' }])
51
+ * const NvlComponent = () => {
52
+ * const [nodes, setNodes] = useState<Node[]>([{ id: '0' }, { id: '1' }])
52
53
  *
53
- * const addElements = () => {
54
- * const newNodes = [...nodes, { id: nodes.length }]
54
+ * const addElements = () => {
55
+ * const newNodes = [...nodes, { id: nodes.length.toString() }]
55
56
  * setNodes(newNodes)
56
57
  * }
57
58
  *
58
- * <div>
59
- * <BasicNvlWrapper nodes={nodes} />
59
+ * return <div>
60
+ * <BasicNvlWrapper nodes={nodes} rels={[]} />
60
61
  * <button onClick={addElements}>Add Graph Elements</button>
61
62
  * </div>
63
+ * }
62
64
  * ```
63
65
  *
64
66
  * would be equivalent to
65
67
  *
66
68
  * ```tsx
69
+ * const container = document.createElement('div')
70
+ * const myButton = document.createElement('button')
71
+ * const nodes = [{ id: '0' }, { id: '1' }]
67
72
  * const myNvl = new NVL(container, nodes, [])
68
73
  * myButton.addEventListener('click', () => {
69
- * myNvl.addAndUpdateElementsInGraph(newNodes, [])
74
+ * const newNodes = [...nodes, { id: nodes.length.toString() }]
75
+ * myNvl.addAndUpdateElementsInGraph(newNodes, [])
70
76
  * })
71
77
  * ```
72
78
  *
@@ -74,16 +80,18 @@ export interface BasicReactWrapperProps {
74
80
  * If you want to access the NVL class outside of the React wrapper you can use a
75
81
  * reference of NVL to call its methods:
76
82
  * ```tsx
77
- * const nvlRef = useRef<NVL>()
78
- *
79
- * <div>
80
- * <BasicNvlWrapper
81
- * nodes={[{ id: '0' }, { id: '1' }]}
82
- * rels={[{ from: '0', to: '1', id: '10' }]}
83
- * ref={nvlRef}
84
- * />
85
- * <button onClick={() => nvlRef.current?.zoomToNodes([0, 1])}>Zoom to Nodes</button>
86
- * </div>
83
+ * const NvlComponent = () => {
84
+ * const nvlRef = useRef<NVL>()
85
+ *
86
+ * return <div>
87
+ * <BasicNvlWrapper
88
+ * nodes={[{ id: '0' }, { id: '1' }]}
89
+ * rels={[{ from: '0', to: '1', id: '10' }]}
90
+ * ref={nvlRef}
91
+ * />
92
+ * <button onClick={() => nvlRef.current?.fit([0, 1])}>Zoom to Nodes</button>
93
+ * </div>
94
+ * }
87
95
  * ```
88
96
  *
89
97
  * @example
@@ -100,7 +108,9 @@ export interface BasicReactWrapperProps {
100
108
  * would be equivalent to
101
109
  *
102
110
  * ```tsx
103
- * const myNvl = new NVL(container, nodes, relationships)
111
+ * const container = document.createElement('div')
112
+ * const nodes = [{ id: '0' }, { id: '1' }]
113
+ * const myNvl = new NVL(container, nodes, [])
104
114
  * container.addEventListener('click', (event) => console.log(event))
105
115
  * ```
106
116
  *
package/lib/basic-wrapper/BasicNvlWrapper.js CHANGED
@@ -28,25 +28,31 @@ import { useDeepCompareEffect } from '../utils/hooks';
28
28
  * When nodes and/or relationships are updated in the React wrapper, the NVL instance will be updated accordingly:
29
29
  *
30
30
  * ```tsx
31
- * const [nodes, setNodes] = useState<Node[]>([{ id: '0' }, { id: '1' }])
31
+ * const NvlComponent = () => {
32
+ * const [nodes, setNodes] = useState<Node[]>([{ id: '0' }, { id: '1' }])
32
33
  *
33
- * const addElements = () => {
34
- * const newNodes = [...nodes, { id: nodes.length }]
34
+ * const addElements = () => {
35
+ * const newNodes = [...nodes, { id: nodes.length.toString() }]
35
36
  * setNodes(newNodes)
36
37
  * }
37
38
  *
38
- * <div>
39
- * <BasicNvlWrapper nodes={nodes} />
39
+ * return <div>
40
+ * <BasicNvlWrapper nodes={nodes} rels={[]} />
40
41
  * <button onClick={addElements}>Add Graph Elements</button>
41
42
  * </div>
43
+ * }
42
44
  * ```
43
45
  *
44
46
  * would be equivalent to
45
47
  *
46
48
  * ```tsx
49
+ * const container = document.createElement('div')
50
+ * const myButton = document.createElement('button')
51
+ * const nodes = [{ id: '0' }, { id: '1' }]
47
52
  * const myNvl = new NVL(container, nodes, [])
48
53
  * myButton.addEventListener('click', () => {
49
- * myNvl.addAndUpdateElementsInGraph(newNodes, [])
54
+ * const newNodes = [...nodes, { id: nodes.length.toString() }]
55
+ * myNvl.addAndUpdateElementsInGraph(newNodes, [])
50
56
  * })
51
57
  * ```
52
58
  *
@@ -54,16 +60,18 @@ import { useDeepCompareEffect } from '../utils/hooks';
54
60
  * If you want to access the NVL class outside of the React wrapper you can use a
55
61
  * reference of NVL to call its methods:
56
62
  * ```tsx
57
- * const nvlRef = useRef<NVL>()
58
- *
59
- * <div>
60
- * <BasicNvlWrapper
61
- * nodes={[{ id: '0' }, { id: '1' }]}
62
- * rels={[{ from: '0', to: '1', id: '10' }]}
63
- * ref={nvlRef}
64
- * />
65
- * <button onClick={() => nvlRef.current?.zoomToNodes([0, 1])}>Zoom to Nodes</button>
66
- * </div>
63
+ * const NvlComponent = () => {
64
+ * const nvlRef = useRef<NVL>()
65
+ *
66
+ * return <div>
67
+ * <BasicNvlWrapper
68
+ * nodes={[{ id: '0' }, { id: '1' }]}
69
+ * rels={[{ from: '0', to: '1', id: '10' }]}
70
+ * ref={nvlRef}
71
+ * />
72
+ * <button onClick={() => nvlRef.current?.fit([0, 1])}>Zoom to Nodes</button>
73
+ * </div>
74
+ * }
67
75
  * ```
68
76
  *
69
77
  * @example
@@ -80,7 +88,9 @@ import { useDeepCompareEffect } from '../utils/hooks';
80
88
  * would be equivalent to
81
89
  *
82
90
  * ```tsx
83
- * const myNvl = new NVL(container, nodes, relationships)
91
+ * const container = document.createElement('div')
92
+ * const nodes = [{ id: '0' }, { id: '1' }]
93
+ * const myNvl = new NVL(container, nodes, [])
84
94
  * container.addEventListener('click', (event) => console.log(event))
85
95
  * ```
86
96
  *
package/lib/interactive-nvl-wrapper/InteractiveNvlWrapper.d.ts CHANGED
@@ -14,21 +14,23 @@ import type { InteractiveNvlWrapperProps } from './types';
14
14
  *
15
15
  * @example
16
16
  * ```tsx
17
- * const [multiSelect, setMultiSelect] = useState(false)
18
- * <>
19
- * <button onClick={() => setMultiSelect(!multiSelect)}>
20
- * {multiSelect ? 'Disable' : 'Enable'} multi-select
21
- * </button>
22
- * <InteractiveNvlWrapper
23
- * nodes={nodes}
24
- * rels={relationships}
25
- * mouseEventCallbacks={{
26
- * onHover: (element) => console.log(element),
27
- * onNodeClick: (node) => console.log(node),
28
- * onMultiSelect: multiSelect
29
- * }}
30
- * />
31
- * </>
17
+ * const InteractiveNvlComponent = () => {
18
+ * const [boxSelect, setBoxSelect] = useState(false)
19
+ * return <>
20
+ * <button onClick={() => setBoxSelect(!boxSelect)}>
21
+ * {boxSelect ? 'Disable' : 'Enable'} box-select
22
+ * </button>
23
+ * <InteractiveNvlWrapper
24
+ * nodes={nodes}
25
+ * rels={relationships}
26
+ * mouseEventCallbacks={{
27
+ * onHover: (element) => console.log(element),
28
+ * onNodeClick: (node) => console.log(node),
29
+ * onBoxSelect: boxSelect
30
+ * }}
31
+ * />
32
+ * </>
33
+ * }
32
34
  * ```
33
35
  */
34
36
  export declare const InteractiveNvlWrapper: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<InteractiveNvlWrapperProps & HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<NVL>>>;
package/lib/interactive-nvl-wrapper/InteractiveNvlWrapper.js CHANGED
@@ -21,21 +21,23 @@ const options = {
21
21
  *
22
22
  * @example
23
23
  * ```tsx
24
- * const [multiSelect, setMultiSelect] = useState(false)
25
- * <>
26
- * <button onClick={() => setMultiSelect(!multiSelect)}>
27
- * {multiSelect ? 'Disable' : 'Enable'} multi-select
28
- * </button>
29
- * <InteractiveNvlWrapper
30
- * nodes={nodes}
31
- * rels={relationships}
32
- * mouseEventCallbacks={{
33
- * onHover: (element) => console.log(element),
34
- * onNodeClick: (node) => console.log(node),
35
- * onMultiSelect: multiSelect
36
- * }}
37
- * />
38
- * </>
24
+ * const InteractiveNvlComponent = () => {
25
+ * const [boxSelect, setBoxSelect] = useState(false)
26
+ * return <>
27
+ * <button onClick={() => setBoxSelect(!boxSelect)}>
28
+ * {boxSelect ? 'Disable' : 'Enable'} box-select
29
+ * </button>
30
+ * <InteractiveNvlWrapper
31
+ * nodes={nodes}
32
+ * rels={relationships}
33
+ * mouseEventCallbacks={{
34
+ * onHover: (element) => console.log(element),
35
+ * onNodeClick: (node) => console.log(node),
36
+ * onBoxSelect: boxSelect
37
+ * }}
38
+ * />
39
+ * </>
40
+ * }
39
41
  * ```
40
42
  */
41
43
  export const InteractiveNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOptions, mouseEventCallbacks = {}, nvlCallbacks = {}, nvlOptions = {}, interactionOptions = options, onInitializationError = null, ...nvlEvents }, nvlRef) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neo4j-nvl/react",
3
- "version": "0.3.1-dd1304e0",
3
+ "version": "0.3.1-ebba99bf",
4
4
  "main": "lib/index.js",
5
5
  "homepage": "https://neo4j.com/docs/nvl/current/",
6
6
  "license": "SEE LICENSE IN 'LICENSE.txt'",
@@ -41,8 +41,8 @@
41
41
  "typescript": "^5.4.5"
42
42
  },
43
43
  "dependencies": {
44
- "@neo4j-nvl/base": "^0.3.1-dd1304e0",
45
- "@neo4j-nvl/interaction-handlers": "^0.3.1-dd1304e0",
44
+ "@neo4j-nvl/base": "^0.3.1-ebba99bf",
45
+ "@neo4j-nvl/interaction-handlers": "^0.3.1-ebba99bf",
46
46
  "lodash": "4.17.21",
47
47
  "react": "^18.2.0",
48
48
  "react-dom": "^18.2.0"