mapr extension of webclient

omero_mapr/templates/webclient/base/base_container.html

@@ -0,0 +1,182 @@
+{% extends "webclient/base/base_container.html" %}
+{% load common_tags %}
+{% load mapr_tags %}
+
+{% comment %}
+/**
+  Copyright (C) 2012-2023 University of Dundee & Open Microscopy Environment.
+  All rights reserved.
+
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU Affero General Public License as
+  published by the Free Software Foundation, either version 3 of the
+  License, or (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  GNU Affero General Public License for more details.
+
+  You should have received a copy of the GNU Affero General Public License
+  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
+  This page overrides the webclient copy of webclient/base/base_container.html
+  to add css and JavaScript to the head of the page.
+*/
+{% endcomment %}
+
+
+{% block script %}
+
+    {{ block.super }}
+
+
+    <style type="text/css">
+
+        .keyValueTable tbody tr td span.favicon img {
+            border: 1px solid hsl(210, 8%, 65%);
+            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+            vertical-align: middle;
+            width: 15px;
+            height: 15px;
+        }
+        .keyValueTable tbody tr td span.blank img {
+            width: 17px;
+            height: 15px;
+        }
+        .keyValueTable thead tr h1 {
+            padding: 2px 0px;
+        }
+    </style>
+
+
+    <script type="text/javascript">
+
+    if (OME && OME.getCustomRightPanelUrl) {
+        // overwrite global function
+        OME.getCustomRightPanelUrl = function getCustomRightPanelUrl(oid) {
+            var orel = oid.split("-")[0];
+            if (orel.indexOf("map")>=0) {
+                var map_prefix = '{% url "maprindex" %}';
+                let params = new URLSearchParams({value: oid.split(/-(.+)/)[1]});
+                let map_url = map_prefix + 'metadata_details/{{ menu }}/?' + params;
+                return map_url;
+            }
+        }
+    }
+
+    // These rely on DOM ready...
+    $(function(){
+        // make sure details are ALWAYS opened
+        OME.setPaneExpanded('details', true);
+        // make sure maps are ALWAYS opened
+        OME.setPaneExpanded('maps', true);
+    });
+
+    var urlRegex = new RegExp("(https?|ftp|file):\/\/[!-~]*", "igm");
+
+    var iconify = function(input, imgsrc) {
+        if (typeof imgsrc === 'undefined') {
+            // e.g. https://www.google.com/s2/favicons?domain=https://www.ensembl.org/index.html
+            // mapr can store icon in redis and serve at
+            // e.g https://idr.openmicroscopy.org/mapr/favicon/?u=https://www.ensembl.org/index.html
+            imgsrc = "{% url "mapannotations_favicon" %}?u=";
+        }
+        function replacer(match){
+            return ' <span class="favicon"><a href="' + match + '" target="_blank" ><img src="' + imgsrc + encodeURIComponent(decodeURIComponent(match)) + '" /></a></span>';
+        };
+        return input.replace(urlRegex, replacer);
+    };
+
+    var isURL = function(input) {
+        return urlRegex.test(input);
+    };
+
+    var old_linkify_element = OME.linkify_element;
+    OME.linkify_element = function(elements) {
+        if ($("table.keyValueTable").is(elements) ) {
+            var mapr_menu = {% mapr_menu_config %};
+
+            // Replace namespace with label
+            var ns2menu = {};
+            $.each( mapr_menu, function( i, obj ) {
+                $.each( obj['ns'], function( j, ns ) {
+                    ns2menu[ns] = obj['label'];
+                });
+            });
+            var t = elements.find("thead").find("tr");
+            var $targets = t.filter(function() {
+                if ($(this).attr('title') in ns2menu) {
+                    var old = $(this).children("th").text();
+                    $(this).children("th").html("<h1>" + ns2menu[$(this).attr('title')] + "</h1>");
+                    $(this).closest('tr').nextAll("tr.tooltip").children('th').children('span')
+                        .append('<br/><b>NS:</b> ' + old + '');
+                }
+            });
+
+            // linkify also mapr keys and convert URL to icons
+            // Dict of {'Key Name': 'maprConfigId'}
+            var keys2menu = {};
+            $.each( mapr_menu, function( configId, config ) {
+                $.each( config['all'], function( j, maprKey ) {
+                    // some configs support multiple Keys in 'all'
+                    keys2menu[maprKey] = configId
+                });
+            });
+            let menu2keys = Object.keys(keys2menu);
+
+            // Look for rows that...
+            elements.find("tbody").find("tr").each(function() {
+                var $row = $(this);
+                if (!$row.parent().parent().hasClass("editableKeyValueTable")) {
+                    var $chlabel = $row.children("td:nth-child(1)");
+                    var $chvalue = $row.children("td:nth-child(2)");
+                    var _key = $chlabel.text().trim();
+                    var _val = $chvalue.text().trim();
+                    var _tkey = _key.replace(/url/i, "").trim();
+                    // Look for K-V pairs where the label is
+                    // '<mapr-PK>' or '<mapr-PK> URL'
+                    // Will be true for 'Gene Identifier' and 'Gene Identifier URL'
+                    if ( $.inArray(_tkey, menu2keys) > -1  ) {
+                        // IF the value is a URL, create a favicon
+                        $chvalue.html(iconify($chvalue.text()));
+                        // If the key is named in any mapr config,
+                        // E.g. _key is "Gene Symbol" or "Gene Identifier" for "gene" mapr config
+                        if ( $.inArray(_key, menu2keys) > -1 ) {
+                            if ( _key in keys2menu && keys2menu[_key] !== undefined ) {
+                                // Make Value into link to Internal mapr URL for the value, e.g. .../mapr/gene/?value=CDK5RAP2
+                                var _url = location.protocol + "//" + location.host + "{% url 'maprindex' %}" + keys2menu[_key] +"/?value=" + encodeURIComponent(_val);
+                                $chvalue.html($chvalue.html().replace(_val, '<a href="' + _url + '">' + _val + '</a>'));
+                            }
+                        }
+                        // If we're on e.g. "Gene Identifier URL" row...
+                        if ( _key.match(new RegExp("url", "i"))  ) {
+                            // Find the next previous row where
+                            // row[N-1].key == row[N].key + ' URL'
+                            var $target = $row.prev('tr');
+                            while ($target.length > 0 && $target.children("td:nth-child(1)").text() !== _tkey) {
+                                $target = $target.prev('tr');
+                            }
+                            if ($target.children("td:nth-child(1)").text() === _tkey) {
+                                var $targetchvalue = $target.children("td:nth-child(2)");
+                                // Take the Favicon html we created with iconify() above
+                                // and add it to the previous Value. Then hide this row.
+                                $targetchvalue.append($chvalue.html());
+                                $row.hide();
+                            }
+                        }
+                    } else {
+                        old_linkify_element($row);
+                    }
+                }
+
+            });
+        } else {
+            old_linkify_element(elements);
+        }
+    };
+
+    </script>
+
+{% endblock %}