@neo4j-nvl/react 0.2.54 → 0.2.55

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

@@ -1,6 +1,6 @@
 import type { ExternalCallbacks, Layout, LayoutOptions, Node, NvlOptions, Relationship } from '@neo4j-nvl/core';
 import NVL from '@neo4j-nvl/core';
-import React from 'react';
+import { type HTMLProps } from 'react';
 type IncludeMethods<T> = Pick<T, {
     [K in keyof T]: T[K] extends (_: unknown) => unknown ? K : never;
 }[keyof T]>;
@@ -109,5 +109,5 @@ export interface BasicReactWrapperProps {
  * For more about interactivity, check out the {@link NVL}.hittest method,
  * the Interaction Handlers module module and the {@link InteractiveNvlWrapper}.
  */
-export declare const BasicNvlWrapper: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<BasicReactWrapperProps & React.HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<IncludeMethods<NVL>>>>;
+export declare const BasicNvlWrapper: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<BasicReactWrapperProps & HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<IncludeMethods<NVL>>>>;
 export {};

package/lib/basic-wrapper/BasicNvlWrapper.js

@@ -1,6 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import NVL from '@neo4j-nvl/core';
-import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { getMapDifferences, getNodeAttributeDifferences } from '../utils/graphComparison';
+import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { getMapDifferences, getNodeAttributeDifferences } from '../utils/graph-comparison';
 import { useDeepCompareEffect } from '../utils/hooks';
 /**
  * A basic React wrapper for the {@link NVL} class.
@@ -91,36 +92,40 @@ export const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOpt
     useImperativeHandle(ref, () => {
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
         const nvlMethods = Object.getOwnPropertyNames(NVL.prototype);
-        // @ts-ignore revisit better typing for reduce function
         return nvlMethods.reduce((current, method) => ({
             ...current,
             [method]: (...args) => 
             // @ts-ignore suppress the type casting error on spreading
-            nvlRef !== undefined && nvlRef.current !== null && nvlRef.current[method](...args)
-        }), {});
+            nvlRef.current !== null && 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
+        {});
     });
-    const containerRef = useRef();
+    const containerRef = useRef(null);
     const [currentNodes, setCurrentNodes] = useState(nodes);
     const [currentRels, setCurrentRels] = useState(rels);
     useEffect(() => {
-        let newNvl;
-        if (nvlRef.current === null) {
-            const combinedOptions = { ...nvlOptions, layoutOptions };
-            if (layout !== undefined) {
-                combinedOptions.layout = layout;
-            }
-            try {
-                newNvl = new NVL(containerRef.current, currentNodes, currentRels, combinedOptions, nvlCallbacks);
-                nvlRef.current = newNvl;
-                setCurrentRels(rels);
-                setCurrentNodes(nodes);
-            }
-            catch (e) {
-                if (typeof onInitializationError === 'function') {
-                    onInitializationError(e);
+        let newNvl = null;
+        if (containerRef.current !== null) {
+            if (nvlRef.current === null) {
+                const combinedOptions = { ...nvlOptions, layoutOptions };
+                if (layout !== undefined) {
+                    combinedOptions.layout = layout;
+                }
+                try {
+                    newNvl = new NVL(containerRef.current, currentNodes, currentRels, combinedOptions, nvlCallbacks);
+                    nvlRef.current = newNvl;
+                    setCurrentRels(rels);
+                    setCurrentNodes(nodes);
                 }
-                else {
-                    throw e;
+                catch (e) {
+                    if (typeof onInitializationError === 'function') {
+                        onInitializationError(e);
+                    }
+                    else {
+                        throw e;
+                    }
                 }
             }
         }
@@ -128,6 +133,7 @@ export const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOpt
             newNvl?.destroy();
             nvlRef.current = null;
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [containerRef.current]);
     useEffect(() => {
         if (nvlRef.current === null) {
@@ -138,33 +144,33 @@ export const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOpt
         const relChanges = getMapDifferences(currentRels, rels);
         setCurrentRels(rels);
         setCurrentNodes(nodes);
-        nvlRef.current?.addAndUpdateElementsInGraph([...nodeChanges.added, ...nodeDiff], [...relChanges.added, ...relChanges.updated]);
-        nvlRef.current?.removeRelationshipsWithIds(relChanges.removed.map((r) => r.id));
-        nvlRef.current?.removeNodesWithIds(nodeChanges.removed.map((n) => n.id));
-    }, [nodes, rels]);
+        nvlRef.current.addAndUpdateElementsInGraph([...nodeChanges.added, ...nodeDiff], [...relChanges.added, ...relChanges.updated]);
+        nvlRef.current.removeRelationshipsWithIds(relChanges.removed.map((r) => r.id));
+        nvlRef.current.removeNodesWithIds(nodeChanges.removed.map((n) => n.id));
+    }, [currentNodes, currentRels, nodes, rels]);
     useEffect(() => {
         if (nvlRef.current === null || layout === undefined) {
             return;
         }
-        nvlRef.current?.setLayout(layout);
+        nvlRef.current.setLayout(layout);
     }, [layout]);
     useDeepCompareEffect(() => {
         if (nvlRef.current === null || layoutOptions === undefined) {
             return;
         }
-        nvlRef.current?.setLayoutOptions(layoutOptions);
+        nvlRef.current.setLayoutOptions(layoutOptions);
     }, [layoutOptions]);
     useEffect(() => {
         if (nvlRef.current === null || nvlOptions.useWebGL === undefined) {
             return;
         }
-        nvlRef.current?.setUseWebGLRenderer(nvlOptions.useWebGL);
+        nvlRef.current.setUseWebGLRenderer(nvlOptions.useWebGL);
     }, [nvlOptions.useWebGL]);
     useEffect(() => {
         if (nvlRef.current === null || nvlOptions.disableWebGL === undefined) {
             return;
         }
-        nvlRef.current?.setDisableWebGL(nvlOptions.disableWebGL);
+        nvlRef.current.setDisableWebGL(nvlOptions.disableWebGL);
     }, [nvlOptions.disableWebGL]);
-    return React.createElement("div", { ref: containerRef, style: { height: '100%', outline: '0' }, ...nvlEvents });
+    return _jsx("div", { ref: containerRef, style: { height: '100%', outline: '0' }, ...nvlEvents });
 }));

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

@@ -1,5 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { BoxSelectInteraction, ClickInteraction, DragNodeInteraction, DrawInteraction, HoverInteraction, LassoInteraction, PanInteraction, ZoomInteraction } from '@neo4j-nvl/interaction-handlers';
-import React, { forwardRef, memo, useEffect, useRef } from 'react';
+import { forwardRef, memo, useEffect, useRef } from 'react';
 import { BasicNvlWrapper } from '../basic-wrapper/BasicNvlWrapper';
 import { destroyInteraction, useInteraction } from './hooks';
 const options = {
@@ -38,7 +39,8 @@ const options = {
  * ```
  */
 export const InteractiveNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOptions, mouseEventCallbacks = {}, nvlCallbacks = {}, nvlOptions = {}, interactionOptions = options }, nvlRef) => {
-    const myNvlRef = nvlRef !== null ? nvlRef : useRef(null);
+    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;
     const hoverInteraction = useRef();
     const clickInteraction = useRef();
@@ -78,5 +80,5 @@ export const InteractiveNvlWrapper = memo(forwardRef(({ nodes, rels, layout, lay
         destroyInteraction(multiSelectInteraction);
         destroyInteraction(lassoInteraction);
     }, []);
-    return (React.createElement(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 }));
 }));

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

@@ -1,5 +1,5 @@
 import type NVL from '@neo4j-nvl/core';
 import type { MutableRefObject } from 'react';
 import type { InteractionOptions, MouseEvent, MouseInteraction, MouseInteractionModule } from './types';
-export declare const destroyInteraction: (interactionRef: MutableRefObject<MouseInteraction>) => void;
-export declare const useInteraction: (Interaction: MouseInteractionModule, interactionRef: MutableRefObject<MouseInteraction>, callback: boolean | ((...args: unknown[]) => void), eventName: MouseEvent, nvlRef: MutableRefObject<NVL>, interactionOptions: InteractionOptions) => void;
+export declare const destroyInteraction: (interactionRef: MutableRefObject<MouseInteraction | null>) => void;
+export declare const useInteraction: (Interaction: MouseInteractionModule, interactionRef: MutableRefObject<MouseInteraction>, callback: boolean | ((...args: unknown[]) => void), eventName: MouseEvent, nvlRef: MutableRefObject<NVL | null>, interactionOptions: InteractionOptions) => void;

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

@@ -20,5 +20,5 @@ export const useInteraction = (Interaction, interactionRef, callback, eventName,
         else if (callback === false) {
             destroyInteraction(interactionRef);
         }
-    }, [callback]);
+    }, [Interaction, callback, eventName, interactionOptions, interactionRef, nvlRef]);
 };

package/lib/utils/{graphComparison.js → graph-comparison.js}

@@ -1,4 +1,4 @@
-import { isEqual, keyBy, keys, sortBy, transform } from 'lodash';
+import { isEqual, isNil, keyBy, keys, sortBy, transform } from 'lodash';
 const getMapDifferences = (prevGraphElements, newGraphElements) => {
     const prevMap = keyBy(prevGraphElements, 'id');
     const currentMap = keyBy(newGraphElements, 'id');
@@ -12,6 +12,9 @@ const getMapDifferences = (prevGraphElements, newGraphElements) => {
     while (i < prevIds.length && j < currentIds.length) {
         const prevId = prevIds[i];
         const currId = currentIds[j];
+        if (prevId === undefined || currId === undefined) {
+            continue;
+        }
         if (prevId === currId) {
             if (!isEqual(prevMap[prevId], currentMap[currId])) {
                 updated.push(currId);
@@ -29,17 +32,25 @@ const getMapDifferences = (prevGraphElements, newGraphElements) => {
         }
     }
     while (i < prevIds.length) {
-        removed.push(prevIds[i]);
+        const prevId = prevIds[i];
+        if (prevId === undefined) {
+            continue;
+        }
+        removed.push(prevId);
         i += 1;
     }
     while (j < currentIds.length) {
-        added.push(currentIds[j]);
+        const currId = currentIds[j];
+        if (currId === undefined) {
+            continue;
+        }
+        added.push(currId);
         j += 1;
     }
     return {
-        added: added.map((id) => currentMap[id]),
-        removed: removed.map((id) => prevMap[id]),
-        updated: updated.map((id) => currentMap[id])
+        added: added.map((id) => currentMap[id]).filter((n) => !isNil(n)),
+        removed: removed.map((id) => prevMap[id]).filter((n) => !isNil(n)),
+        updated: updated.map((id) => currentMap[id]).filter((n) => !isNil(n))
     };
 };
 const getNodeAttributeDifferences = (prevNodes, newNodes) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/react",
-  "version": "0.2.54",
+  "version": "0.2.55",
   "main": "lib/index.js",
   "license": "SEE LICENSE IN 'Neo4j Early Access Agreement - Visualization Library.pdf'",
   "scripts": {