Using the Freebase and the Bioportal Widgets to create a semantic object.
The following HTML code uses:
- a Widget from the NCBO Bioportal for the Protein-protein interaction Ontology
- And two Widgets from Freebase, linking to the proteins, the genes and the diseases.
After completion, it generates a JSON object describing a semantic object:
{
"subject":"http://www.freebase.com/view/en/nsp3",
"predicate":"http://purl.org/obo/owl/MI#MI_0407",
"value":"http://www.freebase.com/view/en/roxan",
"pmid":15047801
}
Source
You can download the source and test it:
This file contains hidden or 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 type="text/css" rel="stylesheet" href="http://freebaselibs.com/static/suggest/1.3/suggest.min.css" /> | |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> | |
<script type="text/javascript" src="http://freebaselibs.com/static/suggest/1.3/suggest.min.js"></script> | |
<script type="text/javascript" src="http://bioportal.bioontology.org/javascripts/widgets/form_complete.js"></script> | |
<script type="text/javascript"> | |
var freebase_topics= { | |
type:[ '/biology/protein','/biology/gene','/medicine/disease'] | |
}; | |
function update_json_field() | |
{ | |
var o={subject:null,predicate:null,value:null,pmid:null}; | |
var p=document.getElementById("prot1").value; | |
if(p.indexOf("http://")==0) o["subject"]=p; | |
p=document.getElementById("prot2").value; | |
if(p.indexOf("http://")==0) o["value"]=p; | |
p=document.getElementById("predicate").value; | |
if(p.indexOf("http://")==0) o["predicate"]=p; | |
p=document.getElementById("pmid").value; | |
if(p.length!=0 && p.match(/[1-9][0-9]*/)) o["pmid"]= parseInt(p); | |
var root=document.getElementById("json"); | |
root.value=JSON.stringify(o); | |
} | |
$(function() { | |
$("#prot1").suggest(freebase_topics).bind("fb-select",function(e, data) | |
{ | |
var root=document.getElementById("prot1"); | |
root.value="http://www.freebase.com/view"+data.id; | |
update_json_field(); | |
}); | |
}); | |
$(function() { | |
$("#prot2").suggest(freebase_topics).bind("fb-select",function(e, data) | |
{ | |
var root=document.getElementById("prot2"); | |
root.value="http://www.freebase.com/view"+data.id; | |
update_json_field(); | |
}); | |
}); | |
</script> | |
</head> | |
<body> | |
<fieldset class="search"> | |
<legend>Create a new Fact</legend> | |
<table> | |
<tr> | |
<th><label for="prot1">Protein 1:</label></th> | |
<td><input type="text" placeholder="Protein 1..." id="prot1" size="50"/></td> | |
</tr> | |
<tr> | |
<th><label for="predicate">Predicate:</label></th> | |
<td><input type="text" placeholder="Predicate..." id="predicate" class="bp_form_complete-1040-uri" size="50"/></td> | |
</tr> | |
<tr> | |
<th><label for="prot2">Protein 2:</label></th> | |
<td><input type="text" placeholder="Protein 2..." id="prot2" size="50" onchange="update_json_field();"/></td> | |
</tr> | |
<tr> | |
<th><label for="pmid">PMID:</label></th> | |
<td><input type="number" min="1" placeholder="PMID..." id="pmid" size="50" onchange="update_json_field();"/></td> | |
</tr> | |
<tr> | |
<th><label for="json">JSON</label></th> | |
<td><textarea type="text" cols="50" rows="5" readonly="true" placeholder="{}" id="json" size="50"></textarea></td> | |
</tr> | |
</table> | |
</fieldset> | |
</body> | |
</html> |
That's it,
Pierre
1 comment:
Nice! This is exactly the kind of use case people should be thinking about.
I doesn't validate the input right now, does it? That is, make sure the selected protein is a protein? At least, I noted that also things other than proteins where shown upon the autocomplete. Also, the predicate should of course allow linking two proteins... I haven't looked at the ontology yet, but perhaps the range and domains are not defined in that ontoloty anyway...
Post a Comment