A Cytoscape.js package that provides SBGN specific glyph styles (demo)
To render SBGN-PD(Systems Biology Graphical Notation) graphs -- a visual language for representing biological processes.
Install via npm
npm install cytoscape-sbgn-stylesheet
Initialize cytoscape.js and call this module as a stylesheet parameter
var cytoscape = require('cytoscape');
var sbgnStylesheet = require('cytoscape-sbgn-stylesheet');
var cy = cytoscape({
container: container,
style: sbgnStylesheet(cytoscape),
// other arguments here
});
Input needs to be formatted Cytoscape.js graph JSON.
The following graph JSON structure is required:
{
nodes: [], // array of nodes
edges: [] // array of edges
}
- simple chemical multimer
- macromolecule multimer
- nucleic acid feature multimer
- complex multimer
- simple chemical
- macromolecule
- nucleic acid feature
- compartment
- unspecified entity
- perturbing agent
- complex
- phenotype
- tag
- process
- uncertain process
- omitted process
- source and sink
- dissociation
- association
- and
- or
- not
- necessary stimulation
- production
- consumption
- stimulation
- catalysis
- inhibition
- submap
- ports
The following node JSON structure is required:
"data": {
"id": "glyph23", // id of the node
"class": "simple chemical", // class of the node (see classes section for a list of supported sbgn glyphs
"label": "Ca2+", // label to be displayed on the node
"parent": "glyph2", // parent node id if any
"clonemarker": false, // whether the node has a clonemarker or not
"stateVariables": [], // an array of state variables
"unitsOfInformation": [], // an array of units of information
}
The following edge JSON structure is required:
"data": {
"id": "glyph19-glyph5", // id
"class": "production", // sbgn class
"cardinality": 0, // cardinality
"source": "glyph19", // source node id
"target": "glyph5", // target node id
"portSource": "glyph19", // port of the source
"portTarget": "glyph5" // port of the target
}
To get Cytoscape.js graph JSON, you need the following:
- SBGN-ML files; xml files that represent biological networks.
- An SBGN-ML to Cytoscape.js converter.
The following cytoscape.js style properties are used to render SBGN PD graphics. Overriding these entirely will produce unexpected behaviour:
shape
width
height
background-image
background-width
background-position-x
background-position-y
background-fit
background-clip
padding
border-width
npm run build
: build projectnpm run build-prod
: build the project for productionnpm run bundle-profile
: visualise the bundle dependenciesnpm run clean
: clean the projectnpm run watch
: watch mode (debug mode enabled, autorebuild, autoreload)npm test
: run testsnpm run lint
: lint the project
All files /test
will be run by Mocha. You can npm test
to run all tests, or you can run mocha -g specific-test-name
(prerequisite: npm install -g mocha
) to run specific tests.
Chai is included to make the tests easier to read and write.
- Make sure the tests are passing:
npm test
- Do a prod build:
npm run build-prod
- Make sure the linting is passing:
npm run lint
- Bump the version number with
npm version
, in accordance with semver. Theversion
command innpm
updates bothpackage.json
and git tags, but note that it uses av
prefix on the tags (e.g.v1.2.3
). - For a bug fix / patch release, run
npm version patch
. - For a new feature release, run
npm version minor
. - For a breaking API change, run
npm version major.
- For a specific version number (e.g. 1.2.3), run
npm version 1.2.3
. - Push the release:
git push origin --tags
- Publish to npm:
npm publish .