@neo4j-nvl/react 0.3.9-93453bb0 → 0.3.9-bdb232e9

package/lib/index.d.ts

@@ -2,5 +2,7 @@ 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';
-export { BasicNvlWrapper, InteractiveNvlWrapper };
-export type { MouseEventCallbacks, MouseEvent, BasicReactWrapperProps, InteractionOptions, InteractiveNvlWrapperProps };
+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 };

package/lib/index.js

@@ -1,3 +1,4 @@
 import { BasicNvlWrapper } from './basic-wrapper/BasicNvlWrapper';
 import { InteractiveNvlWrapper } from './interactive-nvl-wrapper/InteractiveNvlWrapper';
-export { BasicNvlWrapper, InteractiveNvlWrapper };
+import { StaticPictureWrapper } from './static-picture-wrapper/StaticPictureWrapper';
+export { BasicNvlWrapper, InteractiveNvlWrapper, StaticPictureWrapper };

package/lib/static-picture-wrapper/StaticPictureWrapper.d.ts

@@ -0,0 +1,22 @@
+import type { Node, NvlOptions, Relationship } from '@neo4j-nvl/base';
+/**
+ * The properties that can be passed to the StaticPictureWrapper component.
+ */
+export type StaticPictureWrapperProps = {
+    /** The nodes to be displayed in the graph. */
+    nodes: Node[];
+    /** The relationships to be displayed in the graph. */
+    rels: Relationship[];
+    /** Options to customize the NVL instance. */
+    nvlOptions?: NvlOptions;
+    /** The width of the static picture. */
+    width?: number;
+    /** The height of the static picture. */
+    height?: number;
+};
+/**
+ * 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.
+ */
+export declare const StaticPictureWrapper: ({ nodes, rels, nvlOptions, width, height }: StaticPictureWrapperProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import NVL from '@neo4j-nvl/base';
+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.
+ */
+export const StaticPictureWrapper = ({ nodes, rels, nvlOptions = {}, width = 500, height = 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`;
+        const myNvl = new NVL(div, nodes, rels, nvlOptions, {
+            onLayoutDone: () => {
+                myNvl.fit(myNvl.getNodes().map((n) => n.id));
+            },
+            onZoomTransitionDone: () => {
+                setImgSrc(myNvl.getImageDataUrl());
+                setTimeout(() => {
+                    myNvl.destroy();
+                });
+            }
+        });
+        return () => {
+            myNvl?.destroy();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [nodes, rels, width, height]);
+    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": "0.3.9-93453bb0",
+  "version": "0.3.9-bdb232e9",
   "main": "lib/index.js",
   "homepage": "https://neo4j.com/docs/nvl/current/",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
@@ -27,18 +27,22 @@
     "lib"
   ],
   "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^16.3.0",
     "@types/lodash": "4.14.202",
     "@types/react": "^18.2.58",
-    "babel-eslint": "^10.1.0"
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
   },
   "dependencies": {
-    "@neo4j-nvl/base": "0.3.9-93453bb0",
-    "@neo4j-nvl/interaction-handlers": "0.3.9-93453bb0",
-    "lodash": "4.17.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@neo4j-nvl/base": "0.3.9-bdb232e9",
+    "@neo4j-nvl/interaction-handlers": "0.3.9-bdb232e9",
+    "lodash": "4.17.21"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "stableVersion": "0.3.9"
 }