@neo4j-nvl/react 1.2.0-80937bca → 1.2.0-84e1e1ad

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 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.1] - 2026-07-28
+
+This 1.2.1 patch release contains several fixes and accessibility improvements.
+
+### Added
+* Outline when the canvas is focused while using the keyboard interaction handlers.
+
+### Changed
+* Renamed links in README from Explore to Neo4j Bloom.
+
+### Fixed
+* Aligned padding on svg and png export.
+* Aligned start behaviour of box and lasso select interaction handlers. 
+* Fixed static image wrapper React component returning incorrect height when using SVG format.
+* Fixed self-referencing relationship captions being misplaced on downward curves.
+
 ## [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.

package/README.md

@@ -1,6 +1,6 @@
 # Neo4j Visualization Library
 
-Welcome to the Neo4j Visualization Library, NVL for short. NVL is a collection of libraries that can be used to build custom graph visualizations like those used in [Neo4j Bloom and Explore(powered by Bloom)](https://neo4j.com/product/bloom/). NVL is written in TypeScript and can be used in any JavaScript project. This package contains React components that make it easier to use NVL within a React application. If you want to use NVL with a framework other than React or want to build your own React wrapper, you can do so by using the [NVL base library](https://www.npmjs.com/package/@neo4j-nvl/base).
+Welcome to the Neo4j Visualization Library, NVL for short. NVL is a collection of libraries that can be used to build custom graph visualizations like those used in [Neo4j Bloom](https://neo4j.com/product/bloom/). NVL is written in TypeScript and can be used in any JavaScript project. This package contains React components that make it easier to use NVL within a React application. If you want to use NVL with a framework other than React or want to build your own React wrapper, you can do so by using the [NVL base library](https://www.npmjs.com/package/@neo4j-nvl/base).
 
 ## Consuming the library
 

package/lib/__tests__/BasicNvlWrapper.test.js

@@ -27,8 +27,12 @@ describe('BasicNvlWrapper', () => {
     });
     test('initialises NVL expectedly with a graph object and properties', () => {
         const mockLayoutDoneFunction = jest.fn();
-        render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [{ id: '1' }, { id: '2' }], rels: [{ id: '12', from: '1', to: '2' }], layout: HierarchicalLayoutType, layoutOptions: { enableCytoscape: true }, nvlOptions: { renderer: 'canvas' }, nvlCallbacks: { onLayoutDone: mockLayoutDoneFunction } }) }));
-        expect(NVL).toHaveBeenCalledWith(expect.any(HTMLDivElement), [{ id: '1' }, { id: '2' }], [{ id: '12', from: '1', to: '2' }], { renderer: 'canvas', layout: HierarchicalLayoutType, layoutOptions: { enableCytoscape: true } }, {
+        render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [{ id: '1' }, { id: '2' }], rels: [{ id: '12', from: '1', to: '2' }], nvlOptions: {
+                    renderer: 'canvas',
+                    layout: HierarchicalLayoutType,
+                    layoutOptions: { direction: 'down' }
+                }, nvlCallbacks: { onLayoutDone: mockLayoutDoneFunction } }) }));
+        expect(NVL).toHaveBeenCalledWith(expect.any(HTMLDivElement), [{ id: '1' }, { id: '2' }], [{ id: '12', from: '1', to: '2' }], { renderer: 'canvas', layout: HierarchicalLayoutType, layoutOptions: { direction: 'down' } }, {
             onLayoutDone: mockLayoutDoneFunction
         });
     });
@@ -132,4 +136,24 @@ describe('BasicNvlWrapper', () => {
         expect(setZoomAndPan).toHaveBeenCalledTimes(1);
         expect(setZoom).not.toHaveBeenCalled();
     });
+    test('calls setLayout when nvlOptions.layout changes', () => {
+        const setLayout = jest.fn();
+        jest.spyOn(NVL.prototype, 'setLayout').mockImplementation(setLayout);
+        const { rerender } = render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], nvlOptions: { layout: HierarchicalLayoutType } }) }));
+        expect(setLayout).toHaveBeenCalledWith(HierarchicalLayoutType);
+        expect(setLayout).toHaveBeenCalledTimes(1);
+        rerender(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], nvlOptions: { layout: 'forceDirected' } }) }));
+        expect(setLayout).toHaveBeenCalledWith('forceDirected');
+        expect(setLayout).toHaveBeenCalledTimes(2);
+    });
+    test('calls setLayoutOptions when nvlOptions.layoutOptions changes', () => {
+        const setLayoutOptions = jest.fn();
+        jest.spyOn(NVL.prototype, 'setLayoutOptions').mockImplementation(setLayoutOptions);
+        const { rerender } = render(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], nvlOptions: { layoutOptions: { direction: 'down' } } }) }));
+        expect(setLayoutOptions).toHaveBeenCalledWith({ direction: 'down' });
+        expect(setLayoutOptions).toHaveBeenCalledTimes(1);
+        rerender(_jsx("div", { children: _jsx(BasicNvlWrapper, { nodes: [], rels: [], nvlOptions: { layoutOptions: { direction: 'up' } } }) }));
+        expect(setLayoutOptions).toHaveBeenCalledWith({ direction: 'up' });
+        expect(setLayoutOptions).toHaveBeenCalledTimes(2);
+    });
 });

package/lib/__tests__/InteractiveNvlWrapper.test.js

@@ -85,11 +85,15 @@ describe('InteractiveNvlWrapper', () => {
     });
     test('initialises NVL expectedly with a graph object and properties', () => {
         const mockLayoutDoneFunction = jest.fn();
-        render(_jsx(InteractiveNvlWrapper, { nodes: [{ id: '1' }, { id: '2' }], rels: [{ id: '12', from: '1', to: '2' }], layout: HierarchicalLayoutType, layoutOptions: { enableCytoscape: true }, nvlOptions: { renderer: 'canvas' }, nvlCallbacks: { onLayoutDone: mockLayoutDoneFunction } }));
+        render(_jsx(InteractiveNvlWrapper, { nodes: [{ id: '1' }, { id: '2' }], rels: [{ id: '12', from: '1', to: '2' }], nvlOptions: {
+                renderer: 'canvas',
+                layout: HierarchicalLayoutType,
+                layoutOptions: { direction: 'down' }
+            }, nvlCallbacks: { onLayoutDone: mockLayoutDoneFunction } }));
         act(() => {
             mockOnInitialization?.();
         });
-        expect(NVL).toHaveBeenCalledWith(expect.any(HTMLDivElement), [{ id: '1' }, { id: '2' }], [{ id: '12', from: '1', to: '2' }], { renderer: 'canvas', layout: HierarchicalLayoutType, layoutOptions: { enableCytoscape: true } }, {
+        expect(NVL).toHaveBeenCalledWith(expect.any(HTMLDivElement), [{ id: '1' }, { id: '2' }], [{ id: '12', from: '1', to: '2' }], { renderer: 'canvas', layout: HierarchicalLayoutType, layoutOptions: { direction: 'down' } }, {
             onLayoutDone: mockLayoutDoneFunction,
             onInitialization: mockOnInitialization
         });
@@ -187,7 +191,7 @@ describe('InteractiveNvlWrapper', () => {
         {
             name: 'ZoomInteraction',
             InteractionClass: ZoomInteraction,
-            callback: { onZoom: jest.fn() },
+            callback: { onZoomAndPan: jest.fn() },
             options: {}
         },
         {

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

@@ -1,4 +1,4 @@
-import type { ExternalCallbacks, Layout, LayoutOptions, Node, NvlOptions, Relationship } from '@neo4j-nvl/base';
+import type { ExternalCallbacks, Node, NvlOptions, Relationship } from '@neo4j-nvl/base';
 import NVL from '@neo4j-nvl/base';
 import { type HTMLProps } from 'react';
 /**
@@ -9,10 +9,6 @@ export interface BasicReactWrapperProps {
     nodes: Node[];
     /** The rels of the graph of type Relationship[] */
     rels: Relationship[];
-    /** The layout, can be 'forceDirected' or 'hierarchical' */
-    layout?: Layout;
-    /** Options for the current layout */
-    layoutOptions?: LayoutOptions;
     /** an Object containing functions for callbacks on certain actions */
     nvlCallbacks?: ExternalCallbacks;
     /** An object containing options for the Nvl instance */

package/lib/basic-wrapper/BasicNvlWrapper.js

@@ -12,7 +12,7 @@ import { useDeepCompareEffect } from '../utils/hooks';
  *
  * For examples, head to the {@link https://neo4j.com/docs/nvl/current/react-wrappers/#_basic_react_wrapper Basic React wrapper documentation page}.
  */
-export const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOptions, nvlCallbacks = {}, nvlOptions = {}, positions = [], zoom, pan, onInitializationError, ...nvlEvents }, ref) => {
+export const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, nvlCallbacks = {}, nvlOptions = {}, positions = [], zoom, pan, onInitializationError, ...nvlEvents }, ref) => {
     const nvlRef = useRef(null);
     const prevZoomRef = useRef(undefined);
     const prevPanRef = useRef(undefined);
@@ -47,12 +47,8 @@ export const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOpt
         const mainContainerIsReady = containerRef.current !== null;
         if (mainContainerIsReady && minimapContainerIsReady) {
             if (nvlRef.current === null) {
-                const combinedOptions = { ...nvlOptions, layoutOptions };
-                if (layout !== undefined) {
-                    combinedOptions.layout = layout;
-                }
                 try {
-                    newNvl = new NVL(containerRef.current, currentNodes, currentRels, combinedOptions, nvlCallbacks);
+                    newNvl = new NVL(containerRef.current, currentNodes, currentRels, nvlOptions, nvlCallbacks);
                     nvlRef.current = newNvl;
                     setCurrentRels(rels);
                     setCurrentNodes(nodes);
@@ -96,19 +92,17 @@ export const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOpt
         nvlRef.current.removeNodesWithIds(nodesToRemove);
     }, [currentNodes, currentRels, nodes, rels]);
     useEffect(() => {
-        const updatedLayout = layout ?? nvlOptions.layout;
-        if (nvlRef.current === null || updatedLayout === undefined) {
+        if (nvlRef.current === null || nvlOptions.layout === undefined) {
             return;
         }
-        nvlRef.current.setLayout(updatedLayout);
-    }, [layout, nvlOptions.layout]);
+        nvlRef.current.setLayout(nvlOptions.layout);
+    }, [nvlOptions.layout]);
     useDeepCompareEffect(() => {
-        const updatedLayoutOptions = layoutOptions ?? nvlOptions?.layoutOptions;
-        if (nvlRef.current === null || updatedLayoutOptions === undefined) {
+        if (nvlRef.current === null || nvlOptions.layoutOptions === undefined) {
             return;
         }
-        nvlRef.current.setLayoutOptions(updatedLayoutOptions);
-    }, [layoutOptions, nvlOptions.layoutOptions]);
+        nvlRef.current.setLayoutOptions(nvlOptions.layoutOptions);
+    }, [nvlOptions.layoutOptions]);
     useEffect(() => {
         if (nvlRef.current === null || nvlOptions.renderer === undefined) {
             return;

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

@@ -22,7 +22,6 @@ export const InteractionHandlers = ({ nvlRef, mouseEventCallbacks, keyboardEvent
     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);

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 = {}, keyboardEventCallbacks = {}, nvlCallbacks = {}, nvlOptions = {}, interactionOptions = options, ...nvlEvents }, nvlRef) => {
+export const InteractiveNvlWrapper = memo(forwardRef(({ nodes, rels, 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, keyboardEventCallbacks: keyboardEventCallbacks, interactionOptions: interactionOptions }))] }));
+                }, onInitializationError: handleInitializationError, ...nvlEvents }), setupInteractions && (_jsx(InteractionHandlers, { nvlRef: myNvlRef, mouseEventCallbacks: mouseEventCallbacks, keyboardEventCallbacks: keyboardEventCallbacks, interactionOptions: interactionOptions }))] }));
 }));

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

@@ -24,8 +24,8 @@ export const StaticPictureWrapper = ({ nodes, rels, nvlOptions = {}, width = 500
     const [imgSrc, setImgSrc] = useState();
     useEffect(() => {
         const div = document.createElement('div');
-        div.style.width = `${width / window.devicePixelRatio}px`;
-        div.style.height = `${height / window.devicePixelRatio}px`;
+        div.style.width = `${width}px`;
+        div.style.height = `${height}px`;
         const myNvl = new NVL(div, nodes, rels, nvlOptions, {
             onLayoutDone: () => {
                 myNvl.fit(myNvl.getNodes().map((n) => n.id));
@@ -53,5 +53,5 @@ export const StaticPictureWrapper = ({ nodes, rels, nvlOptions = {}, width = 500
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [nodes, rels, width, height, format]);
-    return imgSrc !== undefined ? _jsx("img", { src: imgSrc, width: width, height: height, alt: "Graph" }) : null;
+    return imgSrc !== undefined ? (_jsx("img", { src: imgSrc, width: width, height: height, style: { display: 'block', width, height, objectFit: 'contain' }, alt: "Graph" })) : null;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/react",
-  "version": "1.2.0-80937bca",
+  "version": "1.2.0-84e1e1ad",
   "main": "lib/index.js",
   "homepage": "https://neo4j.com/docs/nvl/current/",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
@@ -36,8 +36,8 @@
     "react-dom": "19.2.1"
   },
   "dependencies": {
-    "@neo4j-nvl/base": "1.2.0-80937bca",
-    "@neo4j-nvl/interaction-handlers": "1.2.0-80937bca",
+    "@neo4j-nvl/base": "1.2.0-84e1e1ad",
+    "@neo4j-nvl/interaction-handlers": "1.2.0-84e1e1ad",
     "lodash": "4.18.1"
   },
   "peerDependencies": {