Completed rest of extended functional annotation section (except miRN…

…A tree)
IGS · Jan 20, 2024 · 882a56b · 882a56b
1 parent e343af3
commit 882a56b
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/www/expression.html b/www/expression.html
@@ -161,7 +161,17 @@ <h3 id="functional-annotation-toggle" class="mt-0 is-clickable mb-3">
                     </h3>
                     <div id="extended-annotation-panel" class="columns is-hidden ml-1 mr-1 mb-1">
                       <div class="column is-4">
-                        <h4>Annotation</h4>
+                        <h4 class="mb-2">Annotation</h4>
+                        <dl class="is-size-7">
+                          <dt class="has-text-weight-bold">Product</dt>
+                          <dd class="mb-3" id="annotation-panel-gene-product"></dd>
+                          <dt class="has-text-weight-bold">Gene symbol</dt>
+                          <dd class="mb-3" id="annotation-panel-gene-symbol"></dd>
+                          <dt class="has-text-weight-bold">Aliases</dt>
+                          <dd class="mb-3" id="annotation-panel-gene-aliases"></dd>
+                          <dt class="has-text-weight-bold">Ensembl ID (Release <span id="annotation-panel-gene-ensembl-release"></span>)</dt>
+                          <dd class="mb-3"><a id="annotation-panel-gene-ensembl-id" href=""></a></dd>
+                        </dl>
                       </div>
                       <div class="column is-4">
                         <h4>GO terms <span id="go-term-count"></span></h4>
@@ -177,6 +187,7 @@ <h4>GO terms <span id="go-term-count"></span></h4>
                       </div>
                       <div class="column is-4">
                         <h4>miRNA tree</h4>
+                        <p class="is-size-7">n/a</p>
                       </div>
                     </div>
                   </div>

diff --git a/www/js/expression.js b/www/js/expression.js
@@ -318,11 +318,27 @@ const updateAnnotationDisplay = () => {
 
     // if we got this far, we have annotation for this one. let's display it
     const annotation = annotation_data[gs]['by_organism'][oid];
+    document.querySelector('#annotation-panel-gene-symbol').innerHTML = gs;
+
     console.log(annotation);
 
     // Gene product
     document.querySelector('#currently-selected-gene-product').innerHTML = " - " + annotation['product'];
     document.querySelector('#currently-selected-gene-product').classList.remove('is-hidden');
+    document.querySelector('#annotation-panel-gene-product').innerHTML = annotation['product'];
+
+    // aliases and Ensembl ID
+    if (annotation['aliases'].length > 1) {
+        document.querySelector('#annotation-panel-gene-aliases').innerHTML = annotation['aliases'].join(', ');
+    } else {
+        document.querySelector('#annotation-panel-gene-aliases').innerHTML = "None found";
+    }
+
+    document.querySelector('#annotation-panel-gene-ensembl-release').innerHTML = annotation['ensembl_release'];
+    document.querySelector('#annotation-panel-gene-ensembl-id').innerHTML = annotation['ensembl_id'];
+
+    const ensembl_url = "https://www.ensembl.org/Multi/Search/Results?q=" + annotation['ensembl_id'] + ";site=ensembl";
+    document.querySelector('#annotation-panel-gene-ensembl-id').setAttribute('href', ensembl_url);
 
     // External database references
     let good_dbxref_count = 0;