@intermine/cytoscape-intermine
v1.1.4
Published
view intermine gene network interaction using cytoscape.js
Downloads
1
Keywords
Readme
About
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/.
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 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.
Gluing them all together, the body of your HTML page might look something like this:
<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>
Modifying / running the project locally
Dependencies
We'll assume you have npm installed already.
Installation
In terminal:
$ npm install
$ bower install
That should be it!
Running the project
If you want to modify the script and let Browsersync live-reload your changes, run:
$ gulp dev
If you just want a one-off build, gulp's default task will do it:
$ 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.
Testing
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>
<script>
cymine({
parentElem : document.getElementById('myAwesomeElement'),
service : {
root : "http://beta.flymine.org/beta/service/", //mandatory
token : "" //optional
},
queryOn : {
"value" : 1449024,
"op" : "="
},
nodeType : "Gene"
});
</script>