@neo4j-nvl/react 0.3.9 → 1.0.0-0e1dd35b-alpha

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 All notable changes to NVL will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [1.0.0] - 2025-09-30
+This 1.0.0 release is our first major release, with NVL's release strategy fully adopting semantic versioning going forward. Updates in this release include React 19 support for the React wrappers, a UI overhaul of the [examples app](https://neo4j.com/docs/api/nvl/current/examples.html).
+
+### Added
+* support for React 19 in Nvl React wrappers.
+* new prop to the React components to provde zoom and pan values.
+* extend return object of `.getZoomTargetForNodePositions` function to include pan values.
+
+### Changed
+* updated example application UI.
+
+### Fixed
+* display remaining captions when one of the values in the caption array is null or undefined.
+* ensure the computing state for the d3 layout is set correctly.
+* correctly process Right-to-Left (RTL) text for node captions.
+
+### Removed
+* `useWebGL` / `setUseWebGLRenderer`, please use [renderer](https://neo4j.com/docs/api/nvl/current/interfaces/_neo4j_nvl_base.NvlOptions.html#renderer) & [setRenderer](https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_base.NVL.html#setRenderer) instead going forward.
+* `NvlOption.nodeDefaultBorderColor`, `NvlOption.selectedBorderColor`, `NvlOption.disabledItemColor`, `NvlOption.disabledItemFontColor`, please use properties with the same name in [NvlOptions.styling](https://neo4j.com/docs/api/nvl/current/interfaces/_neo4j_nvl_base.NvlOptions.html#styling) object going forward.
+
 ## [0.3.9] - 2025-07-23
 
 The 0.3.9 release contains several fixes for NVL's interaction handler and adds a new method to NVL to directly extract image data from an NVL instance:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/react",
-  "version": "0.3.9",
+  "version": "1.0.0-0e1dd35b-alpha",
   "main": "lib/index.js",
   "homepage": "https://neo4j.com/docs/nvl/current/",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
@@ -27,17 +27,22 @@
     "lib"
   ],
   "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^16.3.0",
     "@types/lodash": "4.14.202",
     "@types/react": "^18.2.58",
-    "babel-eslint": "^10.1.0"
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
   },
   "dependencies": {
-    "@neo4j-nvl/base": "0.3.9",
-    "@neo4j-nvl/interaction-handlers": "0.3.9",
-    "lodash": "4.17.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  }
+    "@neo4j-nvl/base": "1.0.0-0e1dd35b-alpha",
+    "@neo4j-nvl/interaction-handlers": "1.0.0-0e1dd35b-alpha",
+    "lodash": "4.17.21"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "stableVersion": "1.0.0"
 }

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

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

package/lib/__tests__/BasicNvlWrapper.test.js

@@ -1,39 +0,0 @@
-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(NVL).toHaveBeenCalledTimes(1);
-        expect(destroy).toHaveBeenCalledTimes(1);
-    });
-    test('successfully re-initialises NVL when using React StrictMode', () => {
-        const destroy = jest.fn();
-        jest.spyOn(NVL.prototype, 'destroy').mockImplementation(destroy);
-        render(_jsx(React.StrictMode, { children: _jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [] }) }) }));
-        expect(NVL).toHaveBeenCalledTimes(2);
-        expect(destroy).toHaveBeenCalledTimes(1);
-    });
-});

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

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

package/lib/__tests__/InteractiveNvlWrapper.test.js

@@ -1,135 +0,0 @@
-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 { act, 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');
-let mockOnInitialization;
-HoverInteraction.prototype.callbackMap = new Map();
-PanInteraction.prototype.callbackMap = new Map();
-let mockDestroy;
-let destroyHoverInteraction;
-let destroyPanInteraction;
-describe('InteractiveNvlWrapper', () => {
-    beforeEach(() => {
-        jest.spyOn(NVL.prototype, 'getContainer').mockImplementation(() => document.createElement('div'));
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-        NVL.mockImplementation((_container, _nodes, _rels, _options, callbacks) => {
-            mockOnInitialization = callbacks.onInitialization;
-            return {
-                getContainer: () => document.createElement('div'),
-                destroy: mockDestroy,
-                setLayout: jest.fn(),
-                setLayoutOptions: jest.fn(),
-                setRenderer: jest.fn()
-            };
-        });
-        mockDestroy = jest.fn();
-        destroyHoverInteraction = jest.fn();
-        destroyPanInteraction = jest.fn();
-        jest.spyOn(NVL.prototype, 'destroy').mockImplementation(mockDestroy);
-        jest.spyOn(HoverInteraction.prototype, 'destroy').mockImplementation(destroyHoverInteraction);
-        jest.spyOn(PanInteraction.prototype, 'destroy').mockImplementation(destroyPanInteraction);
-    });
-    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), [], [], {}, { onInitialization: expect.any(Function) });
-    });
-    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 } }));
-        act(() => {
-            mockOnInitialization?.();
-        });
-        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,
-            onInitialization: expect.any(Function)
-        });
-    });
-    test('initialises expected interaction handlers with correct options', () => {
-        const myNvlRef = createRef();
-        render(_jsx(InteractiveNvlWrapper, { nodes: [], rels: [], ref: myNvlRef, mouseEventCallbacks: {
-                onHover: true,
-                onPan: true
-            }, interactionOptions: {
-                drawShadowOnHover: true
-            } }));
-        act(() => {
-            mockOnInitialization?.();
-        });
-        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('does not attempt to initialize interaction handlers if NVL container is not available', () => {
-        const myNvlRef = createRef();
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        jest.spyOn(NVL.prototype, 'getContainer').mockImplementation(() => null);
-        render(_jsx(InteractiveNvlWrapper, { nodes: [], rels: [], ref: myNvlRef, mouseEventCallbacks: {
-                onHover: true
-            }, interactionOptions: {
-                drawShadowOnHover: true
-            } }));
-        expect(HoverInteraction).not.toHaveBeenCalled();
-        expect(NVL).toHaveBeenCalledTimes(1);
-    });
-    test('destroys NVL and active interaction handlers on unmount', () => {
-        const { unmount } = render(_jsx(InteractiveNvlWrapper, { nodes: [], rels: [], mouseEventCallbacks: {
-                onHover: true
-            } }));
-        act(() => {
-            mockOnInitialization?.();
-        });
-        unmount();
-        expect(mockDestroy).toHaveBeenCalledTimes(1);
-        expect(destroyHoverInteraction).toHaveBeenCalledTimes(1);
-        expect(destroyPanInteraction).not.toHaveBeenCalled();
-    });
-    test('successfully re-initialises NVL and active interaction handlers when using React StrictMode', () => {
-        const myNvlRef = createRef();
-        render(_jsx(React.StrictMode, { children: _jsx(InteractiveNvlWrapper, { nodes: [], rels: [], ref: myNvlRef, mouseEventCallbacks: {
-                    onHover: true
-                }, interactionOptions: {
-                    drawShadowOnHover: true
-                } }) }));
-        act(() => {
-            mockOnInitialization?.();
-        });
-        expect(NVL).toHaveBeenCalledTimes(2);
-        expect(HoverInteraction).toHaveBeenCalledTimes(2);
-        expect(HoverInteraction).toHaveBeenCalledWith(myNvlRef.current, { drawShadowOnHover: true });
-        expect(mockDestroy).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();
-    });
-    test('also calls custom callbacks on initialization', () => {
-        const customOnInitializationCallback = jest.fn();
-        render(_jsx(InteractiveNvlWrapper, { nodes: [], rels: [], nvlCallbacks: { onInitialization: customOnInitializationCallback } }));
-        act(() => {
-            mockOnInitialization?.();
-        });
-        expect(customOnInitializationCallback).toHaveBeenCalledTimes(1);
-    });
-});

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

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

package/lib/__tests__/index.test.js

@@ -1,8 +0,0 @@
-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

@@ -1,40 +0,0 @@
-import type { ExternalCallbacks, Layout, LayoutOptions, Node, NvlOptions, Relationship } from '@neo4j-nvl/base';
-import NVL from '@neo4j-nvl/base';
-import { type HTMLProps } from 'react';
-/**
- * @hidden
- */
-type IncludeMethods<T> = Pick<T, {
-    [K in keyof T]: T[K] extends (_: unknown) => unknown ? K : never;
-}[keyof T]>;
-/**
- * The properties that can be passed to the {@link BasicNvlWrapper} component.
- */
-export interface BasicReactWrapperProps {
-    /** The nodes of the graph of type Node[] */
-    nodes: Node[];
-    /** The rels of the graph of type Relationship[] */
-    rels: Relationship[];
-    /** The layout, can be 'forceDirected' or 'hierarchical' */
-    layout?: Layout;
-    /** Options for the current layout */
-    layoutOptions?: LayoutOptions;
-    /** an Object containing functions for callbacks on certain actions */
-    nvlCallbacks?: ExternalCallbacks;
-    /** An object containing options for the Nvl instance */
-    nvlOptions?: NvlOptions;
-    /** Sets the positions of the nodes in the graph using the {@link NVL.setNodePositions} method. */
-    positions?: Node[];
-    /** A callback to handle any errors that happen during NVL initialization */
-    onInitializationError?: (error: unknown) => void;
-}
-/**
- *
- * A basic React wrapper that wraps the base {@link NVL} library within a React component.
- * It takes the class' arguments as properties, which are passed to the NVL constructor.
- * Any changes in properties will be reflected in the NVL instance by calling the corresponding methods.
- *
- * For examples, head to the {@link https://neo4j.com/docs/nvl/current/react-wrappers/#_basic_react_wrapper Basic React wrapper documentation page}.
- */
-export declare const BasicNvlWrapper: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<BasicReactWrapperProps & HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<IncludeMethods<NVL>>>>;
-export {};

package/lib/basic-wrapper/BasicNvlWrapper.js

@@ -1,132 +0,0 @@
-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';
-/**
- *
- * A basic React wrapper that wraps the base {@link NVL} library within a React component.
- * It takes the class' arguments as properties, which are passed to the NVL constructor.
- * Any changes in properties will be reflected in the NVL instance by calling the corresponding methods.
- *
- * For examples, head to the {@link https://neo4j.com/docs/nvl/current/react-wrappers/#_basic_react_wrapper Basic React wrapper documentation page}.
- */
-export const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOptions, nvlCallbacks = {}, nvlOptions = {}, positions = [], onInitializationError, ...nvlEvents }, ref) => {
-    const nvlRef = useRef(null);
-    useImperativeHandle(ref, () => {
-        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        const nvlMethods = Object.getOwnPropertyNames(NVL.prototype);
-        return nvlMethods.reduce((current, method) => ({
-            ...current,
-            [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
-        {});
-    });
-    const containerRef = useRef(null);
-    const [currentNodes, setCurrentNodes] = useState(nodes);
-    const [currentRels, setCurrentRels] = useState(rels);
-    useEffect(() => {
-        let newNvl = null;
-        if (containerRef.current !== null) {
-            if (nvlRef.current === null) {
-                const combinedOptions = { ...nvlOptions, layoutOptions };
-                if (layout !== undefined) {
-                    combinedOptions.layout = layout;
-                }
-                try {
-                    newNvl = new NVL(containerRef.current, currentNodes, currentRels, combinedOptions, nvlCallbacks);
-                    nvlRef.current = newNvl;
-                    setCurrentRels(rels);
-                    setCurrentNodes(nodes);
-                }
-                catch (e) {
-                    if (typeof onInitializationError === 'function') {
-                        onInitializationError(e);
-                    }
-                    else {
-                        throw e;
-                    }
-                }
-            }
-        }
-        return () => {
-            newNvl?.destroy();
-            nvlRef.current = null;
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    useEffect(() => {
-        if (nvlRef.current === null) {
-            return;
-        }
-        const nodeChanges = getMapDifferences(currentNodes, nodes);
-        const nodeDiff = getNodeAttributeDifferences(currentNodes, nodes);
-        const relChanges = getMapDifferences(currentRels, rels);
-        const graphIsUnchanged = nodeChanges.added.length === 0 &&
-            nodeChanges.removed.length === 0 &&
-            nodeDiff.length === 0 &&
-            relChanges.added.length === 0 &&
-            relChanges.removed.length === 0 &&
-            relChanges.updated.length === 0;
-        if (graphIsUnchanged) {
-            return;
-        }
-        setCurrentRels(rels);
-        setCurrentNodes(nodes);
-        const nodesToAddAndUpdate = [...nodeChanges.added, ...nodeDiff];
-        const relsToAddAndUpdate = [...relChanges.added, ...relChanges.updated];
-        nvlRef.current.addAndUpdateElementsInGraph(nodesToAddAndUpdate, relsToAddAndUpdate);
-        const relationshipsToRemove = relChanges.removed.map((r) => r.id);
-        const nodesToRemove = nodeChanges.removed.map((n) => n.id);
-        nvlRef.current.removeRelationshipsWithIds(relationshipsToRemove);
-        nvlRef.current.removeNodesWithIds(nodesToRemove);
-    }, [currentNodes, currentRels, nodes, rels]);
-    useEffect(() => {
-        const updatedLayout = layout ?? nvlOptions.layout;
-        if (nvlRef.current === null || updatedLayout === undefined) {
-            return;
-        }
-        nvlRef.current.setLayout(updatedLayout);
-    }, [layout, nvlOptions.layout]);
-    useDeepCompareEffect(() => {
-        const updatedLayoutOptions = layoutOptions ?? nvlOptions?.layoutOptions;
-        if (nvlRef.current === null || updatedLayoutOptions === undefined) {
-            return;
-        }
-        nvlRef.current.setLayoutOptions(updatedLayoutOptions);
-    }, [layoutOptions, nvlOptions.layoutOptions]);
-    useEffect(() => {
-        if (nvlRef.current === null || nvlOptions.useWebGL === undefined) {
-            return;
-        }
-        nvlRef.current.setUseWebGLRenderer(nvlOptions.useWebGL);
-    }, [nvlOptions.useWebGL]);
-    useEffect(() => {
-        if (nvlRef.current === null || nvlOptions.renderer === undefined) {
-            return;
-        }
-        nvlRef.current.setRenderer(nvlOptions.renderer);
-    });
-    useEffect(() => {
-        if (nvlRef.current === null || nvlOptions.disableWebGL === undefined) {
-            return;
-        }
-        nvlRef.current.setDisableWebGL(nvlOptions.disableWebGL);
-    }, [nvlOptions.disableWebGL]);
-    useEffect(() => {
-        if (nvlRef.current === null || positions.length === 0) {
-            return;
-        }
-        nvlRef.current.setNodePositions(positions);
-    }, [positions]);
-    return _jsx("div", { id: BASIC_WRAPPER_ID, ref: containerRef, style: { height: '100%', outline: '0' }, ...nvlEvents });
-}));

package/lib/index.d.ts

@@ -1,6 +0,0 @@
-import { BasicNvlWrapper } from './basic-wrapper/BasicNvlWrapper';
-import type { BasicReactWrapperProps } from './basic-wrapper/BasicNvlWrapper';
-import { InteractiveNvlWrapper } from './interactive-nvl-wrapper/InteractiveNvlWrapper';
-import type { InteractionOptions, InteractiveNvlWrapperProps, MouseEvent, MouseEventCallbacks } from './interactive-nvl-wrapper/types';
-export { BasicNvlWrapper, InteractiveNvlWrapper };
-export type { MouseEventCallbacks, MouseEvent, BasicReactWrapperProps, InteractionOptions, InteractiveNvlWrapperProps };

package/lib/index.js

@@ -1,3 +0,0 @@
-import { BasicNvlWrapper } from './basic-wrapper/BasicNvlWrapper';
-import { InteractiveNvlWrapper } from './interactive-nvl-wrapper/InteractiveNvlWrapper';
-export { BasicNvlWrapper, InteractiveNvlWrapper };

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

@@ -1,10 +0,0 @@
-import type NVL from '@neo4j-nvl/base';
-import type { MutableRefObject } from 'react';
-import type { InteractionOptions, MouseEventCallbacks } from './types';
-interface InteractionHandlersProps {
-    nvlRef: MutableRefObject<NVL | null>;
-    mouseEventCallbacks: MouseEventCallbacks;
-    interactionOptions: InteractionOptions;
-}
-export declare const InteractionHandlers: React.FC<InteractionHandlersProps>;
-export {};

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

@@ -1,45 +0,0 @@
-import { BoxSelectInteraction, ClickInteraction, DragNodeInteraction, DrawInteraction, HoverInteraction, LassoInteraction, PanInteraction, ZoomInteraction } from '@neo4j-nvl/interaction-handlers';
-import { useEffect, useRef } from 'react';
-import { destroyInteraction, useInteraction } from './hooks';
-export const InteractionHandlers = ({ nvlRef, mouseEventCallbacks, interactionOptions }) => {
-    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, mouseEventCallbacks.onHover, 'onHover', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onNodeClick, 'onNodeClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onNodeDoubleClick, 'onNodeDoubleClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onNodeRightClick, 'onNodeRightClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onRelationshipClick, 'onRelationshipClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onRelationshipDoubleClick, 'onRelationshipDoubleClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onRelationshipRightClick, 'onRelationshipRightClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onCanvasClick, 'onCanvasClick', nvlRef, interactionOptions);
-    useInteraction(ClickInteraction, clickInteraction, mouseEventCallbacks.onCanvasRightClick, 'onCanvasRightClick', nvlRef, interactionOptions);
-    useInteraction(PanInteraction, panInteraction, mouseEventCallbacks.onPan, 'onPan', nvlRef, interactionOptions);
-    useInteraction(ZoomInteraction, zoomInteraction, mouseEventCallbacks.onZoom, 'onZoom', nvlRef, interactionOptions);
-    useInteraction(DragNodeInteraction, dragNodeInteraction, mouseEventCallbacks.onDrag, 'onDrag', nvlRef, interactionOptions);
-    useInteraction(DragNodeInteraction, dragNodeInteraction, mouseEventCallbacks.onDragStart, 'onDragStart', nvlRef, interactionOptions);
-    useInteraction(DragNodeInteraction, dragNodeInteraction, mouseEventCallbacks.onDragEnd, 'onDragEnd', nvlRef, interactionOptions);
-    useInteraction(DrawInteraction, drawInteraction, mouseEventCallbacks.onHoverNodeMargin, 'onHoverNodeMargin', nvlRef, interactionOptions);
-    useInteraction(DrawInteraction, drawInteraction, mouseEventCallbacks.onDrawStarted, 'onDrawStarted', nvlRef, interactionOptions);
-    useInteraction(DrawInteraction, drawInteraction, mouseEventCallbacks.onDrawEnded, 'onDrawEnded', nvlRef, interactionOptions);
-    useInteraction(BoxSelectInteraction, multiSelectInteraction, mouseEventCallbacks.onBoxStarted, 'onBoxStarted', nvlRef, interactionOptions);
-    useInteraction(BoxSelectInteraction, multiSelectInteraction, mouseEventCallbacks.onBoxSelect, 'onBoxSelect', nvlRef, interactionOptions);
-    useInteraction(LassoInteraction, lassoInteraction, mouseEventCallbacks.onLassoStarted, 'onLassoStarted', nvlRef, interactionOptions);
-    useInteraction(LassoInteraction, lassoInteraction, mouseEventCallbacks.onLassoSelect, 'onLassoSelect', nvlRef, interactionOptions);
-    useEffect(() => () => {
-        destroyInteraction(hoverInteraction);
-        destroyInteraction(clickInteraction);
-        destroyInteraction(panInteraction);
-        destroyInteraction(zoomInteraction);
-        destroyInteraction(dragNodeInteraction);
-        destroyInteraction(drawInteraction);
-        destroyInteraction(multiSelectInteraction);
-        destroyInteraction(lassoInteraction);
-    }, []);
-    return null;
-};

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

@@ -1,16 +0,0 @@
-import type NVL from '@neo4j-nvl/base';
-import type { HTMLProps } from 'react';
-import React from 'react';
-import type { InteractiveNvlWrapperProps } from './types';
-/**
- * The interactive React wrapper component contains a collection of interaction handlers by default
- * and provides a variety of common functionality and callbacks.
- * It is an extension of the {@link BasicNvlWrapper} component and incorporates the
- * @neo4j-nvl/interaction-handlers module's decorators to provide a set of interaction events.
- *
- * The mouseEventCallbacks property takes an object where various callbacks can be defined
- * and behavior can be toggled on and off.
- *
- * For examples, head to the {@link https://neo4j.com/docs/nvl/current/react-wrappers/#_interactive_reactive_wrapperr Interactive React wrapper documentation page}.
- */
-export declare const InteractiveNvlWrapper: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<InteractiveNvlWrapperProps & HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<NVL>>>;

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

@@ -1,46 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, memo, useCallback, useRef, useState } from 'react';
-import { BasicNvlWrapper } from '../basic-wrapper/BasicNvlWrapper';
-import { INTERACTIVE_WRAPPER_ID } from '../utils/constants';
-import { InteractionHandlers } from './InteractionHandlers';
-const options = {
-    selectOnClick: false,
-    drawShadowOnHover: true,
-    selectOnRelease: false,
-    excludeNodeMargin: true
-};
-/**
- * The interactive React wrapper component contains a collection of interaction handlers by default
- * and provides a variety of common functionality and callbacks.
- * It is an extension of the {@link BasicNvlWrapper} component and incorporates the
- * @neo4j-nvl/interaction-handlers module's decorators to provide a set of interaction events.
- *
- * The mouseEventCallbacks property takes an object where various callbacks can be defined
- * and behavior can be toggled on and off.
- *
- * For examples, head to the {@link https://neo4j.com/docs/nvl/current/react-wrappers/#_interactive_reactive_wrapperr Interactive React wrapper documentation page}.
- */
-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 [isNvlInitialized, setIsNvlInitialized] = useState(false);
-    const handleInitialization = useCallback(() => {
-        setIsNvlInitialized(true);
-    }, []);
-    const handleInitializationError = useCallback((error) => {
-        setIsNvlInitialized(false);
-        if (onInitializationError) {
-            onInitializationError(error);
-        }
-    }, [onInitializationError]);
-    const setupInteractions = isNvlInitialized && myNvlRef.current !== null;
-    return (_jsxs(_Fragment, { children: [_jsx(BasicNvlWrapper, { ref: myNvlRef, nodes: nodes, id: INTERACTIVE_WRAPPER_ID, rels: rels, nvlOptions: nvlOptions, nvlCallbacks: {
-                    ...nvlCallbacks,
-                    onInitialization: () => {
-                        if (nvlCallbacks.onInitialization !== undefined) {
-                            nvlCallbacks.onInitialization();
-                        }
-                        handleInitialization();
-                    }
-                }, layout: layout, layoutOptions: layoutOptions, onInitializationError: handleInitializationError, ...nvlEvents }), setupInteractions && (_jsx(InteractionHandlers, { nvlRef: myNvlRef, mouseEventCallbacks: mouseEventCallbacks, interactionOptions: interactionOptions }))] }));
-}));

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

@@ -1,5 +0,0 @@
-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 | null>, callback: boolean | ((...args: unknown[]) => void) | undefined, eventName: MouseEvent, nvlRef: MutableRefObject<NVL | null>, interactionOptions: InteractionOptions) => void;

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

@@ -1,29 +0,0 @@
-import { isNil } from 'lodash';
-import { useEffect } from 'react';
-export const destroyInteraction = (interactionRef) => {
-    interactionRef.current?.destroy();
-    interactionRef.current = null;
-};
-export const useInteraction = (Interaction, interactionRef, callback, eventName, nvlRef, interactionOptions) => {
-    useEffect(() => {
-        const nvl = nvlRef.current;
-        // Make sure we are not mounting interaction handlers when there is NVL setup
-        if (isNil(nvl) || isNil(nvl.getContainer())) {
-            return;
-        }
-        if (callback === true || typeof callback === 'function') {
-            if (isNil(interactionRef.current)) {
-                interactionRef.current = new Interaction(nvl, interactionOptions);
-            }
-            if (typeof callback === 'function') {
-                interactionRef.current.updateCallback(eventName, callback);
-            }
-            else if (!isNil(interactionRef.current.callbackMap[eventName])) {
-                interactionRef.current.removeCallback(eventName);
-            }
-        }
-        else if (callback === false) {
-            destroyInteraction(interactionRef);
-        }
-    }, [Interaction, callback, eventName, interactionOptions, interactionRef, nvlRef]);
-};

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

@@ -1,28 +0,0 @@
-import type { BoxSelectInteraction, BoxSelectInteractionCallbacks, BoxSelectInteractionOptions, ClickInteraction, ClickInteractionCallbacks, ClickInteractionOptions, DragNodeInteraction, DragNodeInteractionCallbacks, DrawInteraction, DrawInteractionCallbacks, DrawInteractionOptions, HoverInteraction, HoverInteractionCallbacks, HoverInteractionOptions, LassoInteraction, LassoInteractionCallbacks, LassoInteractionOptions, PanInteraction, PanInteractionCallbacks, PanInteractionOptions, ZoomInteraction, ZoomInteractionCallbacks } from '@neo4j-nvl/interaction-handlers';
-import type { BasicReactWrapperProps } from '../basic-wrapper/BasicNvlWrapper';
-export type MouseInteractionModule = typeof HoverInteraction | typeof ClickInteraction | typeof PanInteraction | typeof ZoomInteraction | typeof DragNodeInteraction | typeof DrawInteraction | typeof BoxSelectInteraction | typeof LassoInteraction;
-export type MouseInteraction = HoverInteraction | ClickInteraction | PanInteraction | ZoomInteraction | DragNodeInteraction | DrawInteraction | BoxSelectInteraction | LassoInteraction;
-/**
- * Collection of mouse event callbacks that can be used with
- * the {@link InteractiveNvlWrapper} component.
- */
-export type MouseEventCallbacks = ClickInteractionCallbacks & DragNodeInteractionCallbacks & HoverInteractionCallbacks & PanInteractionCallbacks & ZoomInteractionCallbacks & BoxSelectInteractionCallbacks & DrawInteractionCallbacks & LassoInteractionCallbacks;
-/**
- * Collection of interaction options that can be used with
- * the {@link InteractiveNvlWrapper} component.
- */
-export type InteractionOptions = ClickInteractionOptions & BoxSelectInteractionOptions & HoverInteractionOptions & PanInteractionOptions & LassoInteractionOptions & DrawInteractionOptions;
-/**
- * The events that can be passed to the {@link MouseEventCallbacks} object
- * to turn on/off certain events for the {@link InteractiveNvlWrapper} component.
- */
-export type MouseEvent = keyof MouseEventCallbacks;
-/**
- * The properties that can be passed to the {@link InteractiveNvlWrapper} component.
- */
-export interface InteractiveNvlWrapperProps extends BasicReactWrapperProps {
-    /** {@link MouseEventCallbacks} containing functions for callbacks on certain actions */
-    mouseEventCallbacks?: MouseEventCallbacks;
-    /** {@link InteractionOptions} for the underlying interaction handlers */
-    interactionOptions?: InteractionOptions;
-}

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

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

package/lib/utils/constants.d.ts

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

package/lib/utils/constants.js

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

package/lib/utils/graph-comparison.d.ts

@@ -1,8 +0,0 @@
-import type { Node, Relationship } from '@neo4j-nvl/base';
-declare const getMapDifferences: <T extends Node | Relationship>(prevGraphElements: T[], newGraphElements: T[]) => {
-    added: T[];
-    removed: T[];
-    updated: T[];
-};
-declare const getNodeAttributeDifferences: (prevNodes: Node[], newNodes: Node[]) => Node[];
-export { getNodeAttributeDifferences, getMapDifferences };

package/lib/utils/graph-comparison.js

@@ -1,72 +0,0 @@
-import { isEqual, isNil, keyBy, keys, sortBy, transform } from 'lodash';
-const getMapDifferences = (prevGraphElements, newGraphElements) => {
-    const prevMap = keyBy(prevGraphElements, 'id');
-    const currentMap = keyBy(newGraphElements, 'id');
-    const prevIds = sortBy(keys(prevMap));
-    const currentIds = sortBy(keys(currentMap));
-    const added = [];
-    const removed = [];
-    const updated = [];
-    let i = 0;
-    let j = 0;
-    while (i < prevIds.length && j < currentIds.length) {
-        const prevId = prevIds[i];
-        const currId = currentIds[j];
-        if (prevId === undefined || currId === undefined) {
-            continue;
-        }
-        if (prevId === currId) {
-            if (!isEqual(prevMap[prevId], currentMap[currId])) {
-                updated.push(currId);
-            }
-            i += 1;
-            j += 1;
-        }
-        else if (prevId < currId) {
-            removed.push(prevId);
-            i += 1;
-        }
-        else {
-            added.push(currId);
-            j += 1;
-        }
-    }
-    while (i < prevIds.length) {
-        const prevId = prevIds[i];
-        if (prevId === undefined) {
-            continue;
-        }
-        removed.push(prevId);
-        i += 1;
-    }
-    while (j < currentIds.length) {
-        const currId = currentIds[j];
-        if (currId === undefined) {
-            continue;
-        }
-        added.push(currId);
-        j += 1;
-    }
-    return {
-        added: added.map((id) => currentMap[id]).filter((n) => !isNil(n)),
-        removed: removed.map((id) => prevMap[id]).filter((n) => !isNil(n)),
-        updated: updated.map((id) => currentMap[id]).filter((n) => !isNil(n))
-    };
-};
-const getNodeAttributeDifferences = (prevNodes, newNodes) => {
-    const prevNodeMap = keyBy(prevNodes, 'id');
-    return newNodes
-        .map((nodeToUpdate) => {
-        const previousNode = prevNodeMap[nodeToUpdate.id];
-        if (previousNode === undefined) {
-            return null;
-        }
-        return transform(nodeToUpdate, (result, value, key) => {
-            if (key === 'id' || value !== previousNode[key]) {
-                Object.assign(result, { [key]: value });
-            }
-        });
-    })
-        .filter((n) => n !== null && Object.keys(n).length > 1);
-};
-export { getNodeAttributeDifferences, getMapDifferences };

package/lib/utils/hooks.d.ts

@@ -1,2 +0,0 @@
-import type { EffectCallback } from 'react';
-export declare const useDeepCompareEffect: (callback: EffectCallback, dependencies: unknown[]) => void;

package/lib/utils/hooks.js

@@ -1,16 +0,0 @@
-import { isEqual } from 'lodash';
-import { useEffect, useRef } from 'react';
-function deepCompareEquals(a, b) {
-    return isEqual(a, b);
-}
-function useDeepCompareMemoize(value) {
-    const ref = useRef();
-    if (!deepCompareEquals(value, ref.current)) {
-        ref.current = value;
-    }
-    return ref.current;
-}
-export const useDeepCompareEffect = (callback, dependencies) => {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(callback, dependencies.map(useDeepCompareMemoize));
-};