@neo4j-nvl/react 1.0.0-fa3fa1ba → 1.1.0-3b6cdaa4

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/static-picture-wrapper/StaticPictureWrapper.d.ts

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

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

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

package/package.json

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