Search notes:

Cytoscape.js

Cytoscape.js is an open-source JavaScript library for graph analysis and visualisation.

Note, there is also Cytoscape 3 with a completely independent code base from Cytoscape.js. : Graph theory usecases by Cytoscape.js include

Cytoscape instance attributes

let cy = cytoscape({
  container: …
  …
});

Attribute name		Default value
`container`	The empty `<div>` in which the graph is rendered. Can be left empty in headless mode.	undefined
`elements`	The array of nodes and elements as plain objects. (A promise can be used also)	`[ /* ... */ ]`
`style`		`[ /* ... */ ]`
`layout`		`{ name: 'grid' /* , … */ }`
`data`	Data that belongs to the graph	`{ /* … */ }`
`zoom`		1
`pan`		`{ x: 0, y: 0 }`
`minZoom`		1e-50
`maxZoom`		1e50
`zoomingEnabled`		true
`userZoomingEnabled`		true
`panningEnabled`		true
`userPanningEnabled`		true
`boxSelectionEnabled`		true
`selectionType`		'single'
`touchTapThreshold`		8
`desktopTapThreshold`		4
`autolock`		false
`autoungrabify`		false
`autounselectify`		false
`multiClickDebounceTime`		250
`headless`		false
`styleEnabled`		true
`hideEdgesOnViewport`		false
`textureOnViewport`		false
`motionBlur`		false
`motionBlurOpacity`		0.2
`wheelSensitivity`		1
`pixelRatio`		'auto'

Attributes of nodes and elements seem to be

`data`	JSON serializable data. The member `id` is mandatory. The (optional) value `parent` points to the id of a «parent» node (in compounds).
`position`	The model position. A JSON object with members `x` and `y`.
`renderedPosition`	The rendered position. Alternative to `position`.
`source`, `target`	For edges: the `id` value of the two nodes connected by the edge.
`classes`	An array or comma separated string
`group`	Always `nodes` for nodes, and `edges` for edges? (Value can be inferred from absence or presence of `source` and `target`.
`selected`	A boolean
`grabbable`	A boolean. If true, the model position of the node can be moved with the mouse. Compare with `pannable`
`pannable`	A boolean. If true, dragging the node pans the entire scene. Compare with `grabbable`.
`scratch`	Uninterpreted(?), so called scratch-pad data.
`style`	Should not be used

A node's position is the coordinate of its body's center.

Cytoscape.js distinguishes between

Model position	A position that remains constant (i. e. is not influenced by zooming and panning)
Rendered position	A position that is relative to the viewport (i. e. changes with zooming and panning)

The model position is equal to the rendered position at zoom=1 and pan=(0,0).

A node's model position can either be

A compound node is a node that has one or more child nodes, thus forming a tree like hierarchy of nodes.

The position and size of a compound node is inferred by the position and size of its child nodes.

Compound nodes are in most cases treated like normal nodes.