@neo4j-nvl/react 0.3.1-4e3f4948 → 0.3.1-61fc472d

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 the NVL React wrappers in the [docs](https://neo4j.com/docs/nvl/current/react-wrappers/).
+### 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.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';
 /**
@@ -192,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.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,
@@ -40,18 +41,18 @@ const options = {
  * }
  * ```
  */
-export const InteractiveNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOptions, mouseEventCallbacks = {}, nvlCallbacks = {}, nvlOptions = {}, interactionOptions = options, onInitializationError = null, ...nvlEvents }, 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);
@@ -82,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, onInitializationError: onInitializationError, ...nvlEvents }));
+    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/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,6 +1,6 @@
 {
   "name": "@neo4j-nvl/react",
-  "version": "0.3.1-4e3f4948",
+  "version": "0.3.1-61fc472d",
   "main": "lib/index.js",
   "homepage": "https://neo4j.com/docs/nvl/current/",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
@@ -19,7 +19,8 @@
     "watch": "tsc -w",
     "test": "jest",
     "prepack": "cp ../../LICENSE.txt ./",
-    "postpack": "rm LICENSE.txt"
+    "postpack": "rm LICENSE.txt",
+    "eslint": "eslint ./src/"
   },
   "files": [
     "LICENSE.txt",
@@ -37,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-4e3f4948",
-    "@neo4j-nvl/interaction-handlers": "^0.3.1-4e3f4948",
+    "@neo4j-nvl/base": "^0.3.1-61fc472d",
+    "@neo4j-nvl/interaction-handlers": "^0.3.1-61fc472d",
     "lodash": "4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "peerDependencies": {
+    "eslint": "*",
     "jest": "*",
     "typescript": "*"
   },