cytoscape-sbgn-stylesheet

A Cytoscape.js package that provides SBGN specific glyph styles (demo)

Purpose

To render SBGN-PD(Systems Biology Graphical Notation) graphs -- a visual language for representing biological processes.

Installation

Install via npm

npm install cytoscape-sbgn-stylesheet

Usage

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
});

Requirements

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:

• SBGN-ML files; xml files that represent biological networks.
• An SBGN-ML to Cytoscape.js converter.

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

Testing

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).
   1. For a bug fix / patch release, run npm version patch.
   2. For a new feature release, run npm version minor.
   3. For a breaking API change, run npm version major.
   4. For a specific version number (e.g. 1.2.3), run npm version 1.2.3.
5. Push the release: git push origin --tags
6. Publish to npm: npm publish .