Skip to content
View biological networks via Cytoscape.js and sbgn-ml
JavaScript HTML
Branch: master
Clone or download
Latest commit ae35de5 Jun 20, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Remove legacy opacity values Sep 7, 2017
test new tooling wip Dec 5, 2017
.eslintignore new tooling wip Dec 5, 2017
LICENSE update gh pages demo deploy tooling Feb 15, 2018
browser-sync.config.js new tooling wip Dec 5, 2017
demo.json update demo files Feb 15, 2018
package.json 4.0.1 Jun 20, 2019
test-data.js Add test data Dec 6, 2017
webpack.config.js new tooling wip Dec 5, 2017


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,
  stylesheet: 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

Supported SBGN PD glyphs

  • 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

Supported SBGN PD arcs

  • necessary stimulation
  • production
  • consumption
  • stimulation
  • catalysis
  • inhibition

Unsupported SBGN PD glyphs

  • 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:

Style Incompatibilities

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

Run targets

  • npm run build : build project
  • npm run build-prod : build the project for production
  • npm run bundle-profile : visualise the bundle dependencies
  • npm run clean : clean the project
  • npm run watch : watch mode (debug mode enabled, autorebuild, autoreload)
  • npm test : run tests
  • npm 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.

Publishing a release

  1. Make sure the tests are passing: npm test
  2. Do a prod build: npm run build-prod
  3. Make sure the linting is passing: npm run lint
  4. Bump the version number with npm version, in accordance with semver. The version command in npm updates both package.json and git tags, but note that it uses a v prefix on the tags (e.g. v1.2.3).
  5. For a bug fix / patch release, run npm version patch.
  6. For a new feature release, run npm version minor.
  7. For a breaking API change, run npm version major.
  8. For a specific version number (e.g. 1.2.3), run npm version 1.2.3.
  9. Push the release: git push origin --tags
  10. Publish to npm: npm publish .
You can’t perform that action at this time.