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

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.

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

About this widget

This autocomplete widget for gene query provides suggestions while you type a gene symbol or name into the field. Here the gene suggestions are displayed as “<Symbol>:<Name>”, automatically triggered when at least two characters are entered into the field.

At the backend, this widget is powered by the gene query web service from MyGene.info. By default, the gene suggestions display human genes only.

Use it in your website

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

  1. Copy/paste this line into your html file:

    <script src="http://mygene.info/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.

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

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

Note

if you don’t define your own callback function (like the minimal HTML page below), the default behavior is to display an alert msg with the gene selected. To change this default behavior, you must overwrite with your own callback function (keep the same name as “mygene_query_select_callback”).

A minimal HTML page with autocomplete enabled looks just like this (See it in action here):

<html>
<body>
    <label for="gene_query">Enter a gene here: </label>
    <input style="width:250px" class="mygene_query_target">
    <script src="http://mygene.info/widget/autocomplete/js/mygene_query_min.js" type="text/javascript"></script>
</body>
</html>

Have fun! And send us feedback at <help@mygene.info>.