@neo4j-nvl/react 1.1.0-b8970af7 → 1.1.0-c6fdfc67

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,7 +43,7 @@ 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);
     });

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/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-b8970af7",
+  "version": "1.1.0-c6fdfc67",
   "main": "lib/index.js",
   "homepage": "https://neo4j.com/docs/nvl/current/",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
@@ -36,9 +36,9 @@
     "react-dom": "19.2.1"
   },
   "dependencies": {
-    "@neo4j-nvl/base": "1.1.0-b8970af7",
-    "@neo4j-nvl/interaction-handlers": "1.1.0-b8970af7",
-    "lodash": "4.17.23"
+    "@neo4j-nvl/base": "1.1.0-c6fdfc67",
+    "@neo4j-nvl/interaction-handlers": "1.1.0-c6fdfc67",
+    "lodash": "4.18.1"
   },
   "peerDependencies": {
     "react": "18.0.0 || ^19.0.0",