.. index:: embedding, javascript embedding, widgets, list widgets, list analysis page widgets 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. .. code-block:: html The next step is defining a couple of variables. .. code-block:: javascript 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 :doc:`/embedding/imjs`. .. code-block:: javascript // 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. .. code-block:: javascript // 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. .. code-block:: javascript 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. .. code-block:: javascript 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*. Defining custom actions on widget events ---------------------------------------- In a mine context, List Widgets are configured automatically to e.g. display a :doc:`/webapp/query-results/index` 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: .. code-block:: javascript 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: .. code-block:: javascript var options = { resultsCb: function(pq) { // ... } }; Widgets.enrichment('pathway_enrichment', 'myList', '#widget', options); Clicking on Create list button in a popover window: .. code-block:: javascript var options = { listCb: function(pq) { // ... } }; Widgets.enrichment('pathway_enrichment', 'myList', '#widget', options); I want to hide the title or description of a widget. .. code-block:: javascript 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 :doc:`/webapp/query-results/index` dependencies and have a PathQuery in JSON/JavaScript format that you want to display in a ``#container``: .. code-block:: javascript // 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();