New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@neo4j-nvl/react

Package Overview
Dependencies
Maintainers
0
Versions
182
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@neo4j-nvl/react - npm Package Compare versions

Comparing version

0.3.3
to
0.3.4-34f121d2

97

lib/basic-wrapper/BasicNvlWrapper.d.ts
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, {

@@ -27,96 +30,10 @@ [K in keyof T]: T[K] extends (_: unknown) => unknown ? K : never;

/**
* A basic React wrapper for the {@link NVL} class.
* It takes the {@link BasicReactWrapperProps} as properties which are passed to the NVL constructor.
*
* 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.
*
* @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))
* ```
*
* 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 {};

94

lib/basic-wrapper/BasicNvlWrapper.js

@@ -8,94 +8,8 @@ import { jsx as _jsx } from "react/jsx-runtime";

/**
* A basic React wrapper for the {@link NVL} class.
* It takes the {@link BasicReactWrapperProps} as properties which are passed to the NVL constructor.
*
* 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.
*
* @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))
* ```
*
* 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}.
*/

@@ -102,0 +16,0 @@ export const BasicNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOptions, nvlCallbacks = {}, nvlOptions = {}, onInitializationError, ...nvlEvents }, ref) => {

32

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

@@ -6,32 +6,12 @@ import type NVL from '@neo4j-nvl/base';

/**
* 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>>>;

37

lib/interactive-nvl-wrapper/InteractiveNvlWrapper.js

@@ -14,31 +14,11 @@ import { jsx as _jsx } from "react/jsx-runtime";

/**
* 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}.
*/

@@ -48,3 +28,3 @@ export const InteractiveNvlWrapper = memo(forwardRef(({ nodes, rels, layout, layoutOptions, onInitializationError, mouseEventCallbacks = {}, nvlCallbacks = {}, nvlOptions = {}, interactionOptions = options, ...nvlEvents }, nvlRef) => {

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);

@@ -73,3 +53,4 @@ const clickInteraction = useRef(null);

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);

@@ -76,0 +57,0 @@ useInteraction(BoxSelectInteraction, multiSelectInteraction, onBoxSelect, 'onBoxSelect', myNvlRef, interactionOptions);

15

package.json
{
"name": "@neo4j-nvl/react",
"version": "0.3.3",
"version": "0.3.4-34f121d2",
"main": "lib/index.js",

@@ -29,8 +29,2 @@ "homepage": "https://neo4j.com/docs/nvl/current/",

],
"typedoc": {
"entryPoint": "./src/index.ts",
"readmeFile": "./README.md",
"displayName": "React",
"tsconfig": "./tsconfig.json"
},
"devDependencies": {

@@ -47,4 +41,4 @@ "@testing-library/jest-dom": "^5.16.5",

"dependencies": {
"@neo4j-nvl/base": "0.3.3",
"@neo4j-nvl/interaction-handlers": "0.3.3",
"@neo4j-nvl/base": "0.3.4-34f121d2",
"@neo4j-nvl/interaction-handlers": "0.3.4-34f121d2",
"lodash": "4.17.21",

@@ -58,3 +52,4 @@ "react": "^18.2.0",

"typescript": "*"
}
},
"stableVersion": "0.3.4"
}

16

README.md
# 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).

@@ -33,3 +33,3 @@ ## Consuming the library

<div>
;<div>
<BasicNvlWrapper nodes={nodes} />

@@ -84,3 +84,11 @@ <button onClick={addElements}>Add Graph Elements</button>

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' }]}
/>
```