Cytoscape Overlays
A Cytoscape.js plugin for adding layers that shows bars, histograms, sparklines, binary sparklines, symbols (categorical data), or boxplots next to nodes.
Great for showing numerical attributes such as experimental data of pathways nodes.
Install
npm install --save cytoscape cytoscape-layers cytoscape-overlaysUsage
const cy = cytoscape({
container: document.getElementById('app'),
elements: [
{
data: {
id: 'a',
value: Math.random(),
values: Array(100)
.fill(0)
.map(() => Math.random()),
},
},
{
data: {
id: 'b',
value: Math.random(),
values: Array(100)
.fill(0)
.map(() => Math.random()),
},
},
{
data: {
id: 'ab',
source: 'a',
target: 'b',
},
},
],
});
cy.overlays(
[
{
position: 'top',
vis: CytoscapeOverlays.renderBar('value', {
backgroundColor: 'steelblue',
}),
},
{
vis: CytoscapeOverlays.renderBoxplot('values', {
backgroundColor: 'darkred',
}),
},
{
vis: CytoscapeOverlays.renderHistogram('values', {
backgroundColor: 'darkgreen',
}),
},
],
{
updateOn: 'render',
backgroundColor: 'white',
}
);see Samples on Github
or at this
Development Environment
npm i -g yarn
yarn set version latest
cat .yarnrc_patch.yml >> .yarnrc.yml
yarn
yarn pnpify --sdk vscodeCommon commands
yarn clean
yarn compile
yarn test
yarn lint
yarn fix
yarn build
yarn docs
yarn release
yarn release:pre