@neo4j-nvl/react 1.1.0 → 1.2.0-c0e15911

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.2.0] - 2026-05-27
+
+This 1.2.0 release introduces a new keyboard interaction handler and SVG support for the static image wrapper React component. It also includes several performance improvements for clustering and text/icon rendering, as well as several bug fixes.
+
+### Added
+* SVG format support in the static image wrapper.
+* Keyboard interaction handlers.
+
+### Changed
+* Boost performance of graph clustering for force directed layouts.
+* Optimize Canvas rendering performance by caching expensive operations.
+* Deprecate Cytoscape support.
+
+### Fixed
+* Fix Arabic text rendering issues to ensure characters stay connected.
+* Prevent arrow ends from bouncing by removing position rounding.
+* Fix issue where D3 layout would occasionally fail to display.
+* Fix node position loss during a restart when the device pixel ratio changes.
+* Add missing support for relationship overlay icons within the SVG renderer.
+* Fix bug where reactive zoom values were not consistently applied.
+* Correct the pinch-to-zoom speed scaling on the minimap.
+* Add safety guards against non-finite values to prevent runtime rendering errors.
+* Ensure fit targets respect `maxZoom` constraints even when omitted from `zoomOptions`.
+* Force canvas repaint when icon images finish asynchronous loading.
+
 ## [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.

package/lib/__tests__/BasicNvlWrapper.test.js

@@ -2,7 +2,7 @@ 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 { StrictMode } from 'react';
 import { BasicNvlWrapper } from '../basic-wrapper/BasicNvlWrapper';
 jest.mock('@neo4j-nvl/base');
 jest.mock('@neo4j-nvl/layout-workers');
@@ -43,10 +43,20 @@ describe('BasicNvlWrapper', () => {
     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: [] }) }) }));
+        render(_jsx(StrictMode, { children: _jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [] }) }) }));
         expect(NVL).toHaveBeenCalledTimes(2);
         expect(destroy).toHaveBeenCalledTimes(1);
     });
+    test('reapplies zoom and pan when re-initialising NVL with React StrictMode', () => {
+        const destroy = jest.fn();
+        jest.spyOn(NVL.prototype, 'destroy').mockImplementation(destroy);
+        render(_jsx(StrictMode, { children: _jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 1.5, pan: { x: 10, y: 20 } }) }) }));
+        expect(NVL).toHaveBeenCalledTimes(2);
+        expect(destroy).toHaveBeenCalledTimes(1);
+        expect(setZoomAndPan).toHaveBeenCalledTimes(2);
+        expect(setZoomAndPan).toHaveBeenNthCalledWith(1, 1.5, 10, 20);
+        expect(setZoomAndPan).toHaveBeenNthCalledWith(2, 1.5, 10, 20);
+    });
     test('calls setZoom when zoom property is provided', () => {
         render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], zoom: 1.5 }) }));
         expect(setZoom).toHaveBeenCalledWith(1.5);

package/lib/__tests__/InteractiveNvlWrapper.test.js

@@ -1,9 +1,9 @@
 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 { BoxSelectInteraction, ClickInteraction, DragNodeInteraction, DrawInteraction, HoverInteraction, KeyboardInteraction, LassoInteraction, PanInteraction, ZoomInteraction } from '@neo4j-nvl/interaction-handlers';
 import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
-import React, { act, createRef } from 'react';
+import { StrictMode, act, createRef } from 'react';
 import { InteractiveNvlWrapper } from '../interactive-nvl-wrapper/InteractiveNvlWrapper';
 jest.mock('@neo4j-nvl/base');
 jest.mock('@neo4j-nvl/layout-workers');
@@ -42,6 +42,10 @@ LassoInteraction.prototype.callbackMap = new Map();
 LassoInteraction.prototype.updateCallback = jest.fn();
 LassoInteraction.prototype.removeCallback = jest.fn();
 LassoInteraction.prototype.destroy = jest.fn();
+KeyboardInteraction.prototype.callbackMap = new Map();
+KeyboardInteraction.prototype.updateCallback = jest.fn();
+KeyboardInteraction.prototype.removeCallback = jest.fn();
+KeyboardInteraction.prototype.destroy = jest.fn();
 let mockDestroy;
 let destroyHoverInteraction;
 let destroyPanInteraction;
@@ -70,6 +74,7 @@ describe('InteractiveNvlWrapper', () => {
         jest.spyOn(DrawInteraction.prototype, 'destroy').mockImplementation(jest.fn());
         jest.spyOn(BoxSelectInteraction.prototype, 'destroy').mockImplementation(jest.fn());
         jest.spyOn(LassoInteraction.prototype, 'destroy').mockImplementation(jest.fn());
+        jest.spyOn(KeyboardInteraction.prototype, 'destroy').mockImplementation(jest.fn());
     });
     afterEach(() => {
         jest.clearAllMocks();
@@ -110,6 +115,7 @@ describe('InteractiveNvlWrapper', () => {
         expect(ZoomInteraction).not.toHaveBeenCalled();
         expect(BoxSelectInteraction).not.toHaveBeenCalled();
         expect(LassoInteraction).not.toHaveBeenCalled();
+        expect(KeyboardInteraction).not.toHaveBeenCalled();
     });
     test.each([
         {
@@ -253,6 +259,48 @@ describe('InteractiveNvlWrapper', () => {
         expect(InteractionClass).toHaveBeenCalledWith(myNvlRef.current, options);
         expect(InteractionClass).toHaveBeenCalledTimes(1);
     });
+    test.each([
+        {
+            name: 'KeyboardInteraction with onKeyDown',
+            callback: { onKeyDown: jest.fn() }
+        },
+        {
+            name: 'KeyboardInteraction with onKeyUp',
+            callback: { onKeyUp: jest.fn() }
+        },
+        {
+            name: 'KeyboardInteraction with onNodeFocus',
+            callback: { onNodeFocus: jest.fn() }
+        },
+        {
+            name: 'KeyboardInteraction with onNodeBlur',
+            callback: { onNodeBlur: jest.fn() }
+        },
+        {
+            name: 'KeyboardInteraction with onRelationshipFocus',
+            callback: { onRelationshipFocus: jest.fn() }
+        },
+        {
+            name: 'KeyboardInteraction with onRelationshipBlur',
+            callback: { onRelationshipBlur: jest.fn() }
+        },
+        {
+            name: 'KeyboardInteraction with onCanvasFocus',
+            callback: { onCanvasFocus: jest.fn() }
+        },
+        {
+            name: 'KeyboardInteraction with onCanvasBlur',
+            callback: { onCanvasBlur: jest.fn() }
+        }
+    ])('initialises $name when its callback is provided', ({ callback }) => {
+        const myNvlRef = createRef();
+        render(_jsx(InteractiveNvlWrapper, { nodes: [], rels: [], ref: myNvlRef, keyboardEventCallbacks: callback }));
+        act(() => {
+            mockOnInitialization?.();
+        });
+        expect(KeyboardInteraction).toHaveBeenCalledWith(myNvlRef.current, expect.objectContaining({}));
+        expect(KeyboardInteraction).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
@@ -280,7 +328,7 @@ describe('InteractiveNvlWrapper', () => {
     });
     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: {
+        render(_jsx(StrictMode, { children: _jsx(InteractiveNvlWrapper, { nodes: [], rels: [], ref: myNvlRef, mouseEventCallbacks: {
                     onHover: true
                 }, interactionOptions: {
                     drawShadowOnHover: true
@@ -299,6 +347,19 @@ describe('InteractiveNvlWrapper', () => {
         expect(ZoomInteraction).not.toHaveBeenCalled();
         expect(BoxSelectInteraction).not.toHaveBeenCalled();
         expect(LassoInteraction).not.toHaveBeenCalled();
+        expect(KeyboardInteraction).not.toHaveBeenCalled();
+    });
+    test('destroys keyboard interaction on unmount', () => {
+        const destroyKeyboardInteraction = jest.fn();
+        jest.spyOn(KeyboardInteraction.prototype, 'destroy').mockImplementation(destroyKeyboardInteraction);
+        const { unmount } = render(_jsx(InteractiveNvlWrapper, { nodes: [], rels: [], keyboardEventCallbacks: {
+                onKeyDown: true
+            } }));
+        act(() => {
+            mockOnInitialization?.();
+        });
+        unmount();
+        expect(destroyKeyboardInteraction).toHaveBeenCalledTimes(1);
     });
     test('also calls custom callbacks on initialization', () => {
         const customOnInitializationCallback = jest.fn();

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, "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" | "saveFullGraphToLargeFile" | "getZoomLimits" | "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

@@ -36,6 +36,8 @@ export const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOpt
         return () => {
             nvlRef.current?.destroy();
             nvlRef.current = null;
+            prevZoomRef.current = undefined;
+            prevPanRef.current = undefined;
         };
     }, []);
     useEffect(() => {

package/lib/index.d.ts

@@ -1,8 +1,8 @@
 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';
+import type { InteractionOptions, InteractiveNvlWrapperProps, KeyboardEvent, KeyboardEventCallbacks, MouseEvent, MouseEventCallbacks } from './interactive-nvl-wrapper/types';
 import type { StaticPictureWrapperProps } from './static-picture-wrapper/StaticPictureWrapper';
 import { StaticPictureWrapper } from './static-picture-wrapper/StaticPictureWrapper';
 export { BasicNvlWrapper, InteractiveNvlWrapper, StaticPictureWrapper };
-export type { MouseEventCallbacks, MouseEvent, BasicReactWrapperProps, InteractionOptions, InteractiveNvlWrapperProps, StaticPictureWrapperProps };
+export type { MouseEventCallbacks, KeyboardEventCallbacks, MouseEvent, KeyboardEvent, BasicReactWrapperProps, InteractionOptions, InteractiveNvlWrapperProps, StaticPictureWrapperProps };

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

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

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

@@ -1,7 +1,7 @@
-import { BoxSelectInteraction, ClickInteraction, DragNodeInteraction, DrawInteraction, HoverInteraction, LassoInteraction, PanInteraction, ZoomInteraction } from '@neo4j-nvl/interaction-handlers';
+import { BoxSelectInteraction, ClickInteraction, DragNodeInteraction, DrawInteraction, HoverInteraction, KeyboardInteraction, LassoInteraction, PanInteraction, ZoomInteraction } from '@neo4j-nvl/interaction-handlers';
 import { useEffect, useRef } from 'react';
 import { destroyInteraction, useInteraction } from './hooks';
-export const InteractionHandlers = ({ nvlRef, mouseEventCallbacks, interactionOptions }) => {
+export const InteractionHandlers = ({ nvlRef, mouseEventCallbacks, keyboardEventCallbacks, interactionOptions }) => {
     const hoverInteraction = useRef(null);
     const clickInteraction = useRef(null);
     const panInteraction = useRef(null);
@@ -10,6 +10,7 @@ export const InteractionHandlers = ({ nvlRef, mouseEventCallbacks, interactionOp
     const drawInteraction = useRef(null);
     const multiSelectInteraction = useRef(null);
     const lassoInteraction = useRef(null);
+    const keyboardInteraction = 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);
@@ -33,6 +34,15 @@ export const InteractionHandlers = ({ nvlRef, mouseEventCallbacks, interactionOp
     useInteraction(BoxSelectInteraction, multiSelectInteraction, mouseEventCallbacks.onBoxSelect, 'onBoxSelect', nvlRef, interactionOptions);
     useInteraction(LassoInteraction, lassoInteraction, mouseEventCallbacks.onLassoStarted, 'onLassoStarted', nvlRef, interactionOptions);
     useInteraction(LassoInteraction, lassoInteraction, mouseEventCallbacks.onLassoSelect, 'onLassoSelect', nvlRef, interactionOptions);
+    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onKeyDown, 'onKeyDown', nvlRef, interactionOptions);
+    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onKeyUp, 'onKeyUp', nvlRef, interactionOptions);
+    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onNodeFocus, 'onNodeFocus', nvlRef, interactionOptions);
+    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onNodeBlur, 'onNodeBlur', nvlRef, interactionOptions);
+    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onRelationshipFocus, 'onRelationshipFocus', nvlRef, interactionOptions);
+    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onRelationshipBlur, 'onRelationshipBlur', nvlRef, interactionOptions);
+    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onCanvasFocus, 'onCanvasFocus', nvlRef, interactionOptions);
+    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onCanvasBlur, 'onCanvasBlur', nvlRef, interactionOptions);
+    useInteraction(KeyboardInteraction, keyboardInteraction, keyboardEventCallbacks.onContextMenu, 'onContextMenu', nvlRef, interactionOptions);
     useEffect(() => () => {
         destroyInteraction(hoverInteraction);
         destroyInteraction(clickInteraction);
@@ -42,6 +52,7 @@ export const InteractionHandlers = ({ nvlRef, mouseEventCallbacks, interactionOp
         destroyInteraction(drawInteraction);
         destroyInteraction(multiSelectInteraction);
         destroyInteraction(lassoInteraction);
+        destroyInteraction(keyboardInteraction);
     }, []);
     return null;
 };

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

@@ -1,6 +1,5 @@
 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
@@ -13,4 +12,4 @@ import type { InteractiveNvlWrapperProps } from './types';
  *
  * 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>>>;
+export declare const InteractiveNvlWrapper: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<InteractiveNvlWrapperProps & HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<NVL>>>;

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

@@ -20,7 +20,7 @@ const options = {
  *
  * 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) => {
+export const InteractiveNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOptions, onInitializationError, mouseEventCallbacks = {}, keyboardEventCallbacks = {}, nvlCallbacks = {}, nvlOptions = {}, interactionOptions = options, ...nvlEvents }, nvlRef) => {
     const newNvlRef = useRef(null);
     const myNvlRef = nvlRef ?? newNvlRef;
     const [isNvlInitialized, setIsNvlInitialized] = useState(false);
@@ -42,5 +42,5 @@ export const InteractiveNvlWrapper = memo(forwardRef(({ nodes, rels, layout, lay
                         }
                         handleInitialization();
                     }
-                }, layout: layout, layoutOptions: layoutOptions, onInitializationError: handleInitializationError, ...nvlEvents }), setupInteractions && (_jsx(InteractionHandlers, { nvlRef: myNvlRef, mouseEventCallbacks: mouseEventCallbacks, interactionOptions: interactionOptions }))] }));
+                }, layout: layout, layoutOptions: layoutOptions, onInitializationError: handleInitializationError, ...nvlEvents }), setupInteractions && (_jsx(InteractionHandlers, { nvlRef: myNvlRef, mouseEventCallbacks: mouseEventCallbacks, keyboardEventCallbacks: keyboardEventCallbacks, interactionOptions: interactionOptions }))] }));
 }));

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

@@ -1,5 +1,5 @@
 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: ((...args: unknown[]) => void) | boolean | undefined, eventName: MouseEvent, nvlRef: MutableRefObject<NVL | null>, interactionOptions: InteractionOptions) => void;
+import type { Interaction, InteractionModule, InteractionOptions, KeyboardEvent, MouseEvent } from './types';
+export declare const destroyInteraction: (interactionRef: MutableRefObject<Interaction | null>) => void;
+export declare const useInteraction: (Interaction: InteractionModule, interactionRef: MutableRefObject<Interaction | null>, callback: ((...args: unknown[]) => void) | boolean | undefined, eventName: MouseEvent | KeyboardEvent, nvlRef: MutableRefObject<NVL | null>, interactionOptions: InteractionOptions) => void;

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

@@ -1,28 +1,36 @@
-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 { BoxSelectInteraction, BoxSelectInteractionCallbacks, BoxSelectInteractionOptions, ClickInteraction, ClickInteractionCallbacks, ClickInteractionOptions, DragNodeInteraction, DragNodeInteractionCallbacks, DrawInteraction, DrawInteractionCallbacks, DrawInteractionOptions, HoverInteraction, HoverInteractionCallbacks, HoverInteractionOptions, KeyboardInteraction, KeyboardInteractionCallbacks, KeyboardInteractionOptions, 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;
+export type InteractionModule = typeof HoverInteraction | typeof ClickInteraction | typeof PanInteraction | typeof ZoomInteraction | typeof DragNodeInteraction | typeof DrawInteraction | typeof BoxSelectInteraction | typeof LassoInteraction | typeof KeyboardInteraction;
+export type Interaction = HoverInteraction | ClickInteraction | PanInteraction | ZoomInteraction | DragNodeInteraction | DrawInteraction | BoxSelectInteraction | LassoInteraction | KeyboardInteraction;
 /**
  * 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 keyboard event callbacks that can be used with
+ * the {@link InteractiveNvlWrapper} component.
+ */
+export type KeyboardEventCallbacks = KeyboardInteractionCallbacks;
 /**
  * Collection of interaction options that can be used with
  * the {@link InteractiveNvlWrapper} component.
  */
-export type InteractionOptions = ClickInteractionOptions & BoxSelectInteractionOptions & HoverInteractionOptions & PanInteractionOptions & ZoomInteractionOptions & LassoInteractionOptions & DrawInteractionOptions;
+export type InteractionOptions = ClickInteractionOptions & BoxSelectInteractionOptions & HoverInteractionOptions & PanInteractionOptions & ZoomInteractionOptions & LassoInteractionOptions & DrawInteractionOptions & KeyboardInteractionOptions;
 /**
  * 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;
+export type KeyboardEvent = keyof KeyboardEventCallbacks;
 /**
  * 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 KeyboardEventCallbacks} containing functions for callbacks on keyboard actions */
+    keyboardEventCallbacks?: KeyboardEventCallbacks;
     /** {@link InteractionOptions} for the underlying interaction handlers */
     interactionOptions?: InteractionOptions;
 }

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/lib/utils/constants.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/react",
-  "version": "1.1.0",
+  "version": "1.2.0-c0e15911",
   "main": "lib/index.js",
   "homepage": "https://neo4j.com/docs/nvl/current/",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
@@ -36,12 +36,13 @@
     "react-dom": "19.2.1"
   },
   "dependencies": {
-    "@neo4j-nvl/base": "1.1.0",
-    "@neo4j-nvl/interaction-handlers": "1.1.0",
-    "lodash": "4.17.23"
+    "@neo4j-nvl/base": "1.2.0-c0e15911",
+    "@neo4j-nvl/interaction-handlers": "1.2.0-c0e15911",
+    "lodash": "4.18.1"
   },
   "peerDependencies": {
     "react": "18.0.0 || ^19.0.0",
     "react-dom": "18.0.0 || ^19.0.0"
-  }
+  },
+  "stableVersion": "1.2.0"
 }