Data structures

Similar to a graph, this framework contains data as nodes and edges. One correction: in the editor's terminology, the graph edges are known as connections.

The NodeEditor instance stores this data in a normalized format, specifically as two distinct lists containing objects of the following type:

{ id: <string> } for a nodes
{ id: <string>, source: <string>, target: <string> } for a connections

Initializing the editor involves using a basic scheme without any supplementary fields to start with:

import { NodeEditor, BaseSchemes, getUID } from 'rete'

const editor = new NodeEditor<BaseSchemes>()

Add nodes and connections

When dealing with graph data, you have the option to create arbitrary identifiers for nodes and connections, or utilize the existing ones.

const a = { id: getUID() }
const b = { id: getUID() }
const connection = { id: getUID(), source: a.id, target: b.id }

await editor.addNode(a)
await editor.addNode(b)
await editor.addConnection(connection)

Retrieve nodes and connections

We can now retrieve a list of newly added nodes and connections

editor.getNodes() // returns [a, b]
editor.getConnections() // returns [connection]

You have all the necessary methods to process the graph, such as retrieving a list of input connections or all incoming nodes, as we will discuss in the following sections.

Incoming/outgoing connections

The following code shows how to retrieve a list of incoming and outgoing connections for node:

const connections = editor.getConnections()

const incomingConnections = connections.filter(connection => connection.target === node.id)
const outgoingConnections = connections.filter(connection => connection.source === node.id)

Incoming/outgoing nodes

We can use variables from the previous section to retrieve incoming or outgoing nodes:

const incomers = incomingConnections.map(connection => editor.getNode(connection.source))
const outgoers = outgoingConnections.map(connection => editor.getNode(connection.target))

In general, this is sufficient for simple cases, but if there are more than one connections between nodes, we will have to remove duplicates:

Array.from(new Set(incomers))
Array.from(new Set(outgoers))

The previously mentioned approaches are fairly flexible, but they require the implementation of more advanced methods on your own. Fortunately, the rete-structures package offers such methods divided into 4 categories:

Mapping: iterating through a list of nodes while transforming or filtering it
Sets: techniques for working with graphs as sets, including union, difference and intersection.
Subgraph: graphs that have parent-child relationships between nodes.
Traverse: traversing nodes by their connections, such as retrieving only incoming nodes or all predecessors.

Usage

Install the dependency

bash

npm i rete-structures

Use the following import statement and declaration

import { structures } from 'rete-structures'

const graph = structures(editor)

graph.nodes()
graph.connections()

There are other graph methods that serve distinct purposes, demonstrated below with code and an interactive preview. The resulting nodes are prominent and the preview allows users to select nodes and observe changes.

The execution of any of the methods usually yields nodes that were not discarded, as well as their connections if both of their nodes are present.