diff --git a/__init__.py b/__init__.py index ad1ded5219dcd98184610046a3fa89f9f53843b8..4b0132c45f452626a336edf603e4ddbd57f34b16 100644 --- a/__init__.py +++ b/__init__.py @@ -170,25 +170,26 @@ def searchByUse(): def advancedSearch(): return render_template('advancedSearch.html', version=VERSION, alvisir=URL_ALVISIR) +# Advanced Search page +@app.route('/searchTaxon/') +@app.route('/searchTaxon') +def searchTaxon(): + taxon = request.args.get('taxon', None) + habitat = request.args.get('habitat', None) + qps = request.args.get('qps', None) + sources = request.args.getlist("source", None) + return render_template('searchByTaxon0.html', taxon=taxon, + habitat=habitat, + qps=qps, + sources=sources, + version=VERSION, + alvisir=URL_ALVISIR) + # Database queries -@app.route('/_get_list_taxon_habitat') -def get_list_taxon_habitat(): - return(list_terms(app, conn, "list_taxon")) -@app.route('/_get_list_habitat_taxon') -def get_list_habitat_taxon(): - return(list_terms(app, conn, "list_habitat")) -@app.route('/_get_list_taxon_phenotype') -def get_list_taxon_phenotype(): - return(list_terms(app, conn, "list_taxon_phenotype")) -@app.route('/_get_list_phenotype_taxon') -def get_list_phenotype_taxon(): - return(list_terms(app, conn, "list_phenotype_taxon")) -@app.route('/_get_list_taxon_use') -def get_list_taxon_use(): - return(list_terms(app, conn, "list_taxon_use")) -@app.route('/_get_list_use_taxon') -def get_list_use_taxon(): - return(list_terms(app, conn, "list_use_taxon")) +@app.route('/_get_list_term') +def get_list_term(): + table = request.args.get('table', None) + return(jsonify(list_terms(app, conn, table))) @app.route('/_get_path') def get_path(): diff --git a/database.py b/database.py index 586c7bab3a41e37b3cdb77a0b314517e9e458b9d..013ab5c64214ade3690dd526e277b38c8e83f79f 100644 --- a/database.py +++ b/database.py @@ -503,7 +503,7 @@ def search_join_relations_by_ontobiotope_aggregate(app, conn, source, qps, leftt # List of scientific name or class (taxon, habitat, phenotype, use) def list_terms(app, conn, table): - query = "SELECT name, path FROM " + table + query = 'SELECT name, path FROM ' + table + ' ORDER BY "name" ASC' conn = get_db(app) if conn != None: cursor = conn.cursor() @@ -511,9 +511,12 @@ def list_terms(app, conn, table): cursor.execute(query) except Exception as err: print_psycopg2_exception(err) - results = {} + results = [] for row in cursor.fetchall(): - results[row[0]] = row[1] + tmp = {} + tmp["name"] = row[0] + tmp["path"] = row[1].split("/")[-1] + results.append(tmp) cursor.close() return results diff --git a/static/css/additional.css b/static/css/additional.css index a47cf85658262cd8e06d38ee827cbeb8ea7329b5..33b8d00d478661573fad441ecd6c15d2c9f3f848 100644 --- a/static/css/additional.css +++ b/static/css/additional.css @@ -14,6 +14,19 @@ # limitations under the License. */ +.button-select { + background-color: #21517A; + border-color: #21517A; + color: #fff; + height: 34px; +} + +.button-select-filter { + height: 34px; + align-items: center; + display: flex; +} + /* Mimic .fa */ .glyphicon { display: inline-block !important; diff --git a/static/css/selectize.boostrap3.css b/static/css/selectize.boostrap3.css index c5efd323e009c6c67d00e093bf581e519397b720..5323e9e02c0d61c638b44047b6fb10140d68ba17 100644 --- a/static/css/selectize.boostrap3.css +++ b/static/css/selectize.boostrap3.css @@ -1 +1,208 @@ -.selectize-control.plugin-drag_drop.multi>.selectize-input>div.ui-sortable-placeholder{visibility:visible !important;background:#f2f2f2 !important;background:rgba(0,0,0,.06) !important;border:0 none !important;box-shadow:inset 0 0 12px 4px #fff}.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after{content:"!";visibility:hidden}.selectize-control.plugin-drag_drop .ui-sortable-helper{box-shadow:0 2px 5px rgba(0,0,0,.2)}.selectize-control .dropdown-header{position:relative;padding:6px 12px;border-bottom:1px solid #d0d0d0;background:#f8f8f8;border-radius:4px 4px 0 0}.selectize-control .dropdown-header-close{position:absolute;right:12px;top:50%;color:#333;opacity:.4;margin-top:-12px;line-height:20px;font-size:20px !important}.selectize-control .dropdown-header-close:hover{color:#000}.selectize-dropdown.plugin-optgroup_columns .selectize-dropdown-content{display:flex}.selectize-dropdown.plugin-optgroup_columns .optgroup{border-right:1px solid #f2f2f2;border-top:0 none;flex-grow:1;flex-basis:0;min-width:0}.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child{border-right:0 none}.selectize-dropdown.plugin-optgroup_columns .optgroup:before{display:none}.selectize-dropdown.plugin-optgroup_columns .optgroup-header{border-top:0 none}.selectize-control.plugin-remove_button .item{display:inline-flex;align-items:center;padding-right:0 !important}.selectize-control.plugin-remove_button .item .remove{color:inherit;text-decoration:none;vertical-align:middle;display:inline-block;padding:1px 5px;border-left:1px solid rgba(0,0,0,0);border-radius:0 2px 2px 0;box-sizing:border-box;margin-left:5px}.selectize-control.plugin-remove_button .item .remove:hover{background:rgba(0,0,0,.05)}.selectize-control.plugin-remove_button .item.active .remove{border-left-color:rgba(0,0,0,0)}.selectize-control.plugin-remove_button .disabled .item .remove:hover{background:none}.selectize-control.plugin-remove_button .disabled .item .remove{border-left-color:rgba(77,77,77,0)}.selectize-control.plugin-remove_button .remove-single{position:absolute;right:0;top:0;font-size:23px}.selectize-control{position:relative}.selectize-dropdown,.selectize-input,.selectize-input input{color:#333;font-family:inherit;font-size:inherit;line-height:20px;font-smoothing:inherit}.selectize-input,.selectize-control.single .selectize-input.input-active{background:#fff;cursor:text;display:inline-block}.selectize-input{border:1px solid #ccc;padding:6px 12px;display:inline-block;width:100%;overflow:hidden;position:relative;z-index:1;box-sizing:border-box;box-shadow:none;border-radius:4px}.selectize-control.multi .selectize-input.has-items{padding:calc( 6px - 1px - 0 ) 12px calc( 6px - 1px - 3px - 0 )}.selectize-input.full{background-color:#fff}.selectize-input.disabled,.selectize-input.disabled *{cursor:default !important}.selectize-input.focus{box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}.selectize-input.dropdown-active{border-radius:4px 4px 0 0}.selectize-input>*{vertical-align:baseline;display:inline-block;zoom:1}.selectize-control.multi .selectize-input>div{cursor:pointer;margin:0 3px 3px 0;padding:1px 5px;background:#efefef;color:#333;border:0 solid rgba(0,0,0,0)}.selectize-control.multi .selectize-input>div.active{background:#337ab7;color:#fff;border:0 solid rgba(0,0,0,0)}.selectize-control.multi .selectize-input.disabled>div,.selectize-control.multi .selectize-input.disabled>div.active{color:gray;background:#fff;border:0 solid rgba(77,77,77,0)}.selectize-input>input{display:inline-block !important;padding:0 !important;min-height:0 !important;max-height:none !important;max-width:100% !important;margin:0 !important;text-indent:0 !important;border:0 none !important;background:none !important;line-height:inherit !important;user-select:auto !important;box-shadow:none !important}.selectize-input>input::-ms-clear{display:none}.selectize-input>input:focus{outline:none !important}.selectize-input>input[placeholder]{box-sizing:initial}.selectize-input.has-items>input{margin:0 4px !important}.selectize-input::after{content:" ";display:block;clear:left}.selectize-input.dropdown-active::before{content:" ";display:block;position:absolute;background:#fff;height:1px;bottom:0;left:0;right:0}.selectize-dropdown{position:absolute;top:100%;left:0;width:100%;z-index:10;border:1px solid #d0d0d0;background:#fff;margin:-1px 0 0 0;border-top:0 none;box-sizing:border-box;box-shadow:0 1px 3px rgba(0,0,0,.1);border-radius:0 0 4px 4px}.selectize-dropdown [data-selectable]{cursor:pointer;overflow:hidden}.selectize-dropdown [data-selectable] .highlight{background:rgba(255,237,40,.4);border-radius:1px}.selectize-dropdown .option,.selectize-dropdown .optgroup-header,.selectize-dropdown .no-results,.selectize-dropdown .create{padding:3px 12px}.selectize-dropdown .option,.selectize-dropdown [data-disabled],.selectize-dropdown [data-disabled] [data-selectable].option{cursor:inherit;opacity:.5}.selectize-dropdown [data-selectable].option{opacity:1;cursor:pointer}.selectize-dropdown .optgroup:first-child .optgroup-header{border-top:0 none}.selectize-dropdown .optgroup-header{color:#777;background:#fff;cursor:default}.selectize-dropdown .active{background-color:#f5f5f5;color:#262626}.selectize-dropdown .active.create{color:#262626}.selectize-dropdown .create{color:rgba(51,51,51,.5)}.selectize-dropdown-content{overflow-y:auto;overflow-x:hidden;max-height:200px;overflow-scrolling:touch}.selectize-dropdown .spinner{display:inline-block;width:30px;height:30px;margin:3px 12px}.selectize-dropdown .spinner:after{content:" ";display:block;width:24px;height:24px;margin:3px;border-radius:50%;border:5px solid #d0d0d0;border-color:#d0d0d0 transparent #d0d0d0 transparent;animation:lds-dual-ring 1.2s linear infinite}@keyframes lds-dual-ring{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.selectize-control.single .selectize-input,.selectize-control.single .selectize-input input{cursor:pointer}.selectize-control.single .selectize-input.input-active,.selectize-control.single .selectize-input.input-active input{cursor:text}.selectize-control.single .selectize-input:after{content:" ";display:block;position:absolute;top:50%;right:17px;margin-top:-3px;width:0;height:0;border-style:solid;border-width:5px 5px 0 5px;border-color:#333 transparent transparent transparent}.selectize-control.single .selectize-input.dropdown-active:after{margin-top:-4px;border-width:0 5px 5px 5px;border-color:transparent transparent #333 transparent}.selectize-control.rtl{text-align:right}.selectize-control.rtl.single .selectize-input:after{left:17px;right:auto}.selectize-control.rtl .selectize-input>input{margin:0 4px 0 -2px !important}.selectize-control .selectize-input.disabled{opacity:.5;background-color:#fff}.selectize-dropdown,.selectize-dropdown.form-control{height:auto;padding:0;margin:2px 0 0 0;z-index:1000;background:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;box-shadow:0 6px 12px rgba(0,0,0,.175)}.selectize-dropdown .optgroup-header{font-size:12px;line-height:1.428571429}.selectize-dropdown .optgroup:first-child:before{display:none}.selectize-dropdown .optgroup:before{content:" ";display:block;height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5;margin-left:-12px;margin-right:-12px}.selectize-dropdown-content{padding:5px 0}.selectize-input{min-height:34px}.selectize-input.dropdown-active{border-radius:4px}.selectize-input.dropdown-active::before{display:none}.selectize-input.focus{border-color:#66afe9;outline:0;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.has-error .selectize-input{border-color:#a94442;box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-error .selectize-input:focus{border-color:#843534;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}.selectize-control.multi .selectize-input.has-items{padding-left:7px;padding-right:7px}.selectize-control.multi .selectize-input>div{border-radius:3px}.form-control.selectize-control{padding:0;height:auto;border:none;background:none;box-shadow:none;border-radius:0} +.selectize-control.plugin-drag_drop.multi>.selectize-input>div.ui-sortable-placeholder{ + visibility:visible !important; + background:#f2f2f2 !important; + background:rgba(0,0,0,.06) !important; + border:0 none !important; + box-shadow:inset 0 0 12px 4px #fff; +} +.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after{ + content:"!"; + visibility:hidden; +} +.selectize-control.plugin-drag_drop .ui-sortable-helper{ + box-shadow:0 2px 5px rgba(0,0,0,.2); +} +.selectize-control .dropdown-header{ + position:relative; + padding:6px 12px; + border-bottom:1px solid #d0d0d0; + background:#f8f8f8; + border-radius:4px 4px 0 0; +} +.selectize-control .dropdown-header-close{ + position:absolute; + right:12px; + top:50%; + color:#333; + opacity:.4; + margin-top:-12px; + line-height:20px; + font-size:20px !important; +} +.selectize-control .dropdown-header-close:hover{ + color:#000; +} +.selectize-dropdown.plugin-optgroup_columns .selectize-dropdown-content{ + display:flex; +} +.selectize-dropdown.plugin-optgroup_columns .optgroup{ + border-right:1px solid #f2f2f2; + border-top:0 none; + flex-grow:1; + flex-basis:0; + min-width:0; +} +.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child{ + border-right:0 none; +} +.selectize-dropdown.plugin-optgroup_columns .optgroup:before{ + display:none; +} +.selectize-dropdown.plugin-optgroup_columns .optgroup-header{ + border-top:0 none; +} +.selectize-control.plugin-remove_button .item{ + display:inline-flex; + align-items:center; + padding-right:0 !important; +} +.selectize-control.plugin-remove_button .item .remove{ + color:inherit; + text-decoration:none; + vertical-align:middle; + display:inline-block; + padding:1px 5px; + border-left:1px solid rgba(0,0,0,0); + border-radius:0 2px 2px 0; + box-sizing:border-box; + margin-left:5px; +} +.selectize-control.plugin-remove_button .item .remove:hover{ + background:rgba(0,0,0,.05); +} +.selectize-control.plugin-remove_button .item.active .remove{ + border-left-color:rgba(0,0,0,0); +} +.selectize-control.plugin-remove_button .disabled .item .remove:hover{ + background:none; +} +.selectize-control.plugin-remove_button .disabled .item .remove{ + border-left-color:rgba(77,77,77,0); +} +.selectize-control.plugin-remove_button .remove-single{ + position:absolute; + right:0; + top:0; + font-size:23px; +} +.selectize-control{ + position:relative; +} +.selectize-dropdown,.selectize-input,.selectize-input input{ + color:#333; + font-family:inherit; + font-size:inherit; + line-height:20px; + font-smoothing:inherit; +} +.selectize-input,.selectize-control.single .selectize-input.input-active{ + background:#fff; + cursor:text; + display:inline-block; +} +.selectize-input{ + border:1px solid #ccc; + padding:6px 12px; + display:inline-block; + width:100%; + overflow:hidden; + position:relative; + z-index:1; + box-sizing:border-box; + box-shadow:none; + border-radius:4px; +} +.selectize-control.multi .selectize-input.has-items{ + padding:calc( 6px - 1px - 0 ) 12px calc( 6px - 1px - 3px - 0 ); +} +.selectize-input.full{ + background-color:#fff; +} +.selectize-input.disabled,.selectize-input.disabled *{ + cursor:default !important; +} +.selectize-input.focus{ + box-shadow:inset 0 1px 2px rgba(0,0,0,.15); +} +.selectize-input.dropdown-active{ + border-radius:4px 4px 0 0; +} +.selectize-input>*{ + vertical-align:baseline; + display:inline-block; + zoom:1; +} +.selectize-control.multi .selectize-input>div{ + cursor:pointer; + margin:0 3px 3px 0; + padding:1px 5px; + background:#efefef; + color:#333; + border:0 solid rgba(0,0,0,0); +} +.selectize-control.multi .selectize-input>div.active{ + background:#337ab7; + color:#fff; + border:0 solid rgba(0,0,0,0); +} +.selectize-control.multi .selectize-input.disabled>div,.selectize-control.multi .selectize-input.disabled>div.active{ + color:gray; + background:#fff; + border:0 solid rgba(77,77,77,0); +} +.selectize-input>input{ + display:inline-block !important; + padding:0 !important; + min-height:0 !important; + max-height:none !important; + max-width:100% !important; + margin:0 !important; + text-indent:0 !important; + border:0 none !important; + background:none !important; + line-height:inherit !important; + user-select:auto !important; + box-shadow:none !important; +} +.selectize-input>input::-ms-clear{ + display:none; +} +.selectize-input>input:focus{ + outline:none !important; +} +.selectize-input>input[placeholder]{ + box-sizing:initial; +} +.selectize-input.has-items>input{ + margin:0 4px !important; +} +.selectize-input::after{ + content:" "; + display:block; + clear:left; +} +.selectize-input.dropdown-active::before{ + content:" "; + display:block; + position:absolute; + background:#fff; + height:1px; + bottom:0; + left:0; + right:0; +} +.selectize-dropdown{ + position:absolute; + top:100%; + left:0; + width:100%; + z-index:10; + border:1px solid #d0d0d0; + background:#fff; + margin:-1px 0 0 0; + border-top:0 none; + box-sizing:border-box; + box-shadow:0 1px 3px rgba(0,0,0,.1); + border-radius:0 0 4px 4px; +} +.selectize-dropdown [data-selectable]{cursor:pointer;overflow:hidden}.selectize-dropdown [data-selectable] .highlight{background:rgba(255,237,40,.4);border-radius:1px}.selectize-dropdown .option,.selectize-dropdown .optgroup-header,.selectize-dropdown .no-results,.selectize-dropdown .create{padding:3px 12px}.selectize-dropdown .option,.selectize-dropdown [data-disabled],.selectize-dropdown [data-disabled] [data-selectable].option{cursor:inherit;opacity:.5}.selectize-dropdown [data-selectable].option{opacity:1;cursor:pointer}.selectize-dropdown .optgroup:first-child .optgroup-header{border-top:0 none}.selectize-dropdown .optgroup-header{color:#777;background:#fff;cursor:default}.selectize-dropdown .active{background-color:#f5f5f5;color:#262626}.selectize-dropdown .active.create{color:#262626}.selectize-dropdown .create{color:rgba(51,51,51,.5)}.selectize-dropdown-content{overflow-y:auto;overflow-x:hidden;max-height:200px;overflow-scrolling:touch}.selectize-dropdown .spinner{display:inline-block;width:30px;height:30px;margin:3px 12px}.selectize-dropdown .spinner:after{content:" ";display:block;width:24px;height:24px;margin:3px;border-radius:50%;border:5px solid #d0d0d0;border-color:#d0d0d0 transparent #d0d0d0 transparent;animation:lds-dual-ring 1.2s linear infinite}@keyframes lds-dual-ring{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.selectize-control.single .selectize-input,.selectize-control.single .selectize-input input{cursor:pointer}.selectize-control.single .selectize-input.input-active,.selectize-control.single .selectize-input.input-active input{cursor:text}.selectize-control.single .selectize-input:after{content:" ";display:block;position:absolute;top:50%;right:17px;margin-top:-3px;width:0;height:0;border-style:solid;border-width:5px 5px 0 5px;border-color:#333 transparent transparent transparent}.selectize-control.single .selectize-input.dropdown-active:after{margin-top:-4px;border-width:0 5px 5px 5px;border-color:transparent transparent #333 transparent}.selectize-control.rtl{text-align:right}.selectize-control.rtl.single .selectize-input:after{left:17px;right:auto}.selectize-control.rtl .selectize-input>input{margin:0 4px 0 -2px !important}.selectize-control .selectize-input.disabled{opacity:.5;background-color:#fff}.selectize-dropdown,.selectize-dropdown.form-control{height:auto;padding:0;margin:2px 0 0 0;z-index:1000;background:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;box-shadow:0 6px 12px rgba(0,0,0,.175)}.selectize-dropdown .optgroup-header{font-size:12px;line-height:1.428571429}.selectize-dropdown .optgroup:first-child:before{display:none}.selectize-dropdown .optgroup:before{content:" ";display:block;height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5;margin-left:-12px;margin-right:-12px}.selectize-dropdown-content{padding:5px 0}.selectize-input{min-height:34px}.selectize-input.dropdown-active{border-radius:4px}.selectize-input.dropdown-active::before{display:none}.selectize-input.focus{border-color:#66afe9;outline:0;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.has-error .selectize-input{border-color:#a94442;box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-error .selectize-input:focus{border-color:#843534;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}.selectize-control.multi .selectize-input.has-items{padding-left:7px;padding-right:7px}.selectize-control.multi .selectize-input>div{border-radius:3px}.form-control.selectize-control{padding:0;height:auto;border:none;background:none;box-shadow:none;border-radius:0} diff --git a/static/js/searchByHabitat.js b/static/js/searchByHabitat.js index dcd356c029f9f16b79b17d22039d6455d905468c..edf4156a64d446806ab5f12d4f7d83301818b080 100644 --- a/static/js/searchByHabitat.js +++ b/static/js/searchByHabitat.js @@ -18,34 +18,56 @@ import { format_docs } from './utils.js'; $("#searchByHabitat.nav-item").addClass( "active" ); -// List Habitat -if ( sessionStorage.getItem("list_habitat_taxon") === null ) { - $.getJSON($SCRIPT_ROOT + '/_get_list_habitat_taxon', - function success(list_habitat_taxon) { - sessionStorage.setItem("list_habitat_taxon", JSON.stringify(Object.keys(list_habitat_taxon).sort())); - autocomplete_taxon_habitat(); +$('#spinner_habitat_taxon').show(); +$('#spinner_habitat_taxon2').show(); + +// Habitat selection +var $select = $('#search_habitat').selectize({ + valueField: 'path', + labelField: 'name', + searchField: 'name', + sortField: 'name', + placeholder: 'e.g. soy milk', + openOnFocus: false, + create: false, + maxItems: 1, + onInitialize: function() { + var that = this; + + $.getJSON($SCRIPT_ROOT + '/_get_list_term', + { table: "list_habitat"}, + function(data) { + data.forEach(function(item) { + that.addOption(item); + }); + $('#spinner_habitat_taxon').hide(); + $('#spinner_habitat_taxon2').hide(); + $('#search_habitat option:selected').prop('disabled', false); + }); + }, + onChange:function(ontobiotopeid){ + if (ontobiotopeid != "") { + + // Tree event + $('#habitattree').data('simpleTree').clearSelection(); + $('#habitattree').data('simpleTree').collapseAll(); + var node = $('#habitattree').data('simpleTree').getNodeFromValue(ontobiotopeid); + $('#habitattree').data('simpleTree').setSelectedNode(node); + } + } }); -} -else { - autocomplete_taxon_habitat(); -} +var selectize = $select[0].selectize; -// Tree Options +// Tree var options = { searchBox: $('#searchtreehabitat'), searchMinInputLength: 4 }; -// Tree $.getJSON($SCRIPT_ROOT + '/_get_ontobiotope_habitat', function(data) { $('#habitattree').simpleTree(options, data); // URL: habitat if ( habitat !== null ) { - $('#spinner_habitat_taxon').show(); - $('#spinner_habitat_taxon2').show(); - - $("#relationTaxonByHabitat").val(habitat); - $('#filter_habitat_taxon').removeAttr('disabled'); $.getJSON($SCRIPT_ROOT + '/_get_path', {name: habitat, table: 'list_habitat'}, @@ -57,7 +79,6 @@ $.getJSON($SCRIPT_ROOT + '/_get_ontobiotope_habitat', function(data) { // Tree event var node = $('#habitattree').data('simpleTree').getNodeFromValue(ontobiotopeid); $('#habitattree').data('simpleTree').setSelectedNode(node); - $('#searchtreehabitat').val(habitat); }}); } @@ -76,101 +97,30 @@ $.getJSON($SCRIPT_ROOT + '/_get_ontobiotope_habitat', function(data) { $('input.column_filter').val(taxon); } }); - -// Tree event $('#habitattree').on('simpleTree:change', function(event){ - $('#treeModalHabitat').modal('hide'); + if ( $('#habitattree').data('simpleTree').getSelectedNode() != undefined ) { - $('#habitattree').data('simpleTree').collapseAll(); - $('#habitattree').data('simpleTree').expandTo($('#habitattree').data('simpleTree').getSelectedNode()); + selectize.clear(false); + selectize.setValue($('#habitattree').data('simpleTree').getSelectedNode().value, true); - $('#spinner_habitat_taxon').show(); - $('#spinner_habitat_taxon2').show(); - - $("#relationTaxonByHabitat").val($('#habitattree').data('simpleTree').getSelectedNode().label); - $('#filter_habitat_taxon').removeAttr('disabled'); - - $.getJSON($SCRIPT_ROOT + '/_get_path', - {name: $('#habitattree').data('simpleTree').getSelectedNode().label, table: 'list_habitat'}, - function success(path) { - if ( path != '' ) { - let l_path = path[0].split('/'); - let ontobiotopeid = l_path[l_path.length-1]; + $('#spinner_habitat_taxon').show(); + $('#spinner_habitat_taxon2').show(); - // Tree event - var node = $('#habitattree').data('simpleTree').getNodeFromValue(ontobiotopeid); - $('#habitattree').data('simpleTree').setSelectedNode(node); - createTable(ontobiotopeid); - } - else { - alert("No result for " + $('#habitattree').data('simpleTree').getSelectedNode().label); - // Spinner off - $('#spinner_habitat_taxon').hide(); - $('#spinner_habitat_taxon2').hide(); - // Clear oracle - $("#relationTaxonByHabitat").val(""); - $('#filter_habitat_taxon').attr('disabled', 'disabled'); - // Change URL - window.location.replace(window.location.pathname); - } - }); + $('#searchtreehabitat').val($('#habitattree').data('simpleTree').getSelectedNode().label); + createTable($('#habitattree').data('simpleTree').getSelectedNode().value); + $("#search_habitat option:selected").text(); + $("#search_habitat option:selected").text($('#habitattree').data('simpleTree').getSelectedNode().label); + $("#search_habitat option:selected").val($('#habitattree').data('simpleTree').getSelectedNode().value); + selectize.setTextboxValue(""); + selectize.setTextboxValue($('#habitattree').data('simpleTree').getSelectedNode().label); + $('#filter_habitat_taxon').removeAttr('disabled'); + $('#treeModalHabitat').modal('hide'); + } }); -// Search by habitat (autocompletion) -function autocomplete_taxon_habitat() { - $( "#relationTaxonByHabitat" ).autocomplete({ - source: JSON.parse(sessionStorage.getItem("list_habitat_taxon")), - minLength: 3, - select: function( event, ui ) { - $('#filter_habitat_taxon').removeAttr('disabled'); - - $('#spinner_habitat_taxon').show(); - $('#spinner_habitat_taxon2').show(); - - $.getJSON($SCRIPT_ROOT + '/_get_path', - {name: ui.item.value, table: 'list_habitat'}, - function success(path) { - if ( path != '' ) { - let l_path = path[0].split('/'); - let ontobiotopeid = l_path[l_path.length-1]; - - createTable(ontobiotopeid); - - // Tree event - $('#habitattree').data('simpleTree').clearSelection(); - var node = $('#habitattree').data('simpleTree').getNodeFromValue(ontobiotopeid); - $('#habitattree').data('simpleTree').setSelectedNode(node); - $('#searchtreehabitat').val(ui.item.value); - } - } - ); - } - }); -} - -// function format(d) { -// -// var docids = format_docs(d, alvisir, 'habitat'); -// return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+ -// '<tr>'+ -// '<td><b>Full source text</b></td>'+ -// '<td align="justify">'+docids+'</td>'+ -// '</tr>'+ -// '<tr>'+ -// '<td><b>Occurrence in text (habitat)</b></td>'+ -// '<td align="justify">'+d[1].split(", ").slice(1,).join(', ')+'</td>'+ -// '</tr>'+ -// '<tr>'+ -// '<td><b>Occurrence in text (taxon)</b></td>'+ -// '<td align="justify">'+d[3].split(", ").slice(1,).join(', ')+'</td>'+ -// '</tr>'+ -// '</table>'; -// } - -var thtable = $('#results_habitat_taxon').DataTable(); - // Datatable +var thtable = $('#results_habitat_taxon').DataTable(); function createTable(ontobiotopeid) { $.getJSON($SCRIPT_ROOT + '/_get_list_relations', @@ -312,36 +262,17 @@ function createTable(ontobiotopeid) { ] }); - if ( $('#taxon_ht').val() != '' ) { filterColumnTaxon(3); } - if ( $('#sources_ht').val() != '' ) { filterSourceColumn(5); } - if ( $('input[name=qps_ht]').is(':checked') == true ) { filterColumnCheck(4); } + if ( $('#taxon_ht').val() != '' ) { filterColumnTaxon(3); } + if ( $('#sources_ht').val() != '' ) { filterSourceColumn(5); } + if ( $('input[name=qps_ht]').is(':checked') == true ) { filterColumnCheck(4); } - $('#spinner_habitat_taxon').hide(); - $('#spinner_habitat_taxon2').hide(); + $('#spinner_habitat_taxon').hide(); + $('#spinner_habitat_taxon2').hide(); - checkURL(); + checkURL(); }); } -// Click on table row -// $('#results_habitat_taxon tbody').on('click', 'td.details-control', function () { -// var tr = $(this).closest('tr'); -// console.log("TR : ", tr); -// var row = thtable.row( tr ); -// console.log("ROW : ", row); -// -// if ( row.child.isShown() ) { -// // This row is already open - close it -// row.child.hide(); -// tr.removeClass('shown'); -// } -// else { -// // Open this row -// row.child( format(row.data())).show(); -// tr.addClass('shown'); -// } -// } ); - // Filter - Taxon function filterColumnTaxon(i) { $('#results_habitat_taxon').DataTable().column(i).search( @@ -381,8 +312,8 @@ $('input:checkbox').on('change', function () { // Check url function checkURL() { var url = window.location.pathname; - if ( $("#relationTaxonByHabitat").val() !== '' ) { - url += "?habitat=" + $("#relationTaxonByHabitat").val(); + if ( $("#search_habitat option:selected").text() !== '' ) { + url += "?habitat=" + $("#search_habitat option:selected").text(); } if ( $("#taxon_ht").val() !== '' ) { url += "&taxon=" + $("#taxon_ht").val(); diff --git a/static/js/searchByPhenotype.js b/static/js/searchByPhenotype.js index e2612aa1ccdf48c190eb35fb8ef452f0c1c165ee..c51c5bd90192a091c8337ee029dd7ea72848b7c3 100644 --- a/static/js/searchByPhenotype.js +++ b/static/js/searchByPhenotype.js @@ -18,35 +18,56 @@ import { format_docs } from './utils.js'; $("#searchByPhenotype.nav-item").addClass( "active" ); -// List Phenotype -if ( sessionStorage.getItem("list_phenotype_taxon") === null ) { - $.getJSON($SCRIPT_ROOT + '/_get_list_phenotype_taxon', - function success(list_phenotype_taxon) { - sessionStorage.setItem("list_phenotype_taxon", JSON.stringify(Object.keys(list_phenotype_taxon).sort())); - autocomplete_taxon_phenotype(); +$('#spinner_phenotype_taxon').show(); +$('#spinner_phenotype_taxon2').show(); + +// Phenotype selection +var $select = $('#search_phenotype').selectize({ + valueField: 'path', + labelField: 'name', + searchField: 'name', + sortField: 'name', + placeholder: 'e.g. thermophile', + openOnFocus: false, + create: false, + maxItems: 1, + onInitialize: function() { + var that = this; + + $.getJSON($SCRIPT_ROOT + '/_get_list_term', + { table: "list_phenotype_taxon"}, + function(data) { + data.forEach(function(item) { + that.addOption(item); + }); + $('#spinner_phenotype_taxon').hide(); + $('#spinner_phenotype_taxon2').hide(); + $('#search_phenotype option:selected').prop('disabled', false); + }); + }, + onChange:function(ontobiotopeid){ + if (ontobiotopeid != "") { + + // Tree event + $('#phenotypetree').data('simpleTree').clearSelection(); + $('#phenotypetree').data('simpleTree').collapseAll(); + var node = $('#phenotypetree').data('simpleTree').getNodeFromValue(ontobiotopeid); + $('#phenotypetree').data('simpleTree').setSelectedNode(node); + } + } }); -} -else { - autocomplete_taxon_phenotype(); -} +var selectize = $select[0].selectize; -// Tree Options +// Tree var options = { searchBox: $('#searchtreephenotype'), searchMinInputLength: 4 }; -// Tree $.getJSON($SCRIPT_ROOT + '/_get_ontobiotope_phenotype', function(data) { $('#phenotypetree').simpleTree(options, data); // URL : phenotype if ( phenotype !== null ) { - $('#spinner_phenotype_taxon').show(); - $('#spinner_phenotype_taxon2').show(); - - $("#relationTaxonByPhenotype").val(phenotype); - $('#filter_phenotype_taxon').removeAttr('disabled'); - $.getJSON($SCRIPT_ROOT + '/_get_path', {name: phenotype, table: 'list_phenotype_taxon'}, function success(path) { @@ -57,7 +78,6 @@ $.getJSON($SCRIPT_ROOT + '/_get_ontobiotope_phenotype', function(data) { // Tree event var node = $('#phenotypetree').data('simpleTree').getNodeFromValue(ontobiotopeid); $('#phenotypetree').data('simpleTree').setSelectedNode(node); - $('#searchtreephenotype').val(phenotype); } }); } @@ -72,100 +92,30 @@ $.getJSON($SCRIPT_ROOT + '/_get_ontobiotope_phenotype', function(data) { $('input.column_filter').val(taxon); } }); - -// Tree event $('#phenotypetree').on('simpleTree:change', function(event){ - $('#treeModalPhenotype').modal('hide'); - - $('#phenotypetree').data('simpleTree').collapseAll(); - $('#phenotypetree').data('simpleTree').expandTo($('#phenotypetree').data('simpleTree').getSelectedNode()); - - $('#spinner_phenotype_taxon').show(); - $('#spinner_phenotype_taxon2').show(); + if ( $('#phenotypetree').data('simpleTree').getSelectedNode() != undefined ) { - $("#relationTaxonByPhenotype").val($('#phenotypetree').data('simpleTree').getSelectedNode().label); - $('#filter_phenotype_taxon').removeAttr('disabled'); + selectize.clear(false); + selectize.setValue($('#phenotypetree').data('simpleTree').getSelectedNode().value, true); - $.getJSON($SCRIPT_ROOT + '/_get_path', - {name: $('#phenotypetree').data('simpleTree').getSelectedNode().label, table: 'list_phenotype_taxon'}, - function success(path) { - if ( path != '' ) { - let l_path = path[0].split('/'); - let ontobiotopeid = l_path[l_path.length-1]; + $('#spinner_phenotype_taxon').show(); + $('#spinner_phenotype_taxon2').show(); - // Tree event - var node = $('#phenotypetree').data('simpleTree').getNodeFromValue(ontobiotopeid); - $('#phenotypetree').data('simpleTree').setSelectedNode(node); - createTable(ontobiotopeid); - } - else { - alert("No result for " + phenotype); - // Spinner off - $('#spinner_phenotype_taxon').hide(); - $('#spinner_phenotype_taxon2').hide(); - // Clear oracle - $("#relationTaxonByPhenotype").val(""); - $('#filter_phenotype_taxon').attr('disabled', 'disabled'); - // Change URL - window.location.replace(window.location.pathname); - } - }); + $('#searchtreephenotype').val($('#phenotypetree').data('simpleTree').getSelectedNode().label); + createTable($('#phenotypetree').data('simpleTree').getSelectedNode().value); + $("#search_phenotype option:selected").text(); + $("#search_phenotype option:selected").text($('#phenotypetree').data('simpleTree').getSelectedNode().label); + $("#search_phenotype option:selected").val($('#phenotypetree').data('simpleTree').getSelectedNode().value); + selectize.setTextboxValue(""); + selectize.setTextboxValue($('#phenotypetree').data('simpleTree').getSelectedNode().label); + $('#filter_phenotype_taxon').removeAttr('disabled'); + $('#treeModalPhenotype').modal('hide'); + } }) -// Search by phenotype (autocompletion) -function autocomplete_taxon_phenotype() { - $( "#relationTaxonByPhenotype" ).autocomplete({ - source: JSON.parse(sessionStorage.getItem("list_phenotype_taxon")), - minLength: 3, - select: function( event, ui ) { - $('#filter_phenotype_taxon').removeAttr('disabled'); - - $('#spinner_phenotype_taxon').show(); - $('#spinner_phenotype_taxon2').show(); - - $.getJSON($SCRIPT_ROOT + '/_get_path', - {name: ui.item.value, table: 'list_phenotype_taxon'}, - function success(path) { - if ( path != '' ) { - let l_path = path[0].split('/'); - let ontobiotopeid = l_path[l_path.length-1]; - - createTable(ontobiotopeid); - - // Tree event - var node = $('#phenotypetree').data('simpleTree').getNodeFromValue(ontobiotopeid); - $('#phenotypetree').data('simpleTree').setSelectedNode(node); - $('#searchtreephenotype').val(ui.item.value); - } - }); - } - }); -} - -// function format(d) { -// -// var docids = format_docs(d, alvisir, 'phenotype'); -// -// return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+ -// '<tr>'+ -// '<td><b>Full source text</b></td>'+ -// '<td align="justify">'+docids+'</td>'+ -// '</tr>'+ -// '<tr>'+ -// '<td><b>Occurrence in text (phenotype)</b></td>'+ -// '<td align="justify">'+d[3].split(", ").slice(1,).join(', ')+'</td>'+ -// '</tr>'+ -// '<tr>'+ -// '<td><b>Occurrence in text (taxon)</b></td>'+ -// '<td align="justify">'+d[1].split(", ").slice(1,).join(', ')+'</td>'+ -// '</tr>'+ -// '</table>'; -// } - -var thtable = $('#results_phenotype_taxon').DataTable(); - // Data table +var thtable = $('#results_phenotype_taxon').DataTable(); function createTable(ontobiotopeid) { $.getJSON($SCRIPT_ROOT + '/_get_list_relations', @@ -315,22 +265,6 @@ function createTable(ontobiotopeid) { }); } -// $('#results_phenotype_taxon tbody').on('click', 'td.details-control', function () { -// var tr = $(this).closest('tr'); -// var row = thtable.row(tr); -// -// if ( row.child.isShown() ) { -// // This row is already open - close it -// row.child.hide(); -// tr.removeClass('shown'); -// } -// else { -// // Open this row -// row.child( format(row.data())).show(); -// tr.addClass('shown'); -// } -// } ); - // Filter - Taxon function filterColumnTaxon(i) { $('#results_phenotype_taxon').DataTable().column(i).search( @@ -359,8 +293,8 @@ $('input:checkbox').on('change', function () { // Check url function checkURL() { var url = window.location.pathname; - if ( $("#relationTaxonByPhenotype").val() !== '' ) { - url += "?phenotype=" + $("#relationTaxonByPhenotype").val(); + if ( $("#search_phenotype option:selected").text() !== '' ) { + url += "?phenotype=" + $("#search_phenotype option:selected").text(); } if ( $("#taxon_pt").val() !== '' ) { url += "&taxon=" + $("#taxon_pt").val(); diff --git a/static/js/searchByTaxon.js b/static/js/searchByTaxon.js index e9501876c08c631ba0e1f755eab9248a19077fa3..785b7b37a4d9a312e6655e0ef3153fa5e17a9d74 100644 --- a/static/js/searchByTaxon.js +++ b/static/js/searchByTaxon.js @@ -21,25 +21,50 @@ $("#searchByTaxon.nav-item").addClass( "active" ); // Spinner $('#spinner_taxon_habitat').show(); $('#spinner_taxon_habitat2').show(); -$('#relationHabitatByTaxon').prop('disabled', true); +// $('#relationHabitatByTaxon').prop('disabled', true); -$.getJSON($SCRIPT_ROOT + '/_get_list_taxon_habitat', - function success(list_taxon_habitat) { - autocomplete_taxon_habitat(Object.keys(list_taxon_habitat).sort()); - $('#spinner_taxon_habitat').hide(); - $('#spinner_taxon_habitat2').hide(); - $('#relationHabitatByTaxon').prop('disabled', false); -}); +var $select = $('#search').selectize({ + valueField: 'path', + labelField: 'name', + searchField: 'name', + sortField: 'name', + placeholder: 'e.g. Bacillus subtilis', + openOnFocus: false, + create: false, + maxItems: 1, + onInitialize: function() { + var that = this; + + $.getJSON($SCRIPT_ROOT + '/_get_list_term', + { table: "list_taxon"}, + function(data) { + data.forEach(function(item) { + that.addOption(item); + }); + $('#spinner_taxon_habitat').hide(); + $('#spinner_taxon_habitat2').hide(); + $('#search option:selected').prop('disabled', false); + }); + }, + onChange:function(value){ + if (value != "") { + createTable(value); + } + } + }); + +var selectize = $select[0].selectize; // URL: taxon if ( taxon !== null ) { $('#spinner_taxon_habitat').show(); $('#spinner_taxon_habitat2').show(); - - $("#relationHabitatByTaxon").val(taxon); + selectize.setTextboxValue(taxon); + $("#search option:selected").text(taxon); + $("#search option:selected").val(taxon); $('#filter_taxon_habitat').removeAttr('disabled'); - createTable(taxon); + createTable_old(taxon); } // URL: qps if ( qps !== null ) { @@ -54,45 +79,179 @@ if ( habitat !== null ) { $('input.column_filter').val(habitat); } -// Search by taxon (autocompletion) -function autocomplete_taxon_habitat(json_data) { - $( "#relationHabitatByTaxon" ).autocomplete({ - source: json_data, - minLength: 5, - select: function( event, ui ) { - $('#filter_taxon_habitat').removeAttr('disabled'); - $('#spinner_taxon_habitat').show(); - $('#spinner_taxon_habitat2').show(); +var thtable = $('#results_taxon_habitat').DataTable(); - createTable(ui.item.value); - } - }); -} +// Datatable +function createTable(path) { + if ( path != '' ) { + let l_path = path.split('/'); + let taxonid = l_path[l_path.length-1]; -// function format(d) { -// -// var docids = format_docs(d, alvisir, 'habitat'); -// -// return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+ -// '<tr>'+ -// '<td><b>Full source text</b></td>'+ -// '<td align="justify">'+docids+'</td>'+ -// '</tr>'+ -// '<tr>'+ -// '<td><b>Occurrence in text (taxon)</b></td>'+ -// '<td align="justify">'+d[1].split(", ").slice(1,).join(', ')+'</td>'+ -// '</tr>'+ -// '<tr>'+ -// '<td><b>Occurrence in text (habitat)</b></td>'+ -// '<td align="justify">'+d[3].split(", ").slice(1,).join(', ')+'</td>'+ -// '</tr>'+ -// '</table>'; -// } + $('#filter_taxon_habitat').removeAttr('disabled'); + $('#spinner_taxon_habitat').show(); + $('#spinner_taxon_habitat2').show(); -var thtable = $('#results_taxon_habitat').DataTable(); + $.getJSON($SCRIPT_ROOT + '/_get_list_relations', + { taxonid: taxonid, + type: 'habitat' + }, + function success(relations) { + $('#hide').css( 'display', 'block' ); + $('#results_taxon_habitat').DataTable().destroy(); + thtable = $('#results_taxon_habitat').DataTable( + { + dom: 'lifrtBp', // 'Bfrtip' + data: relations, + buttons: [ + { + extend: 'copyHtml5', + exportOptions: { columns: function ( idx, data, node ) { + var table_id = node.getAttribute('aria-controls'); + if ( idx == 0 ) { return false; } // Never Source Text + else if ( idx == 6 ) { return true; } // Always Full Source Text + return $('#' + table_id).DataTable().column( idx ).visible(); } + }, + title: 'Omnicrobe_V_'+version + }, + { + extend: 'csvHtml5', + exportOptions: { columns: function ( idx, data, node ) { + var table_id = node.getAttribute('aria-controls'); + if ( idx == 0 ) { return false; } // Never Source Text + else if ( idx == 6 ) { return true; } // Always Full Source Text + return $('#' + table_id).DataTable().column( idx ).visible(); } + }, + title: 'Omnicrobe_V_'+version + }, + { + extend: 'excelHtml5', + exportOptions: { columns: function ( idx, data, node ) { + var table_id = node.getAttribute('aria-controls'); + if ( idx == 0 ) { return false; } // Never Source Text + else if ( idx == 6 ) { return true; } // Always Full Source Text + else { return $('#' + table_id).DataTable().column( idx ).visible(); } } + }, + title: 'Omnicrobe_V_'+version + }, + { + extend: 'pdfHtml5', + exportOptions: { columns: function ( idx, data, node ) { + var table_id = node.getAttribute('aria-controls'); + if ( idx == 0 ) { return false; } // Never Source Text + else if ( idx == 6 ) { return true; } // Always Full Source Text + return $('#' + table_id).DataTable().column( idx ).visible(); } + }, + title: 'Omnicrobe_V_'+version + }, + 'colvis' + ], + columns: [ + {"render": function(data, type, row, meta) { + let rtype = ''; + if ( row[2] == 'Lives in' || row[2] == 'Contains' ) { rtype = 'habitat'; } + else if ( row[2] == 'Studied for' || row[2] == 'Involves' ) { rtype = 'use'; } + else if ( row[2] == 'Exhibits' || row[2] == 'Is exhibited by' ) { rtype = 'phenotype'; } + var docids = format_docs(row, alvisir, rtype); + let docs = ""; + if ( data.includes(', ') ) { docs = data.split(', '); } + else { docs = data.split(','); } + let docs_f = ""; + if ( docs.length > 2 ) { // 3 + docs_f = docids.split(", ").slice(0,2).join(', ') + ", ..."; // 0,3 + } + else { + docs_f = docids; + } + return docs_f; + }}, + {"render": function ( data, type, row, meta ) { + let taxa = row[1].split(', '); + let taxon = taxa[0]; + if ( row[9].includes("ncbi") ) { + taxon = "<a target='_blank' class='doc' href='https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?id="+row[9].replace(/.+:/ig, '')+"'>"+taxa[0]+"</a>"; + } + else if ( row[9].includes("bd") ) { + taxon = "<a target='_blank' class='doc' href='https://bacdive.dsmz.de/strain/"+row[9].replace(/.+:/ig, '')+"'>"+taxa[0]+"</a>"; + } + return taxon; + }}, + {"render": function (data, type, row, meta) { + return row[2]; + }}, + {"render": function (data, type, row, meta) { + return row[3].split(',')[0]; + }}, + {"orderable": false, "render": function (data, type, row, meta) { + return row[4]; + }}, + {"render": function (data, type, row, meta) { + return row[5]; + }}, + {"render": function (data, type, row, meta) { + let taxs = row[1].split(', '); + let forms = ""; + for ( let i = 1; i < taxs.length ; i++ ) { + forms += taxs[i] + if ( i != taxs.length - 1 ) { forms += ", " } + } + return forms; + }}, + {"render": function (data, type, row, meta) { + let elts = row[3].split(', '); + let forms = ""; + for ( let i = 1; i < elts.length ; i++ ) { + forms += elts[i] + if ( i != elts.length - 1 ) { forms += ", " } + } + return forms; + }}, + {"render": function (data, type, row, meta) { + let rtype = ''; + if ( row[2] == 'Lives in' || row[2] == 'Contains' ) { rtype = 'habitat'; } + else if ( row[2] == 'Studied for' || row[2] == 'Involves' ) { rtype = 'use'; } + else if ( row[2] == 'Exhibits' || row[2] == 'Is exhibited by' ) { rtype = 'phenotype'; } + var docids = format_docs(row, alvisir, rtype); + return docids; + }}, + {"visible": false, "render": function (data, type, row, meta) { + return row[9]; + }}, + {"visible": false, "render": function (data, type, row, meta) { + return row[7]; + }}, + {"visible": false, "render": function (data, type, row, meta) { + return row[8]; + }}, + {"visible": false, "render": function (data, type, row, meta) { + return row[6]; + }} + ] + }); -// Datatable -function createTable(taxon) { + if ( $('#habitat_th').val() != '' ) { filterColumnHabitat(3); } + if ( $('#sources_th').val() != '' ) { filterSourceColumn(5); } + if ( $('input[name=qps_th]').is(':checked') == true ) { filterColumnCheck(4); } + + $('#spinner_taxon_habitat').hide(); + $('#spinner_taxon_habitat2').hide(); + + checkURL(); + }); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_taxon_habitat').hide(); + $('#spinner_taxon_habitat2').hide(); + // Clear oracle + $("#relationHabitatByTaxon").val(""); + $('#filter_taxon_habitat').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } +} + +function createTable_old(taxon) { $.getJSON($SCRIPT_ROOT + '/_get_path', {name: taxon, table: 'list_taxon'}, function success(path) { @@ -261,22 +420,6 @@ function createTable(taxon) { }); } -// $('#results_taxon_habitat tbody').on('click', 'td.details-control', function () { -// var tr = $(this).closest('tr'); -// var row = thtable.row( tr ); -// -// if ( row.child.isShown() ) { -// // This row is already open - close it -// row.child.hide(); -// tr.removeClass('shown'); -// } -// else { -// // Open this row -// row.child( format(row.data())).show(); -// tr.addClass('shown'); -// } -// } ); - // Filter - Habitat function filterColumnHabitat(i) { $('#results_taxon_habitat').DataTable().column(i).search( @@ -316,8 +459,8 @@ $('input.column_source').on( 'keyup click', function () { // Check url function checkURL() { var url = window.location.pathname; - if ( $("#relationHabitatByTaxon").val() !== '' ) { - url += "?taxon=" + $("#relationHabitatByTaxon").val(); + if ( $("#search option:selected").text() !== '' ) { + url += "?taxon=" + $("#search option:selected").text(); } if ( $("#habitat_th").val() !== '' ) { url += "&habitat=" + $("#habitat_th").val(); diff --git a/static/js/searchByTaxonForPhenotype.js b/static/js/searchByTaxonForPhenotype.js index 3ceee8a8d28b3e42563bf90ccd742e04e648dfae..b084de7131d39d20e6c6a7f863e99094e7278674 100644 --- a/static/js/searchByTaxonForPhenotype.js +++ b/static/js/searchByTaxonForPhenotype.js @@ -18,27 +18,51 @@ import { format_docs } from './utils.js'; $("#searchByTaxonForPhenotype.nav-item").addClass( "active" ); -// List Taxon -if ( sessionStorage.getItem("list_taxon_phenotype") === null ) { - $.getJSON($SCRIPT_ROOT + '/_get_list_taxon_phenotype', - function success(list_taxon_phenotype) { - sessionStorage.setItem("list_taxon_phenotype", JSON.stringify(Object.keys(list_taxon_phenotype).sort())); - autocomplete_taxon_phenotype(); +$('#spinner_taxon_phenotype').show(); +$('#spinner_taxon_phenotype2').show(); + +var $select = $('#search_taxon_phenotype').selectize({ + valueField: 'path', + labelField: 'name', + searchField: 'name', + sortField: 'name', + placeholder: 'e.g. Bacillus subtilis', + openOnFocus: false, + create: false, + maxItems: 1, + onInitialize: function() { + var that = this; + + $.getJSON($SCRIPT_ROOT + '/_get_list_term', + { table: "list_taxon_phenotype"}, + function(data) { + data.forEach(function(item) { + that.addOption(item); + }); + $('#spinner_taxon_phenotype').hide(); + $('#spinner_taxon_phenotype2').hide(); + $('#search_taxon_phenotype option:selected').prop('disabled', false); + }); + }, + onChange:function(value){ + if (value != "") { + createTable(value); + } + } }); -} -else { - autocomplete_taxon_phenotype(); -} + +var selectize = $select[0].selectize; // URL: taxon if ( taxon !== null ) { $('#spinner_taxon_phenotype').show(); $('#spinner_taxon_phenotype2').show(); - - $("#relationPhenotypeByTaxon").val(taxon); + selectize.setTextboxValue(taxon); + $("#search_taxon_phenotype option:selected").text(taxon); + $("#search_taxon_phenotype option:selected").val(taxon); $('#filter_taxon_phenotype').removeAttr('disabled'); - createTable(taxon); + createTable_old(taxon); } // URL: qps if ( qps !== null ) { @@ -49,45 +73,172 @@ if ( phenotype !== null ) { $('input.column_filter').val(phenotype); } -// Search by taxon (autocompletion) -function autocomplete_taxon_phenotype() { - $( "#relationPhenotypeByTaxon" ).autocomplete({ - source: JSON.parse(sessionStorage.getItem("list_taxon_phenotype")), - minLength: 5, - select: function( event, ui ) { - $('#filter_taxon_phenotype').removeAttr('disabled'); - $('#spinner_taxon_phenotype').show(); - $('#spinner_taxon_phenotype2').show(); +var thtable = $('#results_taxon_phenotype').DataTable(); - createTable(ui.item.value); - } - }); -} +// Datatable +function createTable(path) { + if ( path != '' ) { + let l_path = path.split('/'); + let taxonid = l_path[l_path.length-1]; + + $.getJSON($SCRIPT_ROOT + '/_get_list_relations', + { taxonid: taxonid, + type: 'phenotype' + }, + function success(relations) { + $('#hide').css( 'display', 'block' ); + $('#results_taxon_phenotype').DataTable().destroy(); + thtable = $('#results_taxon_phenotype').DataTable( + {dom: 'lifrtBp', // 'Bfrtip' + data: relations, + buttons: [ + { + extend: 'copyHtml5', + exportOptions: { columns: function ( idx, data, node ) { + var table_id = node.getAttribute('aria-controls'); + if ( idx == 0 ) { return false; } // Never Source Text + else if ( idx == 6 ) { return true; } // Always Full Source Text + return $('#' + table_id).DataTable().column( idx ).visible(); } + }, + title: 'Omnicrobe_V_'+version + }, + { + extend: 'csvHtml5', + exportOptions: { columns: function ( idx, data, node ) { + var table_id = node.getAttribute('aria-controls'); + if ( idx == 0 ) { return false; } // Never Source Text + else if ( idx == 6 ) { return true; } // Always Full Source Text + return $('#' + table_id).DataTable().column( idx ).visible(); } + }, + title: 'Omnicrobe_V_'+version + }, + { + extend: 'excelHtml5', + exportOptions: { columns: function ( idx, data, node ) { + var table_id = node.getAttribute('aria-controls'); + if ( idx == 0 ) { return false; } // Never Source Text + else if ( idx == 6 ) { return true; } // Always Full Source Text + else { return $('#' + table_id).DataTable().column( idx ).visible(); } } + }, + title: 'Omnicrobe_V_'+version + }, + { + extend: 'pdfHtml5', + exportOptions: { columns: function ( idx, data, node ) { + var table_id = node.getAttribute('aria-controls'); + if ( idx == 0 ) { return false; } // Never Source Text + else if ( idx == 6 ) { return true; } // Always Full Source Text + return $('#' + table_id).DataTable().column( idx ).visible(); } + }, + title: 'Omnicrobe_V_'+version + }, + 'colvis' + ], + columns: [ + {"render": function(data, type, row, meta) { + let rtype = ''; + if ( row[2] == 'Lives in' || row[2] == 'Contains' ) { rtype = 'habitat'; } + else if ( row[2] == 'Studied for' || row[2] == 'Involves' ) { rtype = 'use'; } + else if ( row[2] == 'Exhibits' || row[2] == 'Is exhibited by' ) { rtype = 'phenotype'; } + var docids = format_docs(row, alvisir, rtype); + let docs = ""; + if ( data.includes(', ') ) { docs = data.split(', '); } + else { docs = data.split(','); } + let docs_f = ""; + if ( docs.length > 2 ) { // 3 + docs_f = docids.split(", ").slice(0,2).join(', ') + ", ..."; // 0,3 + } + else { + docs_f = docids; + } + return docs_f; + }}, + {"render": function ( data, type, row, meta ) { + let taxa = row[1].split(', '); + let taxon = taxa[0]; + if ( row[9].includes("ncbi") ) { + taxon = "<a target='_blank' class='doc' href='https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?id="+row[9].replace(/.+:/ig, '')+"'>"+taxa[0]+"</a>"; + } + else if ( row[9].includes("bd") ) { + taxon = "<a target='_blank' class='doc' href='https://bacdive.dsmz.de/strain/"+row[9].replace(/.+:/ig, '')+"'>"+taxa[0]+"</a>"; + } + return taxon; + }}, + {"render": function (data, type, row, meta) { + return row[2]; + }}, + {"render": function (data, type, row, meta) { + return row[3].split(',')[0]; + }}, + {"orderable": false, "render": function (data, type, row, meta) { + return row[4]; + }}, + {"render": function (data, type, row, meta) { + return row[5]; + }}, + {"render": function (data, type, row, meta) { + let taxs = row[1].split(', '); + let forms = ""; + for ( let i = 1; i < taxs.length ; i++ ) { + forms += taxs[i] + if ( i != taxs.length - 1 ) { forms += ", " } + } + return forms; + }}, + {"render": function (data, type, row, meta) { + let elts = row[3].split(', '); + let forms = ""; + for ( let i = 1; i < elts.length ; i++ ) { + forms += elts[i] + if ( i != elts.length - 1 ) { forms += ", " } + } + return forms; + }}, + {"render": function (data, type, row, meta) { + let rtype = ''; + if ( row[2] == 'Lives in' || row[2] == 'Contains' ) { rtype = 'habitat'; } + else if ( row[2] == 'Studied for' || row[2] == 'Involves' ) { rtype = 'use'; } + else if ( row[2] == 'Exhibits' || row[2] == 'Is exhibited by' ) { rtype = 'phenotype'; } + var docids = format_docs(row, alvisir, rtype); + return docids; + }}, + {"visible": false, "render": function (data, type, row, meta) { + return row[9]; + }}, + {"visible": false, "render": function (data, type, row, meta) { + return row[7]; + }}, + {"visible": false, "render": function (data, type, row, meta) { + return row[8]; + }}, + {"visible": false, "render": function (data, type, row, meta) { + return row[6]; + }} + ] + }); -// function format(d) { -// -// var docids = format_docs(d, alvisir, 'phenotype'); -// -// return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+ -// '<tr>'+ -// '<td><b>Full source text</b></td>'+ -// '<td align="justify">'+docids+'</td>'+ -// '</tr>'+ -// '<tr>'+ -// '<td><b>Occurrence in text (taxon)</b></td>'+ -// '<td align="justify">'+d[1].split(", ").slice(1,).join(', ')+'</td>'+ -// '</tr>'+ -// '<tr>'+ -// '<td><b>Occurrence in text (phenotype)</b></td>'+ -// '<td align="justify">'+d[3].split(", ").slice(1,).join(', ')+'</td>'+ -// '</tr>'+ -// '</table>'; -// } + if ( $('#phenotype_tp').val() != '' ) { filterColumnphenotype(3); } + if ( $('input[name=qps_tp]').is(':checked') == true ) { filterColumnCheck(4); } -var thtable = $('#results_taxon_phenotype').DataTable(); + $('#spinner_taxon_phenotype').hide(); + $('#spinner_taxon_phenotype2').hide(); -// Datatable -function createTable(taxon) { + checkURL(); + }); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_taxon_phenotype').hide(); + $('#spinner_taxon_phenotype2').hide(); + // Clear oracle + $("#relationPhenotypeByTaxon").val(""); + $('#filter_taxon_phenotype').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } +} +function createTable_old(taxon) { $.getJSON($SCRIPT_ROOT + '/_get_path', {name: taxon, table: 'list_taxon_phenotype'}, function success(path) { @@ -325,22 +476,6 @@ function createTable(taxon) { }); } -// $('#results_taxon_phenotype tbody').on('click', 'td.details-control', function () { -// var tr = $(this).closest('tr'); -// var row = thtable.row( tr ); -// -// if ( row.child.isShown() ) { -// // This row is already open - close it -// row.child.hide(); -// tr.removeClass('shown'); -// } -// else { -// // Open this row -// row.child( format(row.data())).show(); -// tr.addClass('shown'); -// } -// } ); - // Filter - phenotype function filterColumnphenotype(i) { $('#results_taxon_phenotype').DataTable().column(i).search( @@ -369,8 +504,8 @@ $('input:checkbox').on('change', function () { // Check url function checkURL() { var url = window.location.pathname; - if ( $("#relationPhenotypeByTaxon").val() !== '' ) { - url += "?taxon=" + $("#relationPhenotypeByTaxon").val(); + if ( $("#search_taxon_phenotype option:selected").text() !== '' ) { + url += "?taxon=" + $("#search_taxon_phenotype option:selected").text(); } if ( $("#phenotype_tp").val() !== '' ) { url += "&phenotype=" + $("#phenotype_tp").val(); diff --git a/static/js/searchByTaxonForUse.js b/static/js/searchByTaxonForUse.js index 753539518fdfbbb5161b8ec39c0ef82619b40cc9..868964caf2eeb4e98f584eed065dd27fc57efa68 100644 --- a/static/js/searchByTaxonForUse.js +++ b/static/js/searchByTaxonForUse.js @@ -18,27 +18,50 @@ import { format_docs } from './utils.js'; $("#searchByTaxonForUse.nav-item").addClass( "active" ); -// List Taxon -if ( sessionStorage.getItem("list_taxon_use") === null ) { - $.getJSON($SCRIPT_ROOT + '/_get_list_taxon_use', - function success(list_taxon_use) { - sessionStorage.setItem("list_taxon_use", JSON.stringify(Object.keys(list_taxon_use).sort())); - autocomplete_taxon_use(); +$('#spinner_taxon_use').show(); +$('#spinner_taxon_use2').show(); + +var $select = $('#search_taxon_use').selectize({ + valueField: 'path', + labelField: 'name', + searchField: 'name', + sortField: 'name', + placeholder: 'e.g. Bacillus subtilis', + openOnFocus: false, + create: false, + maxItems: 1, + onInitialize: function() { + var that = this; + + $.getJSON($SCRIPT_ROOT + '/_get_list_term', + { table: "list_taxon_use"}, + function(data) { + data.forEach(function(item) { + that.addOption(item); + }); + $('#spinner_taxon_use').hide(); + $('#spinner_taxon_use2').hide(); + $('#search_taxon_use').prop('disabled', false); + }); + }, + onChange:function(value){ + if (value != "") { + createTable(value); + } + } }); -} -else { - autocomplete_taxon_use(); -} + +var selectize = $select[0].selectize; // URL: taxon if ( taxon !== null ) { $('#spinner_taxon_use').show(); $('#spinner_taxon_use2').show(); - - $("#relationUseByTaxon").val(taxon); + selectize.setTextboxValue(taxon); + $("#search_taxon_use option:selected").text(taxon); + $("#search_taxon_use option:selected").val(taxon); $('#filter_taxon_use').removeAttr('disabled'); - - createTable(taxon); + createTable_old(taxon); } // URL: qps if ( qps !== null ) { @@ -49,45 +72,172 @@ if ( use !== null ) { $('input.column_filter').val(use); } -// Search by taxon (autocompletion) -function autocomplete_taxon_use() { - $( "#relationUseByTaxon" ).autocomplete({ - source: JSON.parse(sessionStorage.getItem("list_taxon_use")), - minLength: 5, - select: function( event, ui ) { - $('#filter_taxon_use').removeAttr('disabled'); - $('#spinner_taxon_use').show(); - $('#spinner_taxon_use2').show(); +var thtable = $('#results_taxon_use').DataTable(); - createTable(ui.item.value); - } - }); -} +// Data table +function createTable(path) { + if ( path != '' ) { + let l_path = path.split('/'); + let taxonid = l_path[l_path.length-1]; -// function format(d) { -// -// var docids = format_docs(d, alvisir, 'use'); -// -// return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+ -// '<tr>'+ -// '<td><b>Full source text</b></td>'+ -// '<td align="justify">'+docids+'</td>'+ -// '</tr>'+ -// '<tr>'+ -// '<td><b>Occurrence in text (taxon)</b></td>'+ -// '<td align="justify">'+d[1].split(", ").slice(1,).join(', ')+'</td>'+ -// '</tr>'+ -// '<tr>'+ -// '<td><b>Occurrence in text (use)</b></td>'+ -// '<td align="justify">'+d[3].split(", ").slice(1,).join(', ')+'</td>'+ -// '</tr>'+ -// '</table>'; -// } + $.getJSON($SCRIPT_ROOT + '/_get_list_relations', + { taxonid: taxonid, + type: 'use' + }, + function success(relations) { + $('#hide').css( 'display', 'block' ); + $('#results_taxon_use').DataTable().destroy(); + thtable = $('#results_taxon_use').DataTable( + {dom: 'lifrtBp', // 'Bfrtip' + data: relations, + buttons: [ + { + extend: 'copyHtml5', + exportOptions: { columns: function ( idx, data, node ) { + var table_id = node.getAttribute('aria-controls'); + if ( idx == 0 ) { return false; } // Never Source Text + else if ( idx == 6 ) { return true; } // Always Full Source Text + return $('#' + table_id).DataTable().column( idx ).visible(); } + }, + title: 'Omnicrobe_V_'+version + }, + { + extend: 'csvHtml5', + exportOptions: { columns: function ( idx, data, node ) { + var table_id = node.getAttribute('aria-controls'); + if ( idx == 0 ) { return false; } // Never Source Text + else if ( idx == 6 ) { return true; } // Always Full Source Text + return $('#' + table_id).DataTable().column( idx ).visible(); } + }, + title: 'Omnicrobe_V_'+version + }, + { + extend: 'excelHtml5', + exportOptions: { columns: function ( idx, data, node ) { + var table_id = node.getAttribute('aria-controls'); + if ( idx == 0 ) { return false; } // Never Source Text + else if ( idx == 6 ) { return true; } // Always Full Source Text + else { return $('#' + table_id).DataTable().column( idx ).visible(); } } + }, + title: 'Omnicrobe_V_'+version + }, + { + extend: 'pdfHtml5', + exportOptions: { columns: function ( idx, data, node ) { + var table_id = node.getAttribute('aria-controls'); + if ( idx == 0 ) { return false; } // Never Source Text + else if ( idx == 6 ) { return true; } // Always Full Source Text + return $('#' + table_id).DataTable().column( idx ).visible(); } + }, + title: 'Omnicrobe_V_'+version + }, + 'colvis' + ], + columns: [ + {"render": function(data, type, row, meta) { + let rtype = ''; + if ( row[2] == 'Lives in' || row[2] == 'Contains' ) { rtype = 'habitat'; } + else if ( row[2] == 'Studied for' || row[2] == 'Involves' ) { rtype = 'use'; } + else if ( row[2] == 'Exhibits' || row[2] == 'Is exhibited by' ) { rtype = 'phenotype'; } + var docids = format_docs(row, alvisir, rtype); + let docs = ""; + if ( data.includes(', ') ) { docs = data.split(', '); } + else { docs = data.split(','); } + let docs_f = ""; + if ( docs.length > 2 ) { // 3 + docs_f = docids.split(", ").slice(0,2).join(', ') + ", ..."; // 0,3 + } + else { + docs_f = docids; + } + return docs_f; + }}, + {"render": function ( data, type, row, meta ) { + let taxa = row[1].split(', '); + let taxon = taxa[0]; + if ( row[9].includes("ncbi") ) { + taxon = "<a target='_blank' class='doc' href='https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?id="+row[9].replace(/.+:/ig, '')+"'>"+taxa[0]+"</a>"; + } + else if ( row[9].includes("bd") ) { + taxon = "<a target='_blank' class='doc' href='https://bacdive.dsmz.de/strain/"+row[9].replace(/.+:/ig, '')+"'>"+taxa[0]+"</a>"; + } + return taxon; + }}, + {"render": function (data, type, row, meta) { + return row[2]; + }}, + {"render": function (data, type, row, meta) { + return row[3].split(',')[0]; + }}, + {"orderable": false, "render": function (data, type, row, meta) { + return row[4]; + }}, + {"render": function (data, type, row, meta) { + return row[5]; + }}, + {"render": function (data, type, row, meta) { + let taxs = row[1].split(', '); + let forms = ""; + for ( let i = 1; i < taxs.length ; i++ ) { + forms += taxs[i] + if ( i != taxs.length - 1 ) { forms += ", " } + } + return forms; + }}, + {"render": function (data, type, row, meta) { + let elts = row[3].split(', '); + let forms = ""; + for ( let i = 1; i < elts.length ; i++ ) { + forms += elts[i] + if ( i != elts.length - 1 ) { forms += ", " } + } + return forms; + }}, + {"render": function (data, type, row, meta) { + let rtype = ''; + if ( row[2] == 'Lives in' || row[2] == 'Contains' ) { rtype = 'habitat'; } + else if ( row[2] == 'Studied for' || row[2] == 'Involves' ) { rtype = 'use'; } + else if ( row[2] == 'Exhibits' || row[2] == 'Is exhibited by' ) { rtype = 'phenotype'; } + var docids = format_docs(row, alvisir, rtype); + return docids; + }}, + {"visible": false, "render": function (data, type, row, meta) { + return row[9]; + }}, + {"visible": false, "render": function (data, type, row, meta) { + return row[7]; + }}, + {"visible": false, "render": function (data, type, row, meta) { + return row[8]; + }}, + {"visible": false, "render": function (data, type, row, meta) { + return row[6]; + }} + ] + }); -var thtable = $('#results_taxon_use').DataTable(); + if ( $('#use_tu').val() != '' ) { filterColumnuse(3); } + if ( $('input[name=qps_tu]').is(':checked') == true ) { filterColumnCheck(4); } -// Data table -function createTable(taxon) { + $('#spinner_taxon_use').hide(); + $('#spinner_taxon_use2').hide(); + + checkURL(); + }); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_taxon_use').hide(); + $('#spinner_taxon_use2').hide(); + // Clear oracle + $("#relationUseByTaxon").val(""); + $('#filter_taxon_use').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } +} +function createTable_old(taxon) { $.getJSON($SCRIPT_ROOT + '/_get_path', {name: taxon, table: 'list_taxon_use'}, function success(path) { @@ -254,22 +404,6 @@ function createTable(taxon) { }); } -// $('#results_taxon_use tbody').on('click', 'td.details-control', function () { -// var tr = $(this).closest('tr'); -// var row = thtable.row( tr ); -// -// if ( row.child.isShown() ) { -// // This row is already open - close it -// row.child.hide(); -// tr.removeClass('shown'); -// } -// else { -// // Open this row -// row.child( format(row.data())).show(); -// tr.addClass('shown'); -// } -// } ); - // Filter - use function filterColumnuse(i) { $('#results_taxon_use').DataTable().column(i).search( @@ -298,8 +432,8 @@ $('input:checkbox').on('change', function () { // Check url function checkURL() { var url = window.location.pathname; - if ( $("#relationUseByTaxon").val() !== '' ) { - url += "?taxon=" + $("#relationUseByTaxon").val(); + if ( $("#search_taxon_use option:selected").text() !== '' ) { + url += "?taxon=" + $("#search_taxon_use option:selected").text(); } if ( $("#use_tu").val() !== '' ) { url += "&use=" + $("#use_tu").val(); diff --git a/static/js/searchByUse.js b/static/js/searchByUse.js index 05b05f411439192d75f48f13c39850fb2693a514..178df597221a0b5228a80126386523ad24e40ecd 100644 --- a/static/js/searchByUse.js +++ b/static/js/searchByUse.js @@ -18,35 +18,61 @@ import { format_docs } from './utils.js'; $("#searchByUse.nav-item").addClass( "active" ); -// List Use -if ( sessionStorage.getItem("list_use_taxon") === null ) { - $.getJSON($SCRIPT_ROOT + '/_get_list_use_taxon', - function success(list_use_taxon) { - sessionStorage.setItem("list_use_taxon", JSON.stringify(Object.keys(list_use_taxon).sort())); - autocomplete_taxon_use(); +$('#spinner_use_taxon').show(); +$('#spinner_use_taxon2').show(); + +// Use selection +var $select = $('#search_use').selectize({ + valueField: 'path', + labelField: 'name', + searchField: 'name', + sortField: 'name', + placeholder: 'e.g. acidification', + openOnFocus: false, + create: false, + maxItems: 1, + onInitialize: function() { + var that = this; + + $.getJSON($SCRIPT_ROOT + '/_get_list_term', + { table: "list_use_taxon"}, + function(data) { + data.forEach(function(item) { + that.addOption(item); + }); + $('#spinner_use_taxon').hide(); + $('#spinner_use_taxon2').hide(); + $('#search_use option:selected').prop('disabled', false); + }); + }, + onChange:function(ontobiotopeid){ + if (ontobiotopeid != "") { + + // Tree event + $('#usetree').data('simpleTree').clearSelection(); + $('#usetree').data('simpleTree').collapseAll(); + var node = $('#usetree').data('simpleTree').getNodeFromValue(ontobiotopeid); + $('#usetree').data('simpleTree').setSelectedNode(node); + } + } }); -} -else { - autocomplete_taxon_use(); -} +var selectize = $select[0].selectize; -// Tree Options +// Tree var options = { searchBox: $('#searchtreeuse'), searchMinInputLength: 4 }; - -// Tree $.getJSON($SCRIPT_ROOT + '/_get_ontobiotope_use', function(data) { $('#usetree').simpleTree(options, data); // URL: use if ( use !== null ) { - $('#spinner_use_taxon').show(); - $('#spinner_use_taxon2').show(); - - $("#relationTaxonByUse").val(use); - $('#filter_use_taxon').removeAttr('disabled'); + // $('#spinner_use_taxon').show(); + // $('#spinner_use_taxon2').show(); + // + // $("#relationTaxonByUse").val(use); + // $('#filter_use_taxon').removeAttr('disabled'); $.getJSON($SCRIPT_ROOT + '/_get_path', {name: use, table: 'list_use_taxon'}, @@ -58,7 +84,7 @@ $.getJSON($SCRIPT_ROOT + '/_get_ontobiotope_use', function(data) { // Tree event var node = $('#usetree').data('simpleTree').getNodeFromValue(ontobiotopeid); $('#usetree').data('simpleTree').setSelectedNode(node); - $('#searchtreeuse').val(use); + // $('#searchtreeuse').val(use); } }); @@ -75,100 +101,30 @@ $.getJSON($SCRIPT_ROOT + '/_get_ontobiotope_use', function(data) { $('input.column_filter').val(taxon); } }); - -// Tree event $('#usetree').on('simpleTree:change', function(event){ - $('#treeModalUse').modal('hide'); - - $('#usetree').data('simpleTree').collapseAll(); - $('#usetree').data('simpleTree').expandTo($('#usetree').data('simpleTree').getSelectedNode()); - - $('#spinner_use_taxon').show(); - $('#spinner_use_taxon2').show(); + if ( $('#usetree').data('simpleTree').getSelectedNode() != undefined ) { - $("#relationTaxonByUse").val($('#usetree').data('simpleTree').getSelectedNode().label); - $('#filter_use_taxon').removeAttr('disabled'); + selectize.clear(false); + selectize.setValue($('#usetree').data('simpleTree').getSelectedNode().value, true); - $.getJSON($SCRIPT_ROOT + '/_get_path', - {name: $('#usetree').data('simpleTree').getSelectedNode().label, table: 'list_use_taxon'}, - function success(path) { - if ( path != '' ) { - let l_path = path[0].split('/'); - let ontobiotopeid = l_path[l_path.length-1]; + $('#spinner_use_taxon').show(); + $('#spinner_use_taxon2').show(); - // Tree event - var node = $('#usetree').data('simpleTree').getNodeFromValue(ontobiotopeid); - $('#usetree').data('simpleTree').setSelectedNode(node); - createTable(ontobiotopeid); - } - else { - alert("No result for " + use); - // Spinner off - $('#spinner_use_taxon').hide(); - $('#spinner_use_taxon2').hide(); - // Clear oracle - $("#relationTaxonByUse").val(""); - $('#filter_use_taxon').attr('disabled', 'disabled'); - // Change URL - window.location.replace(window.location.pathname); - } - }); + $('#searchtreeuse').val($('#usetree').data('simpleTree').getSelectedNode().label); + createTable($('#usetree').data('simpleTree').getSelectedNode().value); + $("#search_use option:selected").text(); + $("#search_use option:selected").text($('#usetree').data('simpleTree').getSelectedNode().label); + $("#search_use option:selected").val($('#usetree').data('simpleTree').getSelectedNode().value); + selectize.setTextboxValue(""); + selectize.setTextboxValue($('#usetree').data('simpleTree').getSelectedNode().label); + $('#filter_use_taxon').removeAttr('disabled'); + $('#treeModalUse').modal('hide'); + } }) -// Search by use (autocompletion) -function autocomplete_taxon_use() { - $( "#relationTaxonByUse" ).autocomplete({ - source: JSON.parse(sessionStorage.getItem("list_use_taxon")), - minLength: 3, - select: function( event, ui ) { - $('#filter_use_taxon').removeAttr('disabled'); - - $('#spinner_use_taxon').show(); - $('#spinner_use_taxon2').show(); - - $.getJSON($SCRIPT_ROOT + '/_get_path', - {name: ui.item.value, table: 'list_use_taxon'}, - function success(path) { - if ( path != '' ) { - let l_path = path[0].split('/'); - let ontobiotopeid = l_path[l_path.length-1]; - - createTable(ontobiotopeid); - - // Tree event - var node = $('#usetree').data('simpleTree').getNodeFromValue(ontobiotopeid); - $('#usetree').data('simpleTree').setSelectedNode(node); - $('#searchtreeuse').val(ui.item.value); - } - }); - } - }); -} - -// function format(d) { -// -// var docids = format_docs(d, alvisir, 'use'); -// -// return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+ -// '<tr>'+ -// '<td><b>Full source text</b></td>'+ -// '<td align="justify">'+docids+'</td>'+ -// '</tr>'+ -// '<tr>'+ -// '<td><b>Occurrence in text (use)</b></td>'+ -// '<td align="justify">'+d[3].split(", ").slice(1,).join(', ')+'</td>'+ -// '</tr>'+ -// '<tr>'+ -// '<td><b>Occurrence in text (taxon)</b></td>'+ -// '<td align="justify">'+d[1].split(", ").slice(1,).join(', ')+'</td>'+ -// '</tr>'+ -// '</table>'; -// } - -var thtable = $('#results_use_taxon').DataTable(); - // Datatable +var thtable = $('#results_use_taxon').DataTable(); function createTable(ontobiotopeid) { $.getJSON($SCRIPT_ROOT + '/_get_list_relations', @@ -318,22 +274,6 @@ function createTable(ontobiotopeid) { }); } -// $('#results_use_taxon tbody').on('click', 'td.details-control', function () { -// var tr = $(this).closest('tr'); -// var row = thtable.row(tr); -// -// if ( row.child.isShown() ) { -// // This row is already open - close it -// row.child.hide(); -// tr.removeClass('shown'); -// } -// else { -// // Open this row -// row.child( format(row.data())).show(); -// tr.addClass('shown'); -// } -// } ); - // Filter - Taxon function filterColumnTaxon(i) { $('#results_use_taxon').DataTable().column(i).search( @@ -362,8 +302,8 @@ $('input:checkbox').on('change', function () { // Check url function checkURL() { var url = window.location.pathname; - if ( $("#relationTaxonByUse").val() !== '' ) { - url += "?use=" + $("#relationTaxonByUse").val(); + if ( $("#search_use option:selected").text() !== '' ) { + url += "?use=" + $("#search_use option:selected").text(); } if ( $("#taxon_ut").val() !== '' ) { url += "&taxon=" + $("#taxon_ut").val(); diff --git a/templates/searchByHabitat.html b/templates/searchByHabitat.html index fdf5aac58e29ce1ae9132db768b043223b549d97..fca570c9173e78bb6821885c4179390bfa70e2ff 100644 --- a/templates/searchByHabitat.html +++ b/templates/searchByHabitat.html @@ -32,6 +32,11 @@ </script> <link href="{{ url_for('static', filename='css/simpleTree.css') }}" rel="stylesheet"> + <link rel="stylesheet" href="{{ url_for('static', filename='css/selectize.css') }}" /> + <link rel="stylesheet" href="{{ url_for('static', filename='css/selectize.boostrap3.css') }}" /> + <link rel="stylesheet" href="{{ url_for('static', filename='css/additional.css') }}" /> + + <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.js"></script> <script src="{{ url_for('static', filename='js/lib/simpleTree.js') }}"></script> <script type="module" src="{{ url_for('static', filename='js/searchByHabitat.js') }}"></script> @@ -53,9 +58,9 @@ <div class="row justify-content-center"> <div class="col-8"> <div class="input-group"> - <label style="background-color: #21517A; border-color: #21517A; color: #fff;" class="input-group-text" for="relationTaxonByHabitat">Search relations by habitat</label> - <input type="text" class="form-control" id="relationTaxonByHabitat" placeholder="e.g. cheese"> - <button id="filter_habitat_taxon" type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" disabled>Filter selection</button> + <label class="button-select input-group-text" for="relationTaxonByHabitat">Search relations by habitat</label> + <select class="form-select" id="search_habitat"></select> + <button id="filter_habitat_taxon" type="button" class="button-select-filter btn btn-info" data-toggle="collapse" data-target="#demo" disabled>Filter selection</button> </div> </div> </div> diff --git a/templates/searchByPhenotype.html b/templates/searchByPhenotype.html index 9f052181e775b462e4ceb1700897191abfae86a8..6d03456902c4e1b10c105ed34c3348ca59cdc50c 100644 --- a/templates/searchByPhenotype.html +++ b/templates/searchByPhenotype.html @@ -30,7 +30,11 @@ var alvisir = JSON.parse('{{ alvisir | tojson | safe }}'); </script> - <link href="{{ url_for('static', filename='css/simpleTree.css') }}" rel="stylesheet"> + <link href="{{ url_for('static', filename='css/simpleTree.css') }}" rel="stylesheet"><link rel="stylesheet" href="{{ url_for('static', filename='css/selectize.css') }}" /> + <link rel="stylesheet" href="{{ url_for('static', filename='css/selectize.boostrap3.css') }}" /> + <link rel="stylesheet" href="{{ url_for('static', filename='css/additional.css') }}" /> + + <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.js"></script> <script src="{{ url_for('static', filename='js/lib/simpleTree.js') }}"></script> <script type="module" src="{{ url_for('static', filename='js/searchByPhenotype.js') }}"></script> @@ -52,9 +56,9 @@ <div class="row justify-content-center"> <div class="col-8"> <div class="input-group"> - <label style="background-color: #21517A; border-color: #21517A; color: #fff;" class="input-group-text" for="relationTaxonByPhenotype">Search relations by phenotype</label> - <input type="text" class="form-control" id="relationTaxonByPhenotype" placeholder="e.g. thermophile"> - <button id="filter_phenotype_taxon" type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" disabled>Filter selection</button> + <label class="button-select input-group-text" for="relationTaxonByPhenotype">Search relations by phenotype</label> + <select class="form-select" id="search_phenotype"></select> + <button id="filter_phenotype_taxon" type="button" class="button-select-filter btn btn-info" data-toggle="collapse" data-target="#demo" disabled>Filter selection</button> </div> </div> </div> diff --git a/templates/searchByTaxon.html b/templates/searchByTaxon.html index bc847c76eeb99a95ae42bde7ec34acefc7a7ef75..95b66d14a8b2cba0dba87262620bb585d1b004a2 100644 --- a/templates/searchByTaxon.html +++ b/templates/searchByTaxon.html @@ -31,6 +31,11 @@ var alvisir = JSON.parse('{{ alvisir | tojson | safe }}'); </script> + <link rel="stylesheet" href="{{ url_for('static', filename='css/selectize.css') }}" /> + <link rel="stylesheet" href="{{ url_for('static', filename='css/selectize.boostrap3.css') }}" /> + <link rel="stylesheet" href="{{ url_for('static', filename='css/additional.css') }}" /> + + <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.js"></script> <script type="module" src="{{ url_for('static', filename='js/searchByTaxon.js') }}"></script> <div style="margin:30px 0;"></div> @@ -48,10 +53,10 @@ <div class="container"> <div class="row justify-content-center"> <div class="col-8"> - <div class="input-group"> - <label style="background-color: #21517A; border-color: #21517A; color: #fff;" class="input-group-text" for="relationHabitatByTaxon">Search relations by taxon</label> - <input type="text" class="form-control" id="relationHabitatByTaxon" placeholder="e.g. Bacillus subtilis"> - <button id="filter_taxon_habitat" type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" disabled>Filter selection</button> + <div class="input-group mb-3"> + <label class="button-select input-group-text" for="relationHabitatByTaxon">Search relations by taxon</label> + <select class="form-select" id="search"></select> + <button id="filter_taxon_habitat" type="button" class="btn btn-info button-select-filter" data-toggle="collapse" data-target="#demo" disabled>Filter selection</button> </div> </div> </div> diff --git a/templates/searchByTaxonForPhenotype.html b/templates/searchByTaxonForPhenotype.html index 4b690bc350b19f181d7ed73b143265c6cab56b7d..a35c6507b377b10271a098ed1c125c8b15fd26f9 100644 --- a/templates/searchByTaxonForPhenotype.html +++ b/templates/searchByTaxonForPhenotype.html @@ -30,6 +30,11 @@ var alvisir = JSON.parse('{{ alvisir | tojson | safe }}'); </script> + <link rel="stylesheet" href="{{ url_for('static', filename='css/selectize.css') }}" /> + <link rel="stylesheet" href="{{ url_for('static', filename='css/selectize.boostrap3.css') }}" /> + <link rel="stylesheet" href="{{ url_for('static', filename='css/additional.css') }}" /> + + <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.js"></script> <script type="module" src="{{ url_for('static', filename='js/searchByTaxonForPhenotype.js') }}"></script> <div style="margin:30px 0;"></div> @@ -49,9 +54,9 @@ <div class="row justify-content-center"> <div class="col-8"> <div class="input-group"> - <label style="background-color: #21517A; border-color: #21517A; color: #fff;" class="input-group-text" for="relationPhenotypeByTaxon">Search relations by taxon</label> - <input type="text" class="form-control" id="relationPhenotypeByTaxon" placeholder="e.g. Bacillus subtilis"> - <button id="filter_taxon_phenotype" type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" disabled>Filter selection</button> + <label class="button-select input-group-text" for="relationPhenotypeByTaxon">Search relations by taxon</label> + <select class="form-select" id="search_taxon_phenotype"></select> + <button id="filter_taxon_phenotype" type="button" class="button-select-filter btn btn-info" data-toggle="collapse" data-target="#demo" disabled>Filter selection</button> </div> </div> </div> diff --git a/templates/searchByTaxonForUse.html b/templates/searchByTaxonForUse.html index ce033dfd3b2511b8e1b8e0174e1849a0729db61d..930eceb8639bb5cfe572ea9850053c514f152cc8 100644 --- a/templates/searchByTaxonForUse.html +++ b/templates/searchByTaxonForUse.html @@ -30,6 +30,11 @@ var alvisir = JSON.parse('{{ alvisir | tojson | safe }}'); </script> + <link rel="stylesheet" href="{{ url_for('static', filename='css/selectize.css') }}" /> + <link rel="stylesheet" href="{{ url_for('static', filename='css/selectize.boostrap3.css') }}" /> + <link rel="stylesheet" href="{{ url_for('static', filename='css/additional.css') }}" /> + + <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.js"></script> <script type="module" src="{{ url_for('static', filename='js/searchByTaxonForUse.js') }}"></script> <div style="margin:30px 0;"></div> @@ -49,9 +54,9 @@ <div class="row justify-content-center"> <div class="col-8"> <div class="input-group"> - <label style="background-color: #21517A; border-color: #21517A; color: #fff;" class="input-group-text" for="relationUseByTaxon">Search relations by taxon</label> - <input type="text" class="form-control" id="relationUseByTaxon" placeholder="e.g. Bacillus subtilis"> - <button id="filter_taxon_use" type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" disabled>Filter selection</button> + <label class="button-select input-group-text" for="relationUseByTaxon">Search relations by taxon</label> + <select class="form-select" id="search_taxon_use"></select> + <button id="filter_taxon_use" type="button" class="button-select-filter btn btn-info" data-toggle="collapse" data-target="#demo" disabled>Filter selection</button> </div> </div> </div> diff --git a/templates/searchByUse.html b/templates/searchByUse.html index 4a7d21f92e9ec6a871efbcc9eb89e2f83eab678c..09a9d11507d3ea6ae5e0e4ecf5806c71996a151b 100644 --- a/templates/searchByUse.html +++ b/templates/searchByUse.html @@ -31,6 +31,11 @@ </script> <link href="{{ url_for('static', filename='css/simpleTree.css') }}" rel="stylesheet"> + <link rel="stylesheet" href="{{ url_for('static', filename='css/selectize.css') }}" /> + <link rel="stylesheet" href="{{ url_for('static', filename='css/selectize.boostrap3.css') }}" /> + <link rel="stylesheet" href="{{ url_for('static', filename='css/additional.css') }}" /> + + <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.js"></script> <script src="{{ url_for('static', filename='js/lib/simpleTree.js') }}"></script> <script type="module" src="{{ url_for('static', filename='js/searchByUse.js') }}"></script> @@ -53,9 +58,9 @@ <div class="row justify-content-center"> <div class="col-8"> <div class="input-group"> - <label style="background-color: #21517A; border-color: #21517A; color: #fff;" class="input-group-text" for="relationTaxonByUse">Search relations by use</label> - <input type="text" class="form-control" id="relationTaxonByUse" placeholder="e.g. pigmentation"> - <button id="filter_use_taxon" type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" disabled>Filter selection</button> + <label class="button-select input-group-text" for="relationTaxonByUse">Search relations by use</label> + <select class="form-select" id="search_use"></select> + <button id="filter_use_taxon" type="button" class="button-select-filter btn btn-info" data-toggle="collapse" data-target="#demo" disabled>Filter selection</button> </div> </div> </div>