@neo4j-nvl/react 0.3.1-f02e1ac3 → 0.3.1-fd6624ed

package/README.md

@@ -14,15 +14,10 @@ npm install @neo4j-nvl/react
 
 ### Using the library
 
-This is an example on how to use the BasicReactWrapper component: 
+This is an example on how to use the BasicReactWrapper component:
 
 ```tsx
-<BasicNvlWrapper
- nodes={nodes}
- rels={relationships}
- nvlOptions={options}
- nvlCallbacks={callbacks}
-/>
+<BasicNvlWrapper nodes={nodes} rels={relationships} nvlOptions={options} nvlCallbacks={callbacks} />
 ```
 
 When nodes and/or relationships are updated in the React wrapper, the NVL instance will be updated accordingly:
@@ -81,5 +76,9 @@ const [multiSelect, setMultiSelect] = useState(false)
 </>
 ```
 
+You can also find more instructions and examples on how to use the NVL React wrappers in the [docs](https://neo4j.com/docs/nvl/current/react-wrappers/).
 
-You can also find more instructions and examples on how to use NVL in the docs.
+### Product analytics
+
+In order to improve the library we are collecting some information about the usage of NVL. If you prefer to disable this behavior set the parameter `disableTelemetry=true` as a parameter in `nvlOptions`.
+For example: `<BasicNvlWrapper nvlOptions={{ disableTelemetry: true }} nodes=[0,1] rels=[0,1]/>` or `<InteractiveNvlWrapper nvlOptions={{ disableTelemetry: true }} nodes=[0,1] rels=[0,1]/>`

package/lib/__tests__/BasicNvlWrapper.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/lib/__tests__/BasicNvlWrapper.test.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import NVL, { HierarchicalLayoutType } from '@neo4j-nvl/base';
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { BasicNvlWrapper } from '../basic-wrapper/BasicNvlWrapper';
+jest.mock('@neo4j-nvl/base');
+jest.mock('@neo4j-nvl/layout-workers');
+describe('BasicNvlWrapper', () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    test('initialises NVL expectedly with an empty graph object and no other properties', () => {
+        render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [] }) }));
+        expect(NVL).toHaveBeenCalledWith(expect.any(HTMLDivElement), [], [], {}, {});
+    });
+    test('initialises NVL expectedly with a graph object and properties', () => {
+        const mockLayoutDoneFunction = jest.fn();
+        render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [{ id: '1' }, { id: '2' }], rels: [{ id: '12', from: '1', to: '2' }], layout: HierarchicalLayoutType, layoutOptions: { enableCytoscape: true }, nvlOptions: { renderer: 'canvas' }, nvlCallbacks: { onLayoutDone: mockLayoutDoneFunction } }) }));
+        expect(NVL).toHaveBeenCalledWith(expect.any(HTMLDivElement), [{ id: '1' }, { id: '2' }], [{ id: '12', from: '1', to: '2' }], { renderer: 'canvas', layout: HierarchicalLayoutType, layoutOptions: { enableCytoscape: true } }, {
+            onLayoutDone: mockLayoutDoneFunction
+        });
+    });
+    test('destroys NVL on unmount', () => {
+        const destroy = jest.fn();
+        jest.spyOn(NVL.prototype, 'destroy').mockImplementation(destroy);
+        const { unmount } = render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [] }) }));
+        unmount();
+        expect(destroy).toHaveBeenCalled();
+    });
+    test('successfully re-initialises NVL when using React StrictMode', () => {
+        render(_jsx(React.StrictMode, { children: _jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [] }) }) }));
+        expect(NVL).toHaveBeenCalledTimes(2);
+    });
+});

package/lib/__tests__/InteractiveNvlWrapper.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/lib/__tests__/InteractiveNvlWrapper.test.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import NVL, { HierarchicalLayoutType } from '@neo4j-nvl/base';
+import { BoxSelectInteraction, ClickInteraction, DragNodeInteraction, DrawInteraction, HoverInteraction, LassoInteraction, PanInteraction, ZoomInteraction } from '@neo4j-nvl/interaction-handlers';
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import React, { createRef } from 'react';
+import { InteractiveNvlWrapper } from '../interactive-nvl-wrapper/InteractiveNvlWrapper';
+jest.mock('@neo4j-nvl/base');
+jest.mock('@neo4j-nvl/layout-workers');
+jest.mock('@neo4j-nvl/interaction-handlers');
+HoverInteraction.prototype.callbackMap = new Map();
+PanInteraction.prototype.callbackMap = new Map();
+describe('InteractiveNvlWrapper', () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    test('initialises NVL expectedly with an empty graph object and no other properties', () => {
+        render(_jsx("div", { children: _jsx(InteractiveNvlWrapper, { nodes: [], rels: [] }) }));
+        expect(NVL).toHaveBeenCalledWith(expect.any(HTMLDivElement), [], [], {}, {});
+    });
+    test('initialises NVL expectedly with a graph object and properties', () => {
+        const mockLayoutDoneFunction = jest.fn();
+        render(_jsx(InteractiveNvlWrapper, { nodes: [{ id: '1' }, { id: '2' }], rels: [{ id: '12', from: '1', to: '2' }], layout: HierarchicalLayoutType, layoutOptions: { enableCytoscape: true }, nvlOptions: { renderer: 'canvas' }, nvlCallbacks: { onLayoutDone: mockLayoutDoneFunction } }));
+        expect(NVL).toHaveBeenCalledWith(expect.any(HTMLDivElement), [{ id: '1' }, { id: '2' }], [{ id: '12', from: '1', to: '2' }], { renderer: 'canvas', layout: HierarchicalLayoutType, layoutOptions: { enableCytoscape: true } }, {
+            onLayoutDone: mockLayoutDoneFunction
+        });
+    });
+    test('initialises expected interaction handlers with correct options', () => {
+        const myNvlRef = createRef();
+        jest.spyOn(NVL.prototype, 'getContainer').mockImplementation(() => document.createElement('div'));
+        render(_jsx(InteractiveNvlWrapper, { nodes: [], rels: [], ref: myNvlRef, mouseEventCallbacks: {
+                onHover: true,
+                onPan: true
+            }, interactionOptions: {
+                drawShadowOnHover: true
+            } }));
+        expect(HoverInteraction).toHaveBeenCalledWith(myNvlRef.current, { drawShadowOnHover: true });
+        expect(PanInteraction).toHaveBeenCalledWith(myNvlRef.current, { drawShadowOnHover: true });
+        expect(HoverInteraction).toHaveBeenCalledTimes(1);
+        expect(PanInteraction).toHaveBeenCalledTimes(1);
+        expect(ClickInteraction).not.toHaveBeenCalled();
+        expect(DragNodeInteraction).not.toHaveBeenCalled();
+        expect(DrawInteraction).not.toHaveBeenCalled();
+        expect(ZoomInteraction).not.toHaveBeenCalled();
+        expect(BoxSelectInteraction).not.toHaveBeenCalled();
+        expect(LassoInteraction).not.toHaveBeenCalled();
+    });
+    test('destroys NVL and active interaction handlers on unmount', () => {
+        const destroy = jest.fn();
+        jest.spyOn(NVL.prototype, 'destroy').mockImplementation(destroy);
+        const destroyHoverInteraction = jest.fn();
+        jest.spyOn(HoverInteraction.prototype, 'destroy').mockImplementation(destroyHoverInteraction);
+        const destroyPanInteraction = jest.fn();
+        jest.spyOn(PanInteraction.prototype, 'destroy').mockImplementation(destroyPanInteraction);
+        jest.spyOn(NVL.prototype, 'getContainer').mockImplementation(() => document.createElement('div'));
+        const { unmount } = render(_jsx(InteractiveNvlWrapper, { nodes: [], rels: [], mouseEventCallbacks: {
+                onHover: true
+            } }));
+        unmount();
+        expect(destroy).toHaveBeenCalledTimes(1);
+        expect(destroyHoverInteraction).toHaveBeenCalledTimes(1);
+        expect(destroyPanInteraction).not.toHaveBeenCalled();
+    });
+    test('successfully re-initialises NVL and active interaction handlers when using React StrictMode', () => {
+        const destroy = jest.fn();
+        jest.spyOn(NVL.prototype, 'destroy').mockImplementation(destroy);
+        const destroyHoverInteraction = jest.fn();
+        jest.spyOn(HoverInteraction.prototype, 'destroy').mockImplementation(destroyHoverInteraction);
+        const destroyPanInteraction = jest.fn();
+        jest.spyOn(PanInteraction.prototype, 'destroy').mockImplementation(destroyPanInteraction);
+        jest.spyOn(NVL.prototype, 'getContainer').mockImplementation(() => document.createElement('div'));
+        const myNvlRef = createRef();
+        render(_jsx(React.StrictMode, { children: _jsx(InteractiveNvlWrapper, { nodes: [], rels: [], ref: myNvlRef, mouseEventCallbacks: {
+                    onHover: true
+                }, interactionOptions: {
+                    drawShadowOnHover: true
+                } }) }));
+        expect(NVL).toHaveBeenCalledTimes(2);
+        expect(HoverInteraction).toHaveBeenCalledTimes(2);
+        expect(HoverInteraction).toHaveBeenCalledWith(myNvlRef.current, { drawShadowOnHover: true });
+        expect(destroy).toHaveBeenCalledTimes(1);
+        expect(destroyHoverInteraction).toHaveBeenCalledTimes(1);
+        expect(destroyPanInteraction).not.toHaveBeenCalled();
+        expect(DragNodeInteraction).not.toHaveBeenCalled();
+        expect(DrawInteraction).not.toHaveBeenCalled();
+        expect(ZoomInteraction).not.toHaveBeenCalled();
+        expect(BoxSelectInteraction).not.toHaveBeenCalled();
+        expect(LassoInteraction).not.toHaveBeenCalled();
+    });
+});

package/lib/__tests__/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/__tests__/index.test.js

@@ -0,0 +1,8 @@
+import * as exportedModules from '../index';
+jest.mock('@neo4j-nvl/layout-workers');
+describe('index', () => {
+    test('provides the expected components', () => {
+        const modules = Object.keys(exportedModules);
+        expect(modules).toContain('BasicNvlWrapper');
+    });
+});

package/lib/basic-wrapper/BasicNvlWrapper.d.ts

@@ -22,8 +22,6 @@ export interface BasicReactWrapperProps {
     nvlOptions?: NvlOptions;
     /** A callback to handle any errors that happen during NVL initialization */
     onInitializationError?: (error: unknown) => void;
-    /** Any events that should be passed to the NVL instance */
-    nvlEvents?: Record<string, (event: unknown) => void>;
 }
 /**
  * A basic React wrapper for the {@link NVL} class.
@@ -50,25 +48,31 @@ export interface BasicReactWrapperProps {
  * When nodes and/or relationships are updated in the React wrapper, the NVL instance will be updated accordingly:
  *
  * ```tsx
- * const [nodes, setNodes] = useState<Node[]>([{ id: '0' }, { id: '1' }])
+ * const NvlComponent = () => {
+ *   const [nodes, setNodes] = useState<Node[]>([{ id: '0' }, { id: '1' }])
  *
- * const addElements = () => {
- *   const newNodes = [...nodes, { id: nodes.length }]
+ *   const addElements = () => {
+ *   const newNodes = [...nodes, { id: nodes.length.toString() }]
  *   setNodes(newNodes)
  * }
  *
- * <div>
- *   <BasicNvlWrapper nodes={nodes} />
+ * return <div>
+ *   <BasicNvlWrapper nodes={nodes} rels={[]} />
  *   <button onClick={addElements}>Add Graph Elements</button>
  * </div>
+ * }
  * ```
  *
  * would be equivalent to
  *
  * ```tsx
+ * const container = document.createElement('div')
+ * const myButton = document.createElement('button')
+ * const nodes = [{ id: '0' }, { id: '1' }]
  * const myNvl = new NVL(container, nodes, [])
  * myButton.addEventListener('click', () => {
- *  myNvl.addAndUpdateElementsInGraph(newNodes, [])
+ *   const newNodes = [...nodes, { id: nodes.length.toString() }]
+ *   myNvl.addAndUpdateElementsInGraph(newNodes, [])
  * })
  * ```
  *
@@ -76,16 +80,18 @@ export interface BasicReactWrapperProps {
  * If you want to access the NVL class outside of the React wrapper you can use a
  * reference of NVL to call its methods:
  * ```tsx
- * const nvlRef = useRef<NVL>()
- *
- * <div>
- *   <BasicNvlWrapper
- *     nodes={[{ id: '0' }, { id: '1' }]}
- *     rels={[{ from: '0', to: '1', id: '10' }]}
- *     ref={nvlRef}
- *   />
- *   <button onClick={() => nvlRef.current?.zoomToNodes([0, 1])}>Zoom to Nodes</button>
- * </div>
+ * const NvlComponent = () => {
+ *   const nvlRef = useRef<NVL>()
+ *
+ *   return <div>
+ *     <BasicNvlWrapper
+ *       nodes={[{ id: '0' }, { id: '1' }]}
+ *       rels={[{ from: '0', to: '1', id: '10' }]}
+ *       ref={nvlRef}
+ *     />
+ *     <button onClick={() => nvlRef.current?.fit([0, 1])}>Zoom to Nodes</button>
+ *   </div>
+ * }
  * ```
  *
  * @example
@@ -102,7 +108,9 @@ export interface BasicReactWrapperProps {
  * would be equivalent to
  *
  * ```tsx
- * const myNvl = new NVL(container, nodes, relationships)
+ * const container = document.createElement('div')
+ * const nodes = [{ id: '0' }, { id: '1' }]
+ * const myNvl = new NVL(container, nodes, [])
  * container.addEventListener('click', (event) => console.log(event))
  * ```
  *

package/lib/basic-wrapper/BasicNvlWrapper.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import NVL from '@neo4j-nvl/base';
 import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { BASIC_WRAPPER_ID } from '../utils/constants';
 import { getMapDifferences, getNodeAttributeDifferences } from '../utils/graph-comparison';
 import { useDeepCompareEffect } from '../utils/hooks';
 /**
@@ -28,25 +29,31 @@ import { useDeepCompareEffect } from '../utils/hooks';
  * When nodes and/or relationships are updated in the React wrapper, the NVL instance will be updated accordingly:
  *
  * ```tsx
- * const [nodes, setNodes] = useState<Node[]>([{ id: '0' }, { id: '1' }])
+ * const NvlComponent = () => {
+ *   const [nodes, setNodes] = useState<Node[]>([{ id: '0' }, { id: '1' }])
  *
- * const addElements = () => {
- *   const newNodes = [...nodes, { id: nodes.length }]
+ *   const addElements = () => {
+ *   const newNodes = [...nodes, { id: nodes.length.toString() }]
  *   setNodes(newNodes)
  * }
  *
- * <div>
- *   <BasicNvlWrapper nodes={nodes} />
+ * return <div>
+ *   <BasicNvlWrapper nodes={nodes} rels={[]} />
  *   <button onClick={addElements}>Add Graph Elements</button>
  * </div>
+ * }
  * ```
  *
  * would be equivalent to
  *
  * ```tsx
+ * const container = document.createElement('div')
+ * const myButton = document.createElement('button')
+ * const nodes = [{ id: '0' }, { id: '1' }]
  * const myNvl = new NVL(container, nodes, [])
  * myButton.addEventListener('click', () => {
- *  myNvl.addAndUpdateElementsInGraph(newNodes, [])
+ *   const newNodes = [...nodes, { id: nodes.length.toString() }]
+ *   myNvl.addAndUpdateElementsInGraph(newNodes, [])
  * })
  * ```
  *
@@ -54,16 +61,18 @@ import { useDeepCompareEffect } from '../utils/hooks';
  * If you want to access the NVL class outside of the React wrapper you can use a
  * reference of NVL to call its methods:
  * ```tsx
- * const nvlRef = useRef<NVL>()
- *
- * <div>
- *   <BasicNvlWrapper
- *     nodes={[{ id: '0' }, { id: '1' }]}
- *     rels={[{ from: '0', to: '1', id: '10' }]}
- *     ref={nvlRef}
- *   />
- *   <button onClick={() => nvlRef.current?.zoomToNodes([0, 1])}>Zoom to Nodes</button>
- * </div>
+ * const NvlComponent = () => {
+ *   const nvlRef = useRef<NVL>()
+ *
+ *   return <div>
+ *     <BasicNvlWrapper
+ *       nodes={[{ id: '0' }, { id: '1' }]}
+ *       rels={[{ from: '0', to: '1', id: '10' }]}
+ *       ref={nvlRef}
+ *     />
+ *     <button onClick={() => nvlRef.current?.fit([0, 1])}>Zoom to Nodes</button>
+ *   </div>
+ * }
  * ```
  *
  * @example
@@ -80,7 +89,9 @@ import { useDeepCompareEffect } from '../utils/hooks';
  * would be equivalent to
  *
  * ```tsx
- * const myNvl = new NVL(container, nodes, relationships)
+ * const container = document.createElement('div')
+ * const nodes = [{ id: '0' }, { id: '1' }]
+ * const myNvl = new NVL(container, nodes, [])
  * container.addEventListener('click', (event) => console.log(event))
  * ```
  *
@@ -94,9 +105,13 @@ export const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOpt
         const nvlMethods = Object.getOwnPropertyNames(NVL.prototype);
         return nvlMethods.reduce((current, method) => ({
             ...current,
-            [method]: (...args) => 
-            // @ts-ignore suppress the type casting error on spreading
-            nvlRef.current !== null && nvlRef.current[method](...args)
+            [method]: (...args) => {
+                if (nvlRef.current === null) {
+                    return null;
+                }
+                // @ts-ignore suppress the type casting error on spreading
+                return nvlRef.current[method](...args);
+            }
         }), 
         // eslint-disable-next-line max-len
         // eslint-disable-next-line @typescript-eslint/prefer-reduce-type-parameter, @typescript-eslint/consistent-type-assertions
@@ -178,5 +193,5 @@ export const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOpt
         }
         nvlRef.current.setDisableWebGL(nvlOptions.disableWebGL);
     }, [nvlOptions.disableWebGL]);
-    return _jsx("div", { ref: containerRef, style: { height: '100%', outline: '0' }, ...nvlEvents });
+    return _jsx("div", { id: BASIC_WRAPPER_ID, ref: containerRef, style: { height: '100%', outline: '0' }, ...nvlEvents });
 }));

package/lib/interactive-nvl-wrapper/InteractiveNvlWrapper.d.ts

@@ -1,4 +1,5 @@
 import type NVL from '@neo4j-nvl/base';
+import type { HTMLProps } from 'react';
 import React from 'react';
 import type { InteractiveNvlWrapperProps } from './types';
 /**
@@ -13,21 +14,23 @@ import type { InteractiveNvlWrapperProps } from './types';
  *
  * @example
  * ```tsx
- * const [multiSelect, setMultiSelect] = useState(false)
- * <>
- *   <button onClick={() => setMultiSelect(!multiSelect)}>
- *     {multiSelect ? 'Disable' : 'Enable'} multi-select
- *   </button>
- *   <InteractiveNvlWrapper
- *     nodes={nodes}
- *     rels={relationships}
- *     mouseEventCallbacks={{
- *       onHover: (element) => console.log(element),
- *       onNodeClick: (node) => console.log(node),
- *       onMultiSelect: multiSelect
- *    }}
- *   />
- * </>
+ * const InteractiveNvlComponent = () => {
+ *   const [boxSelect, setBoxSelect] = useState(false)
+ *   return <>
+ *     <button onClick={() => setBoxSelect(!boxSelect)}>
+ *       {boxSelect ? 'Disable' : 'Enable'} box-select
+ *     </button>
+ *     <InteractiveNvlWrapper
+ *       nodes={nodes}
+ *       rels={relationships}
+ *       mouseEventCallbacks={{
+ *         onHover: (element) => console.log(element),
+ *         onNodeClick: (node) => console.log(node),
+ *         onBoxSelect: boxSelect
+ *      }}
+ *     />
+ *   </>
+ * }
  * ```
  */
-export declare const InteractiveNvlWrapper: React.MemoExoticComponent<React.ForwardRefExoticComponent<InteractiveNvlWrapperProps & React.RefAttributes<NVL>>>;
+export declare const InteractiveNvlWrapper: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<InteractiveNvlWrapperProps & HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<NVL>>>;

package/lib/interactive-nvl-wrapper/InteractiveNvlWrapper.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { BoxSelectInteraction, ClickInteraction, DragNodeInteraction, DrawInteraction, HoverInteraction, LassoInteraction, PanInteraction, ZoomInteraction } from '@neo4j-nvl/interaction-handlers';
 import { forwardRef, memo, useEffect, useRef } from 'react';
 import { BasicNvlWrapper } from '../basic-wrapper/BasicNvlWrapper';
+import { INTERACTIVE_WRAPPER_ID } from '../utils/constants';
 import { destroyInteraction, useInteraction } from './hooks';
 const options = {
     selectOnClick: false,
@@ -21,35 +22,37 @@ const options = {
  *
  * @example
  * ```tsx
- * const [multiSelect, setMultiSelect] = useState(false)
- * <>
- *   <button onClick={() => setMultiSelect(!multiSelect)}>
- *     {multiSelect ? 'Disable' : 'Enable'} multi-select
- *   </button>
- *   <InteractiveNvlWrapper
- *     nodes={nodes}
- *     rels={relationships}
- *     mouseEventCallbacks={{
- *       onHover: (element) => console.log(element),
- *       onNodeClick: (node) => console.log(node),
- *       onMultiSelect: multiSelect
- *    }}
- *   />
- * </>
+ * const InteractiveNvlComponent = () => {
+ *   const [boxSelect, setBoxSelect] = useState(false)
+ *   return <>
+ *     <button onClick={() => setBoxSelect(!boxSelect)}>
+ *       {boxSelect ? 'Disable' : 'Enable'} box-select
+ *     </button>
+ *     <InteractiveNvlWrapper
+ *       nodes={nodes}
+ *       rels={relationships}
+ *       mouseEventCallbacks={{
+ *         onHover: (element) => console.log(element),
+ *         onNodeClick: (node) => console.log(node),
+ *         onBoxSelect: boxSelect
+ *      }}
+ *     />
+ *   </>
+ * }
  * ```
  */
-export const InteractiveNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOptions, mouseEventCallbacks = {}, nvlCallbacks = {}, nvlOptions = {}, interactionOptions = options }, nvlRef) => {
+export const InteractiveNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOptions, onInitializationError, mouseEventCallbacks = {}, nvlCallbacks = {}, nvlOptions = {}, interactionOptions = options, ...nvlEvents }, nvlRef) => {
     const newNvlRef = useRef(null);
     const myNvlRef = nvlRef ?? newNvlRef;
     const { onHover, onNodeClick, onNodeDoubleClick, onNodeRightClick, onRelationshipClick, onRelationshipDoubleClick, onRelationshipRightClick, onCanvasClick, onCanvasRightClick, onPan, onZoom, onDrag, onDragStart, onDragEnd, onDrawEnd, onHoverNodeMargin, onBoxStarted, onBoxSelect, onLassoStarted, onLassoSelect } = mouseEventCallbacks;
-    const hoverInteraction = useRef();
-    const clickInteraction = useRef();
-    const panInteraction = useRef();
-    const zoomInteraction = useRef();
-    const dragNodeInteraction = useRef();
-    const drawInteraction = useRef();
-    const multiSelectInteraction = useRef();
-    const lassoInteraction = useRef();
+    const hoverInteraction = useRef(null);
+    const clickInteraction = useRef(null);
+    const panInteraction = useRef(null);
+    const zoomInteraction = useRef(null);
+    const dragNodeInteraction = useRef(null);
+    const drawInteraction = useRef(null);
+    const multiSelectInteraction = useRef(null);
+    const lassoInteraction = useRef(null);
     useInteraction(HoverInteraction, hoverInteraction, onHover, 'onHover', myNvlRef, interactionOptions);
     useInteraction(ClickInteraction, clickInteraction, onNodeClick, 'onNodeClick', myNvlRef, interactionOptions);
     useInteraction(ClickInteraction, clickInteraction, onNodeDoubleClick, 'onNodeDoubleClick', myNvlRef, interactionOptions);
@@ -80,5 +83,5 @@ export const InteractiveNvlWrapper = memo(forwardRef(({ nodes, rels, layout, lay
         destroyInteraction(multiSelectInteraction);
         destroyInteraction(lassoInteraction);
     }, []);
-    return (_jsx(BasicNvlWrapper, { ref: myNvlRef, nodes: nodes, rels: rels, nvlOptions: nvlOptions, nvlCallbacks: nvlCallbacks, layout: layout, layoutOptions: layoutOptions }));
+    return (_jsx(BasicNvlWrapper, { ref: myNvlRef, nodes: nodes, id: INTERACTIVE_WRAPPER_ID, rels: rels, nvlOptions: nvlOptions, nvlCallbacks: nvlCallbacks, layout: layout, layoutOptions: layoutOptions, onInitializationError: onInitializationError, ...nvlEvents }));
 }));

package/lib/interactive-nvl-wrapper/hooks.d.ts

@@ -2,4 +2,4 @@ import type NVL from '@neo4j-nvl/base';
 import type { MutableRefObject } from 'react';
 import type { InteractionOptions, MouseEvent, MouseInteraction, MouseInteractionModule } from './types';
 export declare const destroyInteraction: (interactionRef: MutableRefObject<MouseInteraction | null>) => void;
-export declare const useInteraction: (Interaction: MouseInteractionModule, interactionRef: MutableRefObject<MouseInteraction>, callback: ((...args: unknown[]) => void) | boolean | undefined, eventName: MouseEvent, nvlRef: MutableRefObject<NVL | null>, interactionOptions: InteractionOptions) => void;
+export declare const useInteraction: (Interaction: MouseInteractionModule, interactionRef: MutableRefObject<MouseInteraction | null>, callback: ((...args: unknown[]) => void) | boolean | undefined, eventName: MouseEvent, nvlRef: MutableRefObject<NVL | null>, interactionOptions: InteractionOptions) => void;

package/lib/interactive-nvl-wrapper/hooks.js

@@ -6,6 +6,11 @@ export const destroyInteraction = (interactionRef) => {
 };
 export const useInteraction = (Interaction, interactionRef, callback, eventName, nvlRef, interactionOptions) => {
     useEffect(() => {
+        const container = nvlRef.current?.getContainer();
+        // Make sure we are not mounting interaction handlers when there is NVL setup
+        if (isNil(container)) {
+            return;
+        }
         if ((callback === true || typeof callback === 'function') && !isNil(nvlRef.current)) {
             if (isNil(interactionRef.current)) {
                 interactionRef.current = new Interaction(nvlRef.current, interactionOptions);

package/lib/utils/constants.d.ts

@@ -0,0 +1,2 @@
+export const BASIC_WRAPPER_ID: "NVL_basic-wrapper";
+export const INTERACTIVE_WRAPPER_ID: "NVL_interactive-wrapper";

package/lib/utils/constants.js

@@ -0,0 +1,2 @@
+export const BASIC_WRAPPER_ID = 'NVL_basic-wrapper';
+export const INTERACTIVE_WRAPPER_ID = 'NVL_interactive-wrapper';

package/lib/utils/hooks.js

@@ -11,5 +11,6 @@ function useDeepCompareMemoize(value) {
     return ref.current;
 }
 export const useDeepCompareEffect = (callback, dependencies) => {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(callback, dependencies.map(useDeepCompareMemoize));
 };

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@neo4j-nvl/react",
-  "version": "0.3.1-f02e1ac3",
+  "version": "0.3.1-fd6624ed",
   "main": "lib/index.js",
+  "homepage": "https://neo4j.com/docs/nvl/current/",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
   "description": "React wrappers for the Neo4j Visualization Library",
   "keywords": [
@@ -15,9 +16,11 @@
   },
   "scripts": {
     "build": "tsc",
+    "watch": "tsc -w",
     "test": "jest",
     "prepack": "cp ../../LICENSE.txt ./",
-    "postpack": "rm LICENSE.txt"
+    "postpack": "rm LICENSE.txt",
+    "eslint": "eslint ./src/"
   },
   "files": [
     "LICENSE.txt",
@@ -35,17 +38,19 @@
     "@types/lodash": "4.14.202",
     "@types/react": "18.2.58",
     "babel-eslint": "^10.1.0",
+    "eslint": "8.38.0",
     "jest": "^29.7.0",
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@neo4j-nvl/base": "^0.3.1-f02e1ac3",
-    "@neo4j-nvl/interaction-handlers": "^0.3.1-f02e1ac3",
+    "@neo4j-nvl/base": "^0.3.1-fd6624ed",
+    "@neo4j-nvl/interaction-handlers": "^0.3.1-fd6624ed",
     "lodash": "4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "peerDependencies": {
+    "eslint": "*",
     "jest": "*",
     "typescript": "*"
   },