Version: 4.0.0

List Widgets Questions & Answers

Source files#

Source files for the List widgets client.

Using a temporary list on the fly#

Requirements#

InterMine Generic WebService Client Library from GitHub or InterMine
CDN.
InterMine List Widgets Client Library from GitHub or InterMine CDN.
A mine that has the desired Enrichment Widget configured.
An API Access Key generated by logging in to MyMine and visiting the
API Key tab, then clicking on Generate a new API key. This assumes
that you do not want to automatically provide the API key as is the
case of within mine embedding that can be seen for example here.

Code#

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 occasions 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.

Defining custom actions on widget events#

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

Showing a Results Table#

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