Neo4j Visualization Library

https://neo4j.com/docs/api/nvl/current/
Admin
Neo4j Visualization Library (NVL) is a TypeScript library for building custom graph visualizations...
Tokens:24,195
Snippets:305
Trust Score:10
Update:5 months ago
Show doc for...
Tokens:
Raw
### Basic NVL Instance Setup

Source: https://neo4j.com/docs/api/nvl/current

Demonstrates the basic setup for initializing an NVL instance. This includes defining nodes, relationships, layout options, and callbacks.

```javascript
const nodes = [{ id: '1' }, { id: '2' }]  
const relationships = [{ id: '12', from: '1', to: '2' }]  
  
const options = {  
  layout: 'forceDirected',  
  initialZoom: 0.5  
}  
  
const callbacks = {  
  onLayoutDone: () => console.log('Layout done')  
}  
  
const nvl = new NVL(document.getElementById('frame'), nodes, relationships, options, callbacks)
```

--------------------------------

### Install NVL Base Package

Source: https://neo4j.com/docs/api/nvl/current

Install the base NVL package using npm. This is the first step to using the library.

```bash
npm install @neo4j-nvl/base
```

--------------------------------

### Initialize NVL Instance

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_base.NVL.html

Basic setup for a NVL instance, requiring a DOM element, nodes, relationships, options, and callbacks.

```javascript
import { NVL } from '@neo4j-nvl/base'  
  
const nodes = [{ id: '1' }, { id: '2' }]  
const relationships = [{ id: '12', from: '1', to: '2' }]  
  
const options = { initialZoom: 0.5 }  
  
const callbacks = {  
  onLayoutDone: () => console.log('Layout done')  
}  
  
const nvl = new NVL(document.getElementById('frame'), nodes, relationships, options, callbacks)
```

--------------------------------

### getScale

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_base.NVL.html

Gets the current zoom level of the viewport.

```APIDOC
## getScale

### Description
Get the current zoom level of the viewport.

### Method
getScale

### Returns
- **number** - The current zoom level.
```

--------------------------------

### onLayoutComputing

Source: https://neo4j.com/docs/api/nvl/current/interfaces/_neo4j_nvl_base.ExternalCallbacks.html

Triggered when an asynchronous layout calculation starts or stops. It receives a boolean indicating whether the computation is in progress.

```APIDOC
## onLayoutComputing

### Description
Triggered when a asynchronous layout calculation starts/stops.

### Signature
onLayoutComputing?: ((isComputing: boolean) => void)
```

--------------------------------

### constructor

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_interaction_handlers.ClickInteraction.html

Creates a new click interaction handler.

```APIDOC
## constructor

### Description
Creates a new click interaction handler.

### Signature
`new ClickInteraction(nvl: NVL, options?: ClickInteractionOptions): ClickInteraction`

### Parameters
*   **nvl** (NVL) - The NVL instance to attach the interaction handler to.
*   **options** (ClickInteractionOptions, optional) - Options for the click interaction handler.
```

--------------------------------

### Initialize NVL with Plain JavaScript

Source: https://neo4j.com/docs/api/nvl/current/examples.html

Use this snippet to create a new NVL instance with specified nodes and relationships in a parent container. Ensure the NVL class is imported from '@neo4j-nvl/base'.

```javascript
1import NVL from '@neo4j-nvl/base'
2
3export default (parentContainer) => {
4  const nodes = [{ id: '0' }, { id: '1' }]
5  const relationships = [{ id: '10', from: '0', to: '1' }]
6
7  return new NVL(parentContainer, nodes, relationships)
8}
9
```

--------------------------------

### onInitialization

Source: https://neo4j.com/docs/api/nvl/current/interfaces/_neo4j_nvl_base.ExternalCallbacks.html

Triggered when NVL is initialized. This callback takes no arguments.

```APIDOC
## onInitialization

### Description
Triggered when NVL is initialized.

### Signature
onInitialization?: (() => void)
```

--------------------------------

### ForceDirectedOptions

Source: https://neo4j.com/docs/api/nvl/current/interfaces/_neo4j_nvl_base.ForceDirectedOptions.html

Configuration options for the force-directed layout.

```APIDOC
## Interface ForceDirectedOptions

The options for the force directed layout.

### Properties

#### `Optional` enableCytoscape

`enableCytoscape?: boolean`

Whether to enable automatic switching to CoseBilkent layout for small graphs. When enabled, small graphs will automatically use the CoseBilkent layout algorithm which can provide better initial positioning for smaller datasets.

#### `Optional` `Internal` enableVerlet

`enableVerlet?: boolean`

Wether to use the new physics engine instead of the legacy one.

##### Default Value

`true`

@internal

#### `Optional` intelWorkaround

`intelWorkaround?: boolean`

Enables a workaround for Intel GPU compatibility issues in WebGL shader compilation. When enabled, this flag modifies how physics simulation shaders are compiled to avoid rendering problems on Intel graphics hardware.

##### Remarks

Requires a restart of NVL as shaders need to be recompiled.
```

--------------------------------

### NVL Constructor

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_base.NVL.html

Creates a new NVL instance to render a graph visualization within a specified DOM element.

```APIDOC
## constructor

### Description
Creates a new NVL instance.

### Signature
`new NVL(frame: HTMLElement, nvlNodes?: Node[], nvlRels?: Relationship[], options?: NvlOptions, callbacks?: ExternalCallbacks): NVL`

### Parameters
*   **frame** (HTMLElement) - The DOM element to display the graph in.
*   **nvlNodes** (Node[] = []) - An array of nodes.
*   **nvlRels** (Relationship[] = []) - An array of relationships.
*   **options** (NvlOptions = {}) - The options for the NVL instance.
*   **callbacks** (ExternalCallbacks = {}) - Callbacks triggered on NVL events.

### Returns
NVL - The newly created NVL instance.
```

--------------------------------

### getCurrentOptions

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_base.NVL.html

Retrieves the current configuration options of the NVL instance.

```APIDOC
## getCurrentOptions

### Description
Returns the current options.

### Signature
`getCurrentOptions(): NvlOptions`

### Returns
NvlOptions - The current options.
```

--------------------------------

### restart

Source: https://neo4j.com/docs/api/nvl/current/interfaces/_neo4j_nvl_base.ExternalCallbacks.html

Triggered when NVL is restarted. This callback takes no arguments.

```APIDOC
## restart

### Description
Triggered when NVL is restarted.

### Signature
restart?: (() => void)
```

--------------------------------

### setDisableWebGL

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_base.NVL.html

Experimental: Restarts NVL with or without WebGL support. Use this to toggle WebGL rendering.

```APIDOC
## setDisableWebGL

### Description
`Experimental`
Restarts NVL with or without WebGL support.

### Method
```javascript
setDisableWebGL(disabled?)
```

### Parameters
#### Query Parameters
- **disabled** (boolean) - Optional - Whether or not WebGL should be disabled. Defaults to false.
```

--------------------------------

### HoverInteraction Constructor

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_interaction_handlers.HoverInteraction.html

Initializes a new instance of the HoverInteraction class.

```APIDOC
## constructor
  * new HoverInteraction(nvl, options?): HoverInteraction
  * #### Parameters
    * nvl: NVL
    * options: HoverInteractionOptions = ...
#### Returns HoverInteraction
```

--------------------------------

### Initialize and Update Pan Interaction Targets

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_interaction_handlers.PanInteraction.html

Demonstrates how to initialize the PanInteraction handler and update its targets to allow panning even when dragging over nodes and relationships. This is useful for a more fluid panning experience.

```typescript
import { NVL } from '@neo4j-nvl/base'  
import { PanInteraction } from '@neo4j-nvl/interaction-handlers'  
  
const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])  
const panInteraction = new PanInteraction(nvl)  
  
// Pan canvas even when dragging on nodes and relationships  
panInteraction.updateTargets([], true)
```

--------------------------------

### onZoomTransitionDone

Source: https://neo4j.com/docs/api/nvl/current/interfaces/_neo4j_nvl_base.ExternalCallbacks.html

Triggered when a zoom transition (e.g., NVL.fit or NVL.resetZoom) is completed. This callback takes no arguments.

```APIDOC
## onZoomTransitionDone

### Description
Triggered when a zoom transition (e.g. NVL.fit or NVL.resetZoom) function is done.

### Signature
onZoomTransitionDone?: (() => void)
```

--------------------------------

### currentOptions

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_interaction_handlers.ClickInteraction.html

Returns the current options of the interaction.

```APIDOC
## currentOptions

### Description
Returns the current options of the interaction.

### Signature
`get currentOptions(): P`

### Returns
*   **P** - The current options of the interaction.
```

--------------------------------

### handleHover Method

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_interaction_handlers.HoverInteraction.html

Processes mouse hover events to trigger interaction logic.

```APIDOC
## handleHover
  * handleHover(event): void
  * Handle mouse hover events
#### Parameters
    * event: MouseEvent
The mouse event.
#### Returns void
```

--------------------------------

### BasicNvlWrapper

Source: https://neo4j.com/docs/api/nvl/current/modules/_neo4j_nvl_react.html

A basic wrapper component for Neo4j visualizations. It takes BasicReactWrapperProps as its props.

```APIDOC
## BasicNvlWrapper

### Description
Provides a basic wrapper for Neo4j visualizations.

### Props
- **BasicReactWrapperProps**: Props for the basic wrapper component.
```

--------------------------------

### setLayoutOptions

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_base.NVL.html

Updates the configuration options for the current layout algorithm.

```APIDOC
## setLayoutOptions

### Description
Updates the configuration of the current layout.

### Method
```javascript
setLayoutOptions(options)
```

### Parameters
#### Query Parameters
- **options** (LayoutOptions) - Required - The LayoutOptions configuration.
```

--------------------------------

### LassoInteraction Constructor

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_interaction_handlers.LassoInteraction.html

Creates a new instance of the lasso interaction handler.

```APIDOC
## constructor

### Description
Creates a new instance of the lasso interaction handler.

### Signature
`new LassoInteraction(nvl: NVL, options?: LassoInteractionOptions): LassoInteraction`

### Parameters
#### nvl
- **nvl** (NVL) - The NVL instance to attach the interaction handler to.
#### options
- **options** (LassoInteractionOptions) - Options for the lasso interaction handler to customize its behavior.

### Returns
- **LassoInteraction** - A new instance of the LassoInteraction.
```

--------------------------------

### ZoomInteraction Constructor

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_interaction_handlers.ZoomInteraction.html

Creates a new instance of the zoom interaction handler.

```APIDOC
## constructor

### Description
Creates a new instance of the zoom interaction handler.

### Signature
`new ZoomInteraction(nvl: NVL, options?: ZoomInteractionOptions): ZoomInteraction`

### Parameters
*   **nvl** (NVL) - Required - The NVL instance to attach the interaction handler to.
*   **options** (ZoomInteractionOptions) - Optional - Options to customize the zoom interaction behavior. Defaults to `{}`.
```

--------------------------------

### NvlOptions Configuration

Source: https://neo4j.com/docs/api/nvl/current/interfaces/_neo4j_nvl_base.NvlOptions.html

The NvlOptions interface defines various properties that can be set to configure the behavior and appearance of an NVL instance. These options allow for customization of zoom behavior, layout, styling, and more.

```APIDOC
## Interface NvlOptions
Configurations for a NVL instance
interface NvlOptions {
  allowDynamicMinZoom?: boolean;
  callbacks?: ExternalCallbacks;
  disableAria?: boolean;
  disableTelemetry?: boolean;
  disableWebWorkers?: boolean;
  initialZoom?: number;
  instanceId?: string;
  layout?: Layout;
  layoutOptions?: LayoutOptions;
  maxZoom?: number;
  minimapContainer?: HTMLElement;
  minZoom?: number;
  panX?: number;
  panY?: number;
  renderer?: Renderer;
  styling?: {
    defaultNodeColor?: string;
    defaultRelationshipColor?: string;
    disabledItemColor?: string;
    disabledItemFontColor?: string;
    dropShadowColor?: string;
    minimapViewportBoxColor?: string;
    nodeDefaultBorderColor?: string;
    selectedBorderColor?: string;
    selectedInnerBorderColor?: string;
  };
}

### `Optional` allowDynamicMinZoom
allowDynamicMinZoom?: boolean
Whether or not to dynamically allow decreasing minimum zoom value if current graph does not fit on screen at minimum zoom. When set to true, zoom and fit operations will allow zooming out further than the minimum zoom value if the graph does not fit on screen. When set to false, zoom and fit operations will stop at the minimum zoom value, even if the full graph does not fit on screen at that zoom level.
#### Default Value
```
true
```

### `Optional` callbacks
callbacks?: ExternalCallbacks
Callbacks for various events in the NVL instance.

### `Optional` disableAria
disableAria?: boolean
Disables ARIA attributes on the graph. By default, NVL adds ARIA attributes to the graph container to make it more accessible. Attributes include `role="image"`, `aria-label="Graph visualization"` and `aria-describedby="nvl-${instanceId}-description"`. The description element is a live region that will announce changes to the graph.
#### Default Value
```
false
```

### `Optional` disableTelemetry
disableTelemetry?: boolean
Disables tracking of library usage
#### Default Value
```
false
```

### `Optional` disableWebWorkers
disableWebWorkers?: boolean
Disables the use of web workers for the layout calculations.

### `Optional` initialZoom
initialZoom?: number
Zoom value of the current viewport

### `Optional` instanceId
instanceId?: string
Id for uniquely identifying the instance of Nvl

### `Optional` layout
layout?: Layout
The graph layout algorithm to be used

### `Optional` layoutOptions
layoutOptions?: LayoutOptions
Configuration for the current layout

### `Optional` maxZoom
maxZoom?: number
The maximum zoom level allowed
#### Default
```
10
```

### `Optional` minimapContainer
minimapContainer?: HTMLElement
The DOM container in which to render the minimap.
#### Remarks
When using a React ref, make sure the attached element is rendered before the NVL instance is created. Otherwise, the minimap will not be displayed.

### `Optional` minZoom
minZoom?: number
The minimum zoom level allowed
#### Default
```
0.075
```

### `Optional` panX
panX?: number
X-coordinate for panning of the current viewport

### `Optional` panY
panY?: number
Y-coordinate for panning of the current viewport

### `Optional` renderer
renderer?: Renderer
What renderer to use
#### Default Value
```
'canvas'  
WebGL renderer uses GPU and has better performance.  
Captions and arrowheads are only displayed when using the canvas or svg renderer.
```

### `Optional` styling
styling?: {
  defaultNodeColor?: string;
  defaultRelationshipColor?: string;
  disabledItemColor?: string;
  disabledItemFontColor?: string;
  dropShadowColor?: string;
  minimapViewportBoxColor?: string;
  nodeDefaultBorderColor?: string;
  selectedBorderColor?: string;
  selectedInnerBorderColor?: string;
}
Styling options for the NVL instance.
```

--------------------------------

### BasicNvlWrapper Component Properties

Source: https://neo4j.com/docs/api/nvl/current/interfaces/_neo4j_nvl_react.BasicReactWrapperProps.html

The BasicNvlWrapper component accepts a variety of properties to configure the graph visualization, including data, layout, callbacks, and view controls.

```APIDOC
## Interface BasicReactWrapperProps

The properties that can be passed to the BasicNvlWrapper component.

### Properties

- **layout** (Layout) - Optional - The layout, can be 'forceDirected' or 'hierarchical'.
- **layoutOptions** (LayoutOptions) - Optional - Options for the current layout.
- **nodes** (Node[]) - Required - The nodes of the graph of type Node[].
- **nvlCallbacks** (ExternalCallbacks) - Optional - An Object containing functions for callbacks on certain actions.
- **nvlOptions** (NvlOptions) - Optional - An object containing options for the Nvl instance.
- **onInitializationError** ((error: unknown) => void) - Optional - A callback to handle any errors that happen during NVL initialization.
- **pan** ({ x: number; y: number; }) - Optional - Sets the pan coordinates of the viewport using the setPan method.
  - **x** (number) - The x coordinate of the pan.
  - **y** (number) - The y coordinate of the pan.
  - Remarks: If both zoom and pan are provided, the setZoomAndPan method will be used.
- **positions** (Node[]) - Optional - Sets the positions of the nodes in the graph using the setNodePositions method.
- **rels** (Relationship[]) - Required - The rels of the graph of type Relationship[].
- **zoom** (number) - Optional - Sets the zoom level of the viewport using the setZoom method.
  - Remarks: If both zoom and pan are provided, the setZoomAndPan method will be used.
```

--------------------------------

### onLayoutStep

Source: https://neo4j.com/docs/api/nvl/current/interfaces/_neo4j_nvl_base.ExternalCallbacks.html

Triggered on each step of a layout calculation. It receives an array of Nodes representing the current layout state.

```APIDOC
## onLayoutStep

### Description
Triggered on each step of a layout.

### Signature
onLayoutStep?: ((p: Node[]) => void)
```

--------------------------------

### getPan

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_base.NVL.html

Returns the current pan (translation) of the viewport.

```APIDOC
## getPan

### Description
Returns the current pan of the viewport.

### Method
getPan

### Returns
- **Point** - The current pan of the viewport.
```

--------------------------------

### restart

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_base.NVL.html

Restarts the NVL instance, optionally with new options and retaining current positions.

```APIDOC
## restart

### Description
Restarts the NVL instance.

### Method
restart

### Parameters
#### Query Parameters
- **options** (object) - Optional - Options for restarting the instance.
- **retainPositions** (boolean) - Optional - Whether to retain node positions during restart.
```

--------------------------------

### PanInteraction Constructor

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_interaction_handlers.PanInteraction.html

Creates a new instance of the pan interaction handler.

```APIDOC
## constructor
  * new PanInteraction(nvl, options?): PanInteraction
  * Creates a new instance of the pan interaction handler.
#### Parameters
    * nvl: NVL
The NVL instance to attach the interaction handler to.
    * options: PanInteractionOptions = ...
#### Returns PanInteraction
```

--------------------------------

### isLayoutMoving

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_base.NVL.html

Checks and returns a boolean indicating whether the current layout is still in flux or has settled.

```APIDOC
## isLayoutMoving

### Description
Checks and returns whether the current layout is still in flux.

### Method
isLayoutMoving

### Returns
- **boolean** - Whether or not the layout is moving.
```

--------------------------------

### HierarchicalOptions

Source: https://neo4j.com/docs/api/nvl/current/interfaces/_neo4j_nvl_base.HierarchicalOptions.html

Defines the options available for configuring hierarchical layouts in the Neo4j Visualization Library.

```APIDOC
## Interface HierarchicalOptions

The options for the hierarchical layout

### Properties

#### `Optional` direction

direction?: "left" | "right" | "up" | "down"

The direction in which the layout should be oriented.

#### `Optional` packing

packing?: "bin" | "stack"

The packing method to be used.
```

--------------------------------

### Using nvlResultTransformer with Neo4j Driver

Source: https://neo4j.com/docs/api/nvl/current/functions/_neo4j_nvl_base.nvlResultTransformer.html

Demonstrates how to integrate nvlResultTransformer as a result transformer option when executing a query with the Neo4j JavaScript driver. This prepares the query results for use with the NVL library.

```javascript
import neo4j from "neo4j-driver";  
import { nvlResultTransformer, NVL } from "@neo4j-nvl/base";  
  
const driver = neo4j.driver("{uri}", neo4j.auth.basic("{user}", "{password}"));  
const nvlGraph = await driver.executeQuery(  
  "MATCH (a)-[r]-(b) RETURN a,r,b LIMIT 25",  
  {},  
  { resultTransformer: nvlResultTransformer }  
);  
  
const nvl = new NVL(document.getElementById('viz'), nvlGraph.nodes, nvlGraph.relationships);
```

--------------------------------

### InteractiveNvlWrapper

Source: https://neo4j.com/docs/api/nvl/current/functions/_neo4j_nvl_react.InteractiveNvlWrapper.html

The InteractiveNvlWrapper is a React component that serves as an extension of the BasicNvlWrapper. It integrates interaction handlers from the @neo4j-nvl/interaction-handlers module and provides a collection of default interaction events. The `mouseEventCallbacks` property allows for defining and toggling various callback behaviors.

```APIDOC
## Function InteractiveNvlWrapper

### Description
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 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.

### Signature
InteractiveNvlWrapper(props): ReactNode

### Parameters
#### props
- **props** (Omit<Omit<InteractiveNvlWrapperProps & HTMLProps<HTMLDivElement>, "ref"> & RefAttributes<NVL>, "ref"> & {}) - Required - An object containing properties for the wrapper, including event callbacks and HTML attributes.

### Returns
- **ReactNode** - A React node representing the rendered visualization wrapper.
```

--------------------------------

### onLayoutDone

Source: https://neo4j.com/docs/api/nvl/current/interfaces/_neo4j_nvl_base.ExternalCallbacks.html

Triggered when a layout has finished moving. This callback takes no arguments.

```APIDOC
## onLayoutDone

### Description
Triggered when a layout is done moving.

### Signature
onLayoutDone?: (() => void)
```

--------------------------------

### currentOptions Accessor

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_interaction_handlers.LassoInteraction.html

Returns the current options of the interaction.

```APIDOC
## currentOptions

### Description
Returns the current options of the interaction.

### Signature
`get currentOptions(): P`

### Returns
- **P** - The current options of the interaction.
```

--------------------------------

### InteractiveNvlWrapper

Source: https://neo4j.com/docs/api/nvl/current/modules/_neo4j_nvl_react.html

An interactive wrapper component for Neo4j visualizations. It takes InteractiveNvlWrapperProps as its props.

```APIDOC
## InteractiveNvlWrapper

### Description
Provides an interactive wrapper for Neo4j visualizations.

### Props
- **InteractiveNvlWrapperProps**: Props for the interactive wrapper component.
```

--------------------------------

### ZoomInteractionOptions

Source: https://neo4j.com/docs/api/nvl/current/types/_neo4j_nvl_interaction_handlers.ZoomInteractionOptions.html

Options for the zoom interaction handler to customize its behavior.

```APIDOC
## Type Alias ZoomInteractionOptions

### Description
Options for the zoom interaction handler to customize its behavior.

### Type Declaration
#### `Optional` controlledZoom?: boolean
If true, the interaction handler will not update the NVL instance directly. Instead, it will only call the onZoom callback with the calculated values, allowing the parent application to control when and how to apply the zoom update.

### Default Value
```
false
```
```

--------------------------------

### LassoInteractionOptions

Source: https://neo4j.com/docs/api/nvl/current/types/_neo4j_nvl_interaction_handlers.LassoInteractionOptions.html

Options for the lasso interaction handler to customize its behavior.

```APIDOC
## Type Alias LassoInteractionOptions

### Description
Options for the lasso interaction handler to customize its behavior.

### Type Declaration
#### `Optional` selectOnRelease?: boolean
If true, the selected items will be automatically selected when the gesture is finished.

#### Default
```
false
```
```

--------------------------------

### StaticPictureWrapper

Source: https://neo4j.com/docs/api/nvl/current/modules/_neo4j_nvl_react.html

A wrapper component for static image representations of Neo4j visualizations. It takes StaticPictureWrapperProps as its props.

```APIDOC
## StaticPictureWrapper

### Description
Provides a wrapper for static picture representations of Neo4j visualizations.

### Props
- **StaticPictureWrapperProps**: Props for the static picture wrapper component.
```

--------------------------------

### PanInteractionOptions

Source: https://neo4j.com/docs/api/nvl/current/types/_neo4j_nvl_interaction_handlers.PanInteractionOptions.html

Options for the pan interaction handler to customize its behavior.

```APIDOC
## Type Alias PanInteractionOptions

### Description
Options for the click interaction handler to customize its behavior.

### Properties

*   **controlledPan** (`boolean`): `Optional`
    If true, the interaction handler will not update the NVL instance directly. Instead, it will only call the onPan callback with the calculated values, allowing the parent application to control when and how to apply the pan update.
    #### Default Value
    ```
    false
    ```

*   **excludeNodeMargin** (`boolean`): `Optional`
    Whether to not pan when dragging within a certain margin of a node.
    #### Default Value
    ```
    false
    ```
```

--------------------------------

### getContainer

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_base.NVL.html

Returns the DOM element that contains the graph visualization.

```APIDOC
## getContainer

### Description
Provides the container DOM element the graph is rendered in.

### Signature
`getContainer(): HTMLElement`

### Returns
HTMLElement - The container element of the NVL instance.
```

--------------------------------

### currentOptions Accessor

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_interaction_handlers.HoverInteraction.html

Retrieves the current options configured for the interaction.

```APIDOC
## currentOptions
  * get currentOptions(): P
  * Returns the current options of the interaction.
#### Returns P
The current options of the interaction.
```

--------------------------------

### BoxSelectInteraction Constructor

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_interaction_handlers.BoxSelectInteraction.html

Creates a new instance of the multi-select interaction handler.

```APIDOC
## constructor
  * new BoxSelectInteraction(nvl, options?): BoxSelectInteraction
  * Creates a new instance of the multi-select interaction handler.
#### Parameters
    * nvl: NVL
The NVL instance to attach the interaction handler to.
    * options: BoxSelectInteractionOptions = ...
Options for the multi-select interaction handler to customize its behavior.
#### Returns BoxSelectInteraction
```

--------------------------------

### getHits

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_base.NVL.html

Identifies nodes and relationships that are intersected by a pointer event, with options for hit testing.

```APIDOC
## getHits

### Description
Gets the nodes and relationships that have been hit by a pointer event.

### Signature
`getHits(evt: MouseEvent, targets?: ('node' | 'relationship')[], hitOptions?: { hitNodeMarginWidth: number }): NvlMouseEvent`

### Parameters
*   **evt** (MouseEvent) - The mouse event.
*   **targets** (('node' | 'relationship')[] = ...) - The graph elements to check for hits. Defaults to ['node', 'relationship'].
*   **hitOptions** ({ hitNodeMarginWidth: number } = ...) - Options for the hit test.
    *   **hitNodeMarginWidth** (number) - Margin width for hit testing nodes.

### Returns
NvlMouseEvent
```

--------------------------------

### NVL Event Listener for Click Events

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_base.NVL.html

Attaches a click event listener to the container to capture hit targets using the NVL instance. This is useful for identifying nodes and relationships clicked by the user.

```javascript
const container = document.getElementById('frame')  
const nvl = new NVL(container, [{ id: '0' }], [])  
  
// Get the nodes and relationships that have been hit by a pointer event.  
container?.addEventListener('click', (evt) => {  
  const { nvlTargets } = nvl.getHits(evt)  
  console.log('clicked elements:', nvlTargets)  
})
```

--------------------------------

### saveFullGraphToLargeFile

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_base.NVL.html

Saves the entire graph visualization canvas as a PNG file to the client. This method is suitable for capturing the complete graph, which might result in a large file.

```APIDOC
## saveFullGraphToLargeFile

### Description
Saves the entire graph visualization canvas as a png to the client.

### Method
```javascript
saveFullGraphToLargeFile(options?)
```

### Parameters
#### Request Body
- **options** (object) - Optional - Options for the PNG export.
  - **backgroundColor** (string) - Optional - The background color of the png file. The size of the png file will be as large as the entire graph at the default zoom level. Can result in a very large file.
  - **filename** (string) - Optional - The filename of the png file.
```

--------------------------------

### saveToSvg

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_base.NVL.html

Experimental: Saves the entire graph visualization as an SVG file to the client. Suitable for scalable vector graphics.

```APIDOC
## saveToSvg

### Description
`Experimental`
Saves the entire graph visualization as an SVG file to the client.

### Method
```javascript
saveToSvg(options?)
```

### Parameters
#### Request Body
- **options** (object) - Options for the SVG export
  - **backgroundColor** (string) - Optional - The background color of the SVG file.
  - **filename** (string) - Optional - The filename of the SVG file.
```

--------------------------------

### InteractiveNvlWrapperProps

Source: https://neo4j.com/docs/api/nvl/current/interfaces/_neo4j_nvl_react.InteractiveNvlWrapperProps.html

Properties for the InteractiveNvlWrapper component.

```APIDOC
## Interface InteractiveNvlWrapperProps

The properties that can be passed to the InteractiveNvlWrapper component.

### Properties

*   **interactionOptions** (InteractionOptions) - Optional - InteractionOptions for the underlying interaction handlers.
*   **layout** (Layout) - Optional - The layout, can be 'forceDirected' or 'hierarchical'.
*   **layoutOptions** (LayoutOptions) - Optional - Options for the current layout.
*   **mouseEventCallbacks** (MouseEventCallbacks) - Optional - MouseEventCallbacks containing functions for callbacks on certain actions.
*   **nodes** (Node[]) - Required - The nodes of the graph of type Node[].
*   **nvlCallbacks** (ExternalCallbacks) - Optional - An object containing functions for callbacks on certain actions.
*   **nvlOptions** (NvlOptions) - Optional - An object containing options for the Nvl instance.
*   **onInitializationError** ((error: unknown) => void) - Optional - A callback to handle any errors that happen during NVL initialization.
*   **pan** ({ x: number; y: number; }) - Optional - Sets the pan coordinates of the viewport using the setPan method.
    *   **x** (number) - The x coordinate of the pan.
    *   **y** (number) - The y coordinate of the pan.
    *   **Remarks**: If both zoom and pan are provided, the setZoomAndPan method will be used.
*   **positions** (Node[]) - Optional - Sets the positions of the nodes in the graph using the setNodePositions method.
*   **rels** (Relationship[]) - Required - The rels of the graph of type Relationship[].
*   **zoom** (number) - Optional - Sets the zoom level of the viewport using the setZoom method.
    *   **Remarks**: If both zoom and pan are provided, the setZoomAndPan method will be used.
```

--------------------------------

### ClickInteractionOptions

Source: https://neo4j.com/docs/api/nvl/current/types/_neo4j_nvl_interaction_handlers.ClickInteractionOptions.html

Options for the click interaction handler to customize its behavior.

```APIDOC
## Type Alias ClickInteractionOptions

### Description
Options for the click interaction handler to customize its behavior.

### Type Declaration
#### `Optional` selectOnClick?: boolean
Whether to select the node or relationship on click.

### Default Value
`false`
```

--------------------------------

### onZoom

Source: https://neo4j.com/docs/api/nvl/current/types/_neo4j_nvl_interaction_handlers.ZoomInteractionCallbacks.html

Called when the canvas is zoomed. This callback is deprecated and onZoomAndPan should be used instead.

```APIDOC
## onZoom

### Description
Called when the canvas is zoomed.

### Parameters
#### Path Parameters
- **zoomLevel** (number) - Required - The zoom level.
- **event** (WheelEvent) - Required - The original mouse wheel event.

### Deprecated
Use onZoomAndPan instead.
```

--------------------------------

### setRenderer

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_base.NVL.html

Switches between different rendering methods for the graph visualization.

```APIDOC
## setRenderer

### Description
Switches between rendering methods

### Method
```javascript
setRenderer(renderer)
```

### Parameters
#### Query Parameters
- **renderer** (string) - Required - which rendering method to use
```

--------------------------------

### NVL Class and Utility Functions

Source: https://neo4j.com/docs/api/nvl/current/modules/_neo4j_nvl_base.html

The @neo4j-nvl/base module exports the main NVL class, along with utility functions for transforming query results and determining zoom targets for node positions.

```APIDOC
## Module @neo4j-nvl/base

### Classes

#### NVL

Represents the main Neo4j Visualization Library class.

### Functions

#### `getZoomTargetForNodePositions(nodes, options)`

Calculates the zoom target for a given set of node positions.

*   **Parameters**:
    *   `nodes` (Array<Node>): An array of node objects.
    *   `options` (object): Configuration options for zoom calculation.

#### `nvlResultTransformer(result)`

Transforms a Neo4j query result into a format suitable for visualization.

*   **Parameters**:
    *   `result` (object): The raw Neo4j query result.

### Default Export

The default export renames and re-exports the NVL class.
```

--------------------------------

### LassoInteractionCallbacks

Source: https://neo4j.com/docs/api/nvl/current/types/_neo4j_nvl_interaction_handlers.LassoInteractionCallbacks.html

Callbacks for the lasso interaction handler.

```APIDOC
## Type Alias LassoInteractionCallbacks
LassoInteractionCallbacks: {
  onLassoSelect?: (({ nodes, rels }: {
    nodes: Node[];
    rels: Relationship[];
  }, event: MouseEvent) => void) | boolean;
  onLassoStarted?: ((event: MouseEvent) => void) | boolean;
}

### onLassoSelect
Called once when the user releases the mouse after lasso selecting.

#### Parameters
* **selectionObject** (object) - The selected node and relationship ids.
  * **nodes** (Node[])
  * **rels** (Relationship[])
* **event** (MouseEvent) - The original mouse event.

### onLassoStarted
Called once when the user presses the mouse on the canvas, starting the lasso.

#### Parameters
* **event** (MouseEvent) - The original mouse event.
```

--------------------------------

### setLayout

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_base.NVL.html

Changes the layout type of the graph visualization.

```APIDOC
## setLayout

### Description
Changes the layout type.

### Method
```javascript
setLayout(layout)
```

### Parameters
#### Query Parameters
- **layout** (Layout) - Required - The Layout type.
```

--------------------------------

### getZoomLimits

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_base.NVL.html

Retrieves the minimum and maximum zoom levels allowed for the viewport.

```APIDOC
## getZoomLimits

### Description
Retrieves the minimum and maximum zoom levels allowed for the viewport.

### Method
getZoomLimits

### Returns
- **{
maxZoom: number;
minZoom: number;
}** - An object containing the maximum and minimum zoom levels.
  - **maxZoom** (number) - The maximum zoom level.
  - **minZoom** (number) - The minimum zoom level.
```

--------------------------------

### getNodesOnScreen

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_base.NVL.html

Returns the nodes and relationships that are currently visible within the visualization viewport. Note that the `rels` property is always empty.

```APIDOC
## getNodesOnScreen

### Description
Returns the nodes that are currently in the visualization. The `rels` property of the returned object is always empty.

### Method
getNodesOnScreen

### Returns
- **{
nodes: Node[];
rels: Relationship[];
}** - An object containing the nodes and relationships in the visualization.
  - **nodes** (Node[]) - The nodes in the visualization.
  - **rels** (Relationship[]) - The relationships in the visualization.
```

--------------------------------

### destroy Method

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_interaction_handlers.BoxSelectInteraction.html

Removes all related event listeners and the overlay renderer for the box.

```APIDOC
## destroy
  * destroy(): void
  * Removes all related event listeners and the overlay renderer for the box.
#### Returns void
```

--------------------------------

### destroy Method

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_interaction_handlers.LassoInteraction.html

Removes all related event listeners and the overlay renderer for the box.

```APIDOC
## destroy

### Description
Removes all related event listeners and the overlay renderer for the box.

### Signature
`destroy(): void`

### Returns
- **void**
```

--------------------------------

### StaticPictureWrapper

Source: https://neo4j.com/docs/api/nvl/current/functions/_neo4j_nvl_react.StaticPictureWrapper.html

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. NVL is destroyed after capturing the image to free up resources.

```APIDOC
## Function StaticPictureWrapper

### Description
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. NVL is destroyed after capturing the image to free up resources.

### Signature
`StaticPictureWrapper(__namedParameters: StaticPictureWrapperProps): null | Element`

### Parameters
#### __namedParameters
- **StaticPictureWrapperProps**: Object - Props for the StaticPictureWrapper component.

### Returns
- **null | Element**: Returns either null or a React Element representing the static picture of the graph.
```

--------------------------------

### DragNodeInteraction Constructor

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_interaction_handlers.DragNodeInteraction.html

Creates a new instance of the drag node interaction handler.

```APIDOC
## constructor
  * new DragNodeInteraction(nvl, options?): DragNodeInteraction
  * Creates a new instance of the drag node interaction handler.
#### Parameters
    * nvl: NVL
The NVL instance to attach the interaction handler to.
    * options: {} = {}
#### Returns DragNodeInteraction
```

--------------------------------

### Relationship Interface

Source: https://neo4j.com/docs/api/nvl/current/interfaces/_neo4j_nvl_base.Relationship.html

Defines the structure and properties of a relationship within the Neo4j Visualization Library. This interface allows for customization of relationship appearance, behavior, and data.

```APIDOC
## Interface Relationship
A relationship inside the graph visualization.

### Properties
- **caption** (string, optional): The text to display inside on node or relationship. If both caption and captions are provided, captions takes precedence. Captions are only visible when using the 'canvas' renderer.
- **captionAlign** ("center" | "top" | "bottom", optional): The caption align. Has no affect on self-referring relationships.
- **captionHtml** (HTMLElement, optional): The DOM element to display on top of a relationship caption. The captionSize and captionAlign properties will affect the position and height of the html container element.
- **captions** (StyledCaption[], optional): The caption text and font styles. To provide a single caption without custom styles, you can also use the caption property. Captions are only visible when using the 'canvas' renderer.
- **captionSize** (number, optional): The caption text size.
- **color** (string, optional): The color of the graph element.
- **disabled** (boolean, optional): Whether or not the current node or relationship is disabled.
- **from** (string): Node id where the relationship starts from.
- **hovered** (boolean, optional): Whether or not the current node or relationship is hovered.
- **id** (string, readonly): The id of the current node or relationship. Ids need to be unique across all nodes and relationships. Ids need to be strings and cannot be empty.
- **overlayIcon** (object, optional): An icon to be displayed anywhere on top of the graph element. Icons are expected to be square.
  - **position** (number[], optional): The position of the icon relative to the node or relationship. The position is a percentage of the node or relationship size. `[1, 1]` is the bottom right corner of the node or relationship. `[-1, -1]` is the top left corner of the node or relationship. Defaults to `[0, 0]` (the center).
  - **size** (number, optional): The size of the icon relative to the node size or relationship caption size. The size is a percentage of the node size or relationship caption size. Defaults to `1` (the same size as the node size or relationship caption size).
  - **url** (string): The url to the icon.
- **selected** (boolean, optional): Whether or not the current node or relationship is selected.
- **to** (string): Node id where the relationship points to.
- **type** (string, optional): The relationship type.
- **width** (number, optional): The width of the relationship.

#### Hierarchy
- GraphElement
  - Relationship
```

--------------------------------

### BasicNvlWrapper Function Signature

Source: https://neo4j.com/docs/api/nvl/current/functions/_neo4j_nvl_react.BasicNvlWrapper.html

The BasicNvlWrapper is a React component that takes props and returns a ReactNode. It allows you to pass NVL constructor arguments and other HTML attributes as properties.

```APIDOC
## BasicNvlWrapper

A basic React wrapper that wraps the NVL base 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.

### Signature
`BasicNvlWrapper(props): ReactNode`

### Parameters
#### props
- `props`: Omit<Omit<BasicReactWrapperProps & HTMLProps<HTMLDivElement>, "ref"> & RefAttributes<Partial<Pick<NVL, "restart" | "destroy" | "addAndUpdateElementsInGraph" | "getSelectedNodes" | "getSelectedRelationships" | "removeNodesWithIds" | "removeRelationshipsWithIds" | "getNodes" | "getRelationships" | "getNodeById" | "getRelationshipById" | "getPositionById" | "getCurrentOptions" | "deselectAll" | "fit" | "resetZoom" | "setRenderer" | "setDisableWebGL" | "pinNode" | "unPinNode" | "setLayout" | "setLayoutOptions" | "getNodesOnScreen" | "getNodePositions" | "setNodePositions" | "isLayoutMoving" | "saveToFile" | "saveToSvg" | "getImageDataUrl" | "saveFullGraphToLargeFile" | "getZoomLimits" | "setZoom" | "getScale" | "getPan" | "getHits" | "getContainer">>>, "ref"> & {}

### Returns
- `ReactNode`: A React node representing the NVL visualization component.
```

--------------------------------

### onZoomAndPan

Source: https://neo4j.com/docs/api/nvl/current/types/_neo4j_nvl_interaction_handlers.ZoomInteractionCallbacks.html

Called when the canvas is zoomed and panned. This is the recommended callback for handling zoom interactions.

```APIDOC
## onZoomAndPan

### Description
Called when the canvas is zoomed and panned.

### Parameters
#### Path Parameters
- **zoomLevel** (number) - Required - The zoom level.
- **panX** (number) - Required - The new pan X coordinate.
- **panY** (number) - Required - The new pan Y coordinate.
- **event** (WheelEvent) - Required - The original mouse wheel event.
```

--------------------------------

### getNodePositions

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_base.NVL.html

Fetches and returns the current positions of all nodes in the visualization as an array of coordinates.

```APIDOC
## getNodePositions

### Description
Fetches and returns the current positions of all nodes as an array of coordinates.

### Method
getNodePositions

### Returns
- **(Node & Point)[]** - An array of node positions.
```

--------------------------------

### Point Interface

Source: https://neo4j.com/docs/api/nvl/current/interfaces/_neo4j_nvl_base.Point.html

Defines the structure of a Point object, used for representing 2D coordinates.

```APIDOC
## Interface Point
An object representing a point in 2D space.
```typescript
interface Point {
  x: number;
  y: number;
}
```
### Properties
- **x** (number): The x coordinate of the point.
- **y** (number): The y coordinate of the point.
```

--------------------------------

### LassoInteractionOptions Type Declaration

Source: https://neo4j.com/docs/api/nvl/current/types/_neo4j_nvl_interaction_handlers.LassoInteractionOptions.html

Defines the structure for options passed to the lasso interaction handler. Use this to configure the lasso behavior, such as automatically selecting items on release.

```typescript
type LassoInteractionOptions = {
  selectOnRelease?: boolean;
}
```

--------------------------------

### onNodeClick

Source: https://neo4j.com/docs/api/nvl/current/types/_neo4j_nvl_interaction_handlers.ClickInteractionCallbacks.html

Called when a node is clicked. Can be a callback function or a boolean.

```APIDOC
## onNodeClick

### Description
Called when a node is clicked.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **nodes** (Node) - Required - The node that was clicked.
- **hitElements** (HitTargets) - Required - All elements that were hit by the click.
- **event** (MouseEvent) - Required - The original mouse event.

### Response
None

### Type
`((nodes: Node, hitElements: HitTargets, event: MouseEvent) => void) | boolean`
```

--------------------------------

### updateElementsInGraph

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_base.NVL.html

Updates existing nodes and relationships in the current scene. Only provided properties will be updated, and elements must have a matching ID to be updated. Elements not present in the scene are ignored.

```APIDOC
## updateElementsInGraph

### Description
Updates relationships in the current scene with the provided array of nodes and relationships.

### Method
`updateElementsInGraph(nodes, relationships)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
*   **nodes** (Node[] | PartialNode[]) - Required - The updated nodes.
*   **relationships** (Relationship[] | PartialRelationship[]) - Required - The updated relationships. Ignores any nodes or relationships that do not exist in the current scene. To update nodes or relationships, they must have an id that matches the id of the node or relationship to be updated. Only the properties that are provided will be updated. If an existing property is not provided, it will not be changed.

### Request Example
```javascript
import { NVL } from '@neo4j-nvl/base'

const nodes = [
  { id: '1', label: 'Node 1', color: '#e04141' },
  { id: '2', label: 'Node 2', color: '#e09c41' }
]
const relationships = [
  { id: '12', from: '1', to: '2' }
]
const nvl = new NVL(document.getElementById('frame'), nodes, relationships)
// Updates an existing node and relationship
nvl.updateElementsInGraph([{ id: '1', selected: true }], [{ id: '12', color: '#e0df41' }])
```

### Response
#### Success Response (void)
This method returns void.
```

--------------------------------

### saveToFile

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_base.NVL.html

Saves the current view of the graph visualization canvas as a PNG file to the client. This method captures the visible portion of the graph.

```APIDOC
## saveToFile

### Description
Saves the current view of the graph visualization canvas as a png to the client.

### Method
```javascript
saveToFile(options?)
```

### Parameters
#### Request Body
- **options** (object) - Optional - The filename and background color of the png.
  - **backgroundColor** (string) - Optional - The background color of the png file. The size of the png file will be the size of the canvas in the DOM.
  - **filename** (string) - Optional - The filename of the png file.
```

--------------------------------

### BoxSelectInteractionCallbacks

Source: https://neo4j.com/docs/api/nvl/current/types/_neo4j_nvl_interaction_handlers.BoxSelectInteractionCallbacks.html

Callbacks for the box select interaction handler.

```APIDOC
## Type Alias BoxSelectInteractionCallbacks
BoxSelectInteractionCallbacks: {
  onBoxSelect?: (({ nodes, rels }: { 
nodes: Node[]; 
rels: Relationship[]; 
}, event: MouseEvent) => void) | boolean;
  onBoxStarted?: ((event: MouseEvent) => void) | boolean;
}

### onBoxSelect
Called after once the user releases the mouse after multi-selecting.

#### Parameters
* **selectionObject** ({ nodes: Node[]; rels: Relationship[]; }) - The selected nodes and relationships.
* **event** (MouseEvent) - The original mouse event.

### onBoxStarted
Called once when the user presses the mouse on the canvas, starting the box selection.

#### Parameters
* **event** (MouseEvent) - The original mouse event.
```

--------------------------------

### Default LassoInteractionOptions

Source: https://neo4j.com/docs/api/nvl/current/types/_neo4j_nvl_interaction_handlers.LassoInteractionOptions.html

Shows the default value for the selectOnRelease option, which is false. This means items are not automatically selected when the lasso gesture finishes unless explicitly enabled.

```typescript
false
```

--------------------------------

### updateTargets Method

Source: https://neo4j.com/docs/api/nvl/current/classes/_neo4j_nvl_interaction_handlers.PanInteraction.html

Updates which type of graph elements should hinder panning.

```APIDOC
## updateTargets
  * updateTargets(targets, excludeNodeMargin): void
  * Updates which type of graph elements should hinder panning.
#### Parameters
    * targets: ("node" | "relationship")[]
The graph elements that should hinder panning.
    * excludeNodeMargin: boolean
If true, the node margin will not hinder panning. By default, panning is hindered by nodes and relationships.
#### Returns void
#### Example
```
import { NVL } from '@neo4j-nvl/base'  
import { PanInteraction } from '@neo4j-nvl/interaction-handlers'  
  
const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])  
const panInteraction = new PanInteraction(nvl)  
  
// Pan canvas even when dragging on nodes and relationships  
panInteraction.updateTargets([], true)
```
```
Tokens:
Raw