@neo4j-nvl/react 0.1.14 → 0.2.2

package/README.md

@@ -1,3 +1 @@
-### react
-
-A React wrapper that provides the NVL class as a React component.
+This module exports a collection of React components that are build around the NVL class. They act as wrappers around the NVL class that provide a React interface to the NVL class.

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

@@ -1,73 +1,115 @@
-import { NamedExoticComponent } from 'react';
-import { NvlOptions, Node, Relationship, ExternalCallbacks, LayoutOptions, Layout } from '@neo4j-nvl/core';
+import React from 'react';
+import type { NvlOptions, Node, Relationship, LayoutOptions, Layout, ExternalCallbacks } from '@neo4j-nvl/core';
+import NVL from '@neo4j-nvl/core';
+type IncludeMethods<T> = Pick<T, {
+    [K in keyof T]: T[K] extends (_: unknown) => unknown ? K : never;
+}[keyof T]>;
 /**
- * A basic React wrapper for the NVL class.
+ * The properties that can be passed to the {@link BasicNvlWrapper} component.
+ */
+export interface BasicReactWrapperProps {
+    /** The nodes of the graph of type Node[] */
+    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 */
+    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?: {
+        [key: string]: (event: unknown) => void;
+    };
+}
+/**
+ * A basic React wrapper for the {@link NVL} class.
+ * It takes the {@link BasicReactWrapperProps} as properties which are passed to the NVL constructor.
+ * Any changes in properties will be reflected in the NVL instance by calling the corresponding methods.
  *
  * @example
- * This is the most basic way of using the wrapper. It will create a new NVL instance with the given nodes and relationships.
  * ```tsx
  * <BasicNvlWrapper
- *   nodes={[{ id: 0 }, { id: 1 }, { id: 2 }]}
- *   rels={[{ from: 0, to: 1, id: 10 }, { from: 0, to: 2, id: 11 }]}
+ *  nodes={nodes}
+ *  rels={relationships}
+ *  nvlOptions={options}
+ *  nvlCallbacks={callbacks}
  * />
  * ```
  *
+ * would be equivalent to
+ *
+ * ```tsx
+ * const myNvl = new NVL(container, nodes, relationships, options, callbacks)
+ * ```
+ *
  * @example
- * This is a more advanced example, where the nodes and relationships are updated dynamically.
+ * When nodes and/or relationships are updated in the React wrapper, the NVL instance will be updated accordingly:
+ *
  * ```tsx
- * const [nodes, setNodes] = useState<Node[]>([{ id: 0 }, { id: 1 }, { id: 2 }])
- * const [rels, setRels] = useState<Relationship[]>([{ from: 0, to: 1, id: 10 }, { from: 0, to: 2, id: 11 }])
+ * const [nodes, setNodes] = useState<Node[]>([{ id: '0' }, { id: '1' }])
  *
- * const addNode = () => {
+ * const addElements = () => {
  *   const newNodes = [...nodes, { id: nodes.length }]
  *   setNodes(newNodes)
  * }
  *
- * const addRel = () => {
- *   const newRels = [...rels, { from: 0, to: nodes.length - 1, id: rels.length }]
- *   setRels(newRels)
- * }
- *
  * <div>
- *   <BasicNvlWrapper
- *     nodes={nodes}
- *     rels={rels}
- *   />
- *   <button onClick={addNode}>Add Node</button>
- *   <button onClick={addRel}>Add Relationship</button>
+ *   <BasicNvlWrapper nodes={nodes} />
+ *   <button onClick={addElements}>Add Graph Elements</button>
  * </div>
  * ```
  *
+ * would be equivalent to
+ *
+ * ```tsx
+ * const myNvl = new NVL(container, nodes, [])
+ * myButton.addEventListener('click', () => {
+ *  myNvl.addAndUpdateElementsInGraph(newNodes, [])
+ * })
+ * ```
+ *
  * @example
- * This is an example of how to use a reference of NVL to call
- * NVL methods from inside the React wrapper.
+ * If you want to access the NVL class outside of the React wrapper you can use a
+ * reference of NVL to call its methods:
  * ```tsx
- * const nvlRef = useRef()
+ * const nvlRef = useRef<NVL>()
  *
  * <div>
  *   <BasicNvlWrapper
- *     nodes={[{ id: 0 }, { id: 1 }, { id: 2 }]}
- *     rels={[{ from: 0, to: 1, id: 10 }, { from: 0, to: 2, id: 11 }]}
+ *     nodes={[{ id: '0' }, { id: '1' }]}
+ *     rels={[{ from: '0', to: '1', id: '10' }]}
  *     ref={nvlRef}
  *   />
  *   <button onClick={() => nvlRef.current?.zoomToNodes([0, 1])}>Zoom to Nodes</button>
  * </div>
  * ```
+ *
+ * @example
+ * If you want to pass events to the NVL instance you can do so by passing them as properties to the React wrapper:
+ *
+ * ```tsx
+ * <BasicNvlWrapper
+ *  nodes={nodes}
+ *  rels={relationships}
+ *  onClick={(event) => console.log(event)}
+ * />
+ * ```
+ *
+ * would be equivalent to
+ *
+ * ```tsx
+ * const myNvl = new NVL(container, nodes, relationships)
+ * container.addEventListener('click', (event) => console.log(event))
+ * ```
+ *
+ * For more about interactivity, check out the {@link NVL}.hittest method,
+ * the Interaction Handlers module module and the {@link InteractiveNvlWrapper}.
  */
-declare const BasicNvlWrapper: NamedExoticComponent<{
-    /** The nodes of the graph of type Node[] */
-    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 */
-    nvlOptions?: NvlOptions;
-    /** A callback to handle any errors that happen during NVL initialization */
-    onInitializationError?: (error: unknown) => void;
-}>;
-export { BasicNvlWrapper };
+export declare const BasicNvlWrapper: React.MemoExoticComponent<React.ForwardRefExoticComponent<BasicReactWrapperProps & React.RefAttributes<IncludeMethods<NVL>>>>;
+export {};

package/lib/basic-wrapper/BasicNvlWrapper.js

@@ -1,72 +1,119 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React, { useEffect, useState, useRef, forwardRef, useImperativeHandle, memo } from 'react';
 import NVL from '@neo4j-nvl/core';
 import { getMapDifferences, getNodeAttributeDifferences } from '../utils/graphComparison';
 import { useDeepCompareEffect } from '../utils/hooks';
 /**
- * A basic React wrapper for the NVL class.
+ * A basic React wrapper for the {@link NVL} class.
+ * It takes the {@link BasicReactWrapperProps} as properties which are passed to the NVL constructor.
+ * Any changes in properties will be reflected in the NVL instance by calling the corresponding methods.
  *
  * @example
- * This is the most basic way of using the wrapper. It will create a new NVL instance with the given nodes and relationships.
  * ```tsx
  * <BasicNvlWrapper
- *   nodes={[{ id: 0 }, { id: 1 }, { id: 2 }]}
- *   rels={[{ from: 0, to: 1, id: 10 }, { from: 0, to: 2, id: 11 }]}
+ *  nodes={nodes}
+ *  rels={relationships}
+ *  nvlOptions={options}
+ *  nvlCallbacks={callbacks}
  * />
  * ```
  *
+ * would be equivalent to
+ *
+ * ```tsx
+ * const myNvl = new NVL(container, nodes, relationships, options, callbacks)
+ * ```
+ *
  * @example
- * This is a more advanced example, where the nodes and relationships are updated dynamically.
+ * When nodes and/or relationships are updated in the React wrapper, the NVL instance will be updated accordingly:
+ *
  * ```tsx
- * const [nodes, setNodes] = useState<Node[]>([{ id: 0 }, { id: 1 }, { id: 2 }])
- * const [rels, setRels] = useState<Relationship[]>([{ from: 0, to: 1, id: 10 }, { from: 0, to: 2, id: 11 }])
+ * const [nodes, setNodes] = useState<Node[]>([{ id: '0' }, { id: '1' }])
  *
- * const addNode = () => {
+ * const addElements = () => {
  *   const newNodes = [...nodes, { id: nodes.length }]
  *   setNodes(newNodes)
  * }
  *
- * const addRel = () => {
- *   const newRels = [...rels, { from: 0, to: nodes.length - 1, id: rels.length }]
- *   setRels(newRels)
- * }
- *
  * <div>
- *   <BasicNvlWrapper
- *     nodes={nodes}
- *     rels={rels}
- *   />
- *   <button onClick={addNode}>Add Node</button>
- *   <button onClick={addRel}>Add Relationship</button>
+ *   <BasicNvlWrapper nodes={nodes} />
+ *   <button onClick={addElements}>Add Graph Elements</button>
  * </div>
  * ```
  *
+ * would be equivalent to
+ *
+ * ```tsx
+ * const myNvl = new NVL(container, nodes, [])
+ * myButton.addEventListener('click', () => {
+ *  myNvl.addAndUpdateElementsInGraph(newNodes, [])
+ * })
+ * ```
+ *
  * @example
- * This is an example of how to use a reference of NVL to call
- * NVL methods from inside the React wrapper.
+ * If you want to access the NVL class outside of the React wrapper you can use a
+ * reference of NVL to call its methods:
  * ```tsx
- * const nvlRef = useRef()
+ * const nvlRef = useRef<NVL>()
  *
  * <div>
  *   <BasicNvlWrapper
- *     nodes={[{ id: 0 }, { id: 1 }, { id: 2 }]}
- *     rels={[{ from: 0, to: 1, id: 10 }, { from: 0, to: 2, id: 11 }]}
+ *     nodes={[{ id: '0' }, { id: '1' }]}
+ *     rels={[{ from: '0', to: '1', id: '10' }]}
  *     ref={nvlRef}
  *   />
  *   <button onClick={() => nvlRef.current?.zoomToNodes([0, 1])}>Zoom to Nodes</button>
  * </div>
  * ```
+ *
+ * @example
+ * If you want to pass events to the NVL instance you can do so by passing them as properties to the React wrapper:
+ *
+ * ```tsx
+ * <BasicNvlWrapper
+ *  nodes={nodes}
+ *  rels={relationships}
+ *  onClick={(event) => console.log(event)}
+ * />
+ * ```
+ *
+ * would be equivalent to
+ *
+ * ```tsx
+ * const myNvl = new NVL(container, nodes, relationships)
+ * container.addEventListener('click', (event) => console.log(event))
+ * ```
+ *
+ * For more about interactivity, check out the {@link NVL}.hittest method,
+ * the Interaction Handlers module module and the {@link InteractiveNvlWrapper}.
  */
-const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOptions, nvlCallbacks = {}, nvlOptions, onInitializationError }, ref) => {
+export const BasicNvlWrapper = memo(forwardRef((_a, ref) => {
+    var { nodes, rels, layout, layoutOptions, nvlCallbacks = {}, nvlOptions = {}, onInitializationError } = _a, nvlEvents = __rest(_a, ["nodes", "rels", "layout", "layoutOptions", "nvlCallbacks", "nvlOptions", "onInitializationError"]);
     useImperativeHandle(ref, () => {
         const nvlMethods = Object.getOwnPropertyNames(NVL.prototype);
-        return nvlMethods.reduce((current, method) => (Object.assign(Object.assign({}, current), { [method]: (...args) => nvl && nvl[method](...args) })), {});
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore revisit better typing for reduce function
+        return nvlMethods.reduce((current, method) => (Object.assign(Object.assign({}, current), { 
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore suppress the type casting error on spreading
+            [method]: (...args) => nvlRef && nvlRef.current && nvlRef.current[method](...args) })), {});
     });
     const containerRef = useRef();
-    const [nvl, setNvl] = useState();
+    const nvlRef = useRef();
     const [currentNodes, setCurrentNodes] = useState(nodes);
     const [currentRels, setCurrentRels] = useState(rels);
     useEffect(() => {
-        if (!nvl) {
+        if (!nvlRef.current) {
             const combinedOptions = Object.assign(Object.assign({}, nvlOptions), { layoutOptions });
             if (layout) {
                 combinedOptions.layout = layout;
@@ -74,7 +121,7 @@ const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOptions, n
             let newNvl;
             try {
                 newNvl = new NVL(containerRef.current, currentNodes, currentRels, combinedOptions, nvlCallbacks);
-                setNvl(newNvl);
+                nvlRef.current = newNvl;
                 setCurrentRels(rels);
                 setCurrentNodes(nodes);
             }
@@ -92,29 +139,29 @@ const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOptions, n
         }
     }, []);
     useEffect(() => {
-        if (!nvl)
+        if (!nvlRef.current) {
             return;
+        }
         const nodeChanges = getMapDifferences(currentNodes, nodes);
         const nodeDiff = getNodeAttributeDifferences(currentNodes, nodes);
         const relChanges = getMapDifferences(currentRels, rels);
         setCurrentRels(rels);
         setCurrentNodes(nodes);
-        nvl.updateGraph([...nodeChanges.added, ...nodeDiff], [...relChanges.added, ...relChanges.updated]);
-        nvl.removeRelationshipsWithIds(relChanges.removed.map((r) => r.id));
-        nvl.removeNodesWithIds(nodeChanges.removed.map((n) => n.id));
+        nvlRef.current && nvlRef.current.addAndUpdateElementsInGraph([...nodeChanges.added, ...nodeDiff], [...relChanges.added, ...relChanges.updated]);
+        nvlRef.current && nvlRef.current.removeRelationshipsWithIds(relChanges.removed.map((r) => r.id));
+        nvlRef.current && nvlRef.current.removeNodesWithIds(nodeChanges.removed.map((n) => n.id));
     }, [nodes, rels]);
     useEffect(() => {
-        nvl === null || nvl === void 0 ? void 0 : nvl.setLayout(layout);
+        nvlRef.current && nvlRef.current.setLayout(layout);
     }, [layout]);
     useDeepCompareEffect(() => {
-        nvl === null || nvl === void 0 ? void 0 : nvl.setLayoutOptions(layoutOptions);
+        nvlRef.current && nvlRef.current.setLayoutOptions(layoutOptions);
     }, [layoutOptions]);
     useEffect(() => {
-        nvl === null || nvl === void 0 ? void 0 : nvl.setUseWebGLRenderer(nvlOptions === null || nvlOptions === void 0 ? void 0 : nvlOptions.useWebGL);
-    }, [nvlOptions === null || nvlOptions === void 0 ? void 0 : nvlOptions.useWebGL]);
+        nvlRef.current && nvlRef.current.setUseWebGLRenderer(nvlOptions.useWebGL);
+    }, [nvlOptions.useWebGL]);
     useEffect(() => {
-        nvl === null || nvl === void 0 ? void 0 : nvl.setDisableWebGL(nvlOptions === null || nvlOptions === void 0 ? void 0 : nvlOptions.disableWebGL);
-    }, [nvlOptions === null || nvlOptions === void 0 ? void 0 : nvlOptions.disableWebGL]);
-    return React.createElement("div", { ref: containerRef, style: { height: '100%', outline: '0' } });
+        nvlRef.current && nvlRef.current.setDisableWebGL(nvlOptions.disableWebGL);
+    }, [nvlOptions.disableWebGL]);
+    return React.createElement("div", Object.assign({ ref: containerRef, style: { height: '100%', outline: '0' } }, nvlEvents));
 }));
-export { BasicNvlWrapper };

package/lib/index.d.ts

@@ -1,2 +1,6 @@
 import { BasicNvlWrapper } from './basic-wrapper/BasicNvlWrapper';
-export { BasicNvlWrapper };
+import type { BasicReactWrapperProps } from './basic-wrapper/BasicNvlWrapper';
+import { InteractiveNvlWrapper } from './interactive-nvl-wrapper/InteractiveNvlWrapper';
+import type { MouseEventCallbacks, InteractiveNvlWrapperProps, MouseEvent, InteractionOptions } from './interactive-nvl-wrapper/InteractiveNvlWrapper';
+export { BasicNvlWrapper, InteractiveNvlWrapper };
+export type { MouseEventCallbacks, MouseEvent, BasicReactWrapperProps, InteractionOptions, InteractiveNvlWrapperProps };

package/lib/index.js

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

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

@@ -0,0 +1,56 @@
+import type NVL from '@neo4j-nvl/core';
+import type { ClickInteractionOptions, HoverInteractionOptions, MultiSelectInteractionOptions } from '@neo4j-nvl/interaction-handlers';
+import React from 'react';
+import type { BasicReactWrapperProps } from '../basic-wrapper/BasicNvlWrapper';
+/**
+ * The events that can be passed to the {@link MouseEventCallbacks} object
+ * to turn on/off certain events for the {@link InteractiveNvlWrapper} component.
+ */
+export type MouseEvent = 'onHover' | 'onNodeClick' | 'onNodeRightClick' | 'onNodeDoubleClick' | 'onRelationshipClick' | 'onRelationshipDoubleClick' | 'onRelationshipRightClick' | 'onCanvasClick' | 'onCanvasDoubleClick' | 'onCanvasRightClick' | 'onDrag' | 'onDraw' | 'onMultiSelect' | 'onPan' | 'onZoom';
+/**
+ * An object to turn on/off certain events and provide callbacks for all {@link MouseEvent}s
+ * for the {@link InteractiveNvlWrapper} component.
+ */
+export type MouseEventCallbacks<T extends string = MouseEvent> = {
+    [K in T]?: ((...args: unknown[]) => void) | boolean;
+};
+export type InteractionOptions = ClickInteractionOptions & MultiSelectInteractionOptions & HoverInteractionOptions;
+/**
+ * The properties that can be passed to the {@link InteractiveNvlWrapper} component.
+ */
+export interface InteractiveNvlWrapperProps extends BasicReactWrapperProps {
+    /** {@link MouseEventCallbacks} containing functions for callbacks on certain actions */
+    mouseEventCallbacks?: MouseEventCallbacks;
+    /** {@link InteractionOptions} for the underlying interaction handlers */
+    interactionOptions?: InteractionOptions;
+}
+/**
+ * This is a wrapper component that provides a basic set of interactions for the NVL.
+ * It is an extension of the {@link BasicNvlWrapper} component and incorporates the
+ * {@link InteractionHandlers} module's decorators to provide a set of interaction events.
+ *
+ * Events can be turned on and off by passing a callback function or a boolean value to the
+ * `mouseEventCallbacks` prop. The callback function will be called with the event's arguments
+ * when the event is triggered. If a boolean value is passed, the event will be turned on or off
+ * accordingly.
+ *
+ * @example
+ * ```tsx
+ * const [multiSelect, setMultiSelect] = useState(false)
+ * <>
+ *   <button onClick={() => setMultiSelect(!multiSelect)}>
+ *     {multiSelect ? 'Disable' : 'Enable'} multi-select
+ *   </button>
+ *   <InteractiveNvlWrapper
+ *     nodes={nodes}
+ *     rels={relationships}
+ *     mouseEventCallbacks={{
+ *     onHover: (element) => console.log(element),
+ *     onNodeClick: (node) => console.log(node),
+ *     onMultiSelect: multiSelect
+ *    }}
+ *   />
+ * </>
+ * ```
+ */
+export declare const InteractiveNvlWrapper: React.MemoExoticComponent<React.ForwardRefExoticComponent<InteractiveNvlWrapperProps & React.RefAttributes<NVL>>>;

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

@@ -0,0 +1,104 @@
+import { ClickInteraction, DragNodeInteraction, DrawInteraction, HoverInteraction, MultiSelectInteraction, PanInteraction, ZoomInteraction } from '@neo4j-nvl/interaction-handlers';
+import React, { forwardRef, memo, useEffect, useRef } from 'react';
+import { BasicNvlWrapper } from '../basic-wrapper/BasicNvlWrapper';
+const options = {
+    selectOnClick: false,
+    drawShadowOnHover: true,
+    selectOnRelease: false
+};
+const destroyInteraction = (interactionRef) => {
+    interactionRef.current && interactionRef.current.destroy();
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    interactionRef.current = null;
+};
+const useInteractionEffect = (interaction, interactionRef, callback, eventName, nvlRef, interactionOptions) => {
+    useEffect(() => {
+        setTimeout(() => {
+            if (callback) {
+                if (!interactionRef.current) {
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    interactionRef.current = new interaction(nvlRef.current, interactionOptions);
+                }
+                if (typeof callback === 'function') {
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    interactionRef.current.updateCallback(eventName, callback);
+                }
+                else {
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    interactionRef.current.removeCallback(eventName);
+                }
+            }
+            else if (callback === false) {
+                destroyInteraction(interactionRef);
+            }
+        });
+    }, [callback]);
+};
+/**
+ * This is a wrapper component that provides a basic set of interactions for the NVL.
+ * It is an extension of the {@link BasicNvlWrapper} component and incorporates the
+ * {@link InteractionHandlers} module's decorators to provide a set of interaction events.
+ *
+ * Events can be turned on and off by passing a callback function or a boolean value to the
+ * `mouseEventCallbacks` prop. The callback function will be called with the event's arguments
+ * when the event is triggered. If a boolean value is passed, the event will be turned on or off
+ * accordingly.
+ *
+ * @example
+ * ```tsx
+ * const [multiSelect, setMultiSelect] = useState(false)
+ * <>
+ *   <button onClick={() => setMultiSelect(!multiSelect)}>
+ *     {multiSelect ? 'Disable' : 'Enable'} multi-select
+ *   </button>
+ *   <InteractiveNvlWrapper
+ *     nodes={nodes}
+ *     rels={relationships}
+ *     mouseEventCallbacks={{
+ *     onHover: (element) => console.log(element),
+ *     onNodeClick: (node) => console.log(node),
+ *     onMultiSelect: multiSelect
+ *    }}
+ *   />
+ * </>
+ * ```
+ */
+export const InteractiveNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOptions, mouseEventCallbacks = {}, nvlCallbacks, nvlOptions = {}, interactionOptions = options }, nvlRef) => {
+    const myNvlRef = nvlRef !== null ? nvlRef : useRef(null);
+    const { onHover, onNodeClick, onNodeDoubleClick, onNodeRightClick, onRelationshipClick, onRelationshipDoubleClick, onRelationshipRightClick, onCanvasClick, onCanvasRightClick, onPan, onZoom, onDrag, onDraw, onMultiSelect } = mouseEventCallbacks;
+    const hoverInteraction = useRef();
+    const clickInteraction = useRef();
+    const panInteraction = useRef();
+    const zoomInteraction = useRef();
+    const dragNodeInteraction = useRef();
+    const drawInteraction = useRef();
+    const multiSelectInteraction = useRef();
+    useInteractionEffect(HoverInteraction, hoverInteraction, onHover, 'onHover', myNvlRef, interactionOptions);
+    useInteractionEffect(ClickInteraction, clickInteraction, onNodeClick, 'onNodeClick', myNvlRef, interactionOptions);
+    useInteractionEffect(ClickInteraction, clickInteraction, onNodeDoubleClick, 'onNodeDoubleClick', myNvlRef, interactionOptions);
+    useInteractionEffect(ClickInteraction, clickInteraction, onNodeRightClick, 'onNodeRightClick', myNvlRef, interactionOptions);
+    useInteractionEffect(ClickInteraction, clickInteraction, onRelationshipClick, 'onRelationshipClick', myNvlRef, interactionOptions);
+    useInteractionEffect(ClickInteraction, clickInteraction, onRelationshipDoubleClick, 'onRelationshipDoubleClick', myNvlRef, interactionOptions);
+    useInteractionEffect(ClickInteraction, clickInteraction, onRelationshipRightClick, 'onRelationshipRightClick', myNvlRef, interactionOptions);
+    useInteractionEffect(ClickInteraction, clickInteraction, onCanvasClick, 'onCanvasClick', myNvlRef, interactionOptions);
+    useInteractionEffect(ClickInteraction, clickInteraction, onCanvasRightClick, 'onCanvasRightClick', myNvlRef, interactionOptions);
+    useInteractionEffect(PanInteraction, panInteraction, onPan, 'onPan', myNvlRef, interactionOptions);
+    useInteractionEffect(ZoomInteraction, zoomInteraction, onZoom, 'onZoom', myNvlRef, interactionOptions);
+    useInteractionEffect(DragNodeInteraction, dragNodeInteraction, onDrag, 'onDrag', myNvlRef, interactionOptions);
+    useInteractionEffect(DrawInteraction, drawInteraction, onDraw, 'onDraw', myNvlRef, interactionOptions);
+    useInteractionEffect(MultiSelectInteraction, multiSelectInteraction, onMultiSelect, 'onMultiSelect', myNvlRef, interactionOptions);
+    useEffect(() => () => {
+        destroyInteraction(hoverInteraction);
+        destroyInteraction(clickInteraction);
+        destroyInteraction(panInteraction);
+        destroyInteraction(zoomInteraction);
+        destroyInteraction(dragNodeInteraction);
+        destroyInteraction(drawInteraction);
+        destroyInteraction(multiSelectInteraction);
+    }, []);
+    return (React.createElement(BasicNvlWrapper, { ref: myNvlRef, nodes: nodes, rels: rels, nvlOptions: nvlOptions, nvlCallbacks: nvlCallbacks, layout: layout, layoutOptions: layoutOptions }));
+}));

package/lib/utils/graphComparison.d.ts

@@ -1,14 +1,8 @@
 import { Node, Relationship } from '@neo4j-nvl/core';
-interface NodeChanges {
-    added: Node[];
-    removed: Node[];
-    updated: Node[];
-}
-interface RelChanges {
-    added: Relationship[];
-    removed: Relationship[];
-    updated: Relationship[];
-}
-declare const getMapDifferences: (prevGraphElements: Node[] | Relationship[], newGraphElements: Node[] | Relationship[]) => any;
-declare const getNodeAttributeDifferences: (prevNodes: Node[], newNodes: Node[]) => any[];
-export { getNodeAttributeDifferences, getMapDifferences, NodeChanges, RelChanges };
+declare const getMapDifferences: <T extends Node | Relationship>(prevGraphElements: T[], newGraphElements: T[]) => {
+    added: T[];
+    removed: T[];
+    updated: T[];
+};
+declare const getNodeAttributeDifferences: (prevNodes: Node[], newNodes: Node[]) => Node[];
+export { getNodeAttributeDifferences, getMapDifferences, };

package/lib/utils/graphComparison.js

@@ -46,14 +46,14 @@ const getNodeAttributeDifferences = (prevNodes, newNodes) => {
         .map(nodeToUpdate => {
         const previousNode = prevNodeMap[nodeToUpdate.id];
         if (!previousNode) {
-            return nodeToUpdate;
+            return null;
         }
         return transform(nodeToUpdate, (result, value, key) => {
             if (key === 'id' || value !== previousNode[key]) {
-                result[key] = value;
+                Object.assign(result, { [key]: value });
             }
         });
     })
-        .filter(n => Object.keys(n).length > 1);
+        .filter(n => n && Object.keys(n).length > 1);
 };
-export { getNodeAttributeDifferences, getMapDifferences };
+export { getNodeAttributeDifferences, getMapDifferences, };

package/package.json

@@ -1,13 +1,17 @@
 {
   "name": "@neo4j-nvl/react",
-  "version": "0.1.14",
+  "version": "0.2.2",
   "main": "lib/index.js",
+  "license": "SEE LICENSE IN 'Neo4j Early Access Agreement - Visualization Library.pdf'",
   "scripts": {
     "prebuild": "rm -rf lib/",
     "build": "tsc",
-    "test": "jest"
+    "test": "jest",
+    "prepack": "cp ../../Neo4j\\ Early\\ Access\\ Agreement\\ -\\ Visualization\\ Library.pdf ./",
+    "postpack": "rm Neo4j\\ Early\\ Access\\ Agreement\\ -\\ Visualization\\ Library.pdf"
   },
   "files": [
+    "Neo4j Early Access Agreement - Visualization Library.pdf",
     "lib"
   ],
   "engines": {
@@ -24,10 +28,10 @@
     "@testing-library/react": "^13.4.0",
     "@types/lodash": "^4.14.184",
     "@types/react": "^18.0.18",
-    "babel-eslint": "^10.1.0",
-    "typedoc": "^0.23.15"
+    "babel-eslint": "^10.1.0"
   },
   "dependencies": {
+    "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }