Skip to content

upsetjs/cytoscape.js-bubblesets

Repository files navigation

Cytoscape.js BubbleSets Plugin

NPM Package Github Actions Cytoscape Plugin

A Cytoscape.js plugin for rendering Bubblesets.

Euler Example

Install

npm install cytoscape cytoscape-layers cytoscape-bubblesets

Usage

see Samples on Github

or at this Open in CodePen

import cytoscape from 'cytoscape';
import BubbleSets from 'cytoscape-bubblesets';
cytoscape.use(BubbleSets);

const cy = cytoscape({
  container: document.getElementById('app'),
  elements: [
    { data: { id: 'a' } },
    { data: { id: 'b' } },
    {
      data: {
        id: 'ab',
        source: 'a',
        target: 'b',
      },
    },
  ],
});
cy.ready(() => {
  const bb = cy.bubbleSets();
  bb.addPath(cy.nodes(), cy.edges(), null);
});

image

Alternative without registration

import cytoscape from 'cytoscape';
import { BubbleSetsPlugin } from 'cytoscape-bubblesets';

const cy = cytoscape({
  container: document.getElementById('app'),
  elements: [
    { data: { id: 'a' } },
    { data: { id: 'b' } },
    {
      data: {
        id: 'ab',
        source: 'a',
        target: 'b',
      },
    },
  ],
});
cy.ready(() => {
  const bb = new BubbleSetsPlugin(cy);
  bb.addPath(cy.nodes(), cy.edges(), null);
});

API

  • addPath(nodes: NodeCollection, edges?: EdgeCollection | null, avoidNodes?: NodeCollection | null, options?: IBubbleSetPathOptions): BubbleSetPath

    creates a new BubbleSetPath instance. The nodes is a node collection that should be linked. edges an edge collection to include edges. avoidNodes is an optional node collection of nodes that should be avoided when generating the outline and any virtual edge between the nodes.

  • removePath(path: BubbleSetPath)

    removes a path again

  • getPaths(): readonly BubbleSetPath[]

    returns the list of active paths

Development Environment

npm i -g yarn
yarn set version latest
cat .yarnrc_patch.yml >> .yarnrc.yml
yarn
yarn pnpify --sdk vscode

Common commands

yarn compile
yarn test
yarn lint
yarn fix
yarn build
yarn docs
yarn release
yarn release:pre