autocomplete draft test

src/ontology/src/assets/ols-autocomplete.css

@@ -0,0 +1,36 @@
+.ontology-source{
+    background-color: #5FBDCE;
+    padding:2px;
+    padding-right:4px;
+    color: white;
+    /*font-size: larger;*/
+    border-radius: 3px;
+    display: inline-block;
+    margin-right: 4px;
+    vertical-align: middle;
+  }
+
+  a .ontology-source {
+    background-color: #5FBDCE;
+    padding:2px;
+    padding-right:4px;
+    color: white;
+    /*font-size: larger;*/
+    border-radius: 3px;
+    display: inline-block;
+    margin-right: 4px;
+    vertical-align: middle;
+    border-bottom: none;
+  }
+
+  .term-source{
+    background-color: #ffac1b;
+    padding:2px;
+    padding-right:4px;
+    color: white;
+    /*font-size: larger;*/
+    border-radius: 3px;
+    display: inline-block;
+    margin-right: 4px;
+    vertical-align: middle;
+  }

src/ontology/src/assets/ols-autocomplete.js

@@ -0,0 +1,175 @@
+require = function t(e, o, i) {
+    function a(r, s) {
+        if (!o[r]) {
+            if (!e[r]) {
+                var l = "function" == typeof require && require;
+                if (!s && l) return l(r, !0);
+                if (n) return n(r, !0);
+                var u = new Error("Cannot find module '" + r + "'");
+                throw u.code = "MODULE_NOT_FOUND", u
+            }
+            var d = o[r] = {
+                exports: {}
+            };
+            e[r][0].call(d.exports, function(t) {
+                var o = e[r][1][t];
+                return a(o ? o : t)
+            }, d, d.exports, t, e, o, i)
+        }
+        return o[r].exports
+    }
+    for (var n = "function" == typeof require && require, r = 0; r < i.length; r++) a(i[r]);
+    return a
+}({
+    "ols-autocomplete": [function(t, e, o) {
+        e.exports = autocomplete = function() {
+            function t(t) {
+                var e = "terms";
+                return "property" == t ? e = "properties" : "individual" == t ? e = "individuals" : "ontology" == t && (e = "ontology"), e
+            }
+
+            function e(t, e, o, i, a) {
+                if (void 0 != o && void 0 != i) {
+                    var n = encodeURIComponent(i);
+                    window.location.href = t + "ontologies/" + e + "/" + o + "?iri=" + n
+                } else window.location.href = t + "ontologies/" + suggestion_ontoloy
+            }
+
+            function o(e, o, i, a) {
+                e.bind("typeahead:select", function(e, i) {
+                    if (void 0 != i.data) {
+                        var a = t(i.data.type);
+                        "ontology" == a ? options.action.call(this, o, i.data.ontology, a, i.data.iri, i.data, i.value) : options.action.call(this, o, i.data.ontology, a, i.data.iri, i.data, i.value)
+                        // autocomplete selection done
+                        // now automatically fill ID field based on the selection
+                        autocomplete_input_name = e.currentTarget.name;
+                        // get the matching 'id' input field's name
+                        // classifying_ontology_term_name -> classifying_ontology_term_id
+                        target_input_name = autocomplete_input_name.replace("_name", "_id");
+                        if ($('input[name="' + target_input_name + '"]').length > 0) {
+                            $('input[name="' + target_input_name + '"]')[0].value = i.data.shortForm;
+                        }
+                    } else e.target.form.submit()
+                }).typeahead({
+                    hint: !1,
+                    highlight: !0,
+                    minLength: 2,
+                    limit: 4,
+                    async: !0
+                }, i)
+            }
+
+            function i(e) {
+                return {
+                    header: '<hr/><h5 style="text-align: center">' + e + "</h5>",
+                    suggestion: function(e) {
+                        var o = e.data.label,
+                            i = "";
+                        "" != e.data.synonym && (o = e.data.synonym, i = "<div class='sub-text'>synonym for " + e.value + "</div>");
+                        var a = "<div class='ontology-source'>" + e.data.prefix + "</div>",
+                            n = t(e.data.type);
+                        return "ontology" != n && (a += "&nbsp;<div class='term-source'>" + e.data.shortForm + "</div>"), "<div style='width: 100%; display: table;'> <div style='display: table-row'><div  style='display: table-cell;' class='ontology-suggest'><div class='suggestion-value'>" + o + "</div>" + i + "</div><div style='vertical-align:middle; text-align: right; width:60px; display: table-cell;'>" + a + "</div></div></div>"
+                    },
+                    footer: Handlebars.compile('<hr/><div onclick="jQuery(this).closest(\'form\').submit()" style="text-align: right;" class="tt-suggestion tt-selectable">Search EBI APIs</div>')
+                }
+            }
+
+            function a(t, e, o) {
+                var i = "";
+                return e && (i = "&ontology=" + e), o && (i += "&type=" + o), new Bloodhound({
+                    datumTokenizer: Bloodhound.tokenizers.whitespace,
+                    queryTokenizer: Bloodhound.tokenizers.whitespace,
+                    identify: function(t) {
+                        return t.id
+                    },
+                    remote: {
+                        url: t + "api/select?q=%QUERY" + i,
+                        wildcard: "%QUERY",
+                        transform: function(t) {
+                            return r(t)
+                        }
+                    }
+                })
+            }
+
+            function n(t, e) {
+                var o = "";
+                return e && (o = "&ontology=" + e), new Bloodhound({
+                    datumTokenizer: Bloodhound.tokenizers.whitespace,
+                    queryTokenizer: Bloodhound.tokenizers.whitespace,
+                    remote: {
+                        url: t + "api/suggest?q=%QUERY" + o,
+                        wildcard: "%QUERY",
+                        transform: function(t) {
+                            return jQuery.map(t.response.docs, function(t) {
+                                return {
+                                    value: t.autosuggest
+                                }
+                            })
+                        }
+                    }
+                })
+            }
+
+            function r(t) {
+                var e = t.responseHeader.params.q;
+                return jQuery.map(t.response.docs, function(o) {
+                    var i = o.id,
+                        a = o.label,
+                        n = "",
+                        r = !0;
+                    void 0 != t.highlighting[i].label_autosuggest ? (a = t.highlighting[i].label_autosuggest[0], r = !1) : void 0 != t.highlighting[i].label && (a = t.highlighting[i].label[0], r = !1), r && (void 0 != t.highlighting[i].synonym_autosuggest ? n = t.highlighting[i].synonym_autosuggest[0] : void 0 != t.highlighting[i].synonym && (n = t.highlighting[i].synonym[0]));
+                    var s = o.obo_id;
+                    return void 0 == s && (s = o.short_form), {
+                        id: i,
+                       // display label of the selected element
+                        value: o.label,
+                        data: {
+                            ontology: o.ontology_name,
+                            prefix: o.ontology_prefix,
+                            iri: o.iri,
+                            label: a,
+                            synonym: n,
+                            shortForm: s,
+                            type: o.type
+                        },
+                        query: e
+                    }
+                })
+            }
+            options = {
+                action: e
+            }, autocomplete.prototype.start = function(t) {
+                options = jQuery.extend(!0, {}, options, t), jQuery("input[data-olswidget='multisearch']").each(function() {
+                    var t = jQuery(this).data("selectpath") ? jQuery(this).data("selectpath") : "",
+                        e = jQuery(this).data("olsontology") ? jQuery(this).data("olsontology") : "",
+                        r = jQuery(this).data("olstype") ? jQuery(this).data("olstype") : "",
+                        s = jQuery(this).data("suggest-header") ? jQuery(this).data("suggest-header") : "",
+                        l = [{
+                            name: "suggestion",
+                            source: n(t, e),
+                            display: "value"
+                        }, {
+                            name: "selection",
+                            source: a(t, e, r),
+                            display: "value",
+                            templates: i(s)
+                        }];
+                    o(jQuery(this), t, l)
+                }), jQuery("input[data-olswidget='select']").each(function() {
+                    var t = jQuery(this).data("selectpath") ? jQuery(this).data("selectpath") : "",
+                        e = jQuery(this).data("olsontology") ? jQuery(this).data("olsontology") : "",
+                        n = jQuery(this).data("olstype") ? jQuery(this).data("olstype") : "",
+                        r = jQuery(this).data("suggest-header") ? jQuery(this).data("suggest-header") : "",
+                        s = [{
+                            name: "selection",
+                            source: a(t, e, n),
+                            display: "value",
+                            templates: i(r)
+                        }];
+                    o(jQuery(this), t, s)
+                })
+            }
+        }
+    }, {}]
+}, {}, []);

src/ontology/src/resources/ols_form.html

@@ -0,0 +1,56 @@
+{% extends "form.html" %}
+
+{% block head_end %}
+<link rel="stylesheet" href="{{ page.root }}assets/styles.css" />
+<link rel="stylesheet" href="{{ page.root }}assets/ols-autocomplete.css" />
+{% endblock %}
+
+{% block body_end %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
+<script src="{{ page.root }}assets/ols-autocomplete.js"></script>
+<script>
+  $("*[name='stressor']").first().attr("readonly", true);
+  $("*[name='stressor_label']").first().attr({
+    "data-selectpath": "https://www.ebi.ac.uk/ols4/",
+    "data-olsontology": "chebi",
+    "data-olswidget": "select",
+    "olstype": "",
+    "placeholder": "Search for ontology entity",
+  });
+
+  $("*[name='behavior']").first().attr("readonly", true);
+  $("*[name='behavior_label']").first().attr({
+    "data-selectpath": "https://www.ebi.ac.uk/ols4/",
+    "data-olsontology": "nbo",
+    "data-olswidget": "select",
+    "olstype": "",
+    "placeholder": "Search for ontology entity",
+  });
+
+  $("*[name='route']").first().attr("readonly", true);
+  $("*[name='route_label']").first().attr({
+    "data-selectpath": "https://www.ebi.ac.uk/ols4/",
+    "data-olsontology": "exo",
+    "data-olswidget": "select",
+    "olstype": "",
+    "placeholder": "Search for ontology entity",
+  });
+
+  var app = require("ols-autocomplete");
+  var instance = new app();
+  options = {
+    action: function (relativePath, suggestion_ontology, type, iri, data) {
+      console.log("In overwritten function")
+      console.log("Relative Path: " + relativePath)
+      console.log("Suggested Ontology: " + suggestion_ontology)
+      console.log("Type (optional): " + type)
+      console.log("iri (optional): " + iri)
+      console.log("Whole data element (optional+new): ")
+      console.log(data)
+      console.log(document.activeElement)
+      console.log("Field-id: " + $('.ebi-autocomplete:focus'))
+    }
+  }
+  instance.start(options);
+</script>
+{% endblock %}

src/ontology/src/schema/column.tsv

@@ -18,9 +18,11 @@ datatype	SQL type	SQL type	empty	sql_type		the SQLite type for representing this
 datatype	HTML type		empty	html_type		the HTML type for viewing and editing this data
 coasbrr	defined_class			ontology_id		
 coasbrr	defined_class_name			ontology_label		
-coasbrr	stressor			ontology_id		
-coasbrr	behavior			ontology_id		
-coasbrr	route			ontology_id		
+coasbrr	stressor			autocomplete_ont		
+coasbrr	stressor_label			ontology_label		
+coasbrr	behavior			autocomplete_ont		
+coasbrr	behavior_label			ontology_id		
+coasbrr	route			autocomplete_ont		
 coasr	defined_class			ontology_id		
 coasr	defined_class_name			ontology_label		
 coasr	stressor			ontology_id		

src/ontology/src/schema/datatype.tsv

@@ -14,4 +14,5 @@ sql_type	word	in('NULL', 'TEXT', 'INTEGER', 'REAL')	a SQL type		search
 html_type	word	in('input', 'textarea', 'search', 'radio', 'number', 'select')	an HTML form type		search
 ontology_id	non-space	match(/\w+:\w+/)	CURIE that does not begin or end with whitespace	TEXT	
 ontology_label	trimmed_text	match(/[^\s]+.+[^\s]/)	label that does not begin or end with whitespace		
-trimmed_text	text	exclude(/^\s+|\s+$/)	text that does not begin or end with whitespace		
+trimmed_text	text	exclude(/^\s+|\s+$/)	text that does not begin or end with whitespace		
+autocomplete_ont	line	exclude(/^\s+|\s+$/)	a ontology id		

src/patterns/data/default/consumption_of_addictive_substance_by_role_route.tsv

@@ -1,2 +1,2 @@
-defined_class	defined_class_name	stressor	behavior	route
-ECTO:0300011	exposure to opioid agent via maternal	CHEBI:60598	NBO:0001884	ExO:0000159
+defined_class	defined_class_name	stressor	strssor_label	behavior	behavior_label	route	route_label
+ECTO:0300011	exposure to opioid agent via maternal	CHEBI:60598	opioid agent	NBO:0001884	consumption of an addictive substance	ExO:0000159	maternal