mason/ontology/associate_ontology.mas

   1 <%doc>
   2
   3 =head1 NAME
   4
   5 /ontology/associate_ontology.mas - a component for printing a generic 'associate_ontology' javasript form and displaying the ontology annotation
   6
   7 =head1 DESCRIPTION
   8
   9
  10 Parameters:
  11
  12 =over 9
  13
  14 =item object_id
  15
  16 a database id
  17
  18 =item object_name
  19
  20 the type of the object you are annotating
  21
  22 =item cvterm_autocomplete_uri
  23
  24 defaults to /ajax/cvterm/autocomplete
  25
  26 =item cvterm_add_uri
  27
  28 the uri for associating the cvterm with your object
  29
  30 =iterm relationships_uri
  31
  32 populate the relationships drop down menu. defaults to /ajax/cvterm/relationships
  33
  34 =item evidence_uri
  35
  36 populate the evidence code menu. Defaults to /ajax/cvterm/evidence
  37
  38 =item evidence_description_uri
  39
  40 populate the evidence description menu. Defaults to /ajax/cvterm/evidence_description
  41
  42 =iterm show_form
  43
  44 whether the associate form should be printed. Usually only if the user is logged-in
  45
  46 =item ontology_url
  47
  48 the url for displaying the ontology annotation
  49
  50 =back
  51
  52 =head1 AUTHOR
  53
  54 Naama Menda <nm249@cornell.edu>
  55
  56 =cut
  57
  58
  59 </%doc>
  60
  61 <%args>
  62
  63 $object_id
  64 $object_name
  65 $cvterm_autocomplete_uri  => '/ajax/cvterm/autocomplete'
  66 $cvterm_add_uri
  67 $relationships_uri => '/ajax/cvterm/relationships'
  68 $evidence_uri => '/ajax/cvterm/evidence'
  69 $evidence_description_uri => '/ajax/cvterm/evidence_description'
  70 $reference_uri => undef
  71 $evidence_with_uri => undef
  72 $show_form => 0
  73 $div_id => 'ontology_terms'
  74 $ontology_url
  75 $trait_db_name => 'SP'
  76
  77 </%args>
  78
  79 <style>
  80   #ontology .evidence {
  81     margin: 1em 0 0 4em;
  82     width: 50%;
  83     border: 1px dotted gray;
  84     padding: 10px;
  85   }
  86   #ontology_show_details {
  87     text-align: right;
  88     margin-bottom: -2em;
  89   }
  90   #ontology_show_details label {
  91     font-weight: bold;
  92   }
  93   .active#ontology_show_details {
  94     background: white;
  95   }
  96 </style>
  97
  98 <script language="javascript">
  99   jQuery(document).ready(function() {
 100        var db_name = jQuery('#db_name option:selected').attr("value");
 101        jQuery("#term_name").autocomplete({
 102              source: '<% $cvterm_autocomplete_uri %>' + "?db_name=" + db_name,
 103              //delay: 1000,
 104              autoFocus: true,
 105              minLength: 3,
 106              select: function(event, ui) { Ontology.populateEvidence('relationship_select', '/ajax/cvterm/relationships'); }
 107           });
 108
 109        jQuery("#db_name").change(function(){
 110             db_name = jQuery('#db_name option:selected').attr("value");
 111              jQuery("#term_name").autocomplete('option', 'source', '<% $cvterm_autocomplete_uri %>' + "?db_name=" + db_name);
 112        });
 113
 114   });
 115
 116
 117
 118
 119
 120 </script>
 121
 122 <& /util/import_javascript.mas, classes=>[qw[ jqueryui popup CXGN.AJAX.Ontology] ]&>
 123
 124
 125 % if ($show_form) {
 126 <div id="associate_cvterm_form" style="display: none">
 127   <form name="cvterm_form" >
 128     <div id="cvterm_search"  >
 129       <table width="100%">
 130         <tr><td width = "30%"><b>Select ontology</b><br />
 131             <select id = "db_name" onchange = "jQuery('#term_name').val('');" >
 132               <option value="GO">GO (gene ontology)</option>
 133               <option value="PO">PO (plant ontology)</option>
 134               <option value="<% $trait_db_name %>"><% $trait_db_name %>  phenotype ontology</option>
 135             </select>
 136             </td>
 137           <td><b>Type a term name</b><br /><input type="text" size ="60"  id="term_name" name="term_name" />
 138             <input type="hidden" id="object_id" name="object_id" value="<% $object_id %>" />
 139         </td></tr>
 140         <tr><td colspan="2">
 141             <b>Relationship type:</b>
 142             <select id="relationship_select" style="width: 100%"
 143                     onchange="Ontology.populateEvidence('evidence_code_select', '<% $evidence_uri %>' )">
 144             </select>
 145         </td></tr>
 146         <tr><td colspan="2">
 147             <b>Evidence code:</b>
 148             <select id="evidence_code_select" style="width: 100%"
 149                     onchange="jQuery('#associate_ontology_button').removeAttr('disabled');Ontology.populateEvidence('evidence_description_select', '<% $evidence_description_uri %>' + '?evidence_code_id=' + jQuery('#evidence_code_select').val() );Ontology.populateEvidence('evidence_with_select', '<% $evidence_with_uri %>');Ontology.populateEvidence('reference_select', '<% $reference_uri %>')">
 150             </select>
 151         </td></tr>
 152         <tr><td colspan = "2">
 153             <b>Evidence description:</b>
 154             <select id="evidence_description_select" style="width: 100%">
 155             </select>
 156         </td></tr>
 157         <tr><td colspan = "2">
 158             <b>Evidence with:</b>
 159             <select id="evidence_with_select" style="width: 100%">
 160             </select>
 161         </td></tr>
 162         <tr><td colspan = "2">
 163             <b>Reference:</b>
 164             <select id="reference_select" style="width: 100%">
 165             </select>
 166         </td></tr>
 167         <tr><td colspan = "2">
 168             <div id="ontology_select_button">
 169               <input type="button"
 170                      id="associate_ontology_button"
 171                      value="associate term"
 172                      disabled="true"
 173                      onclick="javascript:Ontology.submitCvtermForm('<% $cvterm_add_uri %>', '<% $ontology_url %>');this.disabled=true;" />
 174             </div>
 175         </td></tr>
 176       </table>
 177     </div>
 178   </form>
 179 </div>
 180
 181 % }
 182
 183
 184
 185 <div id="ontology_show_details" style="display: none">
 186   <form> <input type="checkbox" id="show_details" disabled="true" />
 187     <label for="show_details">Show complete details</label>
 188   </form>
 189 </div>
 190
 191 <div id="ontology" >[loading...] </div>
 192
 193 <script language="javascript">
 194
 195   jQuery(document).ready( function() {
 196     Ontology.displayOntologies("ontology" , "<% $ontology_url %>");
 197   });
 198
 199 </script>