@graphty/graphty-element / index / Graphty

Class: Graphty

Defined in: graphty-element/src/graphty-element.ts:91

Graphty creates a graph

Extends

LitElement

Constructors

Constructor

new Graphty(): Graphty

Defined in: graphty-element/src/graphty-element.ts:126

Creates a new Graphty element instance.

Returns

Graphty

Overrides

LitElement.constructor

Properties

styles

static styles: CSSResult

Defined in: graphty-element/src/graphty-element.ts:98

The host is a block that fills its parent's width. Its height is the parent's when the parent has a definite height, the element's own when the page sets one, and otherwise half its width: aspect-ratio only applies while the used height is auto, so a bare tag keeps the 2:1 canvas it always had. Every rule here can be overridden from the page.

Overrides

LitElement.styles

Accessors

acceleration

Get Signature

get acceleration(): AccelerationPolicy

Defined in: graphty-element/src/graphty-element.ts:3919

Whether this graph may use hardware acceleration.

"auto" uses an accelerator when one can be attached and runs on the CPU when one cannot; "off" never looks; "required" turns absence into a thrown E_NO_ACCELERATOR rather than a quiet CPU result. Acceleration itself is one import away: import "@graphty/graphty-element/webgpu", and nothing else.

Remarks

This is a session setting and the element never persists it. Remembering that a reader switched acceleration off, and restoring the choice on their next visit, is the host application's storage: an element that wrote to a host page's storage uninvited would be a surprise the host cannot anticipate, and a restored preference would fight the attribute the host page wrote in its own markup.

Since

2.0.0

Example

HTML attribute

html

<graphty-element acceleration="required"></graphty-element>

Returns

AccelerationPolicy

What the consumer asked for. "auto" unless it was set.

Set Signature

set acceleration(value): void

Defined in: graphty-element/src/graphty-element.ts:3935

Sets the acceleration policy and applies it immediately.

An unrecognised value is reported and then ignored, leaving the previous policy in force. It is not thrown. Lit drives this setter from attributeChangedCallback, so a throw here would abort attribute processing and leave the element unrendered -- a typo in markup would take the whole graph down. HTML has never behaved that way about an attribute value, and an embedded component must not be the first thing that does.

The report is deliberately loud, because the quiet failure is the dangerous one: a page that meant required and wrote requried would otherwise run on the CPU and look healthy.

Parameters

value

AccelerationPolicy

Returns

void

accelerationMinNodes

Get Signature

get accelerationMinNodes(): number

Defined in: graphty-element/src/graphty-element.ts:4033

The node count at or above which accelerated work uses the accelerator.

Below it the element takes the CPU path even with an accelerator attached, and capabilities.acceleration.state reads "idle". Unset, layouts use the accelerator whenever there is one and each algorithm keeps a built-in floor measured on one card (see the acceleration guide). Any value you set, including 0, replaces those floors for every layout and algorithm; set it when you have measured the machine your graphs are drawn on.

Since

2.0.0

Example

html

<graphty-element acceleration-min-nodes="5000"></graphty-element>

Returns

number

The threshold in force.

Set Signature

set accelerationMinNodes(value): void

Defined in: graphty-element/src/graphty-element.ts:4044

Sets the threshold and applies it immediately.

A value that is not a whole number of 0 or more is reported and then ignored, leaving the previous threshold in force, for the reason the acceleration setter states: Lit drives this from attributeChangedCallback, and a throw there would leave the element unrendered.

Parameters

value

number

The node count at or above which accelerated work uses the accelerator.

Returns

void

algorithmsOnLoad

Get Signature

get algorithmsOnLoad(): readonly (string | { algorithm: string; as?: string; params?: Record<string, unknown>; seed?: number; style?: boolean | { size?: boolean | readonly [number, number]; }; })[] | undefined

Defined in: graphty-element/src/graphty-element.ts:1709

Which algorithms to run once data has finished loading, and how.

Remarks

Run in the order given. Each entry is an algorithm -- a catalogue key such as "pagerank" or a 1.x address such as "graphty:pagerank" -- or an object carrying the algorithm and the run options that make sense on load: { algorithm, params?, style?, seed?, as? }, the same options session.runs.start takes. style: { size: [1, 5] } colours AND sizes the nodes by the result, exactly as it does there.

This is the LIST; runAlgorithmsOnLoad is the switch that decides whether the list is honoured, and a switch with an empty list beside it does nothing.

A malformed entry is refused with a GraphtyError coded E_BAD_COMMAND naming the entry and its index, and the list already set is kept.

A property only, with no HTML attribute: how markup should declare load-time runs is left to a declarative child-element design rather than a JSON string in an attribute.

Since

2.0.0

Example

typescript

element.algorithmsOnLoad = ["degree", { algorithm: "pagerank", style: { size: [1, 5] } }];
element.runAlgorithmsOnLoad = true;

Returns

readonly (string | { algorithm: string; as?: string; params?: Record<string, unknown>; seed?: number; style?: boolean | { size?: boolean | readonly [number, number]; }; })[] | undefined

The value set on this element, else the value in effect (undefined when that is none)

Set Signature

set algorithmsOnLoad(value): void

Defined in: graphty-element/src/graphty-element.ts:1716

Sets which algorithms run once data has finished loading.

Throws

A GraphtyError coded E_BAD_COMMAND naming the first malformed entry.

Parameters

value

Returns

void

autoFrame

Get Signature

get autoFrame(): boolean

Defined in: graphty-element/src/graphty-element.ts:1946

Whether the camera frames the graph on its own after a data load or a layout change.

Remarks

On (the default), every load and layout change is framed to fit, as long as no startingCameraDistance is set. Off, a load or a layout change leaves the camera where it is, and a re-frame already following a moving layout stops. zoomToFit() frames the graph either way. A preference of this view, not part of the project: switching it records no undo step and is not saved in a project file. Independent of startingCameraDistance, so turning framing off needs no invented distance.

The attribute is on unless it reads "false": auto-frame="false" turns framing off, and removing the attribute turns it back on.

Since

3.10.0

Example

typescript

reframe.onchange = () => {
    element.autoFrame = reframe.checked;
};

html

<graphty-element auto-frame="false"></graphty-element>

Returns

boolean

True when the camera frames each load and layout change

Set Signature

set autoFrame(value): void

Defined in: graphty-element/src/graphty-element.ts:1952

Switches the camera's own framing on or off.

Parameters

value

boolean

Returns

void

background

Get Signature

get background(): { backgroundType: "color"; color: string | undefined; } | { backgroundType: "skybox"; data: string; } | undefined

Defined in: graphty-element/src/graphty-element.ts:1848

What the graph is drawn against: a flat colour, or a photo-dome skybox.

Remarks

A colour accepts anything CSS does -- a hex string, rgb(...), or a name such as whitesmoke -- and is normalised to hex. A skybox wraps the graph in a photo dome built from an image, given as a URL or a base64 PNG, and the element emits graphty-skybox-loaded once its texture has arrived.

Since

2.0.0

Examples

JavaScript property

typescript

element.background = { backgroundType: 'color', color: '#101014' };
element.background = { backgroundType: 'skybox', data: 'https://example.com/sky.jpg' };

HTML attribute (JSON string)

html

<graphty-element background='{"backgroundType":"color","color":"black"}'></graphty-element>

Returns

{ backgroundType: "color"; color: string | undefined; } | { backgroundType: "skybox"; data: string; } | undefined

The background set on this element, else the one in effect

Set Signature

set background(value): void

Defined in: graphty-element/src/graphty-element.ts:1859

Sets the graph background. Applies it to the scene immediately.

A value the schema refuses is REPORTED AND DROPPED rather than thrown, on the same terms as acceleration: this setter is reached from attributeChangedCallback, and a throw there escapes as an unhandled rejection that reaches nobody, leaving the page with an element that never rendered. A wrong colour in markup must not take the graph down.

Parameters

value

{ backgroundType: "color"; color: string | undefined; } | { backgroundType: "skybox"; data: string; } | undefined

Returns

void

dataSource

Get Signature

get dataSource(): string | undefined

Defined in: graphty-element/src/graphty-element.ts:870

The type of data source (e.g. "json"). See documentation for data sources for more information.

Returns

string | undefined

Data source type string or undefined if not set

Set Signature

set dataSource(value): void

Defined in: graphty-element/src/graphty-element.ts:877

Sets the data source type. Loads the graph from it, replacing what the graph held, once the configuration is set too.

Parameters

value

string | undefined

Returns

void

dataSourceConfig

Get Signature

get dataSourceConfig(): Record<string, unknown> | undefined

Defined in: graphty-element/src/graphty-element.ts:892

The configuration for the data source. See documentation for data sources for more information.

Returns

Record<string, unknown> | undefined

Data source configuration object or undefined if not set

Set Signature

set dataSourceConfig(value): void

Defined in: graphty-element/src/graphty-element.ts:902

Sets the data source configuration. Loads the graph from it, replacing what the graph held, once the type is set too.

Parameters

value

Record<string, unknown> | undefined

Returns

void

directed

Get Signature

get directed(): boolean | "auto" | undefined

Defined in: graphty-element/src/graphty-element.ts:1333

Whether the graph is a digraph, overruling whatever a loaded file says.

"auto" -- the default -- lets a file header settle it, which is what a GML, GraphML or DOT file carries. A boolean settles it here instead and no file can argue: a consumer who knows their edge list is symmetric says so once, rather than per file.

A value the schema refuses is reported and dropped rather than thrown.

Since

2.0.0

Example

html

<graphty-element directed="true"></graphty-element>

Returns

boolean | "auto" | undefined

The value set on this element, else the value in effect ("auto" by default)

Set Signature

set directed(value): void

Defined in: graphty-element/src/graphty-element.ts:1339

Sets whether the graph is read as directed. Updates graph configuration.

Parameters

value

boolean | "auto" | undefined

Returns

void

edgeData

Get Signature

get edgeData(): Record<string, unknown>[] | undefined

Defined in: graphty-element/src/graphty-element.ts:845

Array of edge data objects defining connections between nodes.

Remarks

Setting this property REPLACES all existing edges. For incremental updates, use the graph.addEdges() method instead.

Each edge object should have source and target fields (default: "source", "target"). Additional properties can be used for styling (e.g., weight, label).

Since

1.0.0

See

nodeData for node data
edgeSrcIdPath to customize source field
edgeDstIdPath to customize target field

Examples

HTML attribute

html

<graphty-element
  edge-data='[{"source": "1", "target": "2"}, {"source": "2", "target": "3"}]'>
</graphty-element>

JavaScript property

typescript

element.edgeData = [
  { source: 'a', target: 'b', weight: 1.5 },
  { source: 'b', target: 'c', weight: 2.0 }
];

Returns

Record<string, unknown>[] | undefined

Array of edge data objects or undefined if not set

Set Signature

set edgeData(value): void

Defined in: graphty-element/src/graphty-element.ts:852

Replaces the graph's edges with these, as one undoable step.

Parameters

value

Record<string, unknown>[] | undefined

Returns

void

edgeDstIdPath

Get Signature

get edgeDstIdPath(): string | undefined

Defined in: graphty-element/src/graphty-element.ts:1116

Similar to the nodeIdPath property / node-id-path attribute, this is a jmespath that describes where to find the destination node identifier for this edge.

Unset by default, which means PROBE; see edgeSrcIdPath.

Returns

string | undefined

The value set on this element, else the value in effect (undefined when that is none)

Set Signature

set edgeDstIdPath(value): void

Defined in: graphty-element/src/graphty-element.ts:1122

Sets the JMESPath for edge destination ID extraction. Updates graph configuration.

Parameters

value

string | undefined

Returns

void

edgeIdPath

Get Signature

get edgeIdPath(): string | undefined

Defined in: graphty-element/src/graphty-element.ts:1144

A JMESPath naming the record key that identifies an edge, for data whose edges carry genuine identifiers of their own.

Two records sharing one value are then the SAME edge rather than two edges between the same pair, and the repeat policy decides what happens to the second. Unset -- the default -- means the records carry no edge identity and a repeat is decided by its ordered endpoint pair alone.

This does not name the edge: Edge.id is always the element's own counter.

Since

2.0.0

Example

html

<graphty-element edge-id-path="edgeId"></graphty-element>

Returns

string | undefined

The value set on this element, else the value in effect (undefined when that is none)

Set Signature

set edgeIdPath(value): void

Defined in: graphty-element/src/graphty-element.ts:1150

Sets the JMESPath for edge identity. Updates graph configuration.

Parameters

value

string | undefined

Returns

void

edgeSrcIdPath

Get Signature

get edgeSrcIdPath(): string | undefined

Defined in: graphty-element/src/graphty-element.ts:1098

Similar to the nodeIdPath property / node-id-path attribute, this is a jmespath that describes where to find the source node identifier for this edge.

Unset by default, which means PROBE: the element reads source/target, then src/dst, then from/to, deciding once per batch of edge records. Setting this settles the question and turns the probe off, and a record that does not answer it is then a rejected record rather than a reason to guess again.

Returns

string | undefined

The value set on this element, else the value in effect (undefined when that is none)

Set Signature

set edgeSrcIdPath(value): void

Defined in: graphty-element/src/graphty-element.ts:1104

Sets the JMESPath for edge source ID extraction. Updates graph configuration.

Parameters

value

string | undefined

Returns

void

edgeWeightPath

Get Signature

get edgeWeightPath(): string | undefined

Defined in: graphty-element/src/graphty-element.ts:1232

A jmespath naming the record key that carries an edge's weight.

Every weighted algorithm -- shortest path, weighted centrality, flow -- reads the weight through this. It defaults to "weight", which is what the importers write, with a fallback to a literal value key for the datasets that use that spelling.

Since

2.0.0

Example

html

<graphty-element edge-weight-path="cost"></graphty-element>

Returns

string | undefined

The value set on this element, else the value in effect (undefined when that is none)

Set Signature

set edgeWeightPath(value): void

Defined in: graphty-element/src/graphty-element.ts:1238

Sets the JMESPath for an edge's weight. Updates graph configuration.

Parameters

value

string | undefined

Returns

void

enableDetailedProfiling

Get Signature

get enableDetailedProfiling(): boolean | undefined

Defined in: graphty-element/src/graphty-element.ts:2015

Enable detailed performance profiling. When enabled, hierarchical timing and advanced statistics will be collected. Access profiling data via graph.getStatsManager().getSnapshot() or graph.getStatsManager().reportDetailed().

Returns

boolean | undefined

Boolean flag or undefined if not set

Set Signature

set enableDetailedProfiling(value): void

Defined in: graphty-element/src/graphty-element.ts:2021

Sets detailed profiling mode. Enables hierarchical timing and advanced stats collection.

Parameters

value

boolean | undefined

Returns

void

graph

Get Signature

get graph(): Graph

Defined in: graphty-element/src/graphty-element.ts:2520

Get the underlying Graph instance for debugging purposes.

Returns

Graph

The Graph instance

historyKeys

Get Signature

get historyKeys(): boolean

Defined in: graphty-element/src/graphty-element.ts:1992

Whether the element handles the undo keys itself: Ctrl+Z (Cmd+Z on macOS) undoes one step and Ctrl+Shift+Z or Ctrl+Y redoes it, while the graph's canvas has keyboard focus. On by default. A handled key has its default prevented, so a host page binding the same keys skips a keydown whose defaultPrevented is set; or turns this off with history-keys="false" and calls session.undo() itself.

Since

3.0.0

Returns

boolean

Whether the undo keys are handled.

Set Signature

set historyKeys(value): void

Defined in: graphty-element/src/graphty-element.ts:1998

Turns the element's own undo keys on or off.

Parameters

value

boolean

Returns

void

isFrameStable

Get Signature

get isFrameStable(): boolean

Defined in: graphty-element/src/graphty-element.ts:3196

Whether the picture on screen is the finished one.

True only when the layout has converged, the camera has finished framing the graph, and a frame has been drawn in that state. The graph-frame-stable event announces the moment it becomes true.

Since

2.0.0

Returns

boolean

True when the last frame drawn is the last frame that will change.

labelDeclutter

Get Signature

get labelDeclutter(): boolean

Defined in: graphty-element/src/graphty-element.ts:1625

Whether a node label that would be drawn over another label is hidden until the reader zooms in.

Remarks

A preference of this view, not part of the project: switching it records no undo step and is not saved in a project file. Off (the default), every label is drawn. It takes effect on the next frame. The same switch as layoutBehavior.labels.declutter, with a door of its own so a consumer can flip it without assigning layoutBehavior, which also carries the project's layout pacing.

Since

3.10.0

Example

typescript

showAllLabels.onchange = () => {
    element.labelDeclutter = !showAllLabels.checked;
};

html

<graphty-element label-declutter></graphty-element>

Returns

boolean

True when overlapping labels are hidden

Set Signature

set labelDeclutter(value): void

Defined in: graphty-element/src/graphty-element.ts:1631

Switches label decluttering on or off.

Parameters

value

boolean

Returns

void

layout

Get Signature

get layout(): string | undefined

Defined in: graphty-element/src/graphty-element.ts:1387

Layout algorithm to use for positioning nodes.

Remarks

Available layouts:

ngraph: Force-directed (3D optimized, recommended)
d3-force: Force-directed (2D)
circular: Nodes arranged in a circle
grid: Nodes arranged in a grid
hierarchical: Tree/DAG layout
random: Random positions
fixed: Pre-defined positions from node data

Since

1.0.0

See

layoutConfig for layout-specific options
Layout Examples

Example

typescript

// Set force-directed layout
element.layout = 'ngraph';

// Set circular layout with config
element.layout = 'circular';
element.layoutConfig = { radius: 5 };

Returns

string | undefined

Layout algorithm name or undefined if not set

Set Signature

set layout(value): void

Defined in: graphty-element/src/graphty-element.ts:1395

Sets the layout algorithm: one undoable step, which undo takes back to the layout, the engine and the options before it. Assigned with layoutConfig in the same tick, the two are one step.

Parameters

value

string | undefined

Returns

void

layout2d

Get Signature

get layout2d(): boolean | undefined

Defined in: graphty-element/src/graphty-element.ts:1771

Gets 2D layout mode (deprecated - use viewMode instead).

Deprecated

Use viewMode instead. layout2d: true is equivalent to viewMode: "2d" Specifies that the layout should be rendered in two dimensions (as opposed to 3D)

Returns

boolean | undefined

True if in 2D mode, false if 3D, undefined otherwise

Set Signature

set layout2d(value): void

Defined in: graphty-element/src/graphty-element.ts:1787

Sets 2D mode (deprecated). Converts boolean to viewMode internally.

Parameters

value

boolean | undefined

Returns

void

layoutBehavior

Get Signature

get layoutBehavior(): { fetchEdges?: Function; fetchNodes?: Function; labels?: { declutter?: boolean; }; layout?: { iterationsPerStep?: number; maxInFlight?: number; minDelta?: number; preSteps?: number; stepMultiplier?: number; type?: string; zoomStepInterval?: number; }; node?: { pinOnDrag?: boolean; }; } | undefined

Defined in: graphty-element/src/graphty-element.ts:1575

How the element DRIVES the layout, as distinct from what the layout engine is configured with.

Remarks

layoutConfig is the engine's own options; this is the element's handling of it. layout.preSteps runs the simulation that many times before the first frame is drawn, which is what makes a screenshot of a physics layout the same picture twice -- an unstepped force layout is a graph in mid-flight, and how far it has flown depends on when the picture was taken. layout.stepMultiplier, layout.minDelta and layout.zoomStepInterval pace the rest of it, and node.pinOnDrag decides whether a node a reader drags stays where they put it. labels.declutter (off by default) hides a node label whose words would be drawn over another label's, keeping a selected node's label first and then the label of the node with more edges; it takes effect on the next frame. Graphty.nodeLabelCounts says how many it hid.

Merged over what is already set, so naming one field leaves the others alone.

Since

2.0.0

Example

typescript

element.layoutBehavior = { layout: { preSteps: 1000 } };
element.layoutBehavior = { labels: { declutter: true } };

Returns

{ fetchEdges?: Function; fetchNodes?: Function; labels?: { declutter?: boolean; }; layout?: { iterationsPerStep?: number; maxInFlight?: number; minDelta?: number; preSteps?: number; stepMultiplier?: number; type?: string; zoomStepInterval?: number; }; node?: { pinOnDrag?: boolean; }; } | undefined

The view preferences set on this element, with the pacing settings saved in the project (preSteps, stepMultiplier, minDelta) as they are in effect

Set Signature

set layoutBehavior(value): void

Defined in: graphty-element/src/graphty-element.ts:1584

Sets how the element drives the layout.

A value the schema refuses is reported and dropped rather than thrown, on the same terms as background and acceleration.

Parameters

value

Returns

void

layoutConfig

Get Signature

get layoutConfig(): Record<string, unknown> | undefined

Defined in: graphty-element/src/graphty-element.ts:1414

Specifies which type of layout to use. See the layout documentation for more information.

Returns

Record<string, unknown> | undefined

Layout configuration object or undefined if not set

Set Signature

set layoutConfig(value): void

Defined in: graphty-element/src/graphty-element.ts:1420

Sets layout-specific configuration: the layout is drawn again with it, as one undoable step.

Parameters

value

Record<string, unknown> | undefined

Returns

void

layoutScope

Get Signature

get layoutScope(): Scope | undefined

Defined in: graphty-element/src/graphty-element.ts:1513

What the layout runs over: a set, a query, a list of nodes -- any scope.

Remarks

The scope's nodes move and every other node is held where it is. The members are the ones the scope had when the layout started, so a later click, filter change or attribute edit does not move what the layout holds, and a node added afterwards is held too.

CARRIED across layout and layoutConfig changes, so changing one force setting never un-scopes the layout. Setting it restarts the running layout. Only a live simulation -- whose catalogue entry reads scoped: true -- lays out a scope; under any other layout, or when the set it names is removed, the scope is inactive and the whole graph is laid out. Nothing here throws: a value that is not a scope is reported and dropped.

Reads undefined when layouts run over the whole graph, never "graph".

Since

2.5.0

Examples

JavaScript property

typescript

const id = element.session.sets.create({ kind: "fixed", nodes: ["a", "b", "c"], reading: "induced" });
element.layout = "ngraph";
element.layoutScope = { set: id };

HTML attribute (JSON)

html

<graphty-element layout="ngraph" layout-scope='{"nodes":["a","b","c"]}'></graphty-element>

Returns

Scope | undefined

The scope, or undefined for the whole graph

Set Signature

set layoutScope(value): void

Defined in: graphty-element/src/graphty-element.ts:1521

Sets what the layout runs over, and restarts the running layout over it. A value that is not a scope is reported and dropped, never thrown: this setter is reached from attributeChangedCallback, where a throw would reach nobody.

Parameters

value

ScopeInput | undefined

Returns

void

nodeData

Get Signature

get nodeData(): Record<string, unknown>[] | undefined

Defined in: graphty-element/src/graphty-element.ts:758

Array of node data objects to visualize.

Remarks

Setting this property REPLACES all existing nodes: a node whose id is not in the new array is removed, with the edges attached to it. For incremental updates, use the addNodes() method instead.

Each node object should have an ID field (default: "id"). Additional properties can be used in style selectors and accessed via node.data.

Since

1.0.0

See

edgeData for edge data
Basic Examples

Examples

HTML attribute (JSON string)

html

<graphty-element
  node-data='[{"id": "1", "label": "Node 1"}, {"id": "2", "label": "Node 2"}]'>
</graphty-element>

JavaScript property

typescript

const element = document.querySelector('graphty-element');
element.nodeData = [
  { id: 'a', label: 'Node A', category: 'primary' },
  { id: 'b', label: 'Node B', category: 'secondary' }
];

Returns

Record<string, unknown>[] | undefined

Array of node data objects or undefined if not set

Set Signature

set nodeData(value): void

Defined in: graphty-element/src/graphty-element.ts:766

Replaces the graph's nodes with these, as one undoable step: a node the array names again keeps its row and its edges, and one it no longer names goes, with its edges.

Parameters

value

Record<string, unknown>[] | undefined

Returns

void

nodeIdPath

Get Signature

get nodeIdPath(): string | undefined

Defined in: graphty-element/src/graphty-element.ts:1077

A jmespath string that can be used to select the unique node identifier for each node. Defaults to "id", as in {id: 42} is the identifier of the node.

Returns

string | undefined

The value set on this element, else the value in effect (undefined when that is none)

Set Signature

set nodeIdPath(value): void

Defined in: graphty-element/src/graphty-element.ts:1083

Sets the JMESPath for node ID extraction. Updates graph configuration.

Parameters

value

string | undefined

Returns

void

nodeLabelCounts

Get Signature

get nodeLabelCounts(): NodeLabelCounts

Defined in: graphty-element/src/graphty-element.ts:1545

How many node labels the element is drawing, and why the rest are not, as of the last drawn frame. All zeros before data loads. Reading it never forces a frame.

The graphty-label-change DOM event (detail: the same counts) fires when a count changes, once the view has stopped changing: never during a camera gesture or while a layout is still moving nodes. It also fires once after the first frame that has labels.

Since

3.7.0

Example

typescript

element.addEventListener("graphty-label-change", () => {
    const { labeled, hiddenByOverlap } = element.nodeLabelCounts;
});

Returns

NodeLabelCounts

The counts.

nodeLabelPath

Get Signature

get nodeLabelPath(): string | undefined

Defined in: graphty-element/src/graphty-element.ts:1208

A jmespath naming what to CALL a node, as distinct from how to address it.

A result card naming the busiest node, a legend row and a ranked list all want a name a reader recognises, and an id is only sometimes one -- a GML file keys its nodes by integer while carrying the name beside it. Unset, every one of those falls back to the printed id.

Since

2.0.0

Example

html

<graphty-element node-label-path="name"></graphty-element>

Returns

string | undefined

The value set on this element, else the value in effect (undefined when that is none)

Set Signature

set nodeLabelPath(value): void

Defined in: graphty-element/src/graphty-element.ts:1214

Sets the JMESPath for a node's display name. Updates graph configuration.

Parameters

value

string | undefined

Returns

void

pinnedNodes

Get Signature

get pinnedNodes(): ReadonlySet<string | number>

Defined in: graphty-element/src/graphty-element.ts:2869

Which nodes are pinned right now.

Ids as the graph holds them, which is the form its own data carried: a sample whose file spelled its ids as integers answers with numbers. Graphty.isPinned takes either spelling, so a consumer comparing against an id it has printed should ask that instead of testing this set for membership.

Since

2.0.0

Returns

ReadonlySet<string | number>

the pinned node ids

positionScale

Get Signature

get positionScale(): number | undefined

Defined in: graphty-element/src/graphty-element.ts:1262

What a record's own coordinates are measured in, as a multiplier into scene units.

A file that places its nodes -- a GraphML with x/y, a saved layout -- is read in the file's units, and this converts them. It must be greater than zero: zero collapses every placed node onto the origin, which is indistinguishable from "unplaced", and a negative factor point-reflects the whole layout.

A value the schema refuses is REPORTED AND DROPPED rather than thrown, on the same terms as background and repeated-edges: this setter is reached from attributeChangedCallback, where a throw escapes as an unhandled rejection that reaches nobody.

Since

2.0.0

Example

html

<graphty-element position-scale="0.01"></graphty-element>

Returns

number | undefined

The value set on this element, else the value in effect (undefined when that is none)

Set Signature

set positionScale(value): void

Defined in: graphty-element/src/graphty-element.ts:1268

Sets the record-units-to-scene-units multiplier. Updates graph configuration.

Parameters

value

number | undefined

Returns

void

renderer

Get Signature

get renderer(): RendererRequest

Defined in: graphty-element/src/graphty-element.ts:3973

Which renderer draws the graph: "webgl" (the default), "webgpu", or "auto" for WebGPU where the browser has it.

Read once, when the element is first drawn; set it in markup or before the element is connected. Where WebGPU is asked for and the browser cannot open it, the graph is drawn with WebGL and rendererStatus says why -- the choice is made before the first frame, never by switching mid-run.

Remarks

WebGL stays the default because WebXR has no WebGPU binding in any shipping browser: under WebGPU the VR and AR buttons report the mode unavailable. See the renderer guide for what else differs and the measured frame times.

Since

3.3.0

Example

HTML attribute

html

<graphty-element renderer="auto"></graphty-element>

Returns

RendererRequest

What the consumer asked for. "webgl" unless it was set.

Set Signature

set renderer(value): void

Defined in: graphty-element/src/graphty-element.ts:3983

Sets the renderer the element opens when it is first drawn.

An unrecognised value, or a change once the element is drawing, is reported and ignored rather than thrown, for the reason given on acceleration: Lit drives this setter from attributeChangedCallback, and a throw there would leave the element unrendered.

Parameters

value

RendererRequest

Returns

void

rendererStatus

Get Signature

get rendererStatus(): RendererStatus | null

Defined in: graphty-element/src/graphty-element.ts:4013

Which renderer is drawing, and why when it is not the one asked for.

active is "webgl" or "webgpu"; reason is set only when WebGPU was asked for and WebGL is drawing instead (no navigator.gpu, or no adapter or device could be opened). Null until the element has initialised its renderer, which it does once connected; the render-initialized event fires after.

Since

3.3.0

Example

typescript

await element.updateComplete;
const { active, reason } = element.rendererStatus ?? {};

Returns

RendererStatus | null

The status, or null before the renderer has been chosen.

repeatedEdges

Get Signature

get repeatedEdges(): DuplicatePolicy | undefined

Defined in: graphty-element/src/graphty-element.ts:1173

What happens to a second edge record naming an ordered pair the graph already holds.

"keep" -- the default -- makes it a second edge with its own id, weight and attributes. "first" discards it, "last" lets it replace what is there, "sum", "min" and "max" fold its weight into the edge already present, and "error" throws E_DUPLICATE_EDGE naming both endpoints.

A value the schema refuses is REPORTED AND DROPPED rather than thrown, on the same terms as background and acceleration: this setter is reached from attributeChangedCallback, where a throw escapes as an unhandled rejection that reaches nobody.

Since

2.0.0

Example

html

<graphty-element repeated-edges="sum"></graphty-element>

Returns

DuplicatePolicy | undefined

The value set on this element, else the value in effect (undefined when that is none)

Set Signature

set repeatedEdges(value): void

Defined in: graphty-element/src/graphty-element.ts:1179

Sets the repeat policy. Updates graph configuration.

Parameters

value

DuplicatePolicy | undefined

Returns

void

runAlgorithmsOnLoad

Get Signature

get runAlgorithmsOnLoad(): boolean | undefined

Defined in: graphty-element/src/graphty-element.ts:1967

Whether to run the algorithms listed in algorithmsOnLoad once data has loaded.

Remarks

A boolean attribute: its presence turns it on, as hidden does. It was read as a string, so <graphty-element run-algorithms-on-load> handed the setter "" -- which is false -- and the documented HTML form ran nothing.

Returns

boolean | undefined

The value set on this element, else the value in effect (undefined when that is none)

Set Signature

set runAlgorithmsOnLoad(value): void

Defined in: graphty-element/src/graphty-element.ts:1973

Sets whether to run algorithms when a style template loads. Updates graph configuration.

Parameters

value

boolean | undefined

Returns

void

selectionStyle

Get Signature

get selectionStyle(): { color?: string; opacity?: number; scale?: number; } | undefined

Defined in: graphty-element/src/graphty-element.ts:1658

What a selected node looks like: the halo's colour, how far it stands out past the node, and how solid it is.

Remarks

Merged over what is already set, so naming one field leaves the others alone, and it takes effect on a selection that is already on screen.

The highlight is deliberately NOT a style layer. A selection is what a reader is pointing at rather than a property of the data, so a layer drawing it would be reorderable, persistable and lost at a dataset boundary along with every other layer.

A value the schema refuses is reported and dropped rather than thrown, on the same terms as background and layoutBehavior.

Since

2.0.0

Example

typescript

element.selectionStyle = { color: "#00BCD4", scale: 1.8 };

Returns

The value set on this element, else the value in effect (undefined when that is none)

Type Literal

{ color?: string; opacity?: number; scale?: number; }

color?

optional color?: string

The halo's colour. Any colour the element understands; normalised to hex on parse.

opacity?

optional opacity?: number

How solid the halo is, in [0, 1]. Low enough to read as a highlight rather than a node.

scale?

optional scale?: number

How much of the node's own size the halo is drawn at.

Greater than 1 puts a ring around the node, which is what a highlight reads as. Below 1 the halo disappears inside the node it is meant to mark, so the schema takes any positive number and the default stands a little clear of the node.

undefined

Set Signature

set selectionStyle(value): void

Defined in: graphty-element/src/graphty-element.ts:1664

Sets what a selected node looks like.

Parameters

value

{ color?: string; opacity?: number; scale?: number; } | undefined

Type Literal

{ color?: string; opacity?: number; scale?: number; }

color?

string = ...

The halo's colour. Any colour the element understands; normalised to hex on parse.

opacity?

number = ...

How solid the halo is, in [0, 1]. Low enough to read as a highlight rather than a node.

scale?

number = ...

How much of the node's own size the halo is drawn at.

undefined

Returns

void

session

Get Signature

get session(): GraphSession

Defined in: graphty-element/src/graphty-element.ts:165

The headless model this element draws.

Everything about the graph that needs no screen is here: the data, the coordinates, the statistics, the catalogue, the runs and their results, which elements a piece of work may look at (scope), what is selected (selection) and what is visible (visibility). The camera, the canvas and the scene stay on the element, because two synchronised views of one dataset disagree about those and agree about everything above.

Read-only for now: a session built elsewhere cannot yet be attached to an element.

Since

2.0.0

Example

html

<graphty-element id="g" sample="karate"></graphty-element>
<script type="module">
  const { session } = document.getElementById("g");
  await session.visibility.set({ kind: "degree", min: 3 });
  showing.textContent = `${session.status.counts.visibleNodes} of ${session.status.counts.nodes}`;
</script>

Returns

GraphSession

The session.

startingCameraDistance

Get Signature

get startingCameraDistance(): number | undefined

Defined in: graphty-element/src/graphty-element.ts:1891

How far the camera starts from the graph, in scene units.

Remarks

Set, it places the 3D camera at this distance from the orbit center (never closer than the minimum zoom distance) and gives the 2D camera the same view height, and the element stops framing the graph on its own after a data load or a layout change. zoomToFit() still frames it when called. Unset (the default), every load is framed to fit. Setting it on a running graph moves the camera.

Since

2.0.0

Example

typescript

element.startingCameraDistance = 60;

Returns

number | undefined

The distance, or undefined when none has been set on this element

Set Signature

set startingCameraDistance(value): void

Defined in: graphty-element/src/graphty-element.ts:1897

Sets the starting camera distance.

Parameters

value

number | undefined

Returns

void

viewMode

Get Signature

get viewMode(): "2d" | "3d" | "ar" | "vr" | undefined

Defined in: graphty-element/src/graphty-element.ts:1746

View mode controls how the graph is rendered and displayed.

Remarks

"2d": Orthographic camera, fixed top-down view
"3d": Perspective camera with orbit controls (default)
"ar": Augmented reality mode using WebXR
"vr": Virtual reality mode using WebXR

VR and AR modes require WebXR support in the browser.

Since

1.0.0

See

View Mode Examples

Example

typescript

element.viewMode = "2d";  // Switch to 2D orthographic view
element.viewMode = "3d";  // Switch to 3D perspective view
element.viewMode = "vr";  // Enter VR mode (requires WebXR support)

Returns

"2d" | "3d" | "ar" | "vr" | undefined

Current view mode or undefined if not set

Set Signature

set viewMode(value): void

Defined in: graphty-element/src/graphty-element.ts:1753

Sets the view mode. Switching between 2D and 3D is one undoable step; entering VR or AR is not a step, and from 2D it switches to 3D first in the same step.

Parameters

value

"2d" | "3d" | "ar" | "vr" | undefined

Returns

void

xr

Get Signature

get xr(): { ar?: { enabled?: boolean; optionalFeatures?: string[]; referenceSpaceType?: "unbounded" | "local" | "local-floor" | "bounded-floor"; }; enabled?: boolean; input?: { controllers?: boolean; enableZAmplificationInDesktop?: boolean; handTracking?: boolean; nearInteraction?: boolean; physics?: boolean; zAxisAmplification?: number; }; teleportation?: { easeTime?: number; enabled?: boolean; }; ui?: { enabled?: boolean; position?: "top-right" | "top-left" | "bottom-left" | "bottom-right"; showAvailabilityWarning?: boolean; unavailableMessageDuration?: number; }; vr?: { enabled?: boolean; optionalFeatures?: string[]; referenceSpaceType?: "unbounded" | "local" | "local-floor" | "bounded-floor"; }; } | undefined

Defined in: graphty-element/src/graphty-element.ts:2053

XR (VR/AR) configuration. Controls XR UI buttons, VR/AR mode settings, and input handling.

Example

typescript

element.xr = {
  enabled: true,
  ui: {
    enabled: true,
    position: 'bottom-right',
    showAvailabilityWarning: true  // Show warning if XR unavailable
  },
  input: {
    handTracking: true,
    controllers: true
  }
};

Returns

XR configuration object or undefined if not set

Type Literal

{ ar?: { enabled?: boolean; optionalFeatures?: string[]; referenceSpaceType?: "unbounded" | "local" | "local-floor" | "bounded-floor"; }; enabled?: boolean; input?: { controllers?: boolean; enableZAmplificationInDesktop?: boolean; handTracking?: boolean; nearInteraction?: boolean; physics?: boolean; zAxisAmplification?: number; }; teleportation?: { easeTime?: number; enabled?: boolean; }; ui?: { enabled?: boolean; position?: "top-right" | "top-left" | "bottom-left" | "bottom-right"; showAvailabilityWarning?: boolean; unavailableMessageDuration?: number; }; vr?: { enabled?: boolean; optionalFeatures?: string[]; referenceSpaceType?: "unbounded" | "local" | "local-floor" | "bounded-floor"; }; }

ar?

optional ar?: object

AR mode configuration

ar.enabled?

optional enabled?: boolean

Enable AR mode

Default

true

ar.optionalFeatures?

optional optionalFeatures?: string[]

Optional WebXR features to request

Default

["hit-test"]

ar.referenceSpaceType?

optional referenceSpaceType?: "unbounded" | "local" | "local-floor" | "bounded-floor"

WebXR reference space type for AR

Default

"local-floor"

enabled?

optional enabled?: boolean

Enable/disable XR functionality globally

Default

true

input?

optional input?: object

XR input and interaction configuration

input.controllers?

optional controllers?: boolean

Enable motion controllers

Default

true

input.enableZAmplificationInDesktop?

optional enableZAmplificationInDesktop?: boolean

Enable Z-axis amplification in desktop mode Normally amplification only applies in XR mode, but this can enable it for desktop too

Default

false

input.handTracking?

optional handTracking?: boolean

Enable hand tracking

Default

true

input.nearInteraction?

optional nearInteraction?: boolean

Enable near interaction (touch/grab)

Default

true

input.physics?

optional physics?: boolean

Enable physics-based interactions

Default

false

input.zAxisAmplification?

optional zAxisAmplification?: number

Z-axis movement amplification factor Multiplies Z-axis delta during drag to make depth manipulation practical in VR

Example: With zAxisAmplification = 10, moving controller 0.1 units in Z will move the node 1.0 units in Z

Default

10.0

teleportation?

optional teleportation?: object

Teleportation configuration

teleportation.easeTime?

optional easeTime?: number

Teleportation animation duration (ms)

Default

teleportation.enabled?

optional enabled?: boolean

Enable teleportation system

Default

false

ui?

optional ui?: object

XR UI button configuration

ui.enabled?

optional enabled?: boolean

Show VR/AR entry buttons

Default

true

ui.position?

optional position?: "top-right" | "top-left" | "bottom-left" | "bottom-right"

Button position on screen

Default

"bottom-right"

ui.showAvailabilityWarning?

optional showAvailabilityWarning?: boolean

Show "VR / AR NOT AVAILABLE" warning when XR is not available When false, no message is displayed if AR/VR aren't available

Default

false

ui.unavailableMessageDuration?

optional unavailableMessageDuration?: number

Duration to show "not available" message (ms)

Default

vr?

optional vr?: object

VR mode configuration

vr.enabled?

optional enabled?: boolean

Enable VR mode

Default

true

vr.optionalFeatures?

optional optionalFeatures?: string[]

Optional WebXR features to request

Default

[]

vr.referenceSpaceType?

optional referenceSpaceType?: "unbounded" | "local" | "local-floor" | "bounded-floor"

WebXR reference space type for VR

"local": Seated/standing experience, no room bounds
"local-floor": Floor-level origin, no room bounds
"bounded-floor": Room-scale with bounds
"unbounded": Unlimited tracking space

Default

"local-floor"

undefined

Set Signature

set xr(value): void

Defined in: graphty-element/src/graphty-element.ts:2059

Sets XR configuration. Updates VR/AR settings and UI options.

Parameters

value

Type Literal

ar?

{ enabled?: boolean; optionalFeatures?: string[]; referenceSpaceType?: "unbounded" | "local" | "local-floor" | "bounded-floor"; } = ...

AR mode configuration

ar.enabled?

boolean = ...

Enable AR mode

Default

true

ar.optionalFeatures?

string[] = ...

Optional WebXR features to request

Default

["hit-test"]

ar.referenceSpaceType?

"unbounded" | "local" | "local-floor" | "bounded-floor" = ...

WebXR reference space type for AR

Default

"local-floor"

enabled?

boolean = ...

Enable/disable XR functionality globally

Default

true

input?

{ controllers?: boolean; enableZAmplificationInDesktop?: boolean; handTracking?: boolean; nearInteraction?: boolean; physics?: boolean; zAxisAmplification?: number; } = ...

XR input and interaction configuration

input.controllers?

boolean = ...

Enable motion controllers

Default

true

input.enableZAmplificationInDesktop?

boolean = ...

Enable Z-axis amplification in desktop mode Normally amplification only applies in XR mode, but this can enable it for desktop too

Default

false

input.handTracking?

boolean = ...

Enable hand tracking

Default

true

input.nearInteraction?

boolean = ...

Enable near interaction (touch/grab)

Default

true

input.physics?

boolean = ...

Enable physics-based interactions

Default

false

input.zAxisAmplification?

number = ...

Z-axis movement amplification factor Multiplies Z-axis delta during drag to make depth manipulation practical in VR

Example: With zAxisAmplification = 10, moving controller 0.1 units in Z will move the node 1.0 units in Z

Default

10.0

teleportation?

{ easeTime?: number; enabled?: boolean; } = ...

Teleportation configuration

teleportation.easeTime?

number = ...

Teleportation animation duration (ms)

Default

teleportation.enabled?

boolean = ...

Enable teleportation system

Default

false

ui?

{ enabled?: boolean; position?: "top-right" | "top-left" | "bottom-left" | "bottom-right"; showAvailabilityWarning?: boolean; unavailableMessageDuration?: number; } = ...

XR UI button configuration

ui.enabled?

boolean = ...

Show VR/AR entry buttons

Default

true

ui.position?

"top-right" | "top-left" | "bottom-left" | "bottom-right" = ...

Button position on screen

Default

"bottom-right"

ui.showAvailabilityWarning?

boolean = ...

Show "VR / AR NOT AVAILABLE" warning when XR is not available When false, no message is displayed if AR/VR aren't available

Default

false

ui.unavailableMessageDuration?

number = ...

Duration to show "not available" message (ms)

Default

vr?

{ enabled?: boolean; optionalFeatures?: string[]; referenceSpaceType?: "unbounded" | "local" | "local-floor" | "bounded-floor"; } = ...

VR mode configuration

vr.enabled?

boolean = ...

Enable VR mode

Default

true

vr.optionalFeatures?

string[] = ...

Optional WebXR features to request

Default

[]

vr.referenceSpaceType?

"unbounded" | "local" | "local-floor" | "bounded-floor" = ...

WebXR reference space type for VR

"local": Seated/standing experience, no room bounds
"local-floor": Floor-level origin, no room bounds
"bounded-floor": Room-scale with bounds
"unbounded": Unlimited tracking space

Default

"local-floor"

undefined

Returns

void

Methods

addDataFromSource()

addDataFromSource(type, opts?, options?): Promise<{ loadId: number; }>

Defined in: graphty-element/src/graphty-element.ts:2702

Add data from a data source.

Every load has an id: the promise resolves to it, and every load event about this load (data-loading-progress, data-loading-complete, data-loading-error, data-loaded) carries it as loadId. A source with no nodes and no edges rejects with E_EMPTY_LOAD.

Parameters

type

string

Data source type (e.g., "json", "csv", "graphml")

opts?

object

Data source configuration options

options?

How to load

replace?

boolean

Replace the graph with this data, but only once it has all parsed: a malformed or empty source rejects and leaves the current graph untouched

Returns

Promise<{ loadId: number; }>

Promise that resolves to { loadId } when data is loaded

Since

1.5.0

Example

typescript

const { loadId } = await element.addDataFromSource('json', { url: 'https://example.com/data.json' });

addEdge()

addEdge(edge, options?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:2582

Add a single edge to the graph.

Parameters

edge

AdHocData<string>

Edge data object to add

options?

AddEdgesOptions & QueueableOptions

The endpoint expressions, the repeat policy, and queue ordering

Returns

Promise<void>

Promise that resolves when edge is added

Since

1.5.0

Example

typescript

await element.addEdge({ source: 'a', target: 'b', weight: 1.5 });

addEdges()

addEdges(edges, options?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:2607

Add multiple edges to the graph.

Parameters

edges

AdHocData<string>[]

Array of edge data objects to add

options?

AddEdgesOptions & QueueableOptions

The endpoint expressions, the repeat policy, and queue ordering

Returns

Promise<void>

Promise that resolves when edges are added

Remarks

With no source and target named, the element reads source/target, then src/dst, then from/to, deciding once for the whole batch. A batch that answers none of them throws E_EDGE_ENDPOINTS_UNRESOLVED rather than adding a graph with no edges.

Since

1.5.0

Example

typescript

await element.addEdges([
  { source: 'a', target: 'b' },
  { source: 'b', target: 'c' }
]);

addListener()

addListener(type, callback): void

Defined in: graphty-element/src/graphty-element.ts:3250

Subscribe to graph events (alias for on).

Parameters

type

EventType

Event type to listen for

callback

EventCallbackType

Callback function

Returns

void

Since

1.5.0

addNode()

addNode(node, idPath?, options?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:2540

Add a single node to the graph.

Parameters

node

AdHocData<string>

Node data object to add

idPath?

string

Key to use for node ID (default: "id")

options?

QueueableOptions

Queue options for operation ordering

Returns

Promise<void>

Promise that resolves when node is added

Since

1.5.0

Example

typescript

await element.addNode({ id: 'node-1', label: 'First Node' });

addNodes()

addNodes(nodes, idPath?, options?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:2563

Add multiple nodes to the graph.

Parameters

nodes

AdHocData<string>[]

Array of node data objects to add

idPath?

string

Key to use for node IDs (default: "id")

options?

QueueableOptions

Queue options for operation ordering

Returns

Promise<void>

Promise that resolves when nodes are added

Since

1.5.0

Example

typescript

await element.addNodes([
  { id: 'a', label: 'Node A' },
  { id: 'b', label: 'Node B' }
]);

aiCommand()

aiCommand(message): Promise<ExecutionResult>

Defined in: graphty-element/src/graphty-element.ts:3753

Send a command to the AI assistant.

Parameters

message

string

The command message

Returns

Promise<ExecutionResult>

Promise with the execution result

Since

1.5.0

Example

typescript

const result = await element.aiCommand('Show me the most connected nodes');
console.log('AI response:', result.message);

applyCameraView()

applyCameraView(id, options?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:3372

Put the viewer where a named camera view says they should stand.

The route that frames a SUBSET: the element measures the box over whatever the scope covers and hands the smaller box to the view, so a view frames a selection with no code of its own.

Parameters

id

string

The view's name.

options?

object & CameraAnimationOptions

The scope to frame, the view's own options, and how to get there.

Returns

Promise<void>

A promise that resolves once the camera has arrived.

Since

1.5.0

Example

typescript

await element.applyCameraView('isometric', { scope: 'selection', animate: true });

applySuggestedStyles()

applySuggestedStyles(algorithmKey): boolean

Defined in: graphty-element/src/graphty-element.ts:3073

Paint what an algorithm's finished runs suggest be drawn from them.

Rarely needed: a run paints itself on its first completion, from the encoding its own result shape derives. This is the verb for a run started with { style: false }, or for putting a picture back after a reader cleared it. Applying twice replaces the layer bound to that run and channel rather than stacking a second one on it.

It starts the style edits and returns at once. To wait for the picture -- for a screenshot, an export or a test -- await waitForStableFrame() after the call: it settles only once every suggested layer is added, stacked in the order named and painted.

Parameters

algorithmKey

string | string[]

A catalogue key such as "degree", a 1.10 address such as "graphty:degree", or an array of either.

Returns

boolean

True if anything was applied, false when no finished run of that algorithm has anything per element to paint.

Since

1.5.0

Example

typescript

await element.run('degree', undefined, { style: false });
element.applySuggestedStyles('degree');
await element.waitForStableFrame();

asyncFirstUpdated()

asyncFirstUpdated(): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:526

Performs async initialization tasks for the graph, including event forwarding and graph initialization.

Returns

Promise<void>

batchOperations()

batchOperations(fn, label?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:3220

Make several changes one undoable step.

fn receives tx, the session as seen from inside the step: what it does through tx is recorded as one step once fn settles, and a throw rolls all of it back. A call on the element itself while fn runs is a step of its own, and logs a warning naming the tx verb to use instead. The same as session.transaction, with a default label.

Parameters

fn

(tx) => void | Promise<void>

The changes, made through tx.

label?

string

The step's label in the history.

Returns

Promise<void>

Once the step is recorded and drawn.

Since

1.5.0

Example

typescript

await element.batchOperations(async (tx) => {
  await tx.data.addNodes(nodes);
  await tx.data.addEdges(edges);
  await tx.layout.set("circular");
});

canCaptureScreenshot()

canCaptureScreenshot(options?): Promise<CapabilityCheck>

Defined in: graphty-element/src/graphty-element.ts:2118

Phase 6: Capability Check API Check if screenshot can be captured with given options. Available from Phase 6 onwards.

Parameters

options?

ScreenshotOptions

Screenshot options to validate

Returns

Promise<CapabilityCheck>

Promise<CapabilityCheck> - Result indicating whether screenshot is supported

Example

typescript

const el = document.querySelector('graphty-element');

// Check if 4x multiplier is supported
const check = await el.canCaptureScreenshot({ multiplier: 4 });
if (!check.supported) {
  alert(`Cannot capture: ${check.reason}`);
} else if (check.warnings) {
  console.warn('Warnings:', check.warnings);
}

cancelAiCommand()

cancelAiCommand(): void

Defined in: graphty-element/src/graphty-element.ts:3787

Cancel the current AI command.

Returns

void

Since

1.5.0

cancelAnimationCapture()

cancelAnimationCapture(): boolean

Defined in: graphty-element/src/graphty-element.ts:2189

Phase 7: Cancel Animation Capture Cancel an ongoing animation capture Available from Phase 7 onwards.

Returns

boolean

true if a capture was cancelled, false if no capture was in progress

Example

typescript

const el = document.querySelector("graphty-element");

// Start a 10-second capture
const capturePromise = el.captureAnimation({
  duration: 10000,
  fps: 30,
  cameraMode: 'stationary'
});

// Cancel after 2 seconds
setTimeout(() => {
  const wasCancelled = el.cancelAnimationCapture();
  console.log('Cancelled:', wasCancelled);
}, 2000);

// Handle the cancellation
try {
  await capturePromise;
} catch (error) {
  if (error.name === 'AnimationCancelledError') {
    console.log('Capture was cancelled by user');
  }
}

captureAnimation()

captureAnimation(options): Promise<AnimationResult>

Defined in: graphty-element/src/graphty-element.ts:2151

Phase 7: Video Capture API Capture an animation as a video (stationary or animated camera) Available from Phase 7 onwards.

Parameters

options

AnimationOptions

Animation capture options

Returns

Promise<AnimationResult>

Promise<AnimationResult> - Result with video blob and metadata

Example

typescript

const el = document.querySelector('graphty-element');

// Basic 5-second video
const result = await el.captureAnimation({
  duration: 5000,
  fps: 30,
  cameraMode: 'stationary'
});

// With download
const result = await el.captureAnimation({
  duration: 10000,
  fps: 60,
  cameraMode: 'stationary',
  download: true,
  downloadFilename: 'my-video.webm'
});

captureScreenshot()

captureScreenshot(options?): Promise<ScreenshotResult>

Defined in: graphty-element/src/graphty-element.ts:2095

Capture a screenshot of the current graph visualization.

Parameters

options?

ScreenshotOptions

Screenshot options (format, resolution, destinations, etc.)

Returns

Promise<ScreenshotResult>

Promise resolving to ScreenshotResult with blob and metadata

Example

typescript

const el = document.querySelector('graphty-element');

// Basic PNG screenshot
const result = await el.captureScreenshot();

// High-res JPEG with download
const result = await el.captureScreenshot({
  format: 'jpeg',
  multiplier: 2,
  destination: { download: true }
});

// Copy to clipboard
const result = await el.captureScreenshot({
  destination: { clipboard: true }
});

clearData()

clearData(): void

Defined in: graphty-element/src/graphty-element.ts:916

Removes every node and edge, as one undoable step. The data source goes with them, so the next dataSource / dataSourceConfig assignment loads afresh. A load still in flight is abandoned: it rejects with E_SUPERSEDED and adds nothing.

Returns

void

connectedCallback()

connectedCallback(): void

Defined in: graphty-element/src/graphty-element.ts:430

Called when the element is added to the DOM. Sets up the graph container and resize observer.

Returns

void

Overrides

LitElement.connectedCallback

createApiKeyManager()

static createApiKeyManager(): Promise<ApiKeyManager>

Defined in: graphty-element/src/graphty-element.ts:3838

Create an API key manager for persistent key storage. This is a static method - the manager is not tied to any specific graph instance.

Returns

Promise<ApiKeyManager>

The created API key manager

Since

1.5.0

Example

typescript

const keyManager = await Graphty.createApiKeyManager();
await keyManager.setKey('openai', 'your-api-key');

deselectNode()

deselectNode(): void

Defined in: graphty-element/src/graphty-element.ts:2973

Deselect the currently selected node.

Superseded by session.selection.clear(), which empties both sets. This clears the node half through the same model and keeps working.

Returns

void

Since

1.5.0

See

Graphty.select for the verb that replaces this one

Example

typescript

element.deselectNode();

disableAiControl()

disableAiControl(): void

Defined in: graphty-element/src/graphty-element.ts:3738

Disable AI control for the graph.

Returns

void

Since

1.5.0

disconnectedCallback()

disconnectedCallback(): void

Defined in: graphty-element/src/graphty-element.ts:600

Called when the element is removed from the DOM. Cleans up resources and shuts down the graph.

Returns

void

Overrides

LitElement.disconnectedCallback

downloadProject()

downloadProject(options?): Promise<ProjectSaveReport>

Defined in: graphty-element/src/graphty-element.ts:180

Save the project (session.project.save) and hand it to the reader as a download named <project name>.graphty.json. Lives on the element, not the session, because the session also runs in Node, where there is nothing to download to.

Parameters

options?

Omit<ProjectSaveOptions, "markSaved"> & object = {}

What to leave out, your own extensions, and the file's name.

Returns

Promise<ProjectSaveReport>

What the file holds.

Example

typescript

saveButton.onclick = () => element.downloadProject();

enableAiControl()

enableAiControl(config): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:3730

Enable AI control for the graph.

Parameters

config

AiManagerConfig

AI manager configuration

Returns

Promise<void>

Promise that resolves when AI is enabled

Since

1.5.0

Example

typescript

await element.enableAiControl({
  provider: { type: 'openai', apiKey: 'your-api-key' }
});

estimateAnimationCapture()

estimateAnimationCapture(options): Promise<CaptureEstimate>

Defined in: graphty-element/src/graphty-element.ts:2224

Phase 7: Animation Capture Estimation Estimate performance and potential issues for animation capture Available from Phase 7 onwards.

Parameters

options

Pick<AnimationOptions, "duration" | "fps" | "width" | "height">

Animation options to estimate

Returns

Promise<CaptureEstimate>

Promise<CaptureEstimate> - Estimation result

Example

typescript

const el = document.querySelector("graphty-element");

const estimate = await el.estimateAnimationCapture({
  duration: 5000,
  fps: 60,
  width: 3840,
  height: 2160
});

if (estimate.likelyToDropFrames) {
  console.warn(`May drop frames. Try ${estimate.recommendedFps}fps instead.`);
}

exitXR()

exitXR(): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:3324

Exit XR (VR/AR) mode.

Returns

Promise<void>

Promise that resolves when XR session ends

Since

1.5.0

Example

typescript

await element.exitXR();

exportCameraPresets()

exportCameraPresets(): Record<string, CameraState>

Defined in: graphty-element/src/graphty-element.ts:2504

Export user-defined presets as JSON Available from Phase 5 onwards

Returns

Record<string, CameraState>

Record of user-defined preset names to their state

exportGraph()

exportGraph(format, options?): Promise<ExportResult>

Defined in: graphty-element/src/graphty-element.ts:2799

Write the graph in a file format: data, current positions, algorithm results and the drawn colours and sizes, wherever the format has a place for them. lossNotes lists everything the format could not hold.

Parameters

format

FormatId

The format id, as session.catalog.formats() lists it ("graphml", "gexf", "json", "csv", "gml", "dot", "pajek", or a registered writer's id)

options?

ExportGraphOptions

The writer's options; { variant: "neo4j" } with "csv" writes a Neo4j admin-import file; { notes: true } adds the graphty.notes.count and graphty.notes.text columns (notes are left out by default, and reported as W_GRAPHTY_NOTES)

Returns

Promise<ExportResult>

The loss notes, and the document as text() or as UTF-8 bytes

Since

3.0.0

Example

typescript

const result = await element.exportGraph("graphml");
for (const note of result.lossNotes) console.warn(note.message);
download(await result.text());

firstUpdated()

firstUpdated(changedProperties): void

Defined in: graphty-element/src/graphty-element.ts:513

Called after the first update of the element. Initializes async graph setup.

Parameters

changedProperties

Map<string, unknown>

Map of changed property names to their previous values

Returns

void

Overrides

LitElement.firstUpdated

getAiManager()

getAiManager(): AiManager | null

Defined in: graphty-element/src/graphty-element.ts:3796

Get the AI manager.

Returns

AiManager | null

The AI manager, or null if not enabled

Since

1.5.0

getAiStatus()

getAiStatus(): AiStatus | null

Defined in: graphty-element/src/graphty-element.ts:3762

Get the current AI status.

Returns

AiStatus | null

The AI status, or null if AI is not enabled

Since

1.5.0

getApiKeyManager()

getApiKeyManager(): ApiKeyManager | null

Defined in: graphty-element/src/graphty-element.ts:3823

Get the API key manager.

Returns

ApiKeyManager | null

The API key manager, or null if not created

Since

1.5.0

getCameraController()

getCameraController(): CameraController | null

Defined in: graphty-element/src/graphty-element.ts:3670

Get the current camera controller.

Returns

CameraController | null

The camera controller, or null if not available

Since

1.5.0

getCameraPresets()

getCameraPresets(): Record<string, CameraState | { builtin: true; }>

Defined in: graphty-element/src/graphty-element.ts:2495

Get all camera presets (built-in + user-defined). Available from Phase 5 onwards.

Returns

Record<string, CameraState | { builtin: true; }>

Record of preset names to their state (built-in presets are marked)

getCameraState()

getCameraState(): CameraState

Defined in: graphty-element/src/graphty-element.ts:2315

Get current camera state (supports both 2D and 3D)

Returns

CameraState

Current camera state including position, target, zoom, etc.

getDataManager()

getDataManager(): DataManager

Defined in: graphty-element/src/graphty-element.ts:3571

Get the DataManager for advanced data operations.

Returns

DataManager

The DataManager instance

Since

1.5.0

getEdgeCount()

getEdgeCount(): number

Defined in: graphty-element/src/graphty-element.ts:2933

Get the number of edges in the graph.

Returns

number

Number of edges

Since

1.5.0

Example

typescript

console.log('Edge count:', element.getEdgeCount());

getEventManager()

getEventManager(): EventManager

Defined in: graphty-element/src/graphty-element.ts:3621

Get the EventManager for event operations.

Returns

EventManager

The EventManager instance

Since

1.5.0

getLayoutManager()

getLayoutManager(): LayoutManager

Defined in: graphty-element/src/graphty-element.ts:3580

Get the LayoutManager for advanced layout operations.

Returns

LayoutManager

The LayoutManager instance

Since

1.5.0

getMeshCache()

getMeshCache(): MeshCache

Defined in: graphty-element/src/graphty-element.ts:3639

Get the MeshCache for mesh management.

Returns

MeshCache

The MeshCache instance

Since

1.5.0

getNode()

getNode(nodeId): Node | undefined

Defined in: graphty-element/src/graphty-element.ts:2893

Get a node by its ID.

Parameters

nodeId

string | number

The ID of the node to get

Returns

Node | undefined

The node, or undefined if not found

Since

1.5.0

Example

typescript

const node = element.getNode('node-1');
if (node) {
  console.log('Node data:', node.data);
}

getNodeCount()

getNodeCount(): number

Defined in: graphty-element/src/graphty-element.ts:2920

Get the number of nodes in the graph.

Returns

number

Number of nodes

Since

1.5.0

Example

typescript

console.log('Node count:', element.getNodeCount());

getNodeMesh()

getNodeMesh(nodeId): AbstractMesh | null

Defined in: graphty-element/src/graphty-element.ts:3701

Get a node's mesh by its ID.

Parameters

nodeId

string

The ID of the node

Returns

AbstractMesh | null

The node's mesh, or null if not found

Since

1.5.0

Example

typescript

const mesh = element.getNodeMesh('node-1');
if (mesh) {
  console.log('Node position:', mesh.position);
}

getNodes()

getNodes(): Node[]

Defined in: graphty-element/src/graphty-element.ts:2907

Get all nodes in the graph.

Returns

Node[]

Array of all nodes

Since

1.5.0

Example

typescript

const nodes = element.getNodes();
console.log('Total nodes:', nodes.length);

getScene()

getScene(): Scene

Defined in: graphty-element/src/graphty-element.ts:3630

Get the Babylon.js Scene for advanced rendering operations.

Returns

Scene

The Babylon.js Scene

Since

1.5.0

getSelectedNode()

getSelectedNode(): Node | null

Defined in: graphty-element/src/graphty-element.ts:2994

Get the currently selected node.

Superseded by session.selection.nodes, which is the whole selection rather than the first node of it: this answers with one render object, and a selection now holds any number of nodes and edges.

Returns

Node | null

The first selected node, or null if no node is selected

Since

1.5.0

See

Graphty.select for the verb that replaces this one

Example

typescript

const selected = element.getSelectedNode();
if (selected) {
  console.log('Selected node:', selected.id);
}

getSelectionManager()

getSelectionManager(): SelectionManager

Defined in: graphty-element/src/graphty-element.ts:3612

Get the SelectionManager for selection operations.

Returns

SelectionManager

The SelectionManager instance

Since

1.5.0

getStatsManager()

getStatsManager(): StatsManager

Defined in: graphty-element/src/graphty-element.ts:3603

Get the StatsManager for performance statistics.

Returns

StatsManager

The StatsManager instance

Since

1.5.0

Example

typescript

const stats = element.getStatsManager();
console.log('FPS:', stats.getSnapshot().fps);

getStyles()

getStyles(): Styles

Defined in: graphty-element/src/graphty-element.ts:3562

Get the Styles object for direct style access.

Returns

Styles

The Styles object

Since

1.5.0

Example

typescript

const styles = element.getStyles();
console.log('Background color:', styles.config.graph.background.color);

getSuggestedStyles()

getSuggestedStyles(algorithmKey): readonly StyleSuggestion[]

Defined in: graphty-element/src/graphty-element.ts:3090

What an algorithm's finished runs suggest be drawn from them, without painting any of it.

Parameters

algorithmKey

string

A catalogue key such as "degree", or a 1.10 address such as "graphty:degree".

Returns

readonly StyleSuggestion[]

One suggestion per channel a run of that algorithm would paint, empty when it has finished no run or its result is read rather than painted.

Since

1.5.0

Example

typescript

const suggested = element.getSuggestedStyles('degree');
console.log(suggested.map((one) => one.channels).flat());

getUpdateManager()

getUpdateManager(): UpdateManager

Defined in: graphty-element/src/graphty-element.ts:3589

Get the UpdateManager for update scheduling.

Returns

UpdateManager

The UpdateManager instance

Since

1.5.0

getViewMode()

getViewMode(): "2d" | "3d" | "ar" | "vr"

Defined in: graphty-element/src/graphty-element.ts:2243

Get the current view mode.

Returns

"2d" | "3d" | "ar" | "vr"

The current view mode ("2d", "3d", "ar", or "vr")

Example

typescript

const mode = element.getViewMode();
console.log(`Current mode: ${mode}`); // "3d"

getVoiceAdapter()

getVoiceAdapter(): VoiceInputAdapter

Defined in: graphty-element/src/graphty-element.ts:3847

Get the voice input adapter.

Returns

VoiceInputAdapter

The voice input adapter

Since

1.5.0

getXRConfig()

getXRConfig(): XRConfig | undefined

Defined in: graphty-element/src/graphty-element.ts:3311

Get the current XR configuration.

Returns

XRConfig | undefined

The current XR configuration, or undefined if not set

Since

1.5.0

getXRSessionManager()

getXRSessionManager(): XRSessionManager | undefined

Defined in: graphty-element/src/graphty-element.ts:3710

Get the XR session manager.

Returns

XRSessionManager | undefined

The XR session manager, or undefined if not initialized

Since

1.5.0

importCameraPresets()

importCameraPresets(presets): void

Defined in: graphty-element/src/graphty-element.ts:2512

Import user-defined presets from JSON, as one undoable step

Parameters

presets

Record<string, CameraState>

Record of preset names to their state

Returns

void

is2D()

is2D(): boolean

Defined in: graphty-element/src/graphty-element.ts:3282

Check if the graph is in 2D mode.

Returns

boolean

True if in 2D mode, false otherwise

Since

1.5.0

Example

typescript

if (element.is2D()) {
  console.log('Graph is in 2D mode');
}

isAiEnabled()

isAiEnabled(): boolean

Defined in: graphty-element/src/graphty-element.ts:3805

Check if AI control is enabled.

Returns

boolean

True if AI is enabled

Since

1.5.0

isAnimationCapturing()

isAnimationCapturing(): boolean

Defined in: graphty-element/src/graphty-element.ts:2198

Phase 7: Check if animation capture is in progress Available from Phase 7 onwards.

Returns

boolean

true if a capture is currently running

isARSupported()

isARSupported(): Promise<boolean>

Defined in: graphty-element/src/graphty-element.ts:2303

Check if AR mode is supported on this device/browser. Returns true if WebXR is available and AR sessions are supported.

Use this to conditionally show/hide AR controls or display appropriate messaging to users.

Returns

Promise<boolean>

Promise resolving to true if AR is supported

Example

typescript

const arButton = document.querySelector('#ar-button');
const arSupported = await element.isARSupported();
if (!arSupported) {
  arButton.disabled = true;
  arButton.title = "AR not available on this device";
}

isNodeSelected()

isNodeSelected(nodeId): boolean

Defined in: graphty-element/src/graphty-element.ts:3013

Check if a specific node is selected.

Answered from the selection masks, so it is true for EVERY selected node rather than only the first one. Superseded by session.selection.has, which answers for an edge too.

Parameters

nodeId

string | number

The ID of the node to check

Returns

boolean

True if the node is selected, false otherwise

Since

1.5.0

Example

typescript

if (element.isNodeSelected('node-1')) {
  console.log('Node 1 is selected');
}

isPinned()

isPinned(id): boolean

Defined in: graphty-element/src/graphty-element.ts:2855

Whether one node is pinned.

One lookup, for the question a node inspector actually asks. Reading Graphty.pinnedNodes to answer it walks every node in the graph, which on a large one is a full pass per selection change.

Parameters

id

string | number

the node id, in either spelling an integer id may be written in

Returns

boolean

true when that node is pinned, false when it is not or when nothing answers to that id

Since

2.0.0

isRunning()

isRunning(): boolean

Defined in: graphty-element/src/graphty-element.ts:3426

Check if the graph is running.

Returns

boolean

True if the graph is running, false otherwise

Since

1.5.0

Example

typescript

if (element.isRunning()) {
  console.log('Graph is active');
}

isVoiceActive()

isVoiceActive(): boolean

Defined in: graphty-element/src/graphty-element.ts:3894

Check if voice input is active.

Returns

boolean

True if voice input is active

Since

1.5.0

isVRSupported()

isVRSupported(): Promise<boolean>

Defined in: graphty-element/src/graphty-element.ts:2282

Check if VR mode is supported on this device/browser. Returns true if WebXR is available and VR sessions are supported.

Use this to conditionally show/hide VR controls or display appropriate messaging to users.

Returns

Promise<boolean>

Promise resolving to true if VR is supported

Example

typescript

const vrButton = document.querySelector('#vr-button');
const vrSupported = await element.isVRSupported();
if (!vrSupported) {
  vrButton.disabled = true;
  vrButton.title = "VR not available on this device";
}

listenerCount()

listenerCount(): number

Defined in: graphty-element/src/graphty-element.ts:3263

Get the total number of registered event listeners.

Returns

number

Number of registered listeners

Since

1.5.0

Example

typescript

console.log('Active listeners:', element.listenerCount());

loadCameraPreset()

loadCameraPreset(name, options?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:2483

Load a camera preset (built-in or user-defined). Available from Phase 5 onwards.

Parameters

name

string

Name of the preset to load

options?

CameraAnimationOptions

Animation options

Returns

Promise<void>

Promise that resolves when preset is loaded

loadFromFile()

loadFromFile(file, options?): Promise<{ loadId: number; }>

Defined in: graphty-element/src/graphty-element.ts:2765

Load graph data from a File object.

Parameters

file

File

File object from file input

options?

Loading options

edgeSource?

string

Where the node an edge starts at is named in the record. Left unset, the element reads source, then src, then from

edgeTarget?

string

Where the node an edge ends at is named in the record

format?

string

Data format (e.g., "json", "csv", "graphml")

graphIndex?

number

Which graph to read, by position, from a file that holds several (listGraphs from @graphty/graphty-element/catalog lists them); the first by default

graphName?

string

Which graph to read, by name, from a file that holds several

nodeIdPath?

string

JMESPath for node ID field

replace?

boolean

Replace the graph with this data, but only once it has all parsed: a malformed or empty file rejects and leaves the current graph untouched

Returns

Promise<{ loadId: number; }>

Promise that resolves to { loadId }, the id every event about this load carries

Since

1.5.0

Example

typescript

const input = document.querySelector('input[type="file"]');
const file = input.files[0];
await element.loadFromFile(file);

loadFromUrl()

loadFromUrl(url, options?): Promise<{ loadId: number; }>

Defined in: graphty-element/src/graphty-element.ts:2727

Load graph data from a URL.

Parameters

url

string

URL to fetch graph data from

options?

Loading options

edgeSource?

string

Where the node an edge starts at is named in the record. Left unset, the element reads source, then src, then from

edgeTarget?

string

Where the node an edge ends at is named in the record

format?

string

Data format (e.g., "json", "csv", "graphml")

graphIndex?

number

Which graph to read, by position, from a file that holds several (listGraphs from @graphty/graphty-element/catalog lists them); the first by default

graphName?

string

Which graph to read, by name, from a file that holds several

nodeIdPath?

string

JMESPath for node ID field

replace?

boolean

Replace the graph with this data, but only once it has all parsed: a malformed or empty file rejects and leaves the current graph untouched

Returns

Promise<{ loadId: number; }>

Promise that resolves to { loadId }, the id every event about this load carries

Since

1.5.0

Example

typescript

await element.loadFromUrl('https://example.com/graph.json');

nodeScreenPosition()

nodeScreenPosition(nodeId): NodeScreenPosition | undefined

Defined in: graphty-element/src/graphty-element.ts:3503

Where a node is drawn on screen, and whether it can be seen there.

x and y are the node's centre in CSS pixels from the element's top-left corner, the same pixels worldToScreen returns: a click there selects the node. visible is false when the centre is outside the element, behind the camera, or the node is hidden by a filter. radius is how big the node is drawn, in pixels. Read it again after the camera or the layout moves; it is not a live value.

Parameters

nodeId

string | number

The node's id.

Returns

NodeScreenPosition | undefined

The position, or undefined for an id the graph does not hold.

Since

3.15.0

Example

typescript

const at = element.nodeScreenPosition("Valjean");
if (at?.visible) {
    marker.style.left = `${at.x - at.radius}px`;
    marker.style.top = `${at.y - at.radius}px`;
}

on()

on(type, callback): void

Defined in: graphty-element/src/graphty-element.ts:3240

Subscribe to graph events.

Parameters

type

EventType

Event type to listen for

callback

EventCallbackType

Callback function

Returns

void

Since

1.5.0

Example

typescript

element.on('graph-settled', () => {
  console.log('Graph layout has settled');
});

onAiStatusChange()

onAiStatusChange(callback): () => void

Defined in: graphty-element/src/graphty-element.ts:3779

Subscribe to AI status changes.

Parameters

callback

StatusChangeCallback

Callback function for status changes

Returns

Unsubscribe function

() => void

Since

1.5.0

Example

typescript

const unsubscribe = element.onAiStatusChange((status) => {
  console.log('AI state:', status.state);
});
// Later: unsubscribe();

pin()

pin(ids): void

Defined in: graphty-element/src/graphty-element.ts:2817

Pin nodes where they are, so no layout moves them again.

A pin survives a layout change, a 2D/3D switch and a template apply, which is what makes it worth having a door for: pinOnDrag is on by default, so every node a reader has ever dragged is pinned, and until now the only way back out was through element.graph.

Parameters

ids

string | number | readonly (string | number)[]

one node id, or several

Returns

void

Since

2.0.0

Example

typescript

element.pin("alice");
element.pin(["bob", "carol"]);

removeCameraPreset()

removeCameraPreset(name): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:2472

Forget a preset saved with saveCameraPreset or importCameraPresets. One undoable step.

Parameters

name

string

The name it was saved under

Returns

Promise<void>

Settles once the step is recorded; rejects with E_BAD_COMMAND when nothing is saved under the name

removeEdges()

removeEdges(edgeIds, options?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:2642

Remove edges from the graph, as one undoable step.

Parameters

edgeIds

string[]

The element-assigned edge ids

options?

QueueableOptions

Queue options for operation ordering

Returns

Promise<void>

Promise that resolves when the edges are removed

Example

typescript

await element.removeEdges(['0', '3']);

removeNodes()

removeNodes(nodeIds, options?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:2625

Remove nodes from the graph, and every edge attached to one, as one undoable step.

Parameters

nodeIds

(string | number)[]

Array of node IDs to remove

options?

QueueableOptions

Queue options for operation ordering

Returns

Promise<void>

Promise that resolves when nodes are removed

Since

1.5.0

Example

typescript

await element.removeNodes(['node-1', 'node-2']);

render()

render(): Element

Defined in: graphty-element/src/graphty-element.ts:593

Renders the graph container element.

Returns

Element

The graph container element

Overrides

LitElement.render

resetCamera()

resetCamera(options?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:2394

Reset camera to default position

Parameters

options?

CameraAnimationOptions

Animation options

Returns

Promise<void>

Promise that resolves when the reset is applied (or animation completes)

resolveCameraPreset()

resolveCameraPreset(preset, options?): CameraState

Defined in: graphty-element/src/graphty-element.ts:3349

Work out where a named camera view would put the viewer, without moving anything.

The name may be one the element ships, one a third party registered with registerCameraView, or a snapshot saved with saveCameraPreset.

Parameters

preset

string

The view's name, for example "fitToGraph" or "topView".

options?

What to frame and how to configure the view.

nodes?

Iterable<string | number, any, any>

The nodes to measure the box over. Absent frames the whole graph.

params?

Readonly<Record<string, unknown>>

The view's own options, filled in from its declared defaults.

Returns

CameraState

The resolved camera state.

Since

1.5.0

Example

typescript

const state = element.resolveCameraPreset('topView');
await element.setCameraState(state, { animate: true });

retryLastAiCommand()

retryLastAiCommand(): Promise<ExecutionResult>

Defined in: graphty-element/src/graphty-element.ts:3814

Retry the last AI command that failed.

Returns

Promise<ExecutionResult>

Promise with the execution result

Since

1.5.0

run()

run(algorithm, params?, options?): Run

Defined in: graphty-element/src/graphty-element.ts:217

Start an algorithm and get back something a caller can watch, stop and read.

Forwarded from the session, so the first graph needs no session: a page with a tag and three lines of script can run an analysis, await the result and read its ranking without importing a module or learning what a session is.

Parameters

algorithm

AlgorithmKey

Which algorithm to run, by its catalogue key such as "betweenness".

params?

Record<string, unknown>

Its parameters, as the catalogue declares them.

options?

StartOptions

The scope, the seed, the id, the signal and the progress handler.

Returns

Run

The run. Awaiting it gives the result; every encoding helper takes the run itself.

Since

2.0.0

Example

html

<graphty-element id="g" sample="karate"></graphty-element>
<script type="module">
  const g = document.getElementById("g");
  const run = g.run("betweenness");
  g.addEventListener("graphty-run-change", (e) => bar.value = e.detail.run.status);
  console.log((await run).summary().top);
</script>

runAlgorithm()

runAlgorithm(namespace, type, options?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:3040

Run a graph algorithm.

Parameters

namespace

string

Algorithm namespace (e.g., "graphty")

type

string

Algorithm type (e.g., "degree", "pagerank")

options?

RunAlgorithmOptions

Algorithm options

Returns

Promise<void>

Promise that resolves when algorithm completes

Deprecated

Since 2.0. Use run(), which returns a Run: the result is on the object the call hands back, the work reports progress and can be cancelled, and graphty-run-change follows it from the DOM. This method still works and is expressed in terms of run. (An inline link cannot appear in this tag: the custom-elements-manifest build serialises a raw compiler node for one and fails on the cycle inside it.)

Since

1.5.0

See

Graphty.run for the verb that replaces this one

Example

typescript

await element.runAlgorithm('graphty', 'degree');
await element.runAlgorithm('graphty', 'pagerank', { applySuggestedStyles: true });

saveCameraPreset()

saveCameraPreset(name, camera?): void

Defined in: graphty-element/src/graphty-element.ts:2462

Save the current camera state as a named preset. One undoable step.

Parameters

name

string

Name for the preset

camera?

CameraState

The camera state to save instead of where the camera is now

Returns

void

Throws

A GraphtyError with E_PROTECTED when a camera view already answers to the name.

screenToWorld()

screenToWorld(screenPos): { x: number; y: number; z: number; } | null

Defined in: graphty-element/src/graphty-element.ts:3522

Convert screen coordinates to world coordinates.

Parameters

screenPos

Position in screen space

x

number

X pixel coordinate

y

number

Y pixel coordinate

Returns

{ x: number; y: number; z: number; } | null

Position in world space, or null if not found

Since

1.5.0

Example

typescript

const worldPos = element.screenToWorld({ x: 100, y: 200 });
if (worldPos) {
  console.log('World position:', worldPos);
}

select()

select(target, op?): Promise<SelectionDelta>

Defined in: graphty-element/src/graphty-element.ts:245

Change what is selected.

Forwarded from the session, so the first graph needs no session: a page with a tag and two lines of script can select a list of ids, add to that selection, invert it or take the top twenty of a finished run, without importing a module.

One selection per graph, shared by every surface reading it. The five operations are "replace" (the default, and what a click does), "add", "remove", "toggle" and "intersect".

Parameters

target

SelectionTarget

What to select: ids, a pasted list, a neighbourhood, a scope, a run's top n.

op?

SelectionOp

What to do with it; replaces the selection when absent.

Returns

Promise<SelectionDelta>

What changed: what joined, what left, and what the selection holds now.

Since

2.0.0

Example

html

<graphty-element id="g" sample="karate"></graphty-element>
<script type="module">
  const g = document.getElementById("g");
  await g.select({ nodes: [1, 2, 3] });
  g.addEventListener("graphty-selection-change", (e) => count.textContent = e.detail.nodes);
</script>

selectNode()

selectNode(nodeId): boolean

Defined in: graphty-element/src/graphty-element.ts:2957

Select a node by its ID, replacing whatever was selected before.

Superseded by Graphty.select, which takes the same five set operations over every way of naming elements. This is select({ nodes: [nodeId] }) with a lookup in front of it, and it keeps working because it is what a click has always done.

Parameters

nodeId

string | number

The ID of the node to select

Returns

boolean

True if the node was found and selected, false otherwise

Since

1.5.0

Example

typescript

if (element.selectNode('node-1')) {
  console.log('Node selected');
}

setCameraMode()

setCameraMode(mode, options?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:3658

Activate the camera of the current view mode: "orbit" in 3D, "2d" in 2D.

Parameters

mode

CameraKey

Camera mode key

options?

QueueableOptions

Queue options

Returns

Promise<void>

Promise that resolves when camera mode is set

Remarks

A camera from the other view mode is refused; change view mode with viewMode or setViewMode, which switches the camera with it.

Throws

A GraphtyError with E_BAD_COMMAND when the camera belongs to another view mode

Since

1.5.0

setCameraPan()

setCameraPan(pan, options?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:2382

Set camera pan (2D)

Parameters

pan

Pan position {x, y}

x

number

X offset

y

number

Y offset

options?

CameraAnimationOptions

Animation options

Returns

Promise<void>

Promise that resolves when the pan is applied (or animation completes)

setCameraPosition()

setCameraPosition(position, options?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:2341

Set camera position (3D)

Parameters

position

Target position {x, y, z}

x

number

X coordinate

y

number

Y coordinate

z

number

Z coordinate

options?

CameraAnimationOptions

Animation options

Returns

Promise<void>

Promise that resolves when the position is applied (or animation completes)

setCameraState()

setCameraState(state, options?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:2325

Set camera state (supports both 2D and 3D)

Parameters

state

CameraState | { preset: string; }

Camera state to apply or preset name

options?

CameraAnimationOptions

Animation options

Returns

Promise<void>

Promise that resolves when the camera state is applied (or animation completes)

setCameraTarget()

setCameraTarget(target, options?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:2357

Set camera target (3D)

Parameters

target

Target point to look at {x, y, z}

x

number

X coordinate

y

number

Y coordinate

z

number

Z coordinate

options?

CameraAnimationOptions

Animation options

Returns

Promise<void>

Promise that resolves when the target is applied (or animation completes)

setCameraZoom()

setCameraZoom(zoom, options?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:2370

Set camera zoom (2D)

Parameters

zoom

number

Zoom level

options?

CameraAnimationOptions

Animation options

Returns

Promise<void>

Promise that resolves when the zoom is applied (or animation completes)

setData()

setData(data): void

Defined in: graphty-element/src/graphty-element.ts:3544

Set graph data (both nodes and edges) at once.

Parameters

data

Object containing nodes and edges arrays

edges

Record<string, unknown>[]

Array of edge data objects

nodes

Record<string, unknown>[]

Array of node data objects

Returns

void

Since

1.5.0

Example

typescript

element.setData({
  nodes: [{ id: 'a' }, { id: 'b' }],
  edges: [{ source: 'a', target: 'b' }]
});

setDefaultPalettes()

setDefaultPalettes(palettes, options?): void

Defined in: graphty-element/src/graphty-element.ts:268

Choose the palette a colour binding uses when it names none, one per palette kind.

Forwarded from session.styles.setDefaultPalettes. A default is resolved when a style layer is written, so a saved document always names a concrete palette: call it before loading data or adding layers. A later call warns and names the layers that keep the previous default, or with reapply: true repaints them with the new one.

Parameters

palettes

DefaultPalettes

A palette id per kind: categorical, sequential and diverging.

options?

How a late call treats the layers already written.

reapply?

boolean

True re-resolves the layers that took the previous default.

Returns

void

Since

2.7.0

Example

import { definePalette } from "@graphty/graphty-element/extend";

definePalette({ id: "acme-brand", kind: "categorical", colors: ["#0B1D51", "#1B7F79"] });
element.setDefaultPalettes({ categorical: "acme-brand" });

setInputEnabled()

setInputEnabled(enabled): void

Defined in: graphty-element/src/graphty-element.ts:3395

Enable or disable user input.

Parameters

enabled

boolean

Whether input should be enabled

Returns

void

Since

1.5.0

Example

typescript

element.setInputEnabled(false); // Disable interaction

setLayout()

setLayout(type, opts?, options?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:3117

Set the layout algorithm.

Takes a layout id from catalog.layouts() (such as "force"), which runs that layout's default engine, or a registered engine name (such as "ngraph").

Parameters

type

string

Layout id or engine name

opts?

object

Layout-specific options

options?

SetLayoutOptions

Queue options, and scope: what the layout runs over. A live simulation moves the scope's nodes and holds the rest; absent keeps the scope already set, and "graph" clears it. See Graphty.layoutScope.

Returns

Promise<void>

Promise that resolves when layout is initialized

Since

1.5.0

Example

typescript

await element.setLayout('circular', { radius: 5 });
await element.setLayout('force'); // the catalogue id; runs the "ngraph" engine
await element.setLayout('ngraph', { springLength: 100 });

setRenderSettings()

setRenderSettings(settings, options?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:3681

Set render settings for advanced rendering control.

Parameters

settings

Record<string, unknown>

Render settings object

options?

QueueableOptions

Queue options

Returns

Promise<void>

Promise that resolves when settings are applied

Since

1.5.0

setRunning()

setRunning(running): void

Defined in: graphty-element/src/graphty-element.ts:3452

Play or pause the layout.

setRunning(true) on a layout that has already settled restarts it, so "play" is something the reader can see; setRunning(false) stops the per-frame stepping and nothing else -- work already handed to an accelerator lands, the scene keeps rendering, and the camera, picking and styling stay live. There is no event for this: isRunning() reports the state and graph-settled reports the arrangement coming to rest.

A pause holds until setRunning(true). Loading more nodes, a freeze, an accelerator attaching, setting another layout and dragging a node all still happen -- new nodes are placed and a dragged node moves -- but none of them resumes the layout. To tell a paused, half-finished arrangement from a converged one, read getLayoutManager().isPaused and isSettled.

Parameters

running

boolean

True to run the layout, false to pause it.

Returns

void

Since

2.0.0

Example

typescript

element.setRunning(false); // pause
element.setRunning(true); // play again, from where it stopped

setViewMode()

setViewMode(mode): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:2261

Set the view mode. Changes the rendering dimension and camera system.

Parameters

mode

"2d" | "3d" | "ar" | "vr"

The view mode to set ("2d", "3d", "ar", or "vr")

Returns

Promise<void>

Promise that resolves when the mode switch is complete

Example

typescript

// Switch to 2D orthographic view
await element.setViewMode("2d");

// Switch to VR mode
await element.setViewMode("vr");

setXRConfig()

setXRConfig(config): void

Defined in: graphty-element/src/graphty-element.ts:3302

Set XR (VR/AR) configuration.

Parameters

config

XR configuration

Type Literal

XR configuration

ar?

{ enabled?: boolean; optionalFeatures?: string[]; referenceSpaceType?: "unbounded" | "local" | "local-floor" | "bounded-floor"; } = ...

AR mode configuration

ar.enabled?

boolean = ...

Enable AR mode

Default

true

ar.optionalFeatures?

string[] = ...

Optional WebXR features to request

Default

["hit-test"]

ar.referenceSpaceType?

"unbounded" | "local" | "local-floor" | "bounded-floor" = ...

WebXR reference space type for AR

Default

"local-floor"

enabled?

boolean = ...

Enable/disable XR functionality globally

Default

true

input?

{ controllers?: boolean; enableZAmplificationInDesktop?: boolean; handTracking?: boolean; nearInteraction?: boolean; physics?: boolean; zAxisAmplification?: number; } = ...

XR input and interaction configuration

input.controllers?

boolean = ...

Enable motion controllers

Default

true

input.enableZAmplificationInDesktop?

boolean = ...

Enable Z-axis amplification in desktop mode Normally amplification only applies in XR mode, but this can enable it for desktop too

Default

false

input.handTracking?

boolean = ...

Enable hand tracking

Default

true

input.nearInteraction?

boolean = ...

Enable near interaction (touch/grab)

Default

true

input.physics?

boolean = ...

Enable physics-based interactions

Default

false

input.zAxisAmplification?

number = ...

Z-axis movement amplification factor Multiplies Z-axis delta during drag to make depth manipulation practical in VR

Example: With zAxisAmplification = 10, moving controller 0.1 units in Z will move the node 1.0 units in Z

Default

10.0

teleportation?

{ easeTime?: number; enabled?: boolean; } = ...

Teleportation configuration

teleportation.easeTime?

number = ...

Teleportation animation duration (ms)

Default

teleportation.enabled?

boolean = ...

Enable teleportation system

Default

false

ui?

{ enabled?: boolean; position?: "top-right" | "top-left" | "bottom-left" | "bottom-right"; showAvailabilityWarning?: boolean; unavailableMessageDuration?: number; } = ...

XR UI button configuration

ui.enabled?

boolean = ...

Show VR/AR entry buttons

Default

true

ui.position?

"top-right" | "top-left" | "bottom-left" | "bottom-right" = ...

Button position on screen

Default

"bottom-right"

ui.showAvailabilityWarning?

boolean = ...

Show "VR / AR NOT AVAILABLE" warning when XR is not available When false, no message is displayed if AR/VR aren't available

Default

false

ui.unavailableMessageDuration?

number = ...

Duration to show "not available" message (ms)

Default

vr?

{ enabled?: boolean; optionalFeatures?: string[]; referenceSpaceType?: "unbounded" | "local" | "local-floor" | "bounded-floor"; } = ...

VR mode configuration

vr.enabled?

boolean = ...

Enable VR mode

Default

true

vr.optionalFeatures?

string[] = ...

Optional WebXR features to request

Default

[]

vr.referenceSpaceType?

"unbounded" | "local" | "local-floor" | "bounded-floor" = ...

WebXR reference space type for VR

"local": Seated/standing experience, no room bounds
"local-floor": Floor-level origin, no room bounds
"bounded-floor": Room-scale with bounds
"unbounded": Unlimited tracking space

Default

"local-floor"

undefined

Returns

void

Since

1.5.0

Example

typescript

element.setXRConfig({
  enabled: true,
  ui: { enabled: true, position: 'bottom-right' }
});

shutdown()

shutdown(): void

Defined in: graphty-element/src/graphty-element.ts:3411

Shut down the graph and release resources.

Returns

void

Since

1.5.0

Example

typescript

element.shutdown();

startVoiceInput()

startVoiceInput(options?): boolean

Defined in: graphty-element/src/graphty-element.ts:3871

Start voice input for AI commands.

Parameters

options?

Voice input options

continuous?

boolean

Whether to continue listening after results

interimResults?

boolean

Whether to report interim (non-final) results

language?

string

Language code (e.g., "en-US")

onStart?

(started, error?) => void

Callback when voice input starts

onTranscript?

(text, isFinal) => void

Callback for transcript results

Returns

boolean

True if voice input started successfully

Since

1.5.0

Example

typescript

const started = element.startVoiceInput({
  onTranscript: (text, isFinal) => {
    if (isFinal) element.aiCommand(text);
  },
  onStart: (started) => console.log('Voice started:', started)
});

stopVoiceInput()

stopVoiceInput(): void

Defined in: graphty-element/src/graphty-element.ts:3885

Stop voice input.

Returns

void

Since

1.5.0

unpin()

unpin(ids): void

Defined in: graphty-element/src/graphty-element.ts:2826

Release nodes a reader or a drag pinned, so the layout arranges them again.

Parameters

ids

string | number | readonly (string | number)[]

one node id, or several

Returns

void

Since

2.0.0

updateEdges()

updateEdges(updates, options?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:2677

Update edge data, as one undoable step. Keys not named are kept; an id the graph does not hold is skipped.

Parameters

updates

object[]

The edge id and the new values of each edge

options?

QueueableOptions

Queue options for operation ordering

Returns

Promise<void>

Promise that resolves when the edges are updated

Example

typescript

await element.updateEdges([{ id: "0", label: "knows" }]);

updateNodes()

updateNodes(updates, options?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:2659

Update node data, as one undoable step.

Parameters

updates

object[]

Array of update objects with id and properties to update

options?

QueueableOptions

Queue options for operation ordering

Returns

Promise<void>

Promise that resolves when nodes are updated

Since

1.5.0

Example

typescript

await element.updateNodes([
  { id: 'node-1', label: 'Updated Label' }
]);

waitForSettled()

waitForSettled(): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:3157

Wait for every queued operation to finish.

The QUEUE only -- data loading, layout changes, algorithm runs. The layout may still be running and the camera may still be moving when this resolves. For a picture that will not change again, wait for Graphty.waitForStableFrame.

Returns

Promise<void>

Promise that resolves when all operations are complete

Since

1.5.0

Example

typescript

await element.addNodes(nodes);
await element.waitForSettled();
console.log('Graph is ready');

waitForStableFrame()

waitForStableFrame(options?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:3183

Wait until the picture is final.

Resolves once every queued operation has run, the layout has converged, the camera has finished framing what it arrived at, a frame has been drawn showing that, and that frame's Graphty.nodeLabelCounts have been announced (graphty-label-change, when they changed), so a page that shows the counts shows the final ones. This is what a screenshot, a video frame or a visual regression snapshot needs: the graph-settled event fires one update pass earlier, before the final framing has even been requested, so a picture taken on that event is a picture of a camera still in motion.

It rejects, naming what was still moving, rather than handing back a moving picture.

Parameters

options?

How the wait is bounded.

timeoutMs?

number

How long to wait before giving up; 30 seconds by default.

Returns

Promise<void>

Promise that resolves once a frame of the finished picture has been drawn.

Throws

Error when the picture is still changing when the timeout expires.

Since

2.0.0

Example

typescript

await element.waitForStableFrame();
const shot = await element.captureScreenshot();

worldToScreen()

worldToScreen(worldPos): object

Defined in: graphty-element/src/graphty-element.ts:3479

Convert world coordinates to screen coordinates.

Parameters

worldPos

Position in world space

x

number

X coordinate in world space

y

number

Y coordinate in world space

z

number

Z coordinate in world space

Returns

object

Position in screen space

x

x: number

y

y: number

Since

1.5.0

Example

typescript

const node = element.getNode('node-1');
const screenPos = element.worldToScreen({
  x: node.mesh.position.x,
  y: node.mesh.position.y,
  z: node.mesh.position.z
});
// Position a tooltip at screenPos

zoomStep()

zoomStep(direction, options?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:2411

Move the camera one step nearer or further, the way a Zoom in or Zoom out button does. One step is a factor of 1.25 on the 3D camera's distance or the 2D camera's zoom. Not an undoable step: the camera is view state.

Parameters

direction

"out" | "in"

"in" to approach, "out" to withdraw.

options?

CameraAnimationOptions

Animation options

Returns

Promise<void>

Promise that resolves when the camera has moved

Since

3.0.0

Example

typescript

await element.zoomStep("out");

zoomToFit()

zoomToFit(): void

Defined in: graphty-element/src/graphty-element.ts:3138

Zoom the camera to fit all nodes in view.

Returns

void

Since

1.5.0

Example

typescript

await element.waitForSettled();
element.zoomToFit();

zoomToNodes()

zoomToNodes(nodeIds, options?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:2449

Frame the given nodes: the camera moves so the box around them fills the view.

Works the same in 2D and 3D. Ids that name no node are skipped; when none of them names a node the camera does not move. The camera is view state, so this is not an undoable step.

Parameters

nodeIds

string | number | readonly (string | number)[]

One node id, or several.

options?

CameraAnimationOptions

Optional animation configuration.

Returns

Promise<void>

Promise that resolves when the camera has moved.

Since

3.3.0

Example

typescript

await element.zoomToNodes(["n1", "n2"], { animate: true });

zoomToSelection()

zoomToSelection(options?): Promise<void>

Defined in: graphty-element/src/graphty-element.ts:2431

Center the camera on the selection -- its nodes and the ends of its edges -- keeping where it stands. With nothing selected the camera does not move. Not an undoable step: the camera is view state.

Parameters

options?

CameraAnimationOptions

Animation options

Returns

Promise<void>

Promise that resolves when the camera has moved

Since

3.0.0

Example

typescript

await element.session.selection.apply({ nodes: ["n1"] });
await element.zoomToSelection();

Loading

Other

Other

Reports and errors

Loading

Other

Reports and errors

Saving

Writing a format

Loading

Other

Reports and errors

Class: Graphty ​

Extends ​

Constructors ​

Constructor ​

Returns ​

Overrides ​

Properties ​

styles ​

Overrides ​

Accessors ​

acceleration ​

Get Signature ​

Remarks ​

Since ​

Example ​

Returns ​

Set Signature ​

Parameters ​

value ​

Returns ​

accelerationMinNodes ​

Get Signature ​

Since ​

Example ​

Returns ​

Set Signature ​

Parameters ​

value ​

Returns ​

algorithmsOnLoad ​

Get Signature ​

Remarks ​

Since ​

Example ​

Returns ​

Set Signature ​

Throws ​

Parameters ​

value ​

Returns ​

autoFrame ​

Get Signature ​

Remarks ​

Since ​

Example ​

Returns ​

Set Signature ​

Parameters ​

value ​

Returns ​

background ​

Get Signature ​

Remarks ​

Since ​

Examples ​

Returns ​

Set Signature ​

Parameters ​

value ​

Returns ​

dataSource ​

Get Signature ​

Returns ​

Set Signature ​

Parameters ​

value ​

Returns ​

dataSourceConfig ​

Class: Graphty

Extends

Constructors

Constructor

Returns

Overrides

Properties

styles

Overrides

Accessors

acceleration

Get Signature

Remarks

Since

Example

Returns

Set Signature

Parameters

value

Returns

accelerationMinNodes

Get Signature

Since

Example

Returns

Set Signature

Parameters

value

Returns

algorithmsOnLoad

Get Signature

Remarks

Since

Example

Returns

Set Signature

Throws

Parameters

value

Returns

autoFrame

Get Signature

Remarks

Since

Example

Returns

Set Signature

Parameters

value

Returns

background

Get Signature

Remarks

Since

Examples

Returns

Set Signature

Parameters

value

Returns

dataSource

Get Signature

Returns

Set Signature

Parameters

value

Returns

dataSourceConfig

Get Signature

Returns

Set Signature

Parameters

value

Returns

directed

Get Signature

Since

Example

Returns

Set Signature