Source files for the List widgets client.
First require the JavaScript libraries needed to run the example. You probably have your own version of a Twitter Bootstrap compatible CSS style included on the page already.
<!-- dependencies -->
<script src="http://cdn.intermine.org/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="http://cdn.intermine.org/js/underscore.js/1.3.3/underscore-min.js"></script>
<script src="http://cdn.intermine.org/js/backbone.js/0.9.2/backbone-min.js"></script>
<!-- intermine -->
<script src="http://cdn.intermine.org/api"></script>
<script src="http://cdn.intermine.org/js/intermine/imjs/latest/im.js"></script>
<script src="http://cdn.intermine.org/js/intermine/widgets/latest/intermine.widgets.js"></script>
The next step is defining a couple of variables.
var root = 'http://www.flymine.org/query';
var tokn = 'U1p3r9Jb95r2Efrbu1P1CdfvKeF'; // API token
var name = 'temp-list-from-js-query'; // temporary list name
Now we connect with the mine through InterMine JavaScript Library.
// Service connection.
var flymine = new intermine.Service({
'root': root,
'token': tokn
});
Then we define the query whose results will be converted into a list later on.
// The query herself.
var query = {
'select': [ 'symbol', 'primaryIdentifier' ],
'from': 'Gene',
'where': {
'symbol': {
'contains': 'ze'
}
},
'limit': 10
};
Now we call the mine converting the results of the query into a list.
flymine.query(query)
.then(function madeQuery (q) {
// q is an instance of intermine.Query.
return q.saveAsList({'name': name}); })
.then(function savedList (list) {
// list is an instance of intermine.List.
console.log(list.size); });
.fail(function onError (error) {
console.error("Something went wrong");});
Now, in the function savedList, we can instantiate the List Widgets client and display the result.
var widgets = new intermine.widgets(root + '/service/', tokn);
// A new Chart List Widget for a particular list in the target #widget.
widgets.chart('flyfish', name, '#widget');
The only problem with this approach is that if we make this sort of call multiple times, we will fail on the second and subsequent ocassions as we will get a WebService exception telling us that the ‘temporary’ list name is taken. Thus inspect the code of the example to see how to make a call to the service to delete/reuse the list if it exists.
In a mine context, List Widgets are configured automatically to e.g. display a Query Results when clicking on “Create a List”.
Outside of a mine context, one needs to pass in what happens when one interacts with the Widgets. You can also decide whether to show/hide either/and/or title or description of the widget (for everything else use CSS).
Clicking on an individual match (Gene, Protein etc.) in popover window:
var options = {
matchCb: function(id, type) {
window.open(mineURL + "/portal.do?class=" + type + "&externalids=" + id);
}
};
Widgets.enrichment('pathway_enrichment', 'myList', '#widget', options);
Clicking on View results button in a popover window:
var options = {
resultsCb: function(pq) {
// ...
}
};
Widgets.enrichment('pathway_enrichment', 'myList', '#widget', options);
Clicking on Create list button in a popover window:
var options = {
listCb: function(pq) {
// ...
}
};
Widgets.enrichment('pathway_enrichment', 'myList', '#widget', options);
I want to hide the title or description of a widget.
var options = {
"title": false,
"description": false
};
Widgets.enrichment('pathway_enrichment', 'myList', '#widget', options);
The example below assumes that you have resolved all Query Results dependencies and have a PathQuery in JSON/JavaScript format that you want to display in a #container:
// Define a query as above
var pq = {from: "Gene", select: ["symbol", "organism.name"], where: {Gene: {in: "my-list"}}};
// use an instance of a Service or perhaps you already have one.
var service = new intermine.Service({'root': service, 'token': token});
// Create a new ResultsTable.
var view = new intermine.query.results.CompactView(service, pq);
// Say where to put it.
view.$el.appendTo("#container");
// Show it.
view.render();