@neo4j-nvl/react 0.3.3-f8d06686 → 0.3.4

package/README.md

@@ -1,6 +1,6 @@
 # Neo4j Visualization Library
 
-Welcome to NVL (Neo4j Visualization Library). NVL is a collection of libraries that can be used to build custom graph visualizations like [Neo4j Bloom](https://neo4j.com/product/bloom/). If you want to use NVL with a different framework than React or what to build your own React wrappers, you can do so by using the NVL base library.
+Welcome to the Neo4j Visualization Library, NVL for short. NVL is a collection of libraries that can be used to build custom graph visualizations like those used in [Neo4j Bloom and Explore(powered by Bloom)](https://neo4j.com/product/bloom/). NVL is written in TypeScript and can be used in any JavaScript project. This package contains React components that make it easier to use NVL within a React application. If you want to use NVL with a framework other than React or want to build your own React wrapper, you can do so by using the [NVL base library](https://www.npmjs.com/package/@neo4j-nvl/base).
 
 ## Consuming the library
 
@@ -30,7 +30,7 @@ const addElements = () => {
   setNodes(newNodes)
 }
 
-<div>
+;<div>
   <BasicNvlWrapper nodes={nodes} />
   <button onClick={addElements}>Add Graph Elements</button>
 </div>
@@ -80,5 +80,13 @@ You can also find more instructions and examples on how to use the NVL React wra
 
 ### Product analytics
 
-In order to improve the library we are collecting some information about the usage of NVL. If you prefer to disable this behavior set the parameter `disableTelemetry=true` as a parameter in `nvlOptions`.
-For example: `<BasicNvlWrapper nvlOptions={{ disableTelemetry: true }} nodes=[0,1] rels=[0,1]/>` or `<InteractiveNvlWrapper nvlOptions={{ disableTelemetry: true }} nodes=[0,1] rels=[0,1]/>`
+In order to improve the library we are collecting some information about the usage of NVL. If you prefer to disable this behavior setting `disableTelemetry` to `true` in the `nvlOptions` property.
+For example:
+
+```tsx
+<BasicNvlWrapper
+  nvlOptions={{ disableTelemetry: true }}
+  nodes={[{ id: '0' }, { id: '1' }]}
+  rels={[{ from: '0', to: '1', id: '10' }]}
+/>
+```

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

@@ -1,6 +1,9 @@
 import type { ExternalCallbacks, Layout, LayoutOptions, Node, NvlOptions, Relationship } from '@neo4j-nvl/base';
 import NVL from '@neo4j-nvl/base';
 import { type HTMLProps } from 'react';
+/**
+ * @hidden
+ */
 type IncludeMethods<T> = Pick<T, {
     [K in keyof T]: T[K] extends (_: unknown) => unknown ? K : never;
 }[keyof T]>;
@@ -24,98 +27,12 @@ export interface BasicReactWrapperProps {
     onInitializationError?: (error: 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
- * ```tsx
- * <BasicNvlWrapper
- *  nodes={nodes}
- *  rels={relationships}
- *  nvlOptions={options}
- *  nvlCallbacks={callbacks}
- * />
- * ```
- *
- * would be equivalent to
- *
- * ```tsx
- * const myNvl = new NVL(container, nodes, relationships, options, callbacks)
- * ```
- *
- * @example
- * When nodes and/or relationships are updated in the React wrapper, the NVL instance will be updated accordingly:
- *
- * ```tsx
- * const NvlComponent = () => {
- *   const [nodes, setNodes] = useState<Node[]>([{ id: '0' }, { id: '1' }])
- *
- *   const addElements = () => {
- *   const newNodes = [...nodes, { id: nodes.length.toString() }]
- *   setNodes(newNodes)
- * }
  *
- * return <div>
- *   <BasicNvlWrapper nodes={nodes} rels={[]} />
- *   <button onClick={addElements}>Add Graph Elements</button>
- * </div>
- * }
- * ```
- *
- * would be equivalent to
- *
- * ```tsx
- * const container = document.createElement('div')
- * const myButton = document.createElement('button')
- * const nodes = [{ id: '0' }, { id: '1' }]
- * const myNvl = new NVL(container, nodes, [])
- * myButton.addEventListener('click', () => {
- *   const newNodes = [...nodes, { id: nodes.length.toString() }]
- *   myNvl.addAndUpdateElementsInGraph(newNodes, [])
- * })
- * ```
- *
- * @example
- * 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 NvlComponent = () => {
- *   const nvlRef = useRef<NVL>()
- *
- *   return <div>
- *     <BasicNvlWrapper
- *       nodes={[{ id: '0' }, { id: '1' }]}
- *       rels={[{ from: '0', to: '1', id: '10' }]}
- *       ref={nvlRef}
- *     />
- *     <button onClick={() => nvlRef.current?.fit([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 container = document.createElement('div')
- * const nodes = [{ id: '0' }, { id: '1' }]
- * const myNvl = new NVL(container, nodes, [])
- * container.addEventListener('click', (event) => console.log(event))
- * ```
+ * A basic React wrapper that wraps the base {@link NVL} library within a React component.
+ * It takes the class' arguments 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.
  *
- * For more about interactivity, check out the {@link NVL}.hittest method,
- * the Interaction Handlers module and the {@link InteractiveNvlWrapper}.
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/react-wrappers/#_basic_react_wrapper Basic React wrapper documentation page}.
  */
 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

@@ -5,98 +5,12 @@ import { BASIC_WRAPPER_ID } from '../utils/constants';
 import { getMapDifferences, getNodeAttributeDifferences } from '../utils/graph-comparison';
 import { useDeepCompareEffect } from '../utils/hooks';
 /**
- * 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
- * ```tsx
- * <BasicNvlWrapper
- *  nodes={nodes}
- *  rels={relationships}
- *  nvlOptions={options}
- *  nvlCallbacks={callbacks}
- * />
- * ```
- *
- * would be equivalent to
- *
- * ```tsx
- * const myNvl = new NVL(container, nodes, relationships, options, callbacks)
- * ```
- *
- * @example
- * When nodes and/or relationships are updated in the React wrapper, the NVL instance will be updated accordingly:
- *
- * ```tsx
- * const NvlComponent = () => {
- *   const [nodes, setNodes] = useState<Node[]>([{ id: '0' }, { id: '1' }])
- *
- *   const addElements = () => {
- *   const newNodes = [...nodes, { id: nodes.length.toString() }]
- *   setNodes(newNodes)
- * }
- *
- * return <div>
- *   <BasicNvlWrapper nodes={nodes} rels={[]} />
- *   <button onClick={addElements}>Add Graph Elements</button>
- * </div>
- * }
- * ```
  *
- * would be equivalent to
- *
- * ```tsx
- * const container = document.createElement('div')
- * const myButton = document.createElement('button')
- * const nodes = [{ id: '0' }, { id: '1' }]
- * const myNvl = new NVL(container, nodes, [])
- * myButton.addEventListener('click', () => {
- *   const newNodes = [...nodes, { id: nodes.length.toString() }]
- *   myNvl.addAndUpdateElementsInGraph(newNodes, [])
- * })
- * ```
- *
- * @example
- * 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 NvlComponent = () => {
- *   const nvlRef = useRef<NVL>()
- *
- *   return <div>
- *     <BasicNvlWrapper
- *       nodes={[{ id: '0' }, { id: '1' }]}
- *       rels={[{ from: '0', to: '1', id: '10' }]}
- *       ref={nvlRef}
- *     />
- *     <button onClick={() => nvlRef.current?.fit([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 container = document.createElement('div')
- * const nodes = [{ id: '0' }, { id: '1' }]
- * const myNvl = new NVL(container, nodes, [])
- * container.addEventListener('click', (event) => console.log(event))
- * ```
+ * A basic React wrapper that wraps the base {@link NVL} library within a React component.
+ * It takes the class' arguments 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.
  *
- * For more about interactivity, check out the {@link NVL}.hittest method,
- * the Interaction Handlers module and the {@link InteractiveNvlWrapper}.
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/react-wrappers/#_basic_react_wrapper Basic React wrapper documentation page}.
  */
 export const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOptions, nvlCallbacks = {}, nvlOptions = {}, onInitializationError, ...nvlEvents }, ref) => {
     const nvlRef = useRef(null);

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

@@ -3,34 +3,14 @@ import type { HTMLProps } from 'react';
 import React from 'react';
 import type { InteractiveNvlWrapperProps } from './types';
 /**
- * This is a wrapper component that provides a basic set of interactions for the NVL.
+ * 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
- * {@link InteractionHandlers} module's decorators to provide a set of interaction events.
+ * @neo4j-nvl/interaction-handlers 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.
+ * The mouseEventCallbacks property takes an object where various callbacks can be defined
+ * and behavior can be toggled on and off.
  *
- * @example
- * ```tsx
- * const InteractiveNvlComponent = () => {
- *   const [boxSelect, setBoxSelect] = useState(false)
- *   return <>
- *     <button onClick={() => setBoxSelect(!boxSelect)}>
- *       {boxSelect ? 'Disable' : 'Enable'} box-select
- *     </button>
- *     <InteractiveNvlWrapper
- *       nodes={nodes}
- *       rels={relationships}
- *       mouseEventCallbacks={{
- *         onHover: (element) => console.log(element),
- *         onNodeClick: (node) => console.log(node),
- *         onBoxSelect: boxSelect
- *      }}
- *     />
- *   </>
- * }
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/react-wrappers/#_interactive_reactive_wrapperr Interactive React wrapper documentation page}.
  */
 export declare const InteractiveNvlWrapper: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<InteractiveNvlWrapperProps & HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<NVL>>>;

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

@@ -11,40 +11,20 @@ const options = {
     excludeNodeMargin: true
 };
 /**
- * This is a wrapper component that provides a basic set of interactions for the NVL.
+ * 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
- * {@link InteractionHandlers} module's decorators to provide a set of interaction events.
+ * @neo4j-nvl/interaction-handlers 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.
+ * The mouseEventCallbacks property takes an object where various callbacks can be defined
+ * and behavior can be toggled on and off.
  *
- * @example
- * ```tsx
- * const InteractiveNvlComponent = () => {
- *   const [boxSelect, setBoxSelect] = useState(false)
- *   return <>
- *     <button onClick={() => setBoxSelect(!boxSelect)}>
- *       {boxSelect ? 'Disable' : 'Enable'} box-select
- *     </button>
- *     <InteractiveNvlWrapper
- *       nodes={nodes}
- *       rels={relationships}
- *       mouseEventCallbacks={{
- *         onHover: (element) => console.log(element),
- *         onNodeClick: (node) => console.log(node),
- *         onBoxSelect: boxSelect
- *      }}
- *     />
- *   </>
- * }
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/react-wrappers/#_interactive_reactive_wrapperr Interactive React wrapper documentation page}.
  */
 export const InteractiveNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOptions, onInitializationError, mouseEventCallbacks = {}, nvlCallbacks = {}, nvlOptions = {}, interactionOptions = options, ...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;
+    const { onHover, onNodeClick, onNodeDoubleClick, onNodeRightClick, onRelationshipClick, onRelationshipDoubleClick, onRelationshipRightClick, onCanvasClick, onCanvasRightClick, onPan, onZoom, onDrag, onDragStart, onDragEnd, onDrawStarted, onDrawEnded, onHoverNodeMargin, onBoxStarted, onBoxSelect, onLassoStarted, onLassoSelect } = mouseEventCallbacks;
     const hoverInteraction = useRef(null);
     const clickInteraction = useRef(null);
     const panInteraction = useRef(null);
@@ -68,7 +48,8 @@ export const InteractiveNvlWrapper = memo(forwardRef(({ nodes, rels, layout, lay
     useInteraction(DragNodeInteraction, dragNodeInteraction, onDragStart, 'onDragStart', myNvlRef, interactionOptions);
     useInteraction(DragNodeInteraction, dragNodeInteraction, onDragEnd, 'onDragEnd', myNvlRef, interactionOptions);
     useInteraction(DrawInteraction, drawInteraction, onHoverNodeMargin, 'onHoverNodeMargin', myNvlRef, interactionOptions);
-    useInteraction(DrawInteraction, drawInteraction, onDrawEnd, 'onDrawEnd', myNvlRef, interactionOptions);
+    useInteraction(DrawInteraction, drawInteraction, onDrawStarted, 'onDrawStarted', myNvlRef, interactionOptions);
+    useInteraction(DrawInteraction, drawInteraction, onDrawEnded, 'onDrawEnded', myNvlRef, interactionOptions);
     useInteraction(BoxSelectInteraction, multiSelectInteraction, onBoxStarted, 'onBoxStarted', myNvlRef, interactionOptions);
     useInteraction(BoxSelectInteraction, multiSelectInteraction, onBoxSelect, 'onBoxSelect', myNvlRef, interactionOptions);
     useInteraction(LassoInteraction, lassoInteraction, onLassoStarted, 'onLassoStarted', myNvlRef, interactionOptions);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/react",
-  "version": "0.3.3-f8d06686",
+  "version": "0.3.4",
   "main": "lib/index.js",
   "homepage": "https://neo4j.com/docs/nvl/current/",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
@@ -26,12 +26,6 @@
     "LICENSE.txt",
     "lib"
   ],
-  "typedoc": {
-    "entryPoint": "./src/index.ts",
-    "readmeFile": "./README.md",
-    "displayName": "React",
-    "tsconfig": "./tsconfig.json"
-  },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
@@ -43,8 +37,8 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@neo4j-nvl/base": "0.3.3-f8d06686",
-    "@neo4j-nvl/interaction-handlers": "0.3.3-f8d06686",
+    "@neo4j-nvl/base": "0.3.4",
+    "@neo4j-nvl/interaction-handlers": "0.3.4",
     "lodash": "4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
@@ -53,6 +47,5 @@
     "eslint": "*",
     "jest": "*",
     "typescript": "*"
-  },
-  "stableVersion": "0.3.3"
+  }
 }