https://github.com/upsetjs/cytoscape.js-bubblesets
Cytoscape.js Bubblesets plugin
https://github.com/upsetjs/cytoscape.js-bubblesets
bubblesets cytoscape cytoscapejs cytoscapejs-extension javascript
Last synced: 3 months ago
JSON representation
Cytoscape.js Bubblesets plugin
- Host: GitHub
- URL: https://github.com/upsetjs/cytoscape.js-bubblesets
- Owner: upsetjs
- License: mit
- Created: 2020-06-07T09:27:01.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2025-03-01T21:44:36.000Z (7 months ago)
- Last Synced: 2025-06-22T00:39:26.856Z (4 months ago)
- Topics: bubblesets, cytoscape, cytoscapejs, cytoscapejs-extension, javascript
- Language: TypeScript
- Homepage: https://js.cytoscape.org/#extensions/ui-extensions
- Size: 6.12 MB
- Stars: 30
- Watchers: 4
- Forks: 7
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Cytoscape.js BubbleSets Plugin
[![NPM Package][npm-image]][npm-url] [![Github Actions][github-actions-image]][github-actions-url] [![Cytoscape Plugin][cytoscape-image]][cytoscape-url]
A [Cytoscape.js](https://js.cytoscape.org) plugin for rendering [Bubblesets](https://github.com/upsetjs/bubblesets-js).
## Install
```sh
npm install cytoscape cytoscape-layers cytoscape-bubblesets
```
## Usage
see [Samples](./samples) on Github
or at this [![Open in CodePen][codepen]](https://codepen.io/sgratzl/pen/RwQdBLY)
```js
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);
});
```
Alternative without registration
```js
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
```sh
npm i -g yarn
yarn set version latest
cat .yarnrc_patch.yml >> .yarnrc.yml
yarn
yarn pnpify --sdk vscode
```
### Common commands
```sh
yarn compile
yarn test
yarn lint
yarn fix
yarn build
yarn docs
yarn release
yarn release:pre
```
[npm-image]: https://badge.fury.io/js/cytoscape-bubblesets.svg
[npm-url]: https://npmjs.org/package/cytoscape-bubblesets
[github-actions-image]: https://github.com/upsetjs/cytoscape.js-bubblesets/workflows/ci/badge.svg
[github-actions-url]: https://github.com/upsetjs/cytoscape.js-bubblesets/actions
[cytoscape-image]: https://img.shields.io/badge/Cytoscape-plugin-yellow
[cytoscape-url]: https://js.cytoscape.org/#extensions/ui-extensions
[codepen]: https://img.shields.io/badge/CodePen-open-blue?logo=codepen