@neo4j-nvl/react 2.0.0-298fd8c6 → 2.0.0-3b74980d

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

@@ -1,6 +1,6 @@
-import type NVL from '@neo4j-nvl/base';
-import type { HTMLProps } from 'react';
-import type { InteractiveNvlWrapperProps } from './types';
+import { InteractiveNvlWrapperProps } from "./types.js";
+import NVL from "@neo4j-nvl/base";
+import { HTMLProps } from "react";
 /**
  * The interactive React wrapper component contains a collection of interaction handlers by default
  * and provides a variety of common functionality and callbacks.
@@ -9,7 +9,8 @@ import type { InteractiveNvlWrapperProps } from './types';
  *
  * The mouseEventCallbacks property takes an object where various callbacks can be defined
  * and behavior can be toggled on and off.
+ * See {@link MouseEventCallbacks} for which key enables which handler.
  *
  * For examples, head to the {@link https://neo4j.com/docs/nvl/current/react-wrappers/#_interactive_react_wrapper Interactive React wrapper documentation page}.
  */
-export declare const InteractiveNvlWrapper: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<InteractiveNvlWrapperProps & HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<NVL>>>;
+export declare const InteractiveNvlWrapper: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<InteractiveNvlWrapperProps & HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<NVL>>>;

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

@@ -1,46 +1,59 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, memo, useCallback, useRef, useState } from 'react';
-import { BasicNvlWrapper } from '../basic-wrapper/BasicNvlWrapper';
-import { INTERACTIVE_WRAPPER_ID } from '../utils/constants';
-import { InteractionHandlers } from './InteractionHandlers';
+import { INTERACTIVE_WRAPPER_ID } from "../utils/constants.js";
+import { BasicNvlWrapper } from "../basic-wrapper/BasicNvlWrapper.js";
+import { InteractionHandlers } from "./InteractionHandlers.js";
+import { forwardRef, memo, useCallback, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/interactive-nvl-wrapper/InteractiveNvlWrapper.tsx
 const options = {
-    selectOnClick: false,
-    drawShadowOnHover: true,
-    selectOnRelease: false,
-    excludeNodeMargin: true
+	selectOnClick: false,
+	drawShadowOnHover: true,
+	selectOnRelease: false,
+	excludeNodeMargin: true
 };
 /**
- * The interactive React wrapper component contains a collection of interaction handlers by default
- * and provides a variety of common functionality and callbacks.
- * It is an extension of the {@link BasicNvlWrapper} component and incorporates the
- * @neo4j-nvl/interaction-handlers module's decorators to provide a set of interaction events.
- *
- * The mouseEventCallbacks property takes an object where various callbacks can be defined
- * and behavior can be toggled on and off.
- *
- * For examples, head to the {@link https://neo4j.com/docs/nvl/current/react-wrappers/#_interactive_react_wrapper Interactive React wrapper documentation page}.
- */
-export const InteractiveNvlWrapper = memo(forwardRef(({ nodes, rels, onInitializationError, mouseEventCallbacks = {}, keyboardEventCallbacks = {}, nvlCallbacks = {}, nvlOptions = {}, interactionOptions = options, ...nvlEvents }, nvlRef) => {
-    const newNvlRef = useRef(null);
-    const myNvlRef = nvlRef ?? newNvlRef;
-    const [isNvlInitialized, setIsNvlInitialized] = useState(false);
-    const handleInitialization = useCallback(() => {
-        setIsNvlInitialized(true);
-    }, []);
-    const handleInitializationError = useCallback((error) => {
-        setIsNvlInitialized(false);
-        if (onInitializationError) {
-            onInitializationError(error);
-        }
-    }, [onInitializationError]);
-    const setupInteractions = isNvlInitialized && myNvlRef.current !== null;
-    return (_jsxs(_Fragment, { children: [_jsx(BasicNvlWrapper, { ref: myNvlRef, nodes: nodes, id: INTERACTIVE_WRAPPER_ID, rels: rels, nvlOptions: nvlOptions, nvlCallbacks: {
-                    ...nvlCallbacks,
-                    onInitialization: () => {
-                        if (nvlCallbacks.onInitialization !== undefined) {
-                            nvlCallbacks.onInitialization();
-                        }
-                        handleInitialization();
-                    }
-                }, onInitializationError: handleInitializationError, ...nvlEvents }), setupInteractions && (_jsx(InteractionHandlers, { nvlRef: myNvlRef, mouseEventCallbacks: mouseEventCallbacks, keyboardEventCallbacks: keyboardEventCallbacks, interactionOptions: interactionOptions }))] }));
+* The interactive React wrapper component contains a collection of interaction handlers by default
+* and provides a variety of common functionality and callbacks.
+* It is an extension of the {@link BasicNvlWrapper} component and incorporates the
+* @neo4j-nvl/interaction-handlers module's decorators to provide a set of interaction events.
+*
+* The mouseEventCallbacks property takes an object where various callbacks can be defined
+* and behavior can be toggled on and off.
+* See {@link MouseEventCallbacks} for which key enables which handler.
+*
+* For examples, head to the {@link https://neo4j.com/docs/nvl/current/react-wrappers/#_interactive_react_wrapper Interactive React wrapper documentation page}.
+*/
+const InteractiveNvlWrapper = memo(forwardRef(({ nodes, rels, onInitializationError, mouseEventCallbacks = {}, keyboardEventCallbacks = {}, nvlCallbacks = {}, nvlOptions = {}, interactionOptions = options, ...nvlEvents }, nvlRef) => {
+	const newNvlRef = useRef(null);
+	const myNvlRef = nvlRef ?? newNvlRef;
+	const [isNvlInitialized, setIsNvlInitialized] = useState(false);
+	const handleInitialization = useCallback(() => {
+		setIsNvlInitialized(true);
+	}, []);
+	const handleInitializationError = useCallback((error) => {
+		setIsNvlInitialized(false);
+		if (onInitializationError) onInitializationError(error);
+	}, [onInitializationError]);
+	const setupInteractions = isNvlInitialized && myNvlRef.current !== null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BasicNvlWrapper, {
+		ref: myNvlRef,
+		nodes,
+		id: INTERACTIVE_WRAPPER_ID,
+		rels,
+		nvlOptions,
+		nvlCallbacks: {
+			...nvlCallbacks,
+			onInitialization: () => {
+				if (nvlCallbacks.onInitialization !== void 0) nvlCallbacks.onInitialization();
+				handleInitialization();
+			}
+		},
+		onInitializationError: handleInitializationError,
+		...nvlEvents
+	}), setupInteractions && /* @__PURE__ */ jsx(InteractionHandlers, {
+		nvlRef: myNvlRef,
+		mouseEventCallbacks,
+		keyboardEventCallbacks,
+		interactionOptions
+	})] });
 }));
+export { InteractiveNvlWrapper };

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

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

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

@@ -1,29 +1,26 @@
-import { isNil } from 'lodash';
-import { useEffect } from 'react';
-export const destroyInteraction = (interactionRef) => {
-    interactionRef.current?.destroy();
-    interactionRef.current = null;
+import { useEffect } from "react";
+import { isNil } from "lodash-es";
+// src/interactive-nvl-wrapper/hooks.ts
+const destroyInteraction = (interactionRef) => {
+	interactionRef.current?.destroy();
+	interactionRef.current = null;
 };
-export const useInteraction = (Interaction, interactionRef, callback, eventName, nvlRef, interactionOptions) => {
-    useEffect(() => {
-        const nvl = nvlRef.current;
-        // Make sure we are not mounting interaction handlers when there is NVL setup
-        if (isNil(nvl) || isNil(nvl.getContainer())) {
-            return;
-        }
-        if (callback === true || typeof callback === 'function') {
-            if (isNil(interactionRef.current)) {
-                interactionRef.current = new Interaction(nvl, interactionOptions);
-            }
-            if (typeof callback === 'function') {
-                interactionRef.current.updateCallback(eventName, callback);
-            }
-            else if (!isNil(interactionRef.current.callbackMap[eventName])) {
-                interactionRef.current.removeCallback(eventName);
-            }
-        }
-        else if (callback === false) {
-            destroyInteraction(interactionRef);
-        }
-    }, [Interaction, callback, eventName, interactionOptions, interactionRef, nvlRef]);
+const useInteraction = (Interaction, interactionRef, callback, eventName, nvlRef, interactionOptions) => {
+	useEffect(() => {
+		const nvl = nvlRef.current;
+		if (isNil(nvl) || isNil(nvl.getContainer())) return;
+		if (callback === true || typeof callback === "function") {
+			if (isNil(interactionRef.current)) interactionRef.current = new Interaction(nvl, interactionOptions);
+			if (typeof callback === "function") interactionRef.current.updateCallback(eventName, callback);
+			else if (!isNil(interactionRef.current.callbackMap[eventName])) interactionRef.current.removeCallback(eventName);
+		} else if (callback === false) destroyInteraction(interactionRef);
+	}, [
+		Interaction,
+		callback,
+		eventName,
+		interactionOptions,
+		interactionRef,
+		nvlRef
+	]);
 };
+export { destroyInteraction, useInteraction };

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

@@ -1,10 +1,17 @@
-import type { BoxSelectInteraction, BoxSelectInteractionCallbacks, BoxSelectInteractionOptions, ClickInteraction, ClickInteractionCallbacks, ClickInteractionOptions, DragNodeInteraction, DragNodeInteractionCallbacks, DrawInteraction, DrawInteractionCallbacks, DrawInteractionOptions, HoverInteraction, HoverInteractionCallbacks, HoverInteractionOptions, KeyboardInteraction, KeyboardInteractionCallbacks, KeyboardInteractionOptions, LassoInteraction, LassoInteractionCallbacks, LassoInteractionOptions, PanInteraction, PanInteractionCallbacks, PanInteractionOptions, ZoomInteraction, ZoomInteractionCallbacks, ZoomInteractionOptions } from '@neo4j-nvl/interaction-handlers';
-import type { BasicReactWrapperProps } from '../basic-wrapper/BasicNvlWrapper';
+import { BasicReactWrapperProps } from "../basic-wrapper/BasicNvlWrapper.js";
+import { BoxSelectInteraction, BoxSelectInteractionCallbacks, BoxSelectInteractionOptions, ClickInteraction, ClickInteractionCallbacks, ClickInteractionOptions, DragNodeInteraction, DragNodeInteractionCallbacks, DrawInteraction, DrawInteractionCallbacks, DrawInteractionOptions, HoverInteraction, HoverInteractionCallbacks, HoverInteractionOptions, KeyboardInteraction, KeyboardInteractionCallbacks, KeyboardInteractionOptions, LassoInteraction, LassoInteractionCallbacks, LassoInteractionOptions, PanInteraction, PanInteractionCallbacks, PanInteractionOptions, ZoomInteraction, ZoomInteractionCallbacks, ZoomInteractionOptions } from "@neo4j-nvl/interaction-handlers";
 export type InteractionModule = typeof HoverInteraction | typeof ClickInteraction | typeof PanInteraction | typeof ZoomInteraction | typeof DragNodeInteraction | typeof DrawInteraction | typeof BoxSelectInteraction | typeof LassoInteraction | typeof KeyboardInteraction;
 export type Interaction = HoverInteraction | ClickInteraction | PanInteraction | ZoomInteraction | DragNodeInteraction | DrawInteraction | BoxSelectInteraction | LassoInteraction | KeyboardInteraction;
 /**
  * Collection of mouse event callbacks that can be used with
  * the {@link InteractiveNvlWrapper} component.
+ *
+ * Each key enables the interaction handler that owns it: a function enables the handler and is
+ * called.
+ * `true` enables it without a callback and `false` destroys the handler (and all its other callbacks).
+ *
+ * @remarks Zoom is only enabled through `onZoomAndPan`. There is no `onZoom` key.
+ * Keyboard callbacks use the separate {@link KeyboardEventCallbacks} prop.
  */
 export type MouseEventCallbacks = ClickInteractionCallbacks & DragNodeInteractionCallbacks & HoverInteractionCallbacks & PanInteractionCallbacks & ZoomInteractionCallbacks & BoxSelectInteractionCallbacks & DrawInteractionCallbacks & LassoInteractionCallbacks;
 /**
@@ -22,15 +29,23 @@ export type InteractionOptions = ClickInteractionOptions & BoxSelectInteractionO
  * to turn on/off certain events for the {@link InteractiveNvlWrapper} component.
  */
 export type MouseEvent = keyof MouseEventCallbacks;
+/**
+ * The events that can be passed to the {@link KeyboardEventCallbacks} object
+ * to turn on/off certain events for the {@link InteractiveNvlWrapper} component.
+ */
 export type KeyboardEvent = keyof KeyboardEventCallbacks;
 /**
  * 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 KeyboardEventCallbacks} containing functions for callbacks on keyboard actions */
-    keyboardEventCallbacks?: KeyboardEventCallbacks;
-    /** {@link InteractionOptions} for the underlying interaction handlers */
-    interactionOptions?: InteractionOptions;
-}
+  /** {@link MouseEventCallbacks} containing functions for callbacks on certain actions */
+  mouseEventCallbacks?: MouseEventCallbacks;
+  /** {@link KeyboardEventCallbacks} containing functions for callbacks on keyboard actions */
+  keyboardEventCallbacks?: KeyboardEventCallbacks;
+  /**
+   * {@link InteractionOptions} for the underlying interaction handlers.
+   * @remarks Options are read when a handler is
+   * first created and changing them later does not affect existing handlers.
+   */
+  interactionOptions?: InteractionOptions;
+}

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

@@ -1 +0,0 @@
-export {};

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

@@ -1,21 +1,21 @@
-import type { Node, NvlOptions, Relationship } from '@neo4j-nvl/base';
+import { 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 in pixels. */
-    width?: number;
-    /** 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';
+  /** 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 in pixels. */
+  width?: number;
+  /** 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.
@@ -23,6 +23,12 @@ export type StaticPictureWrapperProps = {
  * 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.
  *
+ * @remarks
+ * When showing many pictures at once, either set `disableWebGL: true` in `nvlOptions` or mount the components in
+ * batches to avoid exceeding the WebGL context limit of the browser.
+ * Otherwise, the browser may drop the oldest contexts and warn "Too many active WebGL contexts" when reaching its limit
+ * and some pictures can fail to render.
+ *
  * @param props - The component properties
  * @returns An img element displaying the graph visualization, or null during rendering
  *
@@ -36,4 +42,4 @@ export type StaticPictureWrapperProps = {
  * />
  * ```
  */
-export declare const StaticPictureWrapper: ({ nodes, rels, nvlOptions, width, height, format }: 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

@@ -1,57 +1,79 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import NVL from '@neo4j-nvl/base';
-import { useEffect, useState } from 'react';
+import NVL from "@neo4j-nvl/base";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/static-picture-wrapper/StaticPictureWrapper.tsx
 /**
- * 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.
- * 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, format = 'png' }) => {
-    const [imgSrc, setImgSrc] = useState();
-    useEffect(() => {
-        const div = document.createElement('div');
-        div.style.width = `${width}px`;
-        div.style.height = `${height}px`;
-        const myNvl = new NVL(div, nodes, rels, nvlOptions, {
-            onLayoutDone: () => {
-                myNvl.fit(myNvl.getNodes().map((n) => n.id));
-            },
-            onZoomTransitionDone: () => {
-                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, format]);
-    return imgSrc !== undefined ? (_jsx("img", { src: imgSrc, width: width, height: height, style: { display: 'block', width, height, objectFit: 'contain' }, alt: "Graph" })) : null;
+* 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.
+* 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.
+*
+* @remarks
+* When showing many pictures at once, either set `disableWebGL: true` in `nvlOptions` or mount the components in
+* batches to avoid exceeding the WebGL context limit of the browser.
+* Otherwise, the browser may drop the oldest contexts and warn "Too many active WebGL contexts" when reaching its limit
+* and some pictures can fail to render.
+*
+* @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}
+* />
+* ```
+*/
+const StaticPictureWrapper = ({ nodes, rels, nvlOptions = {}, width = 500, height = 500, format = "png" }) => {
+	const [imgSrc, setImgSrc] = useState();
+	useEffect(() => {
+		const div = document.createElement("div");
+		div.style.width = `${width}px`;
+		div.style.height = `${height}px`;
+		const myNvl = new NVL(div, nodes, rels, nvlOptions, {
+			onLayoutDone: () => {
+				myNvl.fit(myNvl.getNodes().map((n) => n.id));
+			},
+			onZoomTransitionDone: () => {
+				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();
+						});
+					}
+				};
+				fetchDataUrl();
+			}
+		});
+		return () => {
+			myNvl?.destroy();
+		};
+	}, [
+		nodes,
+		rels,
+		width,
+		height,
+		format
+	]);
+	return imgSrc !== void 0 ? /* @__PURE__ */ jsx("img", {
+		src: imgSrc,
+		width,
+		height,
+		style: {
+			display: "block",
+			width,
+			height,
+			objectFit: "contain"
+		},
+		alt: "Graph"
+	}) : null;
 };
+export { StaticPictureWrapper };

package/lib/utils/constants.d.ts

@@ -1,2 +1,2 @@
 export declare const BASIC_WRAPPER_ID = "NVL_basic-wrapper";
-export declare const INTERACTIVE_WRAPPER_ID = "NVL_interactive-wrapper";
+export declare const INTERACTIVE_WRAPPER_ID = "NVL_interactive-wrapper";

package/lib/utils/constants.js

@@ -1,2 +1,4 @@
-export const BASIC_WRAPPER_ID = 'NVL_basic-wrapper';
-export const INTERACTIVE_WRAPPER_ID = 'NVL_interactive-wrapper';
+// src/utils/constants.ts
+const BASIC_WRAPPER_ID = "NVL_basic-wrapper";
+const INTERACTIVE_WRAPPER_ID = "NVL_interactive-wrapper";
+export { BASIC_WRAPPER_ID, INTERACTIVE_WRAPPER_ID };

package/lib/utils/graph-comparison.d.ts

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

package/lib/utils/graph-comparison.js

@@ -1,72 +1,57 @@
-import { isEqual, isNil, keyBy, keys, sortBy, transform } from 'lodash';
+import { isEqual, isNil, keyBy, keys, sortBy, transform } from "lodash-es";
+// src/utils/graph-comparison.ts
 const getMapDifferences = (prevGraphElements, newGraphElements) => {
-    const prevMap = keyBy(prevGraphElements, 'id');
-    const currentMap = keyBy(newGraphElements, 'id');
-    const prevIds = sortBy(keys(prevMap));
-    const currentIds = sortBy(keys(currentMap));
-    const added = [];
-    const removed = [];
-    const updated = [];
-    let i = 0;
-    let j = 0;
-    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);
-            }
-            i += 1;
-            j += 1;
-        }
-        else if (prevId < currId) {
-            removed.push(prevId);
-            i += 1;
-        }
-        else {
-            added.push(currId);
-            j += 1;
-        }
-    }
-    while (i < prevIds.length) {
-        const prevId = prevIds[i];
-        if (prevId === undefined) {
-            continue;
-        }
-        removed.push(prevId);
-        i += 1;
-    }
-    while (j < currentIds.length) {
-        const currId = currentIds[j];
-        if (currId === undefined) {
-            continue;
-        }
-        added.push(currId);
-        j += 1;
-    }
-    return {
-        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 prevMap = keyBy(prevGraphElements, "id");
+	const currentMap = keyBy(newGraphElements, "id");
+	const prevIds = sortBy(keys(prevMap));
+	const currentIds = sortBy(keys(currentMap));
+	const added = [];
+	const removed = [];
+	const updated = [];
+	let i = 0;
+	let j = 0;
+	while (i < prevIds.length && j < currentIds.length) {
+		const prevId = prevIds[i];
+		const currId = currentIds[j];
+		if (prevId === void 0 || currId === void 0) continue;
+		if (prevId === currId) {
+			if (!isEqual(prevMap[prevId], currentMap[currId])) updated.push(currId);
+			i += 1;
+			j += 1;
+		} else if (prevId < currId) {
+			removed.push(prevId);
+			i += 1;
+		} else {
+			added.push(currId);
+			j += 1;
+		}
+	}
+	while (i < prevIds.length) {
+		const prevId = prevIds[i];
+		if (prevId === void 0) continue;
+		removed.push(prevId);
+		i += 1;
+	}
+	while (j < currentIds.length) {
+		const currId = currentIds[j];
+		if (currId === void 0) continue;
+		added.push(currId);
+		j += 1;
+	}
+	return {
+		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) => {
-    const prevNodeMap = keyBy(prevNodes, 'id');
-    return newNodes
-        .map((nodeToUpdate) => {
-        const previousNode = prevNodeMap[nodeToUpdate.id];
-        if (previousNode === undefined) {
-            return null;
-        }
-        return transform(nodeToUpdate, (result, value, key) => {
-            if (key === 'id' || value !== previousNode[key]) {
-                Object.assign(result, { [key]: value });
-            }
-        });
-    })
-        .filter((n) => n !== null && Object.keys(n).length > 1);
+	const prevNodeMap = keyBy(prevNodes, "id");
+	return newNodes.map((nodeToUpdate) => {
+		const previousNode = prevNodeMap[nodeToUpdate.id];
+		if (previousNode === void 0) return null;
+		return transform(nodeToUpdate, (result, value, key) => {
+			if (key === "id" || value !== previousNode[key]) Object.assign(result, { [key]: value });
+		});
+	}).filter((n) => n !== null && Object.keys(n).length > 1);
 };
-export { getNodeAttributeDifferences, getMapDifferences };
+export { getMapDifferences, getNodeAttributeDifferences };

package/lib/utils/hooks.d.ts

@@ -1,2 +1,2 @@
-import type { EffectCallback } from 'react';
-export declare const useDeepCompareEffect: (callback: EffectCallback, dependencies: unknown[]) => void;
+import { EffectCallback } from "react";
+export declare const useDeepCompareEffect: (callback: EffectCallback, dependencies: unknown[]) => void;

package/lib/utils/hooks.js

@@ -1,16 +1,15 @@
-import { isEqual } from 'lodash';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef } from "react";
+import { isEqual } from "lodash-es";
+// src/utils/hooks.ts
 const deepCompareEquals = (a, b) => {
-    return isEqual(a, b);
+	return isEqual(a, b);
 };
 const useDeepCompareMemoize = (value) => {
-    const ref = useRef();
-    if (!deepCompareEquals(value, ref.current)) {
-        ref.current = value;
-    }
-    return ref.current;
+	const ref = useRef();
+	if (!deepCompareEquals(value, ref.current)) ref.current = value;
+	return ref.current;
 };
-export const useDeepCompareEffect = (callback, dependencies) => {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(callback, dependencies.map(useDeepCompareMemoize));
+const useDeepCompareEffect = (callback, dependencies) => {
+	useEffect(callback, dependencies.map(useDeepCompareMemoize));
 };
+export { useDeepCompareEffect };