06 April 2012

Apache SOLR and GeneOntology: Creating the JQUERY-UI client (with autocompletion)

In the previous post I showed how to use Apache SOLR to index the content of gene ontology. In this post I will show how the SOLR server can be used as a source of data for a "JQuery-UI autocomplete" HTML input.

The JQuery autocomplete Widget expects an JSON array of Objects with label and value properties :
[ { label: "Choice1", value: "value1" }, ... ]

We need to tell SOLR to return the GO terms formatted this way.

Fortunately SOLR provides a mechanism to captures the output of the normal XML response and applies a XSLT transformation to it.

The following XSLT stylesheet transforms the XML response to JSON, it is created in the conf/xslt directory (apache-solr-3.5.0/example/solr/conf/xslt/solr2json.xsl)


We can test the stylesheet by adding the tr parameter in the query URL:
$ curl "http://localhost:8983/solr/select?q=go_definition:cancer&wt=xslt&tr=solr2json.xsl"

[
    {
        "label": "Z-phenylacetaldoxime metabolic process",
        "value": "GO:0018983"
    },
    {
        "label": "epothilone metabolic process",
        "value": "GO:0050813"
    },
    {
        "label": "epothilone biosynthetic process",
        "value": "GO:0050814"
    },
    {
        "label": "aflatoxin biosynthetic process",
        "value": "GO:0045122"
    },
    {
        "label": "aflatoxin metabolic process",
        "value": "GO:0046222"
    },
    {
        "label": "aflatoxin catabolic process",
        "value": "GO:0046223"
    }
]

The jquery client

Let's create the HTML/JQuery Client, I have downloaded the component for jquery and jquery-ui in the apache-solr-3.5.0/example/work/Jetty_xxxx_solr.war__solr__xxxx/webapp/ (and that's a bad idea, everything will be deleted with the SOLR server will be stopped or re-deployed).

I've also created the following HTML page 'solr.html' in the same directory: Let's visit http://localhost:8983/solr/solr.html to test the page:


(image via openwetware)

 That worked ! :-)

That's it,

Pierre

2 comments:

Anonymous said...

Doesn't work for me. I see the queries on the SOLR server but there's no auto suggest coming up. I'm using apache-solr-3.6.0. Did anyone else run into problems ?

Anonymous said...

Hi,
I finally got it to work - my problem was that I ran into trouble with Cross-domain ajax - this error message came up:
XMLHttpRequest cannot load is not allowed by Access-Control-Allow-Origin.

I was running on the same host but on different ports, so that's still 'cross-scripting from a different domain'. I edited the stylesheet to include the callback id, so a proper return value from the solr server looked like this:


jQuery171021476610863720813_1336702541778(["heart"]);


I also changed the dataType in the Ajax call to :

dataType: "jsonp"

Another problem was that the default RequestHandler for SOLR suggest did not return the callback id for jsonp - so I edited the solrconfig RequestHandler to return all params by setting EchoParams to true.



explicit
true
suggest
10


suggest



I'm sure there's an easier way, i.e. to set up a proxy ( ajax calls a method, method calls remote service ) - would be nice if someone writes a tutorial...
Anyways, thanks for your walk-trough, it really helped me.