Class for a NVL instance.

This is a basic setup for a NVL instance.

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)

Constructors

  • Creates a new NVL instance.

    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 = {}

      Options for the NVL instance

    • callbacks: ExternalCallbacks = {}

      Callbacks triggered on NVL events

    Returns NVL

Methods

  • Adds nodes and relationships to NVL and updates existing nodes and relationships.

    Parameters

    • nodes: Node[] | PartialNode[] = []

      An Array of nodes to be added or updated

    • relationships: Relationship[] | PartialRelationship[] = []

      An Array of relationships to be added or updated 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.

    Returns void

    Adding and updating nodes and relationships

    import { NVL } from '@neo4j-nvl/base'

    const nvl = new NVL(document.getElementById('frame'), [{ id: '0' }], [])

    const nodes = [
    { id: '1', label: 'Node 1', color: '#e04141' },
    { id: '2', label: 'Node 2', color: '#e09c41' }
    ]
    const relationships = [
    { id: '12', from: '1', to: '2' }
    ]
    // Adds new nodes and relationships
    nvl.addAndUpdateElementsInGraph(nodes, relationships)
    // Updates an existing relationship
    nvl.addAndUpdateElementsInGraph([], [{ id: '12', color: '#e0df41' }])
  • Adds nodes and relationships in the current scene.

    Parameters

    • nodes: Node[]

      The nodes to be added.

    • relationships: Relationship[]

      The relationships to be added.

    Returns void

  • De-selects all nodes and relationships.

    Returns void

  • Removes the graph visualization from the DOM and cleans up everything.

    Returns void

  • Updates pan and zoom fit the specified nodes in the viewport.

    Parameters

    • nodeIds: string[]

      The ids of the nodes to fit on the screen,

    • OptionalzoomOptions: ZoomOptions

      specific options on how to transition the zoom If the zoom level required to fit the provided nodes is outside of the range provided by the NvlOptions.minZoom and NvlOptions.maxZoom options, and NvlOptions.allowDynamicMinZoom is set to false, the zoom level will be set to the closest valid zoom level, even if the given nodes do not fit the viewport yet.

    Returns void

  • Provides the container DOM element the graph is rendered in.

    Returns HTMLElement

    The container element of the NVL instance.

  • Internal

    Returns the current options.

    Returns NvlOptions

    The current options.

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

    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

    Returns NvlMouseEvent

    A NvlMouseEvent with the HitTargets property containing the nodes and relationships that have been hit by the pointer event.

    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)
    })
  • Returns the node data that is currently stored in the visualisation for a given id.

    Parameters

    • id: string

      The id of the node that should be returned.

    Returns Node

    The node or undefined if there is no node with the given id.

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

    Returns (Node & Point)[]

    An array of node positions.

  • Returns all nodes that is currently stored in the visualisation.

    Returns Node[]

    The array of nodes.

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

    Returns {
        nodes: Node[];
        rels: Relationship[];
    }

    An array of the nodes in the visualization.

  • Returns the current pan of the viewport.

    Returns Point

    The current pan of the viewport.

  • Returns the node position that is currently stored in the visualisation for a given id.

    Parameters

    • id: string

      The id of the node position that should be returned.

    Returns Node

    The position information for the given id, or undefined if there is no such node or the layout has not yet run with that node.

  • Returns the relationship data that is currently stored in the visualisation for a given id.

    Parameters

    • id: string

      The id of the relationship that should be returned.

    Returns Relationship

    The relationship or undefined if there is no relationship with the given id.

  • Returns the relationships that are currently in the visualization.

    Returns Relationship[]

    An array of the relationships in the visualization.

  • Get the current zoom level of the viewport.

    Returns number

    The current zoom level

  • Gets the currently selected nodes.

    Returns (Node & Point)[]

    An array of all currently selected nodes and their positions.

  • Gets the currently selected relationships.

    Returns Relationship[]

    An array of all currently selected relationships.

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

    Returns boolean

    Whether or not the layout is moving.

  • Pins the specified node so it is not affected by layout forces.

    Parameters

    • nodeId: string

      The id of the node to be pinned.

    Returns void

  • Removes the specified nodes from the current scene.

    Parameters

    • nodeIds: string[]

      The node ids to be removed. Adjacent relationships will also be removed.

    Returns void

  • Removes the specified relationships from the current scene.

    Parameters

    • relationshipIds: string[]

      The relationship ids to be removed.

    Returns void

  • Resets the zoom of the viewport back to the default zoom level of 0.75

    Returns void

  • Restarts the NVL instance.

    Parameters

    • options: NvlOptions = {}

      new options for the NVL instance

    • retainPositions: boolean = false

      whether or not to retain the current node positions New options will be merged with current options

    Returns void

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

    Parameters

    • options: {
          backgroundColor?: string;
          filename?: string;
      }

      The filename and background color of the png.

      • OptionalbackgroundColor?: string

        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.

      • Optionalfilename?: string

        The filename of the png file.

    Returns void

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

    Parameters

    • options: {
          backgroundColor?: string;
          filename?: string;
      }

      The filename and background color of the png.

      • OptionalbackgroundColor?: string

        The background color of the png file. The size of the png file will be the size of the canvas in the DOM.

      • Optionalfilename?: string

        The filename of the png file.

    Returns void

  • Experimental

    Restarts NVL with or without WebGL support.

    Parameters

    • disabled: boolean = false

      Whether or not WebGL should be disabled. Not to be confused with setUseWebGLRenderer, which only affects the rendering method

    Returns void

  • Changes the layout type.

    Parameters

    • layout: Layout

      The layout type.

    Returns void

  • Updates the configuration of the current layout.

    Parameters

    Returns void

  • Sets the node positions based on data provided

    Parameters

    • data: Node[]

      The positions that the nodes should be set to.

    • updateLayout: boolean = false

      whether or not the current layout algorithm should update the graph after setting the node positions. False by default.

    Returns void

  • Sets the zoom of the viewport to a specific value.

    Parameters

    • panX: number

      The desired panX value.

    • panY: number

      The desired panY value. When updating both the zoom level and pan coordinates, use setZoomAndPan instead of calling setZoom and setPan separately to avoid jittering.

    Returns void

  • Switches between rendering methods

    Parameters

    • renderer: string

      which rendering method to use

    Returns void

  • Internal

    Toggles between the WebGL and Canvas rendering.

    Parameters

    • enabled: boolean

      Whether or not WebGL renderer should be used.

    Returns void

    use setRenderer instead.

  • Sets the zoom of the viewport to a specific value.

    Parameters

    Returns void

  • Sets the zoom and pan of the viewport to specific values.

    Parameters

    • zoom: number

      The desired zoom level.

    • panX: number

      The desired panX value.

    • panY: number

      The desired panY value. When only updating the zoom level or pan coordinates, use setZoom or setPan instead. If the zoom level is outside of the range provided by the NvlOptions.minZoom and NvlOptions.maxZoom options, the zoom level will be set to the closest valid zoom level. If NvlOptions.allowDynamicMinZoom is set to true, the NvlOptions.minZoom option will be ignored of the current graph does not fit the viewport.

    Returns void

  • Un-pins the specified nodes so it is affected by layout forces again.

    Parameters

    • nodeIds: string[]

      The ids of the nodes to be un-pinned.

    Returns void

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

    Parameters

    • nodes: Node[] | PartialNode[]

      The updated nodes.

    • relationships: Relationship[] | PartialRelationship[]

      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.

    Returns void

    Updating nodes and relationships

    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' }])