Merge pull request #878 from mpi2/feature/gene-external-links

[Gene page] - External links section
mpi2 · Sep 30, 2024 · 6150934 · 6150934
2 parents 590d342 + c609211
commit 6150934
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 0 deletions.
diff --git a/web/src/main/webapp/WEB-INF/views/genes.jsp b/web/src/main/webapp/WEB-INF/views/genes.jsp
@@ -34,6 +34,7 @@
         <script defer type='text/javascript' src="${baseUrl}/js/general/enu.js"></script>
         <script defer type='text/javascript' src="${baseUrl}/js/general/dropdownfilters.js" ></script>
         <script defer type="text/javascript" src="${baseUrl}/js/general/allele.js" ></script>
+        <script defer type="text/javascript" src="${baseUrl}/js/general/genePage.js" ></script>
 
         <%-- Phenogrid requirements --%>
         <script defer type="text/javascript" src="${baseUrl}/js/phenogrid-1.3.1/dist/phenogrid-bundle.min.js?v=${version}" ></script>
@@ -288,6 +289,14 @@
                  font-size: 150%;
                  vertical-align: middle;
              }
+             #external-links-content ul {
+                 margin-bottom: 0;
+             }
+             #external-links-content .link-wrapper {
+                 display: flex;
+                 align-items: center;
+                 gap: 0.3rem;
+             }
          </style>
 
 
@@ -1377,6 +1386,23 @@
             </div>
         </div>
 
+        <%-- EXTERNAL LINKS SECTION --%>
+        <div class="container white-bg-small hidden" id="external-links">
+            <div class="row pb-5">
+                <div class="col-12 col-md-12">
+                    <div class="pre-content clear-bg">
+                        <div class="page-content p-5">
+                            <div class="mb-2">
+                                <h2>External links</h2>
+                            </div>
+                            <div class="container">
+                                <div class="row" id="external-links-content"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
 
         <%-- ORDER SECTION --%>
         <div class="container white-bg-small" id="order">

diff --git a/web/src/main/webapp/resources/js/general/genePage.js b/web/src/main/webapp/resources/js/general/genePage.js
@@ -0,0 +1,36 @@
+/**
+ * Copyright © 2011-2024 EMBL - European Bioinformatics Institute
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * toggle: used for the image dropdown.
+ *
+ */
+jQuery(document).ready(function () {
+    $.ajax({
+        url: 'https://nginx.mousephenotype-dev.org/data/api/v1/genes/' + gene_id + '/gene_external_links',
+        type: "GET",
+        success: function (results) {
+            $('.container#external-links').removeClass('hidden');
+            results.forEach(function (r) {
+                var linkDiv = $("<div class='mb-3 col-12'></div>");
+                var linkWithProvider = "<div class='link-wrapper'><b>"+ r.providerName +"</b> - <a class='primary link' href='" + r.href  + "' target='_blank'>" + r.label + "</a><i class='fal fa-external-link fa-xs'></i></div>";
+                linkDiv.append(linkWithProvider);
+                var list = $("<ul></ul>");
+                list.append("<li>" + !!r.description ? r.description : "" + "</li>");
+                linkDiv.append(list);
+                $('#external-links-content').append(linkDiv);
+            });
+        }
+    });
+});