@neo4j-nvl/react 1.2.0-645be73b → 1.2.0-676bec77

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/lib/__tests__/BasicNvlWrapper.test.js

@@ -27,7 +27,11 @@ 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: { direction: 'down' }, nvlOptions: { renderer: 'canvas' }, nvlCallbacks: { onLayoutDone: mockLayoutDoneFunction } }) }));
+        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,7 +85,11 @@ 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: { direction: 'down' }, 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?.();
         });

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/react",
-  "version": "1.2.0-645be73b",
+  "version": "1.2.0-676bec77",
   "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-645be73b",
-    "@neo4j-nvl/interaction-handlers": "1.2.0-645be73b",
+    "@neo4j-nvl/base": "1.2.0-676bec77",
+    "@neo4j-nvl/interaction-handlers": "1.2.0-676bec77",
     "lodash": "4.18.1"
   },
   "peerDependencies": {