Skip to content
Widget to allow intermine gene interactions to be viewed using cytoscape.js
JavaScript HTML CSS Shell
Branch: master
Clone or download
Pull request Compare This branch is even with yochannah:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Build Status


This project takes gene interaction data from Intermine and visualises it using cytoscape.js, a fabulous network visualisation tool.

Demo at

Quick Start

TL;DR: See the source of the demo page.

Detailed steps:

If you don't care about building the script, just download or check out dist/bundle.js and dist/style.css. Include links to both in your project page, e.g.:

<link href="dist/style.css" rel="stylesheet" type="text/css">
<script src="dist/bundle.js"></script>

To initialise the graph:

You'll need to pass an object that contains the following properties:

  • service: An object, that at a minimum contains a root property pointing to Intermine Service, e.g service : {root : ''}. Optionally can take a token property as well.
  • queryOn: This is a term to query on (e.g. a gene name or 'primaryIdentifier'). This is in the format of an object, such as {"value" : "FBgn0034249"} or {"value" : "PPARG", "extraValue" : "H. sapiens"}.
  • parentElem: An element to insert the graph into, e.g. document.getElementById('myAwesomeElement');. If this isn't specified, the graph will try to find an element with the ID cymine.
  • nodeType: Optional, will default to gene. Mandatory for Protein queries. Values are Gene or Protein.
  • compact: optional. If there are no results, if this argument is truthy, the 'sorry, no interactions for this search' message is 1.5em high, not 350px.

Gluing them all together, the body of your HTML page might look something like this:

<div id="myAwesomeElement"></div>
  parentElem : document.getElementById('myAwesomeElement'),
  service : {
    root : "", //mandatory
    token : "" //optional
  queryOn : {
    "value" : "FBgn0034249"
  nodeType : "Gene",
  compact : true //optional

Modifying / running the project locally


We'll assume you have npm installed already.


In terminal:

$ npm install
$ bower install

If you get error bower: command not found, then run:

$ npm install -g bower
$ bower install

That should be it!

Running the project

To serve the project in browser, run:

$ npm start

If you get error Error: listen EADDRINUSE: address already in use :::3344, then, either kill that port(not recommended) or you can use any other port. Say, If you want to use port 8080 then run:

$ export PORT=8080

If you want to modify the script and let Browsersync live-reload your changes, run:

$ npm run gulpDev

If you just want a one-off build, gulp's default task will do it:

$ npm run gulp

Both tasks will compile your less (make sure to prefix partials with _, e.g. _button.less) and bundle up your js, then move it to the dist folder.


Run $ mocha (to run the suite once) or $ mocha --watch (to re-test when you make changes).

Query notes

To get this working with objectId arguments, initialise with "op" : "=" on the queryOn object, e.g.

<div id="myAwesomeElement"></div>
  parentElem : document.getElementById('myAwesomeElement'),
  service : {
    root : "", //mandatory
    token : "" //optional
  queryOn : {
    "value" : 1449024,
    "op" : "="
  nodeType : "Gene"
You can’t perform that action at this time.