Cytoscape.js

Cytoscape.js is a highly optimized, pure JavaScript graph library designed for both front-facing applications and developer use cases. Key capabilities include:

• Graph Manipulation & Querying: Supports selectors for terse filtering and graph querying, and set theory operations.
• Visuals & Layout: Uses layouts for automatic or manual node positioning and stylesheets to separate presentation from data in a rendering-agnostic manner.
• Algorithms: Includes built-in graph theory algorithms ranging from BFS to PageRank.
• Interactivity: Provides abstracted and unified touch events with built-in support for standard gestures on both desktop and touch devices. Elements and the viewport are animatable.
• Data Handling: Fully serializable and deserializable via JSON.
• Extensibility: Fully extendable with support for first-party extensions and autoscaffolding for new extensions.
• Programming Patterns: Supports functional programming patterns and provides a chainable API for convenience.

In Cytoscape.js, bezier edges are composed of one or more quadratic bezier curves. Each curve is defined by three points: a start point (P0), a center control point (P1), and an end point (P2).

When using functions to retrieve control points, Cytoscape.js specifically returns the center control point (P1). Other points, such as the endpoints, can be retrieved using other methods like edge.targetEndpoint().

The number of control points returned depends on the curve-style:

• curve-style: bezier (simple edge): Returns 1 point.
• curve-style: bezier (loop): Returns 2 points.
• curve-style: unbundled-bezier: Returns n points, where $n$ is determined by the control-point-distances and control-point-weights settings.

Key Behaviors

• Absolute Positions: Even if control points are defined relatively in your CSS, the returned values are the absolute model positions.
• Directionality: Points are returned in the order of the source-to-target direction.
• Bundled Beziers: This logic applies to the bezier curves within a bundle, but does not apply to the straight-line edge in the middle of a bundle.
• Unbundled Bezier Join Points: For unbundled beziers, the point where two successive curves meet is the midpoint (mean) of the two control points. This join point acts as the end point (P2) for the first curve and the start point (P0) for the second curve.

To prevent memory leaks when styles (like fonts) change dynamically, Cytoscape.js implements a two-part garbage collection (GC) and compaction algorithm:

1. Style Key Invalidation

• A listener is registered via r.onUpdateEleCalcs().
• Elements are passed to AtlasManager.invalidate(), which identifies old Style Keys no longer in use.
• Note: For nodes with asynchronous background images, use the forceRedraw option to ensure the texture is recreated once the image loads.

2. Garbage Collection & Compaction

• GC is triggered by a timer and runs on the next frame if the flag is set.
• If an Atlas contains marked keys and the OffscreenCanvas is available: A new Atlas is created, valid textures are copied over (compacting them to remove gaps), and the old one is replaced.
• If the OffscreenCanvas has been freed: The Atlas is removed from the AtlasCollection, and the style key mappings are cleared. Unmapped keys will be redrawn on the next frame.

Cytoscape.js supports three ways to define styles during initialization. Note that specificity rules are ignored: for any given style property, the last matching selector wins.

1. String format: A CSS-like string. This is useful for styles loaded from an external server via AJAX. Mandatory: Trailing semicolons are required for every property except the last one.
2. Plain JSON format: An array of objects where each object contains a selector and a style object. You can also use the key css instead of style.
3. Function format: Uses the cytoscape.stylesheet() builder API for a chained, programmatic approach. You can also use .css() instead of .style() in the builder.

Use the JSON or Function formats if you need to use dynamic function values for properties.

// String format
cytoscape({
  container: document.getElementById('cy'),
  style: 'node { background-color: green; }'
});

// Plain JSON format
cytoscape({
  container: document.getElementById('cy'),
  style: [
    {
      selector: 'node',
      style: {
        'background-color': 'red'
      }
    }
  ]
});

// Function format
cytoscape({
  container: document.getElementById('cy'),
  style: cytoscape.stylesheet()
    .selector('node')
      .style({
        'background-color': 'blue'
      })
});