Usage and Demo¶

This page provides some usage examples and demo applications.

Call from web applications¶

You can call MyGene.info services from either server-side or client-side (via AJAX). The sample code can be found at “demo” section.

Calling services from server-side¶

All common programing languages provide functions for making http requests and JSON parsing. For Python, you can using build-in httplib and json modules (v2.6 up), or third-party httplib2 and simplejson modules. For Perl, LWP::Simple and JSON modules should work nicely.

Making AJAX calls from client-side¶

When making an AJAX call from a web application, it is restricted by “same-origin” security policy, but there are several standard ways to get it around.

Making your own server-side proxy¶

To overcome “same-origin” restriction, you can create proxy at your server-side to our services. And then call your proxied services from your web application.

Setup proxy in popular server-side applications, like Apache, Nginx and PHP, are straightforward.

Making JSONP call¶

Because our core services are just called as simple GET http requests (though we support POST requests for batch queries too), you can bypass “same-origin” restriction by making JSONP call as well. To read more about JSONP, see 1, 2, or just Google about it. All our services accept an optional “callback” parameter, so that you can pass your callback function to make a JSONP call.

All popular javascript libraries have the support for making JSONP calls, like in JQuery, ExtJS, MooTools

Cross-origin http request through CORS¶

Cross-Origin Resource Sharing (CORS) specification is a W3C draft specification defining client-side cross-origin requests. It’s actually supported by all major browsers by now (Internet Explorer 8+, Firefox 3.5+, Safari 4+, and Chrome. See more on browser support), but not many people are aware of it. Unlike JSONP, which is limited to GET requests only, you can make cross-domain POST requests as well. Our services supports CORS requests on both GET and POST requests. You can find more information and use case here and here.

JQuery’s native ajax call supports CORS since v1.5.

Demo Applications¶

In this demo, we want to create a web site to display expression charts from a microarray dataset (Affymetrix MOE430v2 chip). The expression data are indexed by porobeset ids, but we need to allow users to query for any mouse genes using any commonly-used identifiers, and then display expression charts for any selected gene.

We implemented this demo in four ways:

Example 1: using CGI¶

Download sample code here.

It’s a simple python CGI script. To run it, you just need to drop it to your favorite web server’s cgi-bin folder (make sure your python, v2.6 up, is in the path).

See it in action here.

Example 2: using tornado¶

Download sample code here.

This single python script can be used to run a standalone website. Just run: python mygene_info_demo_tornado.py.You then have your website up at http://localhost:8000.

Besides python (v2.6 up), you also need tornado to run this code. You can either install it by your own (pip install tornado), or download this zip file, which includes tornado in it.

See it in action here.

Example 3: using JSONP¶

Download sample code here.

The zip file contains one html file and one javascript file. There is no server-side code at all. To run it, just unzip it and open the html file in any browser. All remote service calls are done at client side (via browsers). Put the files into any web server serving static files will allow you to publish to the world.

See it in action here.

Example 4: using CORS¶

Download sample code here.

The zip file contains one html file and one javascript file. There is no server-side code at all. To run it, just unzip it and open the html file in any browser. All remote service calls are done at client side (via browsers). Put the files into any web server serving static files will allow you to publish to the world.

This demo is almost the same as the one using JSONP, except that the actual AJAX call to MyGene.info server is made via CORS.

See it in action here.

Autocomplete widget for gene query¶

When you build a web application to have users to query for their favorite genes, the autocomplete widget is very useful, as it provides suggestions while users start to type into the field.

Note

The autocomplete widget below is a simple demo application. You may also want to have a look at this more sophisticated autocomplete widget, which comes with a lot more customization options.

Try it live first¶

Enter a gene here (e.g., CDK2):

Use it in your website¶

To use this widget in your own website is very easy, just following these three steps:

Copy/paste this line into your html file:

<script src="//docs.mygene.info/en/latest/_static/widget/autocomplete/js/mygene_query_min.js" type="text/javascript"></script>

Hint

if you prefer an un-minified javascript file, using “mygene_query.js” instead.

Add “mygene_query_target” class to your target input element:

<input id="gene_query" style="width:250px" class="mygene_query_target">

so that we know which input field to enable autocomplete.

Define your own callback function, which is triggered after user selects a gene. For example:

<script type="text/javascript">
    mygene_query_select_callback = function(event, ui){
            alert( ui.item ?
                "Selected: " + ui.item.label + '('+ui.item.entrezgene+')':
                "Nothing selected, input was " + this.value);
    };
</script>

As shown in above example, you can access the gene object as ui.item:

ui.item._id       gene id
ui.item.value    gene symbol
ui.item.label    the label displayed in autocomplete dropdown list