Apache SOLR and GeneOntology: Creating the JQUERY-UI client (with autocompletion)
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)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version='1.0' encoding='UTF-8'?> | |
| <xsl:stylesheet version='1.0' | |
| xmlns:xsl='http://www.w3.org/1999/XSL/Transform' | |
| > | |
| <xsl:output media-type="application/json" encoding="UTF-8" method="text"/> | |
| <xsl:template match='/'> | |
| <xsl:text>[</xsl:text> | |
| <xsl:for-each select="response/result/doc"> | |
| <xsl:if test="position()>1"> | |
| <xsl:text>,</xsl:text> | |
| </xsl:if> | |
| <xsl:apply-templates select="."/> | |
| </xsl:for-each> | |
| <xsl:text>]</xsl:text> | |
| </xsl:template> | |
| <xsl:template match="doc"> | |
| <xsl:text>{ "label":"</xsl:text> | |
| <xsl:apply-templates select="str[@name='go_name']"/> | |
| <xsl:text>", "value": "</xsl:text> | |
| <xsl:apply-templates select="str[@name='id']"/> | |
| <xsl:text>" }</xsl:text> | |
| </xsl:template> | |
| <xsl:template match="str"> | |
| <xsl:value-of select="translate(.,'"','"')"/> | |
| </xsl:template> | |
| </xsl:stylesheet> |
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="jquery/development-bundle/themes/base/jquery.ui.all.css" /> | |
| <script type="text/javascript" src="jquery/js/jquery-1.7.1.min.js"></script> | |
| <script type="text/javascript" src="jquery/development-bundle/ui/jquery.ui.core.js"></script> | |
| <script type="text/javascript" src="jquery/development-bundle/ui/jquery.ui.widget.js"></script> | |
| <script type="text/javascript" src="jquery/development-bundle/ui/jquery.ui.position.js"></script> | |
| <script type="text/javascript" src="jquery/development-bundle/ui/jquery.ui.autocomplete.js"></script> | |
| <script type="text/javascript"> | |
| $(function() { | |
| $( "#go" ).autocomplete({ | |
| source: function( request, response ) | |
| { | |
| $.ajax( { | |
| dataType: "json", | |
| url: "http://localhost:8983/solr/select", | |
| data: { | |
| q: "go_definition:"+request.term, | |
| wt:"xslt", | |
| tr:"solr2json.xsl", | |
| }, | |
| success: response | |
| }); | |
| return false; | |
| } | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <form> | |
| <div class="ui-widget"> | |
| <label for="go">Search Gene Ontology:</label><input id="go"/> | |
| </div> | |
| </form> | |
| </body> | |
| </html> |
(image via openwetware)
That worked ! :-)
That's it,
Pierre
2 comments:
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 ?
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.
Post a Comment