This project takes gene interaction data from Intermine and visualises it using cytoscape.js, a fabulous network visualisation tool.
Demo at yochannah.github.io/cytoscape-intermine/.
TL;DR: See the source of the demo page.
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>
You'll need to pass an object that contains the following properties:
service
: An object, that at a minimum contains aroot
property pointing to Intermine Service, e.gservice : {root : 'http://www.flymine.org/query/service/'}
. Optionally can take atoken
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 IDcymine
.nodeType
: Optional, will default to gene. Mandatory for Protein queries. Values areGene
orProtein
.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.
<div id="myAwesomeElement"></div>
<script>
cymine({
parentElem : document.getElementById('myAwesomeElement'),
service : {
root : "http://beta.flymine.org/beta/service/", //mandatory
token : "" //optional
},
queryOn : {
"value" : "FBgn0034249"
},
nodeType : "Gene",
compact : true //optional
});
</script>
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!
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).
To get this working with objectId arguments, initialise with "op" : "="
on the queryOn object, e.g.
<div id="myAwesomeElement"></div>
<script>
cymine({
parentElem : document.getElementById('myAwesomeElement'),
service : {
root : "http://beta.flymine.org/beta/service/", //mandatory
token : "" //optional
},
queryOn : {
"value" : 1449024,
"op" : "="
},
nodeType : "Gene"
});
</script>