@neo4j-nvl/react 1.0.0 → 1.1.0-40630870

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 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.1.0] - 2026-02-16
+
+This 1.1.0 release introduces new rendering capabilities with the addition of a new SVG export method, alongside a new Circular Layout algorithm and touchpad gestures for zooming. It also includes performance improvements for the renderer and physics engine, as well as various fixes for the React wrappers and Minimap.
+
+### Added
+
+- new SVG export functionality.
+- new circular layout option.
+- two-finger pinch gesture to zoom with touchpads.
+- onCanvasDoubleClick callback to the interactive NVL React wrapper.
+
+### Changed
+
+- improved minimap handling for React components.
+- rendering performance improvements.
+- physics layout performance and gravity improvements.
+
+### Fixed
+
+- seed radius calculation in D3 layout for large graphs.
+- forceDirected layout unnecessarily reheating on switch without changes.
+- ensure drag operations are always correctly ended on mouse up.
+- minimap positioning issues.
+- background color for the 'os' theme in api documentation.
+
 ## [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).
 

package/lib/__tests__/BasicNvlWrapper.test.js

@@ -7,6 +7,17 @@ import { BasicNvlWrapper } from '../basic-wrapper/BasicNvlWrapper';
 jest.mock('@neo4j-nvl/base');
 jest.mock('@neo4j-nvl/layout-workers');
 describe('BasicNvlWrapper', () => {
+    let setZoom;
+    let setPan;
+    let setZoomAndPan;
+    beforeEach(() => {
+        setZoom = jest.fn();
+        setPan = jest.fn();
+        setZoomAndPan = jest.fn();
+        jest.spyOn(NVL.prototype, 'setZoom').mockImplementation(setZoom);
+        jest.spyOn(NVL.prototype, 'setPan').mockImplementation(setPan);
+        jest.spyOn(NVL.prototype, 'setZoomAndPan').mockImplementation(setZoomAndPan);
+    });
     afterEach(() => {
         jest.clearAllMocks();
     });
@@ -37,33 +48,78 @@ describe('BasicNvlWrapper', () => {
         expect(destroy).toHaveBeenCalledTimes(1);
     });
     test('calls setZoom when zoom property is provided', () => {
-        const setZoom = jest.fn();
-        jest.spyOn(NVL.prototype, 'setZoom').mockImplementation(setZoom);
         render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 1.5 }) }));
         expect(setZoom).toHaveBeenCalledWith(1.5);
+        expect(setZoom).toHaveBeenCalledTimes(1);
     });
     test('calls setPan when pan property is provided', () => {
-        const setPan = jest.fn();
-        jest.spyOn(NVL.prototype, 'setPan').mockImplementation(setPan);
         render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], pan: { x: 10, y: 20 } }) }));
         expect(setPan).toHaveBeenCalledWith(10, 20);
+        expect(setPan).toHaveBeenCalledTimes(1);
     });
     test('calls setZoomAndPan when both zoom and pan properties are provided', () => {
-        const setZoomAndPan = jest.fn();
-        jest.spyOn(NVL.prototype, 'setZoomAndPan').mockImplementation(setZoomAndPan);
         render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 1.5, pan: { x: 10, y: 20 } }) }));
         expect(setZoomAndPan).toHaveBeenCalledWith(1.5, 10, 20);
+        expect(setZoomAndPan).toHaveBeenCalledTimes(1);
     });
     test('does not call zoom/pan methods when properties are undefined', () => {
-        const setZoom = jest.fn();
-        jest.spyOn(NVL.prototype, 'setZoom').mockImplementation(setZoom);
-        const setPan = jest.fn();
-        jest.spyOn(NVL.prototype, 'setPan').mockImplementation(setPan);
-        const setZoomAndPan = jest.fn();
-        jest.spyOn(NVL.prototype, 'setZoomAndPan').mockImplementation(setZoomAndPan);
         render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [] }) }));
         expect(setZoom).not.toHaveBeenCalled();
         expect(setPan).not.toHaveBeenCalled();
         expect(setZoomAndPan).not.toHaveBeenCalled();
     });
+    test('only calls setZoom when zoom changes', () => {
+        const { rerender } = render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 1.5 }) }));
+        expect(setZoom).toHaveBeenCalledTimes(1);
+        expect(setZoom).toHaveBeenCalledWith(1.5);
+        rerender(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 1.5 }) }));
+        expect(setZoom).toHaveBeenCalledTimes(1);
+        rerender(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 2.0 }) }));
+        expect(setZoom).toHaveBeenCalledTimes(2);
+        expect(setZoom).toHaveBeenCalledWith(2.0);
+        expect(setPan).not.toHaveBeenCalled();
+        expect(setZoomAndPan).not.toHaveBeenCalled();
+    });
+    test('only calls setPan when pan changes', () => {
+        const { rerender } = render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], pan: { x: 10, y: 20 } }) }));
+        expect(setPan).toHaveBeenCalledTimes(1);
+        expect(setPan).toHaveBeenCalledWith(10, 20);
+        rerender(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], pan: { x: 10, y: 20 } }) }));
+        expect(setPan).toHaveBeenCalledTimes(1);
+        rerender(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], pan: { x: 30, y: 40 } }) }));
+        expect(setPan).toHaveBeenCalledTimes(2);
+        expect(setPan).toHaveBeenCalledWith(30, 40);
+        expect(setZoom).not.toHaveBeenCalled();
+        expect(setZoomAndPan).not.toHaveBeenCalled();
+    });
+    test('calls setZoomAndPan when both zoom and pan change', () => {
+        const { rerender } = render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 1.5, pan: { x: 10, y: 20 } }) }));
+        expect(setZoomAndPan).toHaveBeenCalledTimes(1);
+        expect(setZoomAndPan).toHaveBeenCalledWith(1.5, 10, 20);
+        rerender(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 1.5, pan: { x: 10, y: 20 } }) }));
+        expect(setZoomAndPan).toHaveBeenCalledTimes(1);
+        rerender(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 2.0, pan: { x: 30, y: 40 } }) }));
+        expect(setZoomAndPan).toHaveBeenCalledTimes(2);
+        expect(setZoomAndPan).toHaveBeenCalledWith(2.0, 30, 40);
+        expect(setZoom).not.toHaveBeenCalled();
+        expect(setPan).not.toHaveBeenCalled();
+    });
+    test('calls appropriate methods when only zoom changes while both are set', () => {
+        const { rerender } = render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 1.5, pan: { x: 10, y: 20 } }) }));
+        expect(setZoomAndPan).toHaveBeenCalledTimes(1);
+        rerender(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 2.0, pan: { x: 10, y: 20 } }) }));
+        expect(setZoom).toHaveBeenCalledTimes(1);
+        expect(setZoom).toHaveBeenCalledWith(2.0);
+        expect(setZoomAndPan).toHaveBeenCalledTimes(1);
+        expect(setPan).not.toHaveBeenCalled();
+    });
+    test('calls appropriate methods when only pan changes while both are set', () => {
+        const { rerender } = render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 1.5, pan: { x: 10, y: 20 } }) }));
+        expect(setZoomAndPan).toHaveBeenCalledTimes(1);
+        rerender(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 1.5, pan: { x: 30, y: 40 } }) }));
+        expect(setPan).toHaveBeenCalledTimes(1);
+        expect(setPan).toHaveBeenCalledWith(30, 40);
+        expect(setZoomAndPan).toHaveBeenCalledTimes(1);
+        expect(setZoom).not.toHaveBeenCalled();
+    });
 });

package/lib/__tests__/InteractiveNvlWrapper.test.js

@@ -11,7 +11,37 @@ jest.mock('@neo4j-nvl/interaction-handlers');
 const MockedNVL = NVL;
 let mockOnInitialization;
 HoverInteraction.prototype.callbackMap = new Map();
+HoverInteraction.prototype.updateCallback = jest.fn();
+HoverInteraction.prototype.removeCallback = jest.fn();
+HoverInteraction.prototype.destroy = jest.fn();
 PanInteraction.prototype.callbackMap = new Map();
+PanInteraction.prototype.updateCallback = jest.fn();
+PanInteraction.prototype.removeCallback = jest.fn();
+PanInteraction.prototype.destroy = jest.fn();
+ClickInteraction.prototype.callbackMap = new Map();
+ClickInteraction.prototype.updateCallback = jest.fn();
+ClickInteraction.prototype.removeCallback = jest.fn();
+ClickInteraction.prototype.destroy = jest.fn();
+ZoomInteraction.prototype.callbackMap = new Map();
+ZoomInteraction.prototype.updateCallback = jest.fn();
+ZoomInteraction.prototype.removeCallback = jest.fn();
+ZoomInteraction.prototype.destroy = jest.fn();
+DragNodeInteraction.prototype.callbackMap = new Map();
+DragNodeInteraction.prototype.updateCallback = jest.fn();
+DragNodeInteraction.prototype.removeCallback = jest.fn();
+DragNodeInteraction.prototype.destroy = jest.fn();
+DrawInteraction.prototype.callbackMap = new Map();
+DrawInteraction.prototype.updateCallback = jest.fn();
+DrawInteraction.prototype.removeCallback = jest.fn();
+DrawInteraction.prototype.destroy = jest.fn();
+BoxSelectInteraction.prototype.callbackMap = new Map();
+BoxSelectInteraction.prototype.updateCallback = jest.fn();
+BoxSelectInteraction.prototype.removeCallback = jest.fn();
+BoxSelectInteraction.prototype.destroy = jest.fn();
+LassoInteraction.prototype.callbackMap = new Map();
+LassoInteraction.prototype.updateCallback = jest.fn();
+LassoInteraction.prototype.removeCallback = jest.fn();
+LassoInteraction.prototype.destroy = jest.fn();
 let mockDestroy;
 let destroyHoverInteraction;
 let destroyPanInteraction;
@@ -34,6 +64,12 @@ describe('InteractiveNvlWrapper', () => {
         jest.spyOn(NVL.prototype, 'destroy').mockImplementation(mockDestroy);
         jest.spyOn(HoverInteraction.prototype, 'destroy').mockImplementation(destroyHoverInteraction);
         jest.spyOn(PanInteraction.prototype, 'destroy').mockImplementation(destroyPanInteraction);
+        jest.spyOn(ClickInteraction.prototype, 'destroy').mockImplementation(jest.fn());
+        jest.spyOn(ZoomInteraction.prototype, 'destroy').mockImplementation(jest.fn());
+        jest.spyOn(DragNodeInteraction.prototype, 'destroy').mockImplementation(jest.fn());
+        jest.spyOn(DrawInteraction.prototype, 'destroy').mockImplementation(jest.fn());
+        jest.spyOn(BoxSelectInteraction.prototype, 'destroy').mockImplementation(jest.fn());
+        jest.spyOn(LassoInteraction.prototype, 'destroy').mockImplementation(jest.fn());
     });
     afterEach(() => {
         jest.clearAllMocks();
@@ -75,6 +111,148 @@ describe('InteractiveNvlWrapper', () => {
         expect(BoxSelectInteraction).not.toHaveBeenCalled();
         expect(LassoInteraction).not.toHaveBeenCalled();
     });
+    test.each([
+        {
+            name: 'HoverInteraction',
+            InteractionClass: HoverInteraction,
+            callback: { onHover: jest.fn() },
+            options: { drawShadowOnHover: true }
+        },
+        {
+            name: 'ClickInteraction with onCanvasClick',
+            InteractionClass: ClickInteraction,
+            callback: { onCanvasClick: jest.fn() },
+            options: { selectOnClick: false }
+        },
+        {
+            name: 'ClickInteraction with onCanvasDoubleClick',
+            InteractionClass: ClickInteraction,
+            callback: { onCanvasDoubleClick: jest.fn() },
+            options: { selectOnClick: false }
+        },
+        {
+            name: 'ClickInteraction with onCanvasRightClick',
+            InteractionClass: ClickInteraction,
+            callback: { onCanvasRightClick: jest.fn() },
+            options: { selectOnClick: false }
+        },
+        {
+            name: 'ClickInteraction with onNodeClick',
+            InteractionClass: ClickInteraction,
+            callback: { onNodeClick: jest.fn() },
+            options: { selectOnClick: true }
+        },
+        {
+            name: 'ClickInteraction with onNodeDoubleClick',
+            InteractionClass: ClickInteraction,
+            callback: { onNodeDoubleClick: jest.fn() },
+            options: { selectOnClick: false }
+        },
+        {
+            name: 'ClickInteraction with onNodeRightClick',
+            InteractionClass: ClickInteraction,
+            callback: { onNodeRightClick: jest.fn() },
+            options: { selectOnClick: false }
+        },
+        {
+            name: 'ClickInteraction with onRelationshipClick',
+            InteractionClass: ClickInteraction,
+            callback: { onRelationshipClick: jest.fn() },
+            options: { selectOnClick: false }
+        },
+        {
+            name: 'ClickInteraction with onRelationshipDoubleClick',
+            InteractionClass: ClickInteraction,
+            callback: { onRelationshipDoubleClick: jest.fn() },
+            options: { selectOnClick: false }
+        },
+        {
+            name: 'ClickInteraction with onRelationshipRightClick',
+            InteractionClass: ClickInteraction,
+            callback: { onRelationshipRightClick: jest.fn() },
+            options: { selectOnClick: false }
+        },
+        {
+            name: 'PanInteraction',
+            InteractionClass: PanInteraction,
+            callback: { onPan: jest.fn() },
+            options: {}
+        },
+        {
+            name: 'ZoomInteraction',
+            InteractionClass: ZoomInteraction,
+            callback: { onZoom: jest.fn() },
+            options: {}
+        },
+        {
+            name: 'DragNodeInteraction with onDrag',
+            InteractionClass: DragNodeInteraction,
+            callback: { onDrag: jest.fn() },
+            options: { selectOnRelease: false }
+        },
+        {
+            name: 'DragNodeInteraction with onDragStart',
+            InteractionClass: DragNodeInteraction,
+            callback: { onDragStart: jest.fn() },
+            options: {}
+        },
+        {
+            name: 'DragNodeInteraction with onDragEnd',
+            InteractionClass: DragNodeInteraction,
+            callback: { onDragEnd: jest.fn() },
+            options: {}
+        },
+        {
+            name: 'DrawInteraction with onHoverNodeMargin',
+            InteractionClass: DrawInteraction,
+            callback: { onHoverNodeMargin: jest.fn() },
+            options: { excludeNodeMargin: false }
+        },
+        {
+            name: 'DrawInteraction with onDrawStarted',
+            InteractionClass: DrawInteraction,
+            callback: { onDrawStarted: jest.fn() },
+            options: {}
+        },
+        {
+            name: 'DrawInteraction with onDrawEnded',
+            InteractionClass: DrawInteraction,
+            callback: { onDrawEnded: jest.fn() },
+            options: {}
+        },
+        {
+            name: 'BoxSelectInteraction with onBoxStarted',
+            InteractionClass: BoxSelectInteraction,
+            callback: { onBoxStarted: jest.fn() },
+            options: {}
+        },
+        {
+            name: 'BoxSelectInteraction with onBoxSelect',
+            InteractionClass: BoxSelectInteraction,
+            callback: { onBoxSelect: jest.fn() },
+            options: {}
+        },
+        {
+            name: 'LassoInteraction with onLassoStarted',
+            InteractionClass: LassoInteraction,
+            callback: { onLassoStarted: jest.fn() },
+            options: {}
+        },
+        {
+            name: 'LassoInteraction with onLassoSelect',
+            InteractionClass: LassoInteraction,
+            callback: { onLassoSelect: jest.fn() },
+            options: {}
+        }
+    ])('initialises $name when its callback is provided', ({ InteractionClass, callback, options }) => {
+        const myNvlRef = createRef();
+        render(_jsx(InteractiveNvlWrapper, { nodes: [], rels: [], ref: myNvlRef, mouseEventCallbacks: callback, interactionOptions: options }));
+        act(() => {
+            mockOnInitialization?.();
+        });
+        expect(InteractionClass).toHaveBeenCalledWith(myNvlRef.current, options);
+        expect(InteractionClass).toHaveBeenCalledTimes(1);
+    });
     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

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

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

package/lib/__tests__/StaticPictureWrapper.test.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { render, waitFor } from '@testing-library/react';
+import { StaticPictureWrapper } from '../static-picture-wrapper/StaticPictureWrapper';
+jest.mock('@neo4j-nvl/base', () => {
+    const mockNVL = jest
+        .fn()
+        .mockImplementation((_element, _nodes, _rels, _nvlOptions, callbacks) => {
+        setTimeout(() => {
+            callbacks.onLayoutDone?.();
+            callbacks.onZoomTransitionDone?.();
+        }, 0);
+        return {
+            getNodes: jest.fn().mockReturnValue([
+                { id: '0', x: 0, y: 0 },
+                { id: '1', x: 100, y: 100 }
+            ]),
+            fit: jest.fn(),
+            getImageDataUrl: jest.fn().mockReturnValue('data:image/png;base64,...mock-png...'),
+            getSvgDataUrl: jest.fn().mockResolvedValue('data:image/svg+xml;charset=utf-8,...mock-svg...'),
+            destroy: jest.fn()
+        };
+    });
+    return mockNVL;
+});
+const NVLMock = jest.requireMock('@neo4j-nvl/base');
+describe('StaticPictureWrapper - format prop support', () => {
+    const mockNodes = [
+        { id: '0', caption: 'Node 0' },
+        { id: '1', caption: 'Node 1' }
+    ];
+    const mockRels = [{ id: '01', from: '0', to: '1', caption: 'KNOWS' }];
+    beforeEach(() => {
+        NVLMock.mockClear();
+    });
+    const getMockNVLInstance = (index = 0) => {
+        return NVLMock.mock.results[index]?.value;
+    };
+    it('Should pass nodes, relationships and options to NVL constructor', () => {
+        const mockOptions = {
+            layout: 'hierarchical',
+            styling: {
+                defaultNodeColor: 'red'
+            }
+        };
+        render(_jsx(StaticPictureWrapper, { nodes: mockNodes, rels: mockRels, format: "png", nvlOptions: mockOptions, width: 250, height: 250 }));
+        expect(NVLMock).toHaveBeenCalledWith(expect.any(HTMLDivElement), mockNodes, mockRels, mockOptions, expect.any(Object));
+    });
+    it('Should use getSvgDataUrl for SVG format', async () => {
+        render(_jsx(StaticPictureWrapper, { nodes: mockNodes, rels: mockRels, format: "svg" }));
+        await waitFor(() => {
+            const mockInstance = getMockNVLInstance();
+            expect(mockInstance.getSvgDataUrl).toHaveBeenCalled();
+            expect(mockInstance.getImageDataUrl).not.toHaveBeenCalled();
+        });
+    });
+    it('Should use getImageDataUrl for PNG format', async () => {
+        render(_jsx(StaticPictureWrapper, { nodes: mockNodes, rels: mockRels, format: "png" }));
+        await waitFor(() => {
+            const mockInstance = getMockNVLInstance();
+            expect(mockInstance.getSvgDataUrl).not.toHaveBeenCalled();
+            expect(mockInstance.getImageDataUrl).toHaveBeenCalled();
+        });
+    });
+    it('Should triggerer re-render when format prop changes', async () => {
+        const { rerender } = render(_jsx(StaticPictureWrapper, { nodes: mockNodes, rels: mockRels, format: "png" }));
+        await waitFor(() => {
+            const mockInstance = getMockNVLInstance(0);
+            expect(mockInstance.getSvgDataUrl).not.toHaveBeenCalled();
+            expect(mockInstance.getImageDataUrl).toHaveBeenCalledTimes(1);
+        });
+        rerender(_jsx(StaticPictureWrapper, { nodes: mockNodes, rels: mockRels, format: "svg" }));
+        await waitFor(() => {
+            const mockInstance = getMockNVLInstance(1);
+            expect(mockInstance.getSvgDataUrl).toHaveBeenCalledTimes(1);
+            expect(mockInstance.getImageDataUrl).not.toHaveBeenCalled();
+        });
+    });
+    it('Should clean up NVL instance on unmount', () => {
+        const { unmount } = render(_jsx(StaticPictureWrapper, { nodes: mockNodes, rels: mockRels, format: "png" }));
+        unmount();
+        const mockInstance = getMockNVLInstance();
+        expect(mockInstance.destroy).toHaveBeenCalled();
+    });
+});

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

@@ -45,4 +45,4 @@ export interface BasicReactWrapperProps {
  *
  * 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<Partial<Pick<NVL, "performance" | "restart" | "destroy" | "addAndUpdateElementsInGraph" | "getSelectedNodes" | "getSelectedRelationships" | "removeNodesWithIds" | "removeRelationshipsWithIds" | "getNodes" | "getRelationships" | "getNodeById" | "getRelationshipById" | "getPositionById" | "getCurrentOptions" | "deselectAll" | "fit" | "resetZoom" | "setRenderer" | "setDisableWebGL" | "pinNode" | "unPinNode" | "setLayout" | "setLayoutOptions" | "getNodesOnScreen" | "getNodePositions" | "setNodePositions" | "isLayoutMoving" | "saveToFile" | "getImageDataUrl" | "saveFullGraphToLargeFile" | "setZoom" | "getScale" | "getPan" | "getHits" | "getContainer">>>>>;
+export declare const BasicNvlWrapper: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<BasicReactWrapperProps & HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<Partial<Pick<NVL, "restart" | "destroy" | "addAndUpdateElementsInGraph" | "getSelectedNodes" | "getSelectedRelationships" | "removeNodesWithIds" | "removeRelationshipsWithIds" | "getNodes" | "getRelationships" | "getNodeById" | "getRelationshipById" | "getPositionById" | "getCurrentOptions" | "deselectAll" | "fit" | "resetZoom" | "setRenderer" | "setDisableWebGL" | "pinNode" | "unPinNode" | "setLayout" | "setLayoutOptions" | "getNodesOnScreen" | "getNodePositions" | "setNodePositions" | "isLayoutMoving" | "saveToFile" | "saveToSvg" | "getImageDataUrl" | "getSvgDataUrl" | "saveFullGraphToLargeFile" | "getZoomLimits" | "setZoom" | "getScale" | "getPan" | "getHits" | "getContainer">>>>>;

package/lib/basic-wrapper/BasicNvlWrapper.js

@@ -14,6 +14,8 @@ import { useDeepCompareEffect } from '../utils/hooks';
  */
 export const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOptions, nvlCallbacks = {}, nvlOptions = {}, positions = [], zoom, pan, onInitializationError, ...nvlEvents }, ref) => {
     const nvlRef = useRef(null);
+    const prevZoomRef = useRef(undefined);
+    const prevPanRef = useRef(undefined);
     useImperativeHandle(ref, () => {
         const nvlMethods = Object.getOwnPropertyNames(NVL.prototype);
         return nvlMethods.reduce((current, method) => ({
@@ -30,9 +32,18 @@ export const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOpt
     const containerRef = useRef(null);
     const [currentNodes, setCurrentNodes] = useState(nodes);
     const [currentRels, setCurrentRels] = useState(rels);
+    useEffect(() => {
+        return () => {
+            nvlRef.current?.destroy();
+            nvlRef.current = null;
+        };
+    }, []);
     useEffect(() => {
         let newNvl = null;
-        if (containerRef.current !== null) {
+        const hasMinimap = 'minimapContainer' in nvlOptions;
+        const minimapContainerIsReady = hasMinimap ? nvlOptions.minimapContainer !== null : true;
+        const mainContainerIsReady = containerRef.current !== null;
+        if (mainContainerIsReady && minimapContainerIsReady) {
             if (nvlRef.current === null) {
                 const combinedOptions = { ...nvlOptions, layoutOptions };
                 if (layout !== undefined) {
@@ -54,12 +65,8 @@ export const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOpt
                 }
             }
         }
-        return () => {
-            newNvl?.destroy();
-            nvlRef.current = null;
-        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [containerRef.current, nvlOptions.minimapContainer]);
     useEffect(() => {
         if (nvlRef.current === null) {
             return;
@@ -122,15 +129,21 @@ export const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOpt
         if (nvlRef.current === null) {
             return;
         }
-        if (zoom !== undefined && pan !== undefined) {
+        const currentZoom = prevZoomRef.current;
+        const currentPan = prevPanRef.current;
+        const zoomHasChanged = zoom !== undefined && zoom !== currentZoom;
+        const panHasChanged = pan !== undefined && (pan.x !== currentPan?.x || pan.y !== currentPan.y);
+        if (zoomHasChanged && panHasChanged) {
             nvlRef.current.setZoomAndPan(zoom, pan.x, pan.y);
         }
-        else if (zoom !== undefined) {
+        else if (zoomHasChanged) {
             nvlRef.current.setZoom(zoom);
         }
-        else if (pan !== undefined) {
+        else if (panHasChanged) {
             nvlRef.current.setPan(pan.x, pan.y);
         }
+        prevZoomRef.current = zoom;
+        prevPanRef.current = pan;
     }, [zoom, pan]);
     return _jsx("div", { id: BASIC_WRAPPER_ID, ref: containerRef, style: { height: '100%', outline: '0' }, ...nvlEvents });
 }));

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

@@ -18,9 +18,11 @@ export const InteractionHandlers = ({ nvlRef, mouseEventCallbacks, interactionOp
     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.onCanvasDoubleClick, 'onCanvasDoubleClick', 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(ZoomInteraction, zoomInteraction, mouseEventCallbacks.onZoomAndPan, 'onZoomAndPan', 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);

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 | null>, callback: boolean | ((...args: unknown[]) => void) | 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/types.d.ts

@@ -1,4 +1,4 @@
-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 { BoxSelectInteraction, BoxSelectInteractionCallbacks, BoxSelectInteractionOptions, ClickInteraction, ClickInteractionCallbacks, ClickInteractionOptions, DragNodeInteraction, DragNodeInteractionCallbacks, DrawInteraction, DrawInteractionCallbacks, DrawInteractionOptions, HoverInteraction, HoverInteractionCallbacks, HoverInteractionOptions, LassoInteraction, LassoInteractionCallbacks, LassoInteractionOptions, PanInteraction, PanInteractionCallbacks, PanInteractionOptions, ZoomInteraction, ZoomInteractionCallbacks, ZoomInteractionOptions } 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;
@@ -11,7 +11,7 @@ export type MouseEventCallbacks = ClickInteractionCallbacks & DragNodeInteractio
  * Collection of interaction options that can be used with
  * the {@link InteractiveNvlWrapper} component.
  */
-export type InteractionOptions = ClickInteractionOptions & BoxSelectInteractionOptions & HoverInteractionOptions & PanInteractionOptions & LassoInteractionOptions & DrawInteractionOptions;
+export type InteractionOptions = ClickInteractionOptions & BoxSelectInteractionOptions & HoverInteractionOptions & PanInteractionOptions & ZoomInteractionOptions & LassoInteractionOptions & DrawInteractionOptions;
 /**
  * The events that can be passed to the {@link MouseEventCallbacks} object
  * to turn on/off certain events for the {@link InteractiveNvlWrapper} component.

package/lib/static-picture-wrapper/StaticPictureWrapper.d.ts

@@ -9,14 +9,31 @@ export type StaticPictureWrapperProps = {
     rels: Relationship[];
     /** Options to customize the NVL instance. */
     nvlOptions?: NvlOptions;
-    /** The width of the static picture. */
+    /** The width of the static picture in pixels. */
     width?: number;
-    /** The height of the static picture. */
+    /** The height of the static picture in pixels. */
     height?: number;
+    /** The format of the static picture: 'png' or 'svg'.
+     * Defaults to 'png'. */
+    format?: 'png' | 'svg';
 };
 /**
  * A React component that creates a static picture of a graph using NVL.
  * This component is useful for generating static visualizations of graphs without requiring user interaction.
- * NVL is destroyed after capturing the image to free up resources.
+ * The component automatically fits all nodes in the viewport before capturing the image
+ * NVL is automatically destroyed after capturing the image to free up resources.
+ *
+ * @param props - The component properties
+ * @returns An img element displaying the graph visualization, or null during rendering
+ *
+ * @example
+ * ```tsx
+ * <StaticPictureWrapper
+ *   nodes={nodes}
+ *   rels={relationships}
+ *   width={500}
+ *   height={500}
+ * />
+ * ```
  */
-export declare const StaticPictureWrapper: ({ nodes, rels, nvlOptions, width, height }: StaticPictureWrapperProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const StaticPictureWrapper: ({ nodes, rels, nvlOptions, width, height, format }: StaticPictureWrapperProps) => import("react/jsx-runtime").JSX.Element | null;

package/lib/static-picture-wrapper/StaticPictureWrapper.js

@@ -4,9 +4,23 @@ import { useEffect, useState } from 'react';
 /**
  * A React component that creates a static picture of a graph using NVL.
  * This component is useful for generating static visualizations of graphs without requiring user interaction.
- * NVL is destroyed after capturing the image to free up resources.
+ * The component automatically fits all nodes in the viewport before capturing the image
+ * NVL is automatically destroyed after capturing the image to free up resources.
+ *
+ * @param props - The component properties
+ * @returns An img element displaying the graph visualization, or null during rendering
+ *
+ * @example
+ * ```tsx
+ * <StaticPictureWrapper
+ *   nodes={nodes}
+ *   rels={relationships}
+ *   width={500}
+ *   height={500}
+ * />
+ * ```
  */
-export const StaticPictureWrapper = ({ nodes, rels, nvlOptions = {}, width = 500, height = 500 }) => {
+export const StaticPictureWrapper = ({ nodes, rels, nvlOptions = {}, width = 500, height = 500, format = 'png' }) => {
     const [imgSrc, setImgSrc] = useState();
     useEffect(() => {
         const div = document.createElement('div');
@@ -17,16 +31,27 @@ export const StaticPictureWrapper = ({ nodes, rels, nvlOptions = {}, width = 500
                 myNvl.fit(myNvl.getNodes().map((n) => n.id));
             },
             onZoomTransitionDone: () => {
-                setImgSrc(myNvl.getImageDataUrl());
-                setTimeout(() => {
-                    myNvl.destroy();
-                });
+                const fetchDataUrl = async () => {
+                    try {
+                        const dataUrl = format === 'svg' ? await myNvl.getSvgDataUrl() : myNvl.getImageDataUrl();
+                        setImgSrc(dataUrl);
+                    }
+                    catch (err) {
+                        console.error('Failed to generate image data URL', err);
+                    }
+                    finally {
+                        setTimeout(() => {
+                            myNvl.destroy();
+                        });
+                    }
+                };
+                void fetchDataUrl();
             }
         });
         return () => {
             myNvl?.destroy();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [nodes, rels, width, height]);
+    }, [nodes, rels, width, height, format]);
     return imgSrc !== undefined ? _jsx("img", { src: imgSrc, width: width, height: height, alt: "Graph" }) : null;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/react",
-  "version": "1.0.0",
+  "version": "1.1.0-40630870",
   "main": "lib/index.js",
   "homepage": "https://neo4j.com/docs/nvl/current/",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
@@ -27,21 +27,22 @@
     "lib"
   ],
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^16.3.0",
-    "@types/lodash": "4.14.202",
-    "@types/react": "^18.2.58",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "5.17.0",
+    "@testing-library/react": "16.3.0",
+    "@types/lodash": "4.17.21",
+    "@types/react": "18.3.27",
+    "react": "19.2.1",
+    "react-dom": "19.2.1"
   },
   "dependencies": {
-    "@neo4j-nvl/base": "1.0.0",
-    "@neo4j-nvl/interaction-handlers": "1.0.0",
-    "lodash": "4.17.21"
+    "@neo4j-nvl/base": "1.1.0-40630870",
+    "@neo4j-nvl/interaction-handlers": "1.1.0-40630870",
+    "lodash": "4.17.23"
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  }
+    "react": "18.0.0 || ^19.0.0",
+    "react-dom": "18.0.0 || ^19.0.0"
+  },
+  "stableVersion": "1.1.0"
 }