@neo4j-nvl/react 0.3.1-854a900a → 0.3.1-bdd0eb1f

package/README.md

@@ -82,4 +82,4 @@ const [multiSelect, setMultiSelect] = useState(false)
 ```
 
 
-You can also find more instructions and examples on how to use NVL in the docs.
+You can also find more instructions and examples on how to use the NVL React wrappers in the [docs](https://neo4j.com/docs/nvl/current/react-wrappers/).

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

@@ -22,8 +22,6 @@ export interface BasicReactWrapperProps {
     nvlOptions?: NvlOptions;
     /** A callback to handle any errors that happen during NVL initialization */
     onInitializationError?: (error: unknown) => void;
-    /** Any events that should be passed to the NVL instance */
-    nvlEvents?: Record<string, (event: unknown) => void>;
 }
 /**
  * A basic React wrapper for the {@link NVL} class.

package/lib/basic-wrapper/BasicNvlWrapper.js

@@ -94,9 +94,13 @@ export const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOpt
         const nvlMethods = Object.getOwnPropertyNames(NVL.prototype);
         return nvlMethods.reduce((current, method) => ({
             ...current,
-            [method]: (...args) => 
-            // @ts-ignore suppress the type casting error on spreading
-            nvlRef.current !== null && nvlRef.current[method](...args)
+            [method]: (...args) => {
+                if (nvlRef.current === null) {
+                    return null;
+                }
+                // @ts-ignore suppress the type casting error on spreading
+                return nvlRef.current[method](...args);
+            }
         }), 
         // eslint-disable-next-line max-len
         // eslint-disable-next-line @typescript-eslint/prefer-reduce-type-parameter, @typescript-eslint/consistent-type-assertions

package/lib/interactive-nvl-wrapper/InteractiveNvlWrapper.d.ts

@@ -1,4 +1,5 @@
 import type NVL from '@neo4j-nvl/base';
+import type { HTMLProps } from 'react';
 import React from 'react';
 import type { InteractiveNvlWrapperProps } from './types';
 /**
@@ -30,4 +31,4 @@ import type { InteractiveNvlWrapperProps } from './types';
  * </>
  * ```
  */
-export declare const InteractiveNvlWrapper: React.MemoExoticComponent<React.ForwardRefExoticComponent<InteractiveNvlWrapperProps & React.RefAttributes<NVL>>>;
+export declare const InteractiveNvlWrapper: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<InteractiveNvlWrapperProps & HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<NVL>>>;

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

@@ -38,7 +38,7 @@ const options = {
  * </>
  * ```
  */
-export const InteractiveNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOptions, mouseEventCallbacks = {}, nvlCallbacks = {}, nvlOptions = {}, interactionOptions = options }, nvlRef) => {
+export const InteractiveNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOptions, mouseEventCallbacks = {}, nvlCallbacks = {}, nvlOptions = {}, interactionOptions = options, onInitializationError = null, ...nvlEvents }, nvlRef) => {
     const newNvlRef = useRef(null);
     const myNvlRef = nvlRef ?? newNvlRef;
     const { onHover, onNodeClick, onNodeDoubleClick, onNodeRightClick, onRelationshipClick, onRelationshipDoubleClick, onRelationshipRightClick, onCanvasClick, onCanvasRightClick, onPan, onZoom, onDrag, onDragStart, onDragEnd, onDrawEnd, onHoverNodeMargin, onBoxStarted, onBoxSelect, onLassoStarted, onLassoSelect } = mouseEventCallbacks;
@@ -80,5 +80,5 @@ export const InteractiveNvlWrapper = memo(forwardRef(({ nodes, rels, layout, lay
         destroyInteraction(multiSelectInteraction);
         destroyInteraction(lassoInteraction);
     }, []);
-    return (_jsx(BasicNvlWrapper, { ref: myNvlRef, nodes: nodes, rels: rels, nvlOptions: nvlOptions, nvlCallbacks: nvlCallbacks, layout: layout, layoutOptions: layoutOptions }));
+    return (_jsx(BasicNvlWrapper, { ref: myNvlRef, nodes: nodes, rels: rels, nvlOptions: nvlOptions, nvlCallbacks: nvlCallbacks, layout: layout, layoutOptions: layoutOptions, onInitializationError: onInitializationError, ...nvlEvents }));
 }));

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

@@ -6,6 +6,11 @@ export const destroyInteraction = (interactionRef) => {
 };
 export const useInteraction = (Interaction, interactionRef, callback, eventName, nvlRef, interactionOptions) => {
     useEffect(() => {
+        const container = nvlRef.current?.getContainer();
+        // Make sure we are not mounting interaction handlers when there is NVL setup
+        if (isNil(container)) {
+            return;
+        }
         if ((callback === true || typeof callback === 'function') && !isNil(nvlRef.current)) {
             if (isNil(interactionRef.current)) {
                 interactionRef.current = new Interaction(nvlRef.current, interactionOptions);

package/package.json

@@ -1,10 +1,22 @@
 {
   "name": "@neo4j-nvl/react",
-  "version": "0.3.1-854a900a",
+  "version": "0.3.1-bdd0eb1f",
   "main": "lib/index.js",
+  "homepage": "https://neo4j.com/docs/nvl/current/",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
+  "description": "React wrappers for the Neo4j Visualization Library",
+  "keywords": [
+    "neo4j",
+    "visualization",
+    "graph",
+    "react"
+  ],
+  "bugs": {
+    "url": "https://community.neo4j.com/c/neo4j-graph-platform/neo4j-bloom"
+  },
   "scripts": {
     "build": "tsc",
+    "watch": "tsc -w",
     "test": "jest",
     "prepack": "cp ../../LICENSE.txt ./",
     "postpack": "rm LICENSE.txt"
@@ -29,8 +41,8 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@neo4j-nvl/base": "^0.3.1-854a900a",
-    "@neo4j-nvl/interaction-handlers": "^0.3.1-854a900a",
+    "@neo4j-nvl/base": "^0.3.1-bdd0eb1f",
+    "@neo4j-nvl/interaction-handlers": "^0.3.1-bdd0eb1f",
     "lodash": "4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"