diff --git a/__init__.py b/__init__.py index 4b0132c45f452626a336edf603e4ddbd57f34b16..0c594765f9422837b35eabfa5fa5aa4226beda80 100644 --- a/__init__.py +++ b/__init__.py @@ -57,6 +57,52 @@ with app.app_context(): if db is not None: app.config['postgreSQL_pool'].putconn(db) + +# Main homepage route +@app.route('/home_page') +def home(): + return render_template('home.html') + +# Research page route +@app.route('/research') +def research(): + return render_template('research.html') + +# Data sheet page - displays detailed information for individual oligosaccharides +@app.route('/sheet') +def sheet(): + return render_template('sheet.html') + +#to upload an oligo structure +@app.route('/upload_structure', methods=['POST']) +def upload_structure(): + if 'file' not in request.files: + return jsonify({'error': 'No file part'}), 400 + file = request.files['file'] + if file.filename == '': + return jsonify({'error': 'No selected file'}), 400 + if file and allowed_file(file.filename): + filename = secure_filename(file.filename) + file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename)) + return jsonify({'success': True, 'filename': filename}) + +#to save the modifications in the sheet +@app.route('/save_field', methods=['POST']) +def save_field(): + data = request.json + field_id = data.get('field_id') + value = data.get('value') + # Update your database here + return jsonify({'success': True}) + +#to download the sheet +@app.route('/download_fiche', methods=['POST']) +def download_fiche(): + filename = 'fiche_modified.pdf' + return jsonify({'success': True, 'filename': filename}) + + + # Home page @app.route('/index') def index(): @@ -92,75 +138,154 @@ def demo(): def contact(): return render_template('contact.html') -# Search by Taxon page (habitat) + + + + +##### TEST ##### +# Search by Taxon page (oligo name) +@app.route('/searchByTaxonForOligosaccharideName/') +@app.route('/searchByTaxonForOligosaccharideName') +def searchByTaxonForOligosaccharideName(): + taxon = request.args.get('taxon', None) + oligoname = request.args.get('oligoname', None) + return render_template('searchByTaxonForOligosaccharideName.html', taxon=taxon, + oligoname=oligoname, + version=VERSION, + alvisir=URL_ALVISIR) +# Search by Oligo name page +@app.route('/searchByOligosaccharideName/') +@app.route('/searchByOligosaccharideName') +def searchByOligosaccharideName(): + oligoname = request.args.get('oligoname', None) + taxon = request.args.get('taxon', None) + return render_template('searchByOligosaccharideName.html', oligoname=oligoname, + taxon=taxon, + version=VERSION, + alvisir=URL_ALVISIR) + +# Search by Taxon page (oligo type) +@app.route('/searchByTaxonForOligosaccharideType/') +@app.route('/searchByTaxonForOligosaccharideType') +def searchByTaxonForOligosaccharideType(): + taxon = request.args.get('taxon', None) + oligotype = request.args.get('oligotype', None) + return render_template('searchByTaxonForOligosaccharideType.html', taxon=taxon, + oligotype=oligotype, + version=VERSION, + alvisir=URL_ALVISIR) +# Search by Oligo type page +@app.route('/searchByOligosaccharideType/') +@app.route('/searchByOligosaccharideType') +def searchByOligosaccharideType(): + oligotype = request.args.get('oligotype', None) + taxon = request.args.get('taxon', None) + return render_template('searchByOligosaccharideType.html', oligotype=oligotype, + taxon=taxon, + version=VERSION, + alvisir=URL_ALVISIR) + +##### FIN TEST ##### + +# Search by Taxon page (stage) @app.route('/searchByTaxon/') @app.route('/searchByTaxon') def searchByTaxon(): taxon = request.args.get('taxon', None) - habitat = request.args.get('habitat', None) - qps = request.args.get('qps', None) - sources = request.args.getlist("source", None) + stage = request.args.get('stage', None) + # qps = request.args.get('qps', None) + # sources = request.args.getlist("source", None) return render_template('searchByTaxon.html', taxon=taxon, - habitat=habitat, - qps=qps, - sources=sources, + stage=stage, + # qps=qps, + # sources=sources, version=VERSION, alvisir=URL_ALVISIR) -# Search by Habitat page -@app.route('/searchByHabitat/') -@app.route('/searchByHabitat') -def searchByHabitat(): - habitat = request.args.get('habitat', None) +# Search by Stage page +@app.route('/searchByPhysiologicalStage/') +@app.route('/searchByPhysiologicalStage') +def searchByPhysiologicalStage(): + stage = request.args.get('stage', None) taxon = request.args.get('taxon', None) - qps = request.args.get('qps', None) - sources = request.args.getlist("source", None) - return render_template('searchByHabitat.html', habitat=habitat, + # qps = request.args.get('qps', None) + # sources = request.args.getlist("source", None) + return render_template('searchByPhysiologicalStage.html', stage=stage, taxon=taxon, - qps=qps, - sources=sources, + # qps=qps, + # sources=sources, version=VERSION, alvisir=URL_ALVISIR) -# Search by Taxon page (phenotype) -@app.route('/searchByTaxonForPhenotype/') -@app.route('/searchByTaxonForPhenotype') -def searchByTaxonForPhenotype(): + +# Search by Taxon page (postpartum) +@app.route('/searchByTaxonForPostpartum/') +@app.route('/searchByTaxonForPostpartum') +def searchByTaxonForPostpartum(): taxon = request.args.get('taxon', None) - phenotype = request.args.get('phenotype', None) - qps = request.args.get('qps', None) - return render_template('searchByTaxonForPhenotype.html', taxon=taxon, - phenotype=phenotype, - qps=qps, + postpartum = request.args.get('postpartum', None) + # qps = request.args.get('qps', None) + return render_template('searchByTaxonForPostpartum.html', taxon=taxon, + postpartum=postpartum, + # qps=qps, version=VERSION, alvisir=URL_ALVISIR) # Search by Phenotype page -@app.route('/searchByPhenotype/') -@app.route('/searchByPhenotype') -def searchByPhenotype(): - phenotype = request.args.get('phenotype', None) +@app.route('/searchByPostpartum/') +@app.route('/searchByPostpartum') +def searchByPostpartum(): + postpartum = request.args.get('postpartum', None) taxon = request.args.get('taxon', None) - qps = request.args.get('qps', None) - return render_template('searchByPhenotype.html', phenotype=phenotype, - taxon=taxon, qps=qps, + # qps = request.args.get('qps', None) + return render_template('searchByPostpartum.html', postpartum=postpartum, + taxon=taxon, + # qps=qps, version=VERSION, alvisir=URL_ALVISIR) + # Search by Taxon page (use) -@app.route('/searchByTaxonForUse/') -@app.route('/searchByTaxonForUse') -def searchByTaxonForUse(): +@app.route('/searchByTaxonForSampleType/') +@app.route('/searchByTaxonForSampleType') +def searchByTaxonForSampleType(): taxon = request.args.get('taxon', None) - use = request.args.get('use', None) - qps = request.args.get('qps', None) - return render_template('searchByTaxonForUse.html', taxon=taxon, use=use, - qps=qps, version=VERSION, - alvisir=URL_ALVISIR) -# Search by Use page -@app.route('/searchByUse/') -@app.route('/searchByUse') -def searchByUse(): - use = request.args.get('use', None) + sample = request.args.get('sample', None) + # qps = request.args.get('qps', None) + return render_template('searchByTaxonForSampleType.html', taxon=taxon, + sample=sample, + # qps=qps, + version=VERSION, + alvisir=URL_ALVISIR) +# Search by Sample page +@app.route('/searchBySampleType/') +@app.route('/searchBySampleType') +def searchBySampleType(): + sample = request.args.get('sample', None) taxon = request.args.get('taxon', None) - qps = request.args.get('qps', None) - return render_template('searchByUse.html', use=use, taxon=taxon, qps=qps, + # qps = request.args.get('qps', None) + return render_template('searchBySampleType.html', sample=sample, taxon=taxon, + # qps=qps, + version=VERSION, + alvisir=URL_ALVISIR) + +# Search by Taxon page (lactation) +@app.route('/searchByTaxonForLactation/') +@app.route('/searchByTaxonForLactation') +def searchByTaxonForLactation(): + taxon = request.args.get('taxon', None) + lactation = request.args.get('lactation', None) + # qps = request.args.get('qps', None) + return render_template('searchByTaxonForLactation.html', taxon=taxon, + lactation=lactation, + # qps=qps, + version=VERSION, + alvisir=URL_ALVISIR) +# Search by Lactation page +@app.route('/searchByLactation/') +@app.route('/searchByLactation') +def searchByLactation(): + lactation = request.args.get('lactation', None) + taxon = request.args.get('taxon', None) + # qps = request.args.get('qps', None) + return render_template('searchByLactationStage.html', lactation=lactation, taxon=taxon, + # qps=qps, version=VERSION, alvisir=URL_ALVISIR) @@ -293,6 +418,37 @@ def get_taxid(): qps = request.args.get('qps', None) return(jsonify(list_taxid(app, conn, path, qps))) +# Database queries (V2) +@app.route('/_get_stat_entity') +def get_stat_entity(): + return(jsonify(stat_entity(app, conn))) + +@app.route('/_get/stat_occurrence') +def get_stat_occurrence(): + return(jsonify(stat_occurrence(app, conn))) + +# @app.route('/_get/nb_occ_by_concept') +# def get_nb_occ_by_concept(): +# concept = request.args.get('concept', None) # concept = 'Species' or 'Oligosaccharide_type' +# return(jsonify(fetch_nb_occ_by_concept(app, conn, concept))) +@app.route('/_get/nb_occ_by_concept') +def get_nb_occ_by_concept(): + concept = request.args.get('concept', None) # Exemple : 'Species' ou 'Oligosaccharide_type' + if not concept: + return jsonify({"error": "Concept parameter is missing"}), 400 + + # Appeler la fonction pour récupérer les données + results = fetch_nb_occ_by_concept(app, conn, concept) + if "error" in results: + return jsonify({"error": "Failed to fetch data", "details": results}), 500 + + # Formatage des données pour Chart.js + labels = list(results.keys()) + data = list(results.values()) + + return jsonify({"labels": labels, "data": data}) + + # API source_choices = ["pubmed", "CIRM-BIA", "CIRM-CFBP", "CIRM-Levures", "dsmz", "genbank"] qps_choices = ["yes", "no", "true", "false"] diff --git a/database.py b/database.py index d409d6cde4410124173790660642e349c8abf5be..dceb3a2e5dc41cbf0c408e55e95816fae08f2a63 100644 --- a/database.py +++ b/database.py @@ -18,6 +18,7 @@ import psycopg2 from psycopg2 import pool import re from omnicrobe_web.config import * +import json # Get Database connection def get_db(app): @@ -59,6 +60,67 @@ def get_version(app, conn): return dict(zip(columns, cursor.fetchall()[0])) cursor.close() +# Get statistics: /get/stat* +def stat_occurrence(app, conn): + conn = get_db(app) + if conn != None: + cursor = conn.cursor() + try: + cursor.execute("SELECT co_type, count(relation_occurrence.ro_id) \ + FROM relation_occurrence, concept_occurrence \ + WHERE relation_occurrence.ro_fk_concept_occurrence_id = concept_occurrence.co_id \ + GROUP BY concept_occurrence.co_type") + except Exception as err: + print_psycopg2_exception(err) + results = dict() + for row in cursor.fetchall(): + results[row[0]] = row[1] + cursor.close() + return results + +def stat_entity(app, conn): + conn = get_db(app) + if conn != None: + cursor = conn.cursor() + try: + cursor.execute("SELECT c, sum(n) \ + FROM ( \ + SELECT co_type c, count(distinct co_fk_concept_id) n \ + FROM concept_occurrence GROUP BY co_type \ + UNION \ + SELECT co_type, count(distinct co_form_concept) \ + FROM concept_occurrence WHERE co_fk_concept_id ISNULL \ + GROUP BY co_type) \ + GROUP BY c") + except Exception as err: + print_psycopg2_exception(err) + results = dict() + for row in cursor.fetchall(): + results[row[0]] = row[1] + cursor.close() + return results + +# Get occurrence number by concept: +def fetch_nb_occ_by_concept(app, conn, concept): + conn = get_db(app) + if conn != None: + cursor = conn.cursor() + try: + cursor.execute("SELECT cn_name, count(distinct co_id) \ + FROM concept_occurrence, concept, concept_name \ + WHERE co_type = %s \ + AND concept_occurrence.co_fk_concept_id = concept.c_id \ + AND concept.c_id = concept_name.cn_fk_concept_id \ + GROUP BY concept_name.cn_name", (concept,)) + except Exception as err: + print_psycopg2_exception(err) + results = dict() + for row in cursor.fetchall(): + results[row[0]] = row[1] + cursor.close() + return results + + # Get taxon: /get/taxon def get_taxon(app, conn, id): conn = get_db(app) @@ -605,7 +667,8 @@ def list_relations(app, conn, source, taxonid, qps, ontobiotopeid, types): if conn != None: cursor = conn.cursor() query = "SELECT DISTINCT r.form_taxon, r.form_element, r.id_source, \ - r.type, r.source, e.identifier, t.taxonid, t.qps, e.path, t.path, t.diffusion " + r.type, r.source, e.identifier, t.taxonid, t.qps, e.path, t.path, t.diffusion, \ + e.name, t.name" query += " FROM relation r, taxon t, element e" query += " WHERE r.id_element = e.id AND t.id = r.id_taxon" if source != None and source != []: @@ -628,6 +691,7 @@ def list_relations(app, conn, source, taxonid, qps, ontobiotopeid, types): if ontobiotopeid != None and ontobiotopeid != '': query += " AND r.id_element in (SELECT id FROM element e WHERE e.path like '%/" + ontobiotopeid + "/%' OR e.identifier = '" + ontobiotopeid + "')" try: + print(query) cursor.execute(query) except Exception as err: print_psycopg2_exception(err) @@ -640,6 +704,18 @@ def list_relations(app, conn, source, taxonid, qps, ontobiotopeid, types): str_taxforms = clean_form(row[0]) elements.append(str_taxforms) # relation type + if row[3] == 'have_produced_tmp_1': + elements.append('Have produced tmp 1') + if row[3] == 'have_produced_tmp_2': + elements.append('Have produced tmp 2') + if row[3] == 'have_produced_1': + elements.append('Have produced 1') + if row[3] == 'have_produced_2': + elements.append('Have produced 2') + if row[3] == 'has_given_birth_since': + elements.append('Has given birth since') + if row[3] == 'has_a_physiological_stage': + elements.append('Has a physiological stage') if row[3] == 'habitat': if taxonid != None: elements.append('Lives in') @@ -671,8 +747,10 @@ def list_relations(app, conn, source, taxonid, qps, ontobiotopeid, types): elements.append(row[5]) elements.append(row[6]) elements.append(row[10]) - elements.append("") - elements.append("") + # elements.append("") + # elements.append("") + elements.append(row[11]) + elements.append(row[12]) results.append(elements) cursor.close() return results diff --git a/static/css/home.css b/static/css/home.css new file mode 100644 index 0000000000000000000000000000000000000000..fae9b5cef46a92c210d2d570633be3379d46be89 --- /dev/null +++ b/static/css/home.css @@ -0,0 +1,143 @@ +body { + font-family: 'Roboto', sans-serif; + color: #333; + background-color: #f8f9fa; +} + +/* Hero Section */ +.hero-section { + background: linear-gradient(145deg, #274757, #0077cc); + padding: 4rem 0; + border-radius: 0 0 2rem 2rem; + color: white; + margin-top: 40px; +} + +.hero-section h1 { + color: black; + font-size: 2.8rem; + margin-bottom: 1.5rem; +} + +.hero-section .description { + max-width: 800px; + margin: 0 auto; + font-size: 1.2rem; + line-height: 1.6; + color :black; + opacity: 0.95; +} + +.btn-info { + background-color: #274757; + border: none; + padding: 0.8rem 2rem; + border-radius: 2rem; + font-weight: 500; + transition: transform 0.2s; +} + +.btn-info:hover { + transform: translateY(-2px); + background-color: #274757; +} + +/* Data Overview Section */ +.section-title { + font-size: 2.2rem; + color: #274757; + font-weight: 600; +} + +.visualization-row { + margin: 0 -15px; +} + +.viz-card1 { + background: white; + border-radius: 1rem; + padding: 1.5rem; + height: 400px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: transform 0.2s; + align-items: center; +} + + +/* Data Visualization Section */ +.viz-card { + background: white; + border-radius: 1rem; + padding: 1.5rem; + height: 400px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: transform 0.2s; + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; +} + +.viz-card canvas { + max-width: 100%; + margin: 0 auto; +} + + +#taxonsChart { + width: auto; + height: auto; +} + + +.viz-card:hover { + transform: translateY(-5px); +} + +.viz-card h3 { + color: #274757; + font-size: 1.3rem; + margin-bottom: 1.5rem; + text-align: center; +} + +.table-wrapper { + max-height: 300px; + overflow-y: auto; +} + +.table { + margin-bottom: 0; +} + +.table th { + background-color: #274757; + color: white; + position: sticky; + top: 0; +} + +.coming-soon { + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: #888; +} + +.coming-soon i { + font-size: 3rem; + margin-bottom: 1rem; +} + +@media (max-width: 768px) { + .visualization-row { + flex-direction: column; + } + + .viz-card { + margin-bottom: 2rem; + } +} + diff --git a/static/css/research.css b/static/css/research.css new file mode 100644 index 0000000000000000000000000000000000000000..4511e6621bdca39c16ddb33beb9fda9f84474d11 --- /dev/null +++ b/static/css/research.css @@ -0,0 +1,273 @@ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Arial', sans-serif; + line-height: 1.6; + background: linear-gradient(180deg, #ffffff, #f0f0f5); + color: #333; + margin: 0; + display: flex; + flex-direction: column; + min-height: 100vh; +} + +.container2 { + flex: 1; + display: flex; + flex-direction: column; + padding: 2rem; + gap: 2rem; + width: 100%; + max-width: 95%; + margin-top: 30px; + overflow-x: auto; +} + +.main-content2 { + padding: 2rem; + background: #ffffff; + /* border-radius: 10px; */ + /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */ + /* overflow-y: auto; */ + /* width: 100%; + height: 100%; */ + margin-top: 100px; +} + +/* Search Bar */ +.search-bar2 { + display: flex; + align-items: center; + gap: 1rem; + padding: 1.5rem; + background: #8eb1b5; + border-radius: 10px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + position: relative; +} + +.search-bar2 span { + color: #21517A; + font-weight: 500; + white-space: nowrap; +} + +.search-bar2 select { + padding: 0.75rem 1rem; + border: 1px solid #ddd; + border-radius: 6px; + background: #fff; + color: #333; + font-size: 1rem; + cursor: pointer; + min-width: 180px; + transition: all 0.3s ease; +} + +.search-bar2 select:hover, +.search-bar2 select:focus { + border-color: #3498db; + box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1); +} + +.search-bar2 input { + flex: 1; + padding: 0.75rem 1rem; + border: 1px solid #ddd; + border-radius: 6px; + font-size: 1rem; + transition: all 0.3s ease; +} + +.search-bar2 input:focus { + outline: none; + border-color: #3498db; + box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1); +} + +/* Autocomplete */ +.autocomplete-box { + position: absolute; + top: calc(100% - 10px); + left: 250px; + right: 100px; + background: white; + border: 1px solid #ddd; + border-radius: 0 0 8px 8px; + max-height: 200px; + overflow-y: auto; + z-index: 1000; + /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */ +} + +.autocomplete-box div { + padding: 0.75rem 1rem; + cursor: pointer; + transition: all 0.2s ease; +} + +.autocomplete-box div:hover { + background-color: #f0f7ff; + color: #21517A; +} + + +/* Table Styles for Large Data */ +.results-section { + background: #ffffff; + padding: 20px; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + width: 100%; + overflow-x: auto; + display: none; + /* margin-top: 100px; */ +} + +.results-table { + width: 100%; + border-collapse: collapse; + margin-top: 20px; + font-size: 1rem; + table-layout: fixed; +} + +.results-table th, +.results-table td { + text-align: left; + padding: 15px; + border: 1px solid #ddd; + word-wrap: break-word; +} + +.results-table th { + background: #274757; + color: white; + font-size: 1.1rem; + text-transform: uppercase; +} + +.results-table tr:nth-child(even) { + background-color: #f9f9f9; +} + +.results-table tr:hover { + background-color: #f1f1f1; + transition: background-color 0.3s ease; +} + +/* Pagination Styles */ +#pagination { + margin-top: 20px; + text-align: center; +} + +#pagination button { + background: linear-gradient(45deg, #3498db, #2980b9); + color: white; + border: none; + padding: 10px 15px; + margin: 0 5px; + border-radius: 8px; + cursor: pointer; + font-size: 1rem; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +#pagination button.active { + background: #2980b9; + font-weight: bold; +} + +#pagination button:hover { + transform: scale(1.1); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +/* Large Data Adjustments */ +.results-table td { + max-width: 300px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.results-table th:first-child, +.results-table td:first-child { + width: 25%; +} + +.results-table td:hover { + overflow: visible; + white-space: normal; +} + + +/* Responsive */ +@media (min-width: 1200px) { + .container { + max-width: 90%; + } + + .main-content { + padding: 4rem; + } +} + +.info-section { + background-color: #f0f7f6; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + padding: 20px; + text-align: center; + margin-bottom: 20px; +} + +.info-section { + margin-bottom: 10px; +} + +.info-section h2 { + font-size: 2rem; + color: #21517A; +} + +.info-section p { + font-size: 1.1rem; + color: #333; +} + +/* Section Getting Started */ +.getting-started { + background-color: #f0f7f6; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + padding: 20px; + margin-bottom: 20px; +} + +.getting-started h3 { + color: #21517A; + font-size: 1.5rem; +} + +.getting-started ul { + font-size: 1.1rem; + color: #333; + text-align: left; + margin-top: 10px; + padding-left: 20px; +} + +.getting-started ul li { + margin-bottom: 10px; +} + +.search-icon i { + font-size: 40px; +} diff --git a/static/css/sheet.css b/static/css/sheet.css new file mode 100644 index 0000000000000000000000000000000000000000..eefd291e10aeb544d39b4be8bab250c69775a63b --- /dev/null +++ b/static/css/sheet.css @@ -0,0 +1,186 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Arial', sans-serif; + line-height: 1.6; + color: #333; + background-color: #f5f7fa; +} + +/* Main Layout */ +.main-container { + display: flex; + min-height: 100vh; + background-color: #f5f7fa; + margin-top: 40px; +} + +/* Sidebar Navigation */ +.sidebar { + width: 250px; + background-color: #2c3e50; + padding: 2rem 0; + flex-shrink: 0; + height: 100vh; + position: sticky; + top: 0; +} + +.nav-menu { + list-style: none; + padding: 0; + margin: 0; +} + +.nav-btn { + width: 100%; + padding: 1rem 2rem; + text-align: left; + background: none; + border: none; + color: #ecf0f1; + font-size: 1rem; + cursor: pointer; + transition: background-color 0.3s; +} + +.nav-btn:hover { + background-color: #34495e; +} + +/* Content Area */ +.content { + flex-grow: 1; + padding: 2rem; + max-width: calc(100vw - 250px); +} + +.section { + max-width: 1200px; + margin: 0 auto; +} + +.section.hidden { + display: none; +} + +/* Information Cards */ +.info-card { + background-color: #ffffff; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + margin-bottom: 2rem; + overflow: hidden; +} + +.card-header { + padding: 1.5rem; + margin: 0; + background-color: #f8f9fa; + border-bottom: 1px solid #e1e8ed; + font-size: 1.25rem; + color: #2c3e50; + font-weight: 600; +} + +.info-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 1.5rem; + padding: 1.5rem; +} + +.info-item { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.info-label { + font-size: 0.875rem; + color: #7f8c8d; + font-weight: 500; +} + +.info-value { + font-size: 1rem; + color: #2c3e50; + padding: 0.5rem; + background-color: #f8f9fa; + border-radius: 4px; + min-height: 2.5rem; + display: flex; + align-items: center; +} + +/* Structure Viewer */ +.structure-viewer { + padding: 1.5rem; + display: flex; + justify-content: center; + align-items: center; + background-color: #f8f9fa; +} + +.structure-image { + max-width: 100%; + height: auto; + border-radius: 4px; + max-height: 400px; + object-fit: contain; +} + +/* Action Bar */ +.action-bar { + display: flex; + justify-content: flex-end; + padding: 1rem; + background-color: #f8f9fa; + border-top: 1px solid #e1e8ed; +} + +.download-btn { + padding: 0.75rem 1.5rem; + background-color: #3498db; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s; + font-weight: 500; +} + +.download-btn:hover { + background-color: #2980b9; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .main-container { + flex-direction: column; + } + + .sidebar { + width: 100%; + height: auto; + position: static; + padding: 1rem 0; + } + + .content { + max-width: 100%; + padding: 1rem; + } + + .info-grid { + grid-template-columns: 1fr; + } + + .info-item { + padding: 0.5rem; + } +} \ No newline at end of file diff --git a/static/img/2'-Fucosyllactose.png b/static/img/2'-Fucosyllactose.png new file mode 100644 index 0000000000000000000000000000000000000000..3852c228aa130ce91312576f70ce6ec6db51c325 Binary files /dev/null and b/static/img/2'-Fucosyllactose.png differ diff --git a/static/js/advancedSearch.js b/static/js/advancedSearch.js index a158cc1b53473b0ea36bef0f6b9cc41bec9728a2..5af855fe9868c38bd6fea6fdc8aa297fdbc3f70d 100644 --- a/static/js/advancedSearch.js +++ b/static/js/advancedSearch.js @@ -14,216 +14,226 @@ # limitations under the License. **/ -import { format_docs } from './utils.js'; +import { format_docs } from "./utils.js"; // Spinner -$('#spinner_advanced').show(); -$('#spinner_advanced2').show(); +$("#spinner_advanced").show(); +$("#spinner_advanced2").show(); // Fix size input for Selectize -$('#builder').on('afterCreateRuleInput.queryBuilder', function(e, rule) { - if (rule.filter.plugin == 'selectize') { - rule.$el.find('.rule-value-container').css('min-width', '200px') - .find('.selectize-control').removeClass('form-control'); +$("#builder").on("afterCreateRuleInput.queryBuilder", function (e, rule) { + if (rule.filter.plugin == "selectize") { + rule.$el + .find(".rule-value-container") + .css("min-width", "200px") + .find(".selectize-control") + .removeClass("form-control"); } }); // Default display var rules_basic = { - condition: 'AND', - rules: [{ - id: 'taxon' - } -] + condition: "AND", + rules: [ + { + id: "taxon", + }, + ], }; // Options for Selectize var options = { allow_empty: false, // plugins: ['bt-tooltip-errors'], + conditions: ["AND", "OR", "NOT"], // Added NOT operator filters: [ - { - id: 'taxon', - label: 'Taxon', - type: 'string', - placeholder: 'Bacillus subtilis', - plugin: 'selectize', - operators: ['equal'], - plugin_config: { - valueField: 'path', - labelField: 'name', - searchField: 'name', - sortField: 'name', - create: false, - maxItems: 1, - onInitialize: function() { - var that = this; - - $.getJSON($SCRIPT_ROOT + '/_get_list_taxon_name', - function(data) { - data.forEach(function(item) { - that.addOption(item); - }); - $('#spinner_advanced').hide(); - $('#spinner_advanced2').hide(); - }); - } + { + id: "taxon", + label: "Taxon", + type: "string", + placeholder: "Bacillus subtilis", + plugin: "selectize", + operators: ["equal", "not_equal"], + plugin_config: { + valueField: "path", + labelField: "name", + searchField: "name", + sortField: "name", + create: false, + maxItems: 1, + onInitialize: async function () { + try { + const response = await fetch( + `${$SCRIPT_ROOT}/_get_list_taxon_name` + ); + const data = await response.json(); + data.forEach((item) => this.addOption(item)); + $("#spinner_advanced, #spinner_advanced2").hide(); + } catch (error) { + console.error("Error loading taxon data:", error); + } + }, + }, }, - valueSetter: function(rule, value) { - rule.$el.find('.rule-value-container input')[0].selectize.setValue(value); - } - }, - { - id: 'habitat', - label: 'Habitat', - type: 'string', - placeholder: 'milk product', - plugin: 'selectize', - operators: ['equal'], - plugin_config: { - valueField: 'path', - labelField: 'name', - searchField: 'name', - sortField: 'name', - create: false, - maxItems: 1, - onInitialize: function() { - var that = this; - - if (localStorage.ontoHabitat === undefined) { - $.getJSON($SCRIPT_ROOT + '/_get_list_obt_class', - { table: 'list_habitat' }, - function(data) { + { + id: "habitat", + label: "Habitat", + type: "string", + placeholder: "milk product", + plugin: "selectize", + operators: ["equal", "not_equal"], + plugin_config: { + valueField: "path", + labelField: "name", + searchField: "name", + sortField: "name", + create: false, + maxItems: 1, + onInitialize: async function () { + try { + if (!localStorage.ontoHabitat) { + const response = await fetch( + `${$SCRIPT_ROOT}/_get_list_obt_class`, + { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ table: "list_habitat" }), + } + ); + const data = await response.json(); localStorage.ontoHabitat = JSON.stringify(data); - data.forEach(function(item) { - that.addOption(item); - }); + data.forEach((item) => this.addOption(item)); + } else { + JSON.parse(localStorage.ontoHabitat).forEach((item) => + this.addOption(item) + ); } - ); - } - else { - JSON.parse(localStorage.ontoHabitat).forEach(function(item) { - that.addOption(item); - }); - } - } + } catch (error) { + console.error("Error loading habitat data:", error); + } + }, + }, }, - valueSetter: function(rule, value) { - rule.$el.find('.rule-value-container input')[0].selectize.setValue(value); - } - }, - { - id: 'phenotype', - label: 'Phenotype', - placeholder: 'adherent', - type: 'string', - plugin: 'selectize', - operators: ['equal'], - plugin_config: { - valueField: 'path', - labelField: 'name', - searchField: 'name', - sortField: 'name', - create: false, - maxItems: 1, - onInitialize: function() { - var that = this; - - if (localStorage.ontoPhenotype === undefined) { - $.getJSON($SCRIPT_ROOT + '/_get_list_obt_class', - { table: 'list_phenotype_taxon' }, - function(data) { + { + id: "phenotype", + label: "Phenotype", + placeholder: "adherent", + type: "string", + plugin: "selectize", + operators: ["equal", "not_equal"], + plugin_config: { + valueField: "path", + labelField: "name", + searchField: "name", + sortField: "name", + create: false, + maxItems: 1, + onInitialize: async function () { + try { + if (!localStorage.ontoPhenotype) { + const response = await fetch( + `${$SCRIPT_ROOT}/_get_list_obt_class`, + { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ table: "list_phenotype_taxon" }), + } + ); + const data = await response.json(); localStorage.ontoPhenotype = JSON.stringify(data); - data.forEach(function(item) { - that.addOption(item); - }); + data.forEach((item) => this.addOption(item)); + } else { + JSON.parse(localStorage.ontoPhenotype).forEach((item) => + this.addOption(item) + ); } - ); - } - else { - JSON.parse(localStorage.ontoPhenotype).forEach(function(item) { - that.addOption(item); - }); - } - } + } catch (error) { + console.error("Error loading phenotype data:", error); + } + }, + }, }, - valueSetter: function(rule, value) { - rule.$el.find('.rule-value-container input')[0].selectize.setValue(value); - } - }, - { - id: 'use', - label: 'Use', - placeholder: 'acidification activity', - type: 'string', - plugin: 'selectize', - operators: ['equal'], - plugin_config: { - valueField: 'path', - labelField: 'name', - searchField: 'name', - sortField: 'name', - create: false, - maxItems: 1, - onInitialize: function() { - var that = this; - - if (localStorage.ontoUse === undefined) { - $.getJSON($SCRIPT_ROOT + '/_get_list_obt_class', - { table: 'list_use_taxon' }, - function(data) { + { + id: "use", + label: "Use", + placeholder: "acidification activity", + type: "string", + plugin: "selectize", + operators: ["equal", "not_equal"], + plugin_config: { + valueField: "path", + labelField: "name", + searchField: "name", + sortField: "name", + create: false, + maxItems: 1, + onInitialize: async function () { + try { + if (!localStorage.ontoUse) { + const response = await fetch( + `${$SCRIPT_ROOT}/_get_list_obt_class`, + { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ table: "list_use_taxon" }), + } + ); + const data = await response.json(); localStorage.ontoUse = JSON.stringify(data); - data.forEach(function(item) { - that.addOption(item); - }); + data.forEach((item) => this.addOption(item)); + } else { + JSON.parse(localStorage.ontoUse).forEach((item) => + this.addOption(item) + ); } - ); - } - else { - JSON.parse(localStorage.ontoUse).forEach(function(item) { - that.addOption(item); - }); - } - } + } catch (error) { + console.error("Error loading use data:", error); + } + }, + }, }, - valueSetter: function(rule, value) { - rule.$el.find('.rule-value-container input')[0].selectize.setValue(value); - } - }, - { - id: 'source', - label: 'Source', - type: 'string', - input: 'checkbox', - values: { - 'PubMed': 'PubMed', - 'GenBank': 'GenBank', - 'DSMZ': 'DSMZ', - 'CIRM-BIA': 'CIRM-BIA', - 'CIRM-CFBP': 'CIRM-CFBP', - 'CIRM-Levures': 'CIRM-Levures' + { + id: "source", + label: "Source", + type: "string", + input: "checkbox", + operators: ["in", "not_in"], + values: { + PubMed: "PubMed", + GenBank: "GenBank", + DSMZ: "DSMZ", + "CIRM-BIA": "CIRM-BIA", + "CIRM-CFBP": "CIRM-CFBP", + "CIRM-Levures": "CIRM-Levures", + }, + default_value: [ + "PubMed", + "GenBank", + "DSMZ", + "CIRM-BIA", + "CIRM-CFBP", + "CIRM-Levures", + ], + operators: ["in"], }, - default_value: ['PubMed', 'GenBank', 'DSMZ', 'CIRM-BIA', 'CIRM-CFBP', 'CIRM-Levures'], - operators: ['in'], - }, - { - id: 'qps', - label: 'QPS', - type: 'string', - input: 'radio', - vertical: true, - values: { - 'yes': 'only QPS (<i>Qualified presumption of safety</i>)', - 'no': 'all' + { + id: "qps", + label: "QPS", + type: "string", + input: "radio", + vertical: true, + values: { + yes: "only QPS (<i>Qualified presumption of safety</i>)", + no: "all", + }, + operators: ["equal", "not_equal"], }, - operators: ['equal'] - } ], - rules: rules_basic + rules: rules_basic, }; // Query Builder -var $qb = $("#builder").queryBuilder(options); +// var $qb = $("#builder").queryBuilder(options); // function format(d, alvisir) { // @@ -249,153 +259,315 @@ var $qb = $("#builder").queryBuilder(options); // '</table>'; // } -var thtable = $('#results_advanced').DataTable(); +// var thtable = $('#results_advanced').DataTable(); + +// Initialize QueryBuilder +const $qb = $("#builder").queryBuilder(options); + +// Initialize DataTable with modern configuration +let thtable = $("#results_advanced").DataTable({ + dom: "Bfrtip", + responsive: true, + buttons: [ + { + extend: "collection", + text: "Export", + buttons: ["copy", "csv", "excel", "pdf"], + }, + "colvis", + ], + language: { + searchBuilder: { + button: "Advanced Search", + title: "Advanced Search", + data: "Column", + condition: "Condition", + value: "Value", + }, + }, +}); + +// Parse query and execute search +$(".parse-json").on("click", async function () { + $("#spinner_advanced, #spinner_advanced2").show(); + + try { + const queryData = $("#builder").queryBuilder("getSQL"); + const sql = JSON.parse(JSON.stringify(queryData)).sql; + + // Process NOT conditions + const processedSql = processNotConditions(sql); + + const response = await fetch( + `${$SCRIPT_ROOT}/_get_list_advanced_relations`, + { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ query: processedSql }), + } + ); + + const data = await response.json(); + updateResultsTable(data); + } catch (error) { + console.error("Error executing search:", error); + alert("An error occurred while searching. Please try again."); + } finally { + $("#spinner_advanced, #spinner_advanced2").hide(); + } +}); + +// Helper function to process NOT conditions +function processNotConditions(sql) { + // Handle NOT operator in SQL query + return sql.replace(/NOT\s+([^=]+=[^AND|OR]+)/g, (match, p1) => { + return `NOT EXISTS (SELECT 1 WHERE ${p1})`; + }); +} + +// Update results table with new data +function updateResultsTable(data) { + thtable.clear(); + thtable.rows.add(data); + thtable.draw(); +} // Create results table function createTableTest(relations) { - - $('#hide').css( 'display', 'block' ); - $('#results_advanced').DataTable().destroy(); - thtable = $('#results_advanced').DataTable( + $("#hide").css("display", "block"); + $("#results_advanced").DataTable().destroy(); + thtable = $("#results_advanced").DataTable({ + dom: "lifrtBp", + 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, + }, { - dom: 'lifrtBp', - 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>"; + 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(); } - 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>"; + }, + }, + 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(/.+:/gi, "") + + "'>" + + taxa[0] + + "</a>"; + } else if (row[9].includes("bd")) { + taxon = + "<a target='_blank' class='doc' href='https://bacdive.dsmz.de/strain/" + + row[9].replace(/.+:/gi, "") + + "'>" + + 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 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]; - }} - ] - }); + } + 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]; + }, + }, + ], + }); - $('#spinner_advanced').hide(); - $('#spinner_advanced2').hide(); + $("#spinner_advanced").hide(); + $("#spinner_advanced2").hide(); } -$('.parse-json').on('click', function() { +$(".parse-json").on("click", function () { // console.log(JSON.stringify($('#builder').queryBuilder('getSQL'), undefined, 2)); - $('#spinner_advanced').show(); - $('#spinner_advanced2').show(); + $("#spinner_advanced").show(); + $("#spinner_advanced2").show(); - var sql = JSON.stringify($('#builder').queryBuilder('getSQL'), undefined, 2); + var sql = JSON.stringify($("#builder").queryBuilder("getSQL"), undefined, 2); sql = JSON.parse(sql).sql; var sql_f = sql; @@ -403,22 +575,24 @@ $('.parse-json').on('click', function() { var regex_s = /source\s(IN\(.+\))/g; var found_s = sql.match(regex_s); var list_sources = []; - if ( found_s != null ) { + if (found_s != null) { var l_source = ""; - for ( let i = 0 ; i < found_s.length ; i++ ) { - var sources = found_s[i].replace(regex_s, '$1'); - sources = sources.replace('IN(', ''); - sources = sources.replace(')', ''); + for (let i = 0; i < found_s.length; i++) { + var sources = found_s[i].replace(regex_s, "$1"); + sources = sources.replace("IN(", ""); + sources = sources.replace(")", ""); l_source = sources.replaceAll("'", ""); } - if ( l_source != "" ) { list_sources = l_source.split(', '); } + if (l_source != "") { + list_sources = l_source.split(", "); + } } // qps var regex_q = /qps\s=\s'([a-z]+)'/g; var found_q = sql.match(regex_q); - if ( found_q != null ) { - var qps = found_q[0].replace(regex_q, '$1'); + if (found_q != null) { + var qps = found_q[0].replace(regex_q, "$1"); } // taxon @@ -427,60 +601,102 @@ $('.parse-json').on('click', function() { var list_taxid = []; var list_op_tax = []; var op_tax = ""; - if ( found_t != null ) { + if (found_t != null) { var l_taxid = ""; - for ( let i = 0 ; i < found_t.length ; i++ ) { - var op_tax = found_t[i].replace(regex_t, '$1'); - var par_tax_s = found_t[i].replace(regex_t, '$2'); - var path_t = found_t[i].replace(regex_t, '$3'); // $2 - var par_tax_e = found_t[i].replace(regex_t, '$4'); - var id_t = path_t.split('/'); id_t = id_t[id_t.length - 1]; - if ( l_taxid == "" ) { l_taxid = id_t; } - else { l_taxid += ", " + id_t; } + for (let i = 0; i < found_t.length; i++) { + var op_tax = found_t[i].replace(regex_t, "$1"); + var par_tax_s = found_t[i].replace(regex_t, "$2"); + var path_t = found_t[i].replace(regex_t, "$3"); // $2 + var par_tax_e = found_t[i].replace(regex_t, "$4"); + var id_t = path_t.split("/"); + id_t = id_t[id_t.length - 1]; + if (l_taxid == "") { + l_taxid = id_t; + } else { + l_taxid += ", " + id_t; + } list_taxid.push(id_t); - if ( op_tax != "" ) { list_op_tax.push(op_tax); } - sql_f = sql_f.replace(found_t[i], "r.id_taxon in (SELECT id FROM taxon t WHERE t.path like '%/"+id_t+"/%' OR t.taxonid = '"+id_t+"')"); + if (op_tax != "") { + list_op_tax.push(op_tax); + } + sql_f = sql_f.replace( + found_t[i], + "r.id_taxon in (SELECT id FROM taxon t WHERE t.path like '%/" + + id_t + + "/%' OR t.taxonid = '" + + id_t + + "')" + ); } } // habitat | phenotype | use - var regex_h = /(AND|OR)?\s?(\(?)\s?\b(habitat|phenotype|use)\b\s=\s'([\/A-Z0-9:,]+)'\s?(\)?)/g; + var regex_h = + /(AND|OR)?\s?(\(?)\s?\b(habitat|phenotype|use)\b\s=\s'([\/A-Z0-9:,]+)'\s?(\)?)/g; var found_h = sql.match(regex_h); var list_obtid = []; var list_op_obt = []; var op_obt = ""; - if ( found_h != null ) { + if (found_h != null) { var type_obt = ""; var l_obtid = ""; var test = ""; - for ( let i = 0 ; i < found_h.length ; i++ ) { - var op_obt = found_h[i].replace(regex_h, '$1'); - var par_obt_s = found_h[i].replace(regex_h, '$2'); - var type_obt = found_h[i].replace(regex_h, '$3'); // $2 - var path_h = found_h[i].replace(regex_h, '$4'); // $3 - var par_obt_e = found_h[i].replace(regex_h, '$5'); - var id_h = path_h.split('/'); id_h = id_h[id_h.length - 1]; - if ( op_obt == "AND" && i > 0 ) { test += "INTERSECT "; } - else if ( op_obt == "OR" && i > 0 ) { test += "UNION "; } - if ( par_obt_s == "(" ) { test += "("; } - test += "select distinct(t.taxonid) from taxon t, relation r, element e where r.id_taxon = t.id and r.id_element = e.id "; - test += "and (e.identifier = '"+id_h+"' or e.path like '%/"+id_h+"/%') "; - if ( list_taxid[0] != undefined ) { - test += "and (t.taxonid = '"+list_taxid[0]+"' or t.path like '%/"+list_taxid[0]+"/%') "; } - if ( qps == "yes" ) { test += "and t.qps = 'yes' "; } - if ( list_sources.length > 0 ) { + for (let i = 0; i < found_h.length; i++) { + var op_obt = found_h[i].replace(regex_h, "$1"); + var par_obt_s = found_h[i].replace(regex_h, "$2"); + var type_obt = found_h[i].replace(regex_h, "$3"); // $2 + var path_h = found_h[i].replace(regex_h, "$4"); // $3 + var par_obt_e = found_h[i].replace(regex_h, "$5"); + var id_h = path_h.split("/"); + id_h = id_h[id_h.length - 1]; + if (op_obt == "AND" && i > 0) { + test += "INTERSECT "; + } else if (op_obt == "OR" && i > 0) { + test += "UNION "; + } + if (par_obt_s == "(") { + test += "("; + } + test += + "select distinct(t.taxonid) from taxon t, relation r, element e where r.id_taxon = t.id and r.id_element = e.id "; + test += + "and (e.identifier = '" + + id_h + + "' or e.path like '%/" + + id_h + + "/%') "; + if (list_taxid[0] != undefined) { + test += + "and (t.taxonid = '" + + list_taxid[0] + + "' or t.path like '%/" + + list_taxid[0] + + "/%') "; + } + if (qps == "yes") { + test += "and t.qps = 'yes' "; + } + if (list_sources.length > 0) { test += "and r.source in ("; - for ( var k = 0 ; k < list_sources.length ; k++ ) { + for (var k = 0; k < list_sources.length; k++) { test += "'" + list_sources[k] + "'"; } test += ") "; } - if ( par_obt_e == ")" ) { test += ")"; } - var id_h = path_h.split('/'); id_h = id_h[id_h.length - 1]; - if ( l_obtid == "" ) { l_obtid = id_h; } - else { l_obtid += ", " + id_h; } + if (par_obt_e == ")") { + test += ")"; + } + var id_h = path_h.split("/"); + id_h = id_h[id_h.length - 1]; + if (l_obtid == "") { + l_obtid = id_h; + } else { + l_obtid += ", " + id_h; + } list_obtid.push(id_h); - if ( op_obt != "" ) { list_op_obt.push(op_obt); } + if (op_obt != "") { + list_op_obt.push(op_obt); + } } } @@ -488,91 +704,142 @@ $('.parse-json').on('click', function() { // 1.b. Taxon = subtilis OR taxon = cereus // 1.c. Taxon = subtilis AND OBT = abdomen if ( - (list_taxid.length > 1 && list_obtid.length == 0 && op_obt == '' && op_tax == 'OR') || - (list_taxid.length == 0 && list_obtid.length > 1 && op_obt == 'OR' && op_tax == '' && (list_op_obt.includes("OR") || list_op_obt.includes("AND"))) || - (list_taxid.length == 1 && list_obtid.length == 1 && op_obt != 'OR' && op_tax != 'OR') || - (list_taxid.length == 1 && list_obtid.length == 0) || - (list_taxid.length == 0 && list_obtid.length == 1)) { - - $.getJSON($SCRIPT_ROOT + '/_get_list_advanced_relations', + (list_taxid.length > 1 && + list_obtid.length == 0 && + op_obt == "" && + op_tax == "OR") || + (list_taxid.length == 0 && + list_obtid.length > 1 && + op_obt == "OR" && + op_tax == "" && + (list_op_obt.includes("OR") || list_op_obt.includes("AND"))) || + (list_taxid.length == 1 && + list_obtid.length == 1 && + op_obt != "OR" && + op_tax != "OR") || + (list_taxid.length == 1 && list_obtid.length == 0) || + (list_taxid.length == 0 && list_obtid.length == 1) + ) { + $.getJSON( + $SCRIPT_ROOT + "/_get_list_advanced_relations", { source: l_source, taxonid: l_taxid, qps: qps, ontobiotopeid: l_obtid, - type: type_obt + type: type_obt, }, function success(relations) { createTableTest(relations); - }); + } + ); } // 4. Taxon = subtilis OR taxon = cereus AND OBT = abdomen // 4. OBT = abdomen OR OBT = salt AND taxon = Bacillus_subtilis - else if ( (list_taxid.length > 1 && list_obtid.length == 1 && ((op_tax == 'OR' && op_obt == 'AND') || (list_op_tax.indexOf('OR') !== -1 && list_op_tax.indexOf('AND') !== -1 && list_op_obt.length == 0))) ) { - $.getJSON($SCRIPT_ROOT + '/_get_list_advanced_relations', + else if ( + list_taxid.length > 1 && + list_obtid.length == 1 && + ((op_tax == "OR" && op_obt == "AND") || + (list_op_tax.indexOf("OR") !== -1 && + list_op_tax.indexOf("AND") !== -1 && + list_op_obt.length == 0)) + ) { + $.getJSON( + $SCRIPT_ROOT + "/_get_list_advanced_relations", { source: l_source, taxonid: l_taxid, qps: qps, ontobiotopeid: l_obtid, - type: type_obt + type: type_obt, }, function success(relations) { createTableTest(relations); - }); + } + ); } // 2.a. Taxon = subtilis OR OBT = abdomen // 2.b. Taxon = subtilis OR taxon = cereus OR OBT = abdomen - else if ( (list_taxid.length > 1 && list_obtid.length == 1 && op_tax != 'AND' && op_obt != 'AND' && par_tax_e == "") || - (list_taxid.length == 1 && list_obtid.length > 1 && op_tax != 'AND' && op_obt != 'AND' && par_obt_e == "") || - (list_taxid.length >= 1 && list_obtid.length >= 1 && (op_tax == 'OR' || op_obt == 'OR') && list_op_obt.indexOf('AND') == -1 && list_op_tax.indexOf('AND') == -1)) { - $.getJSON($SCRIPT_ROOT + '/_get_list_advanced_relations_2', + else if ( + (list_taxid.length > 1 && + list_obtid.length == 1 && + op_tax != "AND" && + op_obt != "AND" && + par_tax_e == "") || + (list_taxid.length == 1 && + list_obtid.length > 1 && + op_tax != "AND" && + op_obt != "AND" && + par_obt_e == "") || + (list_taxid.length >= 1 && + list_obtid.length >= 1 && + (op_tax == "OR" || op_obt == "OR") && + list_op_obt.indexOf("AND") == -1 && + list_op_tax.indexOf("AND") == -1) + ) { + $.getJSON( + $SCRIPT_ROOT + "/_get_list_advanced_relations_2", { source: l_source, taxonid: l_taxid, qps: qps, ontobiotopeid: l_obtid, - type: type_obt + type: type_obt, }, function success(relations) { createTableTest(relations); - }); + } + ); } // 3.a. Taxon = subtilis AND taxon = cereus / OBT = abdomen AND OBT = salt // 3.b. Taxon = subtilis AND taxon = cereus AND OBT = abdomen / OBT = abdomen AND OBT = salt AND taxon = subtilis - else if ( (list_taxid.length > 1 && list_obtid.length == 0 && op_tax == 'AND' && op_obt == '') || - (list_taxid.length == 0 && list_obtid.length > 1 && op_tax == '' && op_obt == 'AND') || - (list_taxid.length > 1 && list_obtid.length == 1 && op_tax == 'AND' && op_obt != 'OR') || - (list_taxid.length == 1 && list_obtid.length > 1 && op_tax != 'OR' && ["AND","OR"].includes(op_obt)) ) { - - if ( test != null ) { - $.getJSON($SCRIPT_ROOT + '/_get_list_advanced_relations_4', + else if ( + (list_taxid.length > 1 && + list_obtid.length == 0 && + op_tax == "AND" && + op_obt == "") || + (list_taxid.length == 0 && + list_obtid.length > 1 && + op_tax == "" && + op_obt == "AND") || + (list_taxid.length > 1 && + list_obtid.length == 1 && + op_tax == "AND" && + op_obt != "OR") || + (list_taxid.length == 1 && + list_obtid.length > 1 && + op_tax != "OR" && + ["AND", "OR"].includes(op_obt)) + ) { + if (test != null) { + $.getJSON( + $SCRIPT_ROOT + "/_get_list_advanced_relations_4", { test: test, source: l_source, taxonid: l_taxid, - ontobiotopeid: l_obtid + ontobiotopeid: l_obtid, }, function success(relations) { createTableTest(relations); - }); - } - else { + } + ); + } else { alert("Not implemented ! In progress ..."); createTableTest([]); } - } - - else { + } else { alert("Not implemented ! In progress ..."); createTableTest([]); } - $('#divQuery').show(); - $('#queryDisabled').val(JSON.stringify($('#builder').queryBuilder('getSQL'), undefined, 2)); + $("#divQuery").show(); + $("#queryDisabled").val( + JSON.stringify($("#builder").queryBuilder("getSQL"), undefined, 2) + ); }); // $('#results_advanced tbody').on('click', 'td.details-control', function () { diff --git a/static/js/home.js b/static/js/home.js new file mode 100644 index 0000000000000000000000000000000000000000..ea3cfe4283a70e74d887361ceeda40c6d0b7f464 --- /dev/null +++ b/static/js/home.js @@ -0,0 +1,110 @@ +//table displaying statistics for each entity +document.addEventListener("DOMContentLoaded", function () { + // The API URL from which we are fetching the JSON data + const apiUrl = '/_get/stat_occurrence'; + + // Fetching the JSON data from the API + fetch(apiUrl) + .then((response) => response.json()) // Convert the API response to JSON + .then((data) => { + + // Log the received data to the console for verification + console.log("Data received from the API:", data); + + // Check if the data is empty or null + if (!data || Object.keys(data).length === 0) { + throw new Error("The data from the API is empty or invalid."); + } + + // Initialize an object to store role statistics + const rolesStats = {}; + + // Iterate over the data and populate the rolesStats object + Object.keys(data).forEach((key) => { + rolesStats[key] = data[key]; + }); + + // Get the table body element where we will display the data + const entitiesTableBody = document.getElementById("entitiesTableBody"); + + // Iterate over the rolesStats object and create table rows for each entity + Object.keys(rolesStats).forEach((entity) => { + const row = document.createElement("tr"); + const cell1 = document.createElement("td"); + const cell2 = document.createElement("td"); + + // Set the content of the cells + cell1.textContent = entity; + cell2.textContent = rolesStats[entity]; + + // Append the cells to the row + row.appendChild(cell1); + row.appendChild(cell2); + + // Append the row to the table body + entitiesTableBody.appendChild(row); + }); + }) + .catch((error) => { + console.error("Error fetching the JSON data:", error); + });}) + + + // Event listener that triggers when the DOM is fully loaded + document.addEventListener("DOMContentLoaded", function () { + // Get the context of the canvas where the chart will be drawn + const taxonsCtx = document.getElementById("taxonsChart").getContext("2d"); + // Function to fetch taxon data from the API + function fetchTaxonData() { + const apiUrl = "/_get/nb_occ_by_concept?concept=Oligosaccharide_type"; + fetch(apiUrl) + .then((response) => { + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + return response.json(); + }) + .then((data) => { + if (!data.labels || !data.data || data.labels.length !== data.data.length) { + throw new Error("The structure of fetched data is invalid."); + } + // Create the chart with the fetched data + const taxonsChart = new Chart(taxonsCtx, { + type: "pie", + data: { + labels: data.labels, + datasets: [ + { + label: "Number of occurrences", + data: data.data, + backgroundColor: [ + "#4E79A7", "#F28E2B", "#E15759", "#76B7B2", "#59A14F" + ], + borderColor: "#ffffff", + borderWidth: 2, + }, + ], + }, + options: { + responsive: true, + plugins: { + legend: { + position: "top", + labels: { + font: { + size: 14, + }, + }, + }, + }, + }, + }); + }) + .catch((error) => { + console.error("Error while fetching the data :", error); + alert("An error occurred while loading the data. Please try again later."); + }); + } + + fetchTaxonData(); + }); \ No newline at end of file diff --git a/static/js/research.js b/static/js/research.js new file mode 100644 index 0000000000000000000000000000000000000000..2e540c7d3383a6861b2d0549b01207d8cca1b3b6 --- /dev/null +++ b/static/js/research.js @@ -0,0 +1,386 @@ +// ========================= Mock Data ========================= +// Sample data used for demonstrating search and pagination functionality +const dummyData = [ + { + oligosaccharide: { + name: "2'-Fucosyllactose", + url: "https://pubmed.ncbi.nlm.nih.gov/30149573/" + }, + oligosaccharide_type: "Fucosylated" , + sample: "Milk Sample A-123 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", + species: "Human", + descendants: ["Homo sapiens sapiens", "Homo erectus"], + lactationStage: "Early", + }, + { + oligosaccharide: { + name: "3'-Sialyllactose (3'-SL)", + url : null + }, + oligosaccharide_type: "Sialylated", + sample: "Milk Sample B-456", + species: "Cow", + descendants: null, + lactationStage: "Mid", + }, + + + { + oligosaccharide: { + name: "3'-Sialyllactose (3'-SL)", + url : null + }, + oligosaccharide_type: "Sialylated", + sample: "Milk Sample B-456", + species: "homo sapiens", + descendants: null, + lactationStage: "Mid", + }, + + + { + oligosaccharide: { + name: "6'-Sialyllactose (6'-SL)", + url : null, + }, + oligosaccharide_type: "Sialylated" , + sample: "Milk Sample C-789", + species: "Goat", + descendants: null, + lactationStage: "Late", + }, + { + oligosaccharide: { + name : "Lacto-N-tetraose (LNT)", + url : null + }, + oligosaccharide_type: "Lacto-N", + sample: "Milk Sample D-101", + species: "Human", + lactationStage: "Early", + }, + { + oligosaccharide: { + name : "Lacto-N-neotetraose (LNnT)", + url : null + }, + oligosaccharide_type: "Lacto-N", + sample: "Milk Sample E-112", + species: "Human", + lactationStage: "Mid", + }, + { + oligosaccharide: { + name : "Lacto-N-fucopentaose I (LNFP-I)", + url : null + }, + oligosaccharide_type: "Lacto-N", + sample: "Milk Sample F-131", + species: "Human", + lactationStage: "Late", + }, + { + oligosaccharide: { + name : "3'-Galactosyllactose (3'-GL)", + url : null, + }, + oligosaccharide_type: "Galactosylated", + sample: "Milk Sample G-415", + species: "Rabbit", + descendants: null, + lactationStage: "Early", + }, + { + oligosaccharide: { + name : "4'-Galactosyllactose (4'-GL)", + url : null + }, + oligosaccharide_type: "Galactosylated", + sample: "Milk Sample H-521", + species: "Rabbit", + descendants: null, + lactationStage: "Mid", + }, + { + oligosaccharide: { + name : "Sialyl-lacto-N-tetraose a (LSTa)", + url : null, + }, + oligosaccharide_type: "Sialylated", + sample: "Milk Sample I-634", + species: "Sheep", + descendants: null, + lactationStage: "Early", + }, + { + oligosaccharide: { + name : "Sialyl-lacto-N-tetraose b (LSTb)", + url : null, + + }, + oligosaccharide_type: "Sialylated", + sample: "Milk Sample J-747", + species: "Sheep", + lactationStage: "Mid", + }, + { + oligosaccharide: { + name : "Sialyl-lacto-N-tetraose c (LSTc)", + url : null, + }, + oligosaccharide_type : "Sialylated", + sample: "Milk Sample K-858", + species: "Horse", + descendants: null, + lactationStage: "Late", + } +]; + +// ========================= Global Variables ========================= +// Global variables to store the current dataset and manage pagination +let currentData = [...dummyData]; +let currentPage = 1; +const resultsPerPage = 5; + +// ========================= Simple Search ========================= +// Initialize DOM elements for simple search functionality +const searchInput = document.getElementById('simple-search'); +const searchButton = document.querySelector('#simple-search-section .search-btn'); +const suggestionBox = document.getElementById('suggestion-box'); +let activeIndex = -1; // Active index for navigating through suggestions + +// Main function to perform a simple search +function performSimpleSearch() { + const searchType = document.getElementById('simple-search-type').value; // Type of search (e.g., name, species) + const searchQuery = searchInput.value.toLowerCase().trim(); + if (!searchQuery) { + // If no keyword, reset results to the full dataset + currentData = [...dummyData]; + populateResults(currentData); + return; + } + + // Filter the data based on the search type and query + const filteredData = dummyData.filter(item => { + switch (searchType) { + case 'oligosaccharide_name': + return item.oligosaccharide.name.toLowerCase().includes(searchQuery); + case 'species': + return (item.species.toLowerCase().includes(searchQuery) || + (item.descendants && item.descendants.some(desc => desc.toLowerCase().includes(searchQuery))) + ); + case 'samples': + return item.sample.toLowerCase().includes(searchQuery); + case 'lactation-stage': + return item.lactationStage.toLowerCase().includes(searchQuery); + case 'oligosaccharide_type': + return item.oligosaccharide_type.toLowerCase().includes(searchQuery); + default: + return true; + } + }); + + // Update the current data and refresh the results table + currentData = filteredData; + populateResults(filteredData); +} + +// ========================= Autocomplete ========================= +// Function to provide suggestions for simple search input +function autocompleteSearch(query) { + if (!query) { + // Clear suggestions if query is empty + document.getElementById('autocomplete-suggestions').innerHTML = ''; + return; + } + + const searchType = document.getElementById('simple-search-type').value; + const suggestions = new Set(); + const queryLower = query.toLowerCase(); + + // Generate suggestions based on search type + dummyData.forEach(item => { + let value = ''; + switch (searchType) { + case 'oligosaccharide_name': + value = item.oligosaccharide.name; + break; + case 'oligosaccharide_type': + value = item.oligosaccharide_type; + break; + case 'species': + // Include both species and descendants in suggestions + value = item.species; + if (value.toLowerCase().includes(queryLower)) suggestions.add(value); + if (item.descendants) { + item.descendants.forEach(desc => { + if (desc.toLowerCase().includes(queryLower)) suggestions.add(desc); + }); + } + break; + case 'samples': + value = item.sample; + break; + case 'lactation-stage': + value = item.lactationStage; + break; + } + if (value.toLowerCase().includes(queryLower)) { + suggestions.add(value); + } + }); + + // Update the suggestions box with the filtered suggestions + const suggestionBox = document.getElementById('autocomplete-suggestions'); + suggestionBox.innerHTML = ''; + activeIndex = -1; + + if (suggestions.size > 0) { + Array.from(suggestions) + .slice(0, 5) + .forEach(item => { + const div = document.createElement('div'); + div.textContent = item; + div.onclick = () => { + searchInput.value = item; + suggestionBox.innerHTML = ''; + performSimpleSearch(); + }; + suggestionBox.appendChild(div); + }); + } + +} + +// ========================= Pagination ========================= +// Function to paginate results based on the current page and results per page +function paginateResults(data) { + const start = (currentPage - 1) * resultsPerPage; + const end = start + resultsPerPage; + return data.slice(start, end); +} + +// Function to render pagination buttons +function renderPagination(totalItems) { + const paginationElement = document.getElementById('pagination'); + paginationElement.innerHTML = ''; + + const totalPages = Math.ceil(totalItems / resultsPerPage); + for (let i = 1; i <= totalPages; i++) { + const button = document.createElement('button'); + button.textContent = i; + button.className = i === currentPage ? 'active' : ''; + button.onclick = () => { + currentPage = i; + populateResults(currentData); + }; + paginationElement.appendChild(button); + } +} + +// ========================= Results Table ========================= +// Function to populate the results table with the given data +function populateResults(data) { + const resultsBody = document.getElementById("results-body"); + const paginatedData = paginateResults(data); + resultsBody.innerHTML = ""; + + if (data.length === 0) { + const row = document.createElement("tr"); + row.innerHTML = ` + <td colspan="5" style="text-align: center; padding: 20px;"> + No results found. Please try a different search. + </td> + `; + resultsBody.appendChild(row); + return; + } + + // Create table rows for each item in the paginated data + paginatedData.forEach((item) => { + const oligosaccharideContent = item.oligosaccharide.url + ? `<a href="${item.oligosaccharide.url}" target="_blank">${item.oligosaccharide.name}</a>` + : item.oligosaccharide.name; + + const row = document.createElement("tr"); + row.innerHTML = ` + <td>${oligosaccharideContent}</td> + <td>${item.oligosaccharide_type}</td> + <td>${item.sample}</td> + <td>${item.species}</td> + <td>${item.lactationStage}</td> + <td><button class="details-btn" onclick="showDetails('${item.oligosaccharide.name}')">Details</button></td> + `; + resultsBody.appendChild(row); + }); + + // Render pagination buttons + renderPagination(data.length); +} + +// ========================= Additional Features ========================= +// Redirect to a details page with the selected oligosaccharide +function showDetails(oligosaccharideName) { + window.location.href = `sheet?oligosaccharide=${encodeURIComponent(oligosaccharideName)}`; +} + +// Toggle visibility of extra information +function toggleExtraInfo(button) { + const extraInfo = button.nextElementSibling; + if (extraInfo.style.display === "none") { + extraInfo.style.display = "block"; + button.textContent = "-"; + } else { + extraInfo.style.display = "none"; + button.textContent = "+"; + } +} + +// Sort table data by the selected column +function sortTable(columnIndex) { + const sortedData = [...currentData].sort((a, b) => { + const valueA = Object.values(a)[columnIndex]?.toString().toLowerCase() || ''; + const valueB = Object.values(b)[columnIndex]?.toString().toLowerCase() || ''; + return valueA.localeCompare(valueB); + }); + populateResults(sortedData); +} + +// ========================= Initialization ========================= +// Initialize the page and set up event listeners on page load +window.onload = function() { + currentData = [...dummyData]; + populateResults(currentData); +}; + +function showSimpleSearchResults() { + const searchType = document.getElementById('simple-search-type').value; + const searchKeyword = document.getElementById('simple-search').value; + + if (searchKeyword.trim() === '') { + alert('Please enter a keyword!'); + return; + } + + const resultsSection = document.getElementById('results-section'); + resultsSection.style.display = 'block'; + + console.log(`Search by ${searchType} with keyword "${searchKeyword}"`); + } + +// This script toggles the visibility of table columns based on checkbox selections. + document.querySelectorAll('#column-toggles input[type="checkbox"]').forEach((checkbox) => { + checkbox.addEventListener('change', function () { + const column = this.dataset.column; + const table = document.querySelector('.results-table'); + const rows = table.querySelectorAll('tr'); + + rows.forEach((row) => { + const cells = row.querySelectorAll('th, td'); + if (cells[column]) { + cells[column].style.display = this.checked ? '' : 'none'; + } + }); + }); + }); + \ No newline at end of file diff --git a/static/js/searchByLactationStage.js b/static/js/searchByLactationStage.js new file mode 100644 index 0000000000000000000000000000000000000000..7b34d5911bf1aa7e1a571b721c71501c366a6583 --- /dev/null +++ b/static/js/searchByLactationStage.js @@ -0,0 +1,199 @@ +taxon_lt/** +# Copyright 2022 Sandra Dérozier (INRAE) +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +**/ + +import { format_docs, createTableRev, createTableWithArgRev } from './utils.js'; + +$("#searchByLactation.nav-item").addClass( "active" ); + +// Spinner +$('#spinner_lactation_taxon').show(); +$('#spinner_lactation_taxon2').show(); + +var thtable = $('#results_lactation_taxon').DataTable(); + +var $select = $('#search_lactation').selectize({ + valueField: 'path', + labelField: 'name', + searchField: 'name', + sortField: 'name', + placeholder: 'e.g. Colostrum', + openOnFocus: false, + create: false, + maxItems: 1, + onInitialize: function() { + var that = this; + + $.getJSON($SCRIPT_ROOT + '/_get_list_obt_class', + { table: "list_lactation_taxon"}, + function(data) { + data.forEach(function(item) { + that.addOption(item); + }); + $('#spinner_lactation_taxon').hide(); + $('#spinner_lactation_taxon2').hide(); + $('#search_lactation option:selected').prop('disabled', false); + }); + }, + onChange:function(value){ + if (value != '') { + + $('#filter_lactation_taxon').removeAttr('disabled'); + $('#spinner_lactation_taxon').show(); + $('#spinner_lactation_taxon2').show(); + + createTableRev(value, 'have_produced_2', 'results_lactation_taxon'); + + if ( $('#taxon_lt').val() != '' ) { filterColumntaxon(3); } + // if ( $('#sources_th').val() != '' ) { filterSourceColumn(5); } + // if ( $('input[name=qps_th]').is(':checked') == true ) { filterColumnCheck(4); } + + $('#spinner_lactation_taxon').hide(); + $('#spinner_lactation_taxon2').hide(); + + checkURL(); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_lactation_taxon').hide(); + $('#spinner_lactation_taxon2').hide(); + // Clear oracle + $("#relationTaxonByLactation").val(""); + $('#filter_lactation_taxon').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } + } + }); + +var selectize = $select[0].selectize; + +// URL: taxon +if ( lactation !== null ) { + $('#spinner_lactation_taxon').show(); + $('#spinner_lactation_taxon2').show(); + selectize.setTextboxValue(lactation); + $("#search_lactation option:selected").text(lactation); + $("#search_lactation option:selected").val(lactation); + $('#filter_lactation_taxon').removeAttr('disabled'); + + $.getJSON($SCRIPT_ROOT + '/_get_path', + {name: taxon, table: 'list_lactation_taxon'}, + function success(path) { + if ( path != '' ) { + let l_path = path[0].split('/'); + let lactationid = l_path[l_path.length-1]; + + createTableWithArgRev(lactationid, 'have_produced_2', 'results_lactation_taxon'); + + if ( $('#taxon_lt').val() != '' ) { filterColumntaxon(3); } + // if ( $('#sources_th').val() != '' ) { filterSourceColumn(5); } + // if ( $('input[name=qps_th]').is(':checked') == true ) { filterColumnCheck(4); } + + $('#spinner_lactation_taxon').hide(); + $('#spinner_lactation_taxon2').hide(); + + checkURL(); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_lactation_taxon').hide(); + $('#spinner_lactation_taxon2').hide(); + // Clear oracle + $("#relationTaxonByLactation").val(""); + $('#filter_lactation_taxon').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } + }); +} +// URL: qps +// if ( qps !== null ) { +// $('input:checkbox').prop('checked', true); +// } +// URL: sources +// if ( sources !== null ) { +// $('input.column_source').val(sources.join(";")); +// } +// URL: lactation +if ( taxon !== null ) { + $('input.column_filter').val(taxon); +} + +// Filter - taxon +function filterColumntaxon(i) { + $('#results_lactation_taxon').DataTable().column(i).search( + $('#taxon_lt').val().replace(/;/g, "|"), true, false + ).draw(); + checkURL(); +} +$('input.column_filter').on( 'keyup click', function () { + filterColumntaxon($(this).parents('tr').attr('data-column')); +} ); + +// Filter - QPS +// function filterColumnCheck(i) { +// let state = $('input[name=qps_th]').is(':checked'); +// let qps = ""; +// if ( state == true ) { qps = "yes"; } +// $('#results_taxon_stage').DataTable().column(i).search( +// qps, true, false +// ).draw(); +// checkURL(); +// } +// $('input:checkbox').on('change', function () { +// filterColumnCheck(4); +// }); + + // Filter - Sources +// function filterSourceColumn(i) { +// $('#results_taxon_stage').DataTable().column(i).search( +// $('#sources_th').val().replace(/;/g, "|"), true, false +// ).draw(); +// checkURL(); +// } +// $('input.column_source').on( 'keyup click', function () { +// filterSourceColumn(5); +// }); + +// Check url +function checkURL() { + var url = window.location.pathname; + if ( $("#search_lactation option:selected").text() !== '' ) { + url += "?lactation=" + $("#search_lactation option:selected").text(); + } + if ( $("#taxon_lt").val() !== '' ) { + url += "&taxon=" + $("#taxon_lt").val(); + } + // if ( $('#qps_th').is(":checked") ) { + // url += "&qps=yes"; + // } + // if ( $("#sources_th").val() !== '' ) { + // if ( $("#sources_th").val().includes(";") ) { + // let list = $("#sources_th").val().split(";"); + // for (let s = 0 ; s < list.length ; s++ ) { + // if ( list[s] != '' ) { + // url += "&source=" + list[s]; + // } + // } + // } + // else { + // url += "&source=" + $("#sources_th").val(); + // } + // } + history.pushState({}, null, url); +} diff --git a/static/js/searchByOligosaccharideName.js b/static/js/searchByOligosaccharideName.js new file mode 100644 index 0000000000000000000000000000000000000000..fee6d1c15cf22ec92171bf15539bf0427778c922 --- /dev/null +++ b/static/js/searchByOligosaccharideName.js @@ -0,0 +1,146 @@ +taxon_lt/** +# Copyright 2022 Sandra Dérozier (INRAE) +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +**/ + +import { format_docs, createTableRev, createTableWithArgRev } from './utils.js'; + +$("#searchByOligosaccharideName.nav-item").addClass( "active" ); + +// Spinner +$('#spinner_oligoname_taxon').show(); +$('#spinner_oligoname_taxon2').show(); + +var thtable = $('#results_oligoname_taxon').DataTable(); + +var $select = $('#search_oligoname').selectize({ + valueField: 'path', + labelField: 'name', + searchField: 'name', + sortField: 'name', + placeholder: 'e.g. Isoglobotriose', + openOnFocus: false, + create: false, + maxItems: 1, + onInitialize: function() { + var that = this; + + $.getJSON($SCRIPT_ROOT + '/_get_list_obt_class', + { table: "list_oligo_name_taxon"}, + function(data) { + data.forEach(function(item) { + that.addOption(item); + }); + $('#spinner_oligoname_taxon').hide(); + $('#spinner_oligoname_taxon2').hide(); + $('#search_oligoname option:selected').prop('disabled', false); + }); + }, + onChange:function(value){ + if (value != '') { + + $('#filter_oligoname_taxon').removeAttr('disabled'); + $('#spinner_oligoname_taxon').show(); + $('#spinner_oligoname_taxon2').show(); + + createTableRev(value, 'have_produced_tmp_1', 'results_oligoname_taxon'); + + if ( $('#taxon_lt').val() != '' ) { filterColumntaxon(3); } + + $('#spinner_oligoname_taxon').hide(); + $('#spinner_oligoname_taxon2').hide(); + + checkURL(); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_oligoname_taxon').hide(); + $('#spinner_oligoname_taxon2').hide(); + // Clear oracle + $("#relationTaxonByOligosaccharideName").val(""); + $('#filter_oligoname_taxon').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } + } + }); + +var selectize = $select[0].selectize; + +// URL: taxon +if ( oligoname !== null ) { + $('#spinner_oligoname_taxon').show(); + $('#spinner_oligoname_taxon2').show(); + selectize.setTextboxValue(oligoname); + $("#search_oligoname option:selected").text(oligoname); + $("#search_oligoname option:selected").val(oligoname); + $('#filter_oligoname_taxon').removeAttr('disabled'); + + $.getJSON($SCRIPT_ROOT + '/_get_path', + {name: taxon, table: 'list_oligo_name_taxon'}, + function success(path) { + if ( path != '' ) { + let l_path = path[0].split('/'); + let oligonameid = l_path[l_path.length-1]; + + createTableWithArgRev(oligonameid, 'have_produced_2', 'results_oligoname_taxon'); + + if ( $('#taxon_lt').val() != '' ) { filterColumntaxon(3); } + + $('#spinner_oligoname_taxon').hide(); + $('#spinner_oligoname_taxon2').hide(); + + checkURL(); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_oligoname_taxon').hide(); + $('#spinner_oligoname_taxon2').hide(); + // Clear oracle + $("#relationTaxonByOligosaccharideName").val(""); + $('#filter_oligoname_taxon').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } + }); +} +// URL: oligoname +if ( taxon !== null ) { + $('input.column_filter').val(taxon); +} + +// Filter - taxon +function filterColumntaxon(i) { + $('#results_oligoname_taxon').DataTable().column(i).search( + $('#taxon_lt').val().replace(/;/g, "|"), true, false + ).draw(); + checkURL(); +} +$('input.column_filter').on( 'keyup click', function () { + filterColumntaxon($(this).parents('tr').attr('data-column')); +} ); + +// Check url +function checkURL() { + var url = window.location.pathname; + if ( $("#search_oligoname option:selected").text() !== '' ) { + url += "?oligoname=" + $("#search_oligoname option:selected").text(); + } + if ( $("#taxon_lt").val() !== '' ) { + url += "&taxon=" + $("#taxon_lt").val(); + } + history.pushState({}, null, url); +} diff --git a/static/js/searchByOligosaccharideType.js b/static/js/searchByOligosaccharideType.js new file mode 100644 index 0000000000000000000000000000000000000000..fb80fdc320ebeaa99ddb2630283717fdbf637d5c --- /dev/null +++ b/static/js/searchByOligosaccharideType.js @@ -0,0 +1,146 @@ +taxon_lt/** +# Copyright 2022 Sandra Dérozier (INRAE) +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +**/ + +import { format_docs, createTableRev, createTableWithArgRev } from './utils.js'; + +$("#searchByOligosaccharideType.nav-item").addClass( "active" ); + +// Spinner +$('#spinner_oligotype_taxon').show(); +$('#spinner_oligotype_taxon2').show(); + +var thtable = $('#results_oligotype_taxon').DataTable(); + +var $select = $('#search_oligotype').selectize({ + valueField: 'path', + labelField: 'name', + searchField: 'name', + sortField: 'name', + placeholder: 'e.g. Fucosylated', + openOnFocus: false, + create: false, + maxItems: 1, + onInitialize: function() { + var that = this; + + $.getJSON($SCRIPT_ROOT + '/_get_list_obt_class', + { table: "list_oligo_type_taxon"}, + function(data) { + data.forEach(function(item) { + that.addOption(item); + }); + $('#spinner_oligotype_taxon').hide(); + $('#spinner_oligotype_taxon2').hide(); + $('#search_oligotype option:selected').prop('disabled', false); + }); + }, + onChange:function(value){ + if (value != '') { + + $('#filter_oligotype_taxon').removeAttr('disabled'); + $('#spinner_oligotype_taxon').show(); + $('#spinner_oligotypee_taxon2').show(); + + createTableRev(value, 'have_produced_tmp_2', 'results_oligotype_taxon'); + + if ( $('#taxon_lt').val() != '' ) { filterColumntaxon(3); } + + $('#spinner_oligotype_taxon').hide(); + $('#spinner_oligotype_taxon2').hide(); + + checkURL(); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_oligotype_taxon').hide(); + $('#spinner_oligotype_taxon2').hide(); + // Clear oracle + $("#relationTaxonByOligosaccharideType").val(""); + $('#filter_oligotype_taxon').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } + } + }); + +var selectize = $select[0].selectize; + +// URL: taxon +if ( oligotype !== null ) { + $('#spinner_oligotype_taxon').show(); + $('#spinner_oligotype_taxon2').show(); + selectize.setTextboxValue(oligotype); + $("#search_oligotype option:selected").text(oligotype); + $("#search_oligotype option:selected").val(oligotype); + $('#filter_oligotype_taxon').removeAttr('disabled'); + + $.getJSON($SCRIPT_ROOT + '/_get_path', + {name: taxon, table: 'list_oligo_type_taxon'}, + function success(path) { + if ( path != '' ) { + let l_path = path[0].split('/'); + let oligotypeid = l_path[l_path.length-1]; + + createTableWithArgRev(oligotypeid, 'have_produced_2', 'results_oligotype_taxon'); + + if ( $('#taxon_lt').val() != '' ) { filterColumntaxon(3); } + + $('#spinner_oligotype_taxon').hide(); + $('#spinner_oligotype_taxon2').hide(); + + checkURL(); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_oligotype_taxon').hide(); + $('#spinner_oligotype_taxon2').hide(); + // Clear oracle + $("#relationTaxonByOligosaccharideType").val(""); + $('#filter_oligotype_taxon').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } + }); +} +// URL: oligotype +if ( taxon !== null ) { + $('input.column_filter').val(taxon); +} + +// Filter - taxon +function filterColumntaxon(i) { + $('#results_oligotype_taxon').DataTable().column(i).search( + $('#taxon_lt').val().replace(/;/g, "|"), true, false + ).draw(); + checkURL(); +} +$('input.column_filter').on( 'keyup click', function () { + filterColumntaxon($(this).parents('tr').attr('data-column')); +} ); + +// Check url +function checkURL() { + var url = window.location.pathname; + if ( $("#search_oligotype option:selected").text() !== '' ) { + url += "?oligotype=" + $("#search_oligotype option:selected").text(); + } + if ( $("#taxon_lt").val() !== '' ) { + url += "&taxon=" + $("#taxon_lt").val(); + } + history.pushState({}, null, url); +} diff --git a/static/js/searchByPhysiologicalStage.js b/static/js/searchByPhysiologicalStage.js new file mode 100644 index 0000000000000000000000000000000000000000..6bbe367b0577208180bc37510f7fba8ef656388d --- /dev/null +++ b/static/js/searchByPhysiologicalStage.js @@ -0,0 +1,199 @@ +/** +# Copyright 2022 Sandra Dérozier (INRAE) +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +**/ + +import { format_docs, createTableRev, createTableWithArgRev } from './utils.js'; + +$("#searchByPhysiologicalStage.nav-item").addClass( "active" ); + +// Spinner +$('#spinner_stage_taxon').show(); +$('#spinner_stage_taxon2').show(); + +var thtable = $('#results_stage_taxon').DataTable(); + +var $select = $('#search_stage').selectize({ + valueField: 'path', + labelField: 'name', + searchField: 'name', + sortField: 'name', + placeholder: 'e.g. Multiparious', + openOnFocus: false, + create: false, + maxItems: 1, + onInitialize: function() { + var that = this; + + $.getJSON($SCRIPT_ROOT + '/_get_list_obt_class', + { table: "list_physio_taxon"}, + function(data) { + data.forEach(function(item) { + that.addOption(item); + }); + $('#spinner_stage_taxon').hide(); + $('#spinner_stage_taxon2').hide(); + $('#search_stage option:selected').prop('disabled', false); + }); + }, + onChange:function(value){ + if (value != '') { + + $('#filter_stage_taxon').removeAttr('disabled'); + $('#spinner_stage_taxon').show(); + $('#spinner_stage_taxon2').show(); + + createTableRev(value, 'has_a_physiological_stage', 'results_stage_taxon'); + + if ( $('#taxon_ht').val() != '' ) { filterColumntaxon(3); } + // if ( $('#sources_th').val() != '' ) { filterSourceColumn(5); } + // if ( $('input[name=qps_th]').is(':checked') == true ) { filterColumnCheck(4); } + + $('#spinner_stage_taxon').hide(); + $('#spinner_stage_taxon2').hide(); + + checkURL(); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_stage_taxon').hide(); + $('#spinner_stage_taxon2').hide(); + // Clear oracle + $("#relationTaxonByStage").val(""); + $('#filter_stage_taxon').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } + } + }); + +var selectize = $select[0].selectize; + +// URL: taxon +if ( stage !== null ) { + $('#spinner_stage_taxon').show(); + $('#spinner_stage_taxon2').show(); + selectize.setTextboxValue(stage); + $("#search_stage option:selected").text(stage); + $("#search_stage option:selected").val(stage); + $('#filter_stage_taxon').removeAttr('disabled'); + + $.getJSON($SCRIPT_ROOT + '/_get_path', + {name: taxon, table: 'list_physio_taxon'}, + function success(path) { + if ( path != '' ) { + let l_path = path[0].split('/'); + let stageid = l_path[l_path.length-1]; + + createTableWithArgRev(stageid, 'has_a_physiological_stage', 'results_stage_taxon'); + + if ( $('#taxon_ht').val() != '' ) { filterColumntaxon(3); } + // if ( $('#sources_th').val() != '' ) { filterSourceColumn(5); } + // if ( $('input[name=qps_th]').is(':checked') == true ) { filterColumnCheck(4); } + + $('#spinner_stage_taxon').hide(); + $('#spinner_stage_taxon2').hide(); + + checkURL(); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_stage_taxon').hide(); + $('#spinner_stage_taxon2').hide(); + // Clear oracle + $("#relationTaxonByStage").val(""); + $('#filter_stage_taxon').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } + }); +} +// URL: qps +// if ( qps !== null ) { +// $('input:checkbox').prop('checked', true); +// } +// URL: sources +// if ( sources !== null ) { +// $('input.column_source').val(sources.join(";")); +// } +// URL: stage +if ( taxon !== null ) { + $('input.column_filter').val(taxon); +} + +// Filter - taxon +function filterColumntaxon(i) { + $('#results_stage_taxon').DataTable().column(i).search( + $('#taxon_ht').val().replace(/;/g, "|"), true, false + ).draw(); + checkURL(); +} +$('input.column_filter').on( 'keyup click', function () { + filterColumntaxon($(this).parents('tr').attr('data-column')); +} ); + +// Filter - QPS +// function filterColumnCheck(i) { +// let state = $('input[name=qps_th]').is(':checked'); +// let qps = ""; +// if ( state == true ) { qps = "yes"; } +// $('#results_taxon_stage').DataTable().column(i).search( +// qps, true, false +// ).draw(); +// checkURL(); +// } +// $('input:checkbox').on('change', function () { +// filterColumnCheck(4); +// }); + + // Filter - Sources +// function filterSourceColumn(i) { +// $('#results_taxon_stage').DataTable().column(i).search( +// $('#sources_th').val().replace(/;/g, "|"), true, false +// ).draw(); +// checkURL(); +// } +// $('input.column_source').on( 'keyup click', function () { +// filterSourceColumn(5); +// }); + +// Check url +function checkURL() { + var url = window.location.pathname; + if ( $("#search_stage option:selected").text() !== '' ) { + url += "?stage=" + $("#search_stage option:selected").text(); + } + if ( $("#taxon_ht").val() !== '' ) { + url += "&taxon=" + $("#taxon_ht").val(); + } + // if ( $('#qps_th').is(":checked") ) { + // url += "&qps=yes"; + // } + // if ( $("#sources_th").val() !== '' ) { + // if ( $("#sources_th").val().includes(";") ) { + // let list = $("#sources_th").val().split(";"); + // for (let s = 0 ; s < list.length ; s++ ) { + // if ( list[s] != '' ) { + // url += "&source=" + list[s]; + // } + // } + // } + // else { + // url += "&source=" + $("#sources_th").val(); + // } + // } + history.pushState({}, null, url); +} diff --git a/static/js/searchByPostpartum.js b/static/js/searchByPostpartum.js new file mode 100644 index 0000000000000000000000000000000000000000..ac3c7034d2ba58d96dd8e08a30383c7ee3865641 --- /dev/null +++ b/static/js/searchByPostpartum.js @@ -0,0 +1,199 @@ +taxon_pt/** +# Copyright 2022 Sandra Dérozier (INRAE) +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +**/ + +import { format_docs, createTableRev, createTableWithArgRev } from './utils.js'; + +$("#searchByPostpartum.nav-item").addClass( "active" ); + +// Spinner +$('#spinner_postpartum_taxon').show(); +$('#spinner_postpartum_taxon2').show(); + +var thtable = $('#results_postpartum_taxon').DataTable(); + +var $select = $('#search_postpartum').selectize({ + valueField: 'path', + labelField: 'name', + searchField: 'name', + sortField: 'name', + placeholder: 'e.g. first week postpartum', + openOnFocus: false, + create: false, + maxItems: 1, + onInitialize: function() { + var that = this; + + $.getJSON($SCRIPT_ROOT + '/_get_list_obt_class', + { table: "list_postpartum_taxon"}, + function(data) { + data.forEach(function(item) { + that.addOption(item); + }); + $('#spinner_postpartum_taxon').hide(); + $('#spinner_postpartum_taxon2').hide(); + $('#search_postpartum option:selected').prop('disabled', false); + }); + }, + onChange:function(value){ + if (value != '') { + + $('#filter_postpartum_taxon').removeAttr('disabled'); + $('#spinner_postpartum_taxon').show(); + $('#spinner_postpartum_taxon2').show(); + + createTableRev(value, 'has_given_birth_since', 'results_postpartum_taxon'); + + if ( $('#taxon_pt').val() != '' ) { filterColumntaxon(3); } + // if ( $('#sources_th').val() != '' ) { filterSourceColumn(5); } + // if ( $('input[name=qps_th]').is(':checked') == true ) { filterColumnCheck(4); } + + $('#spinner_postpartum_taxon').hide(); + $('#spinner_postpartum_taxon2').hide(); + + checkURL(); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_postpartum_taxon').hide(); + $('#spinner_postpartum_taxon2').hide(); + // Clear oracle + $("#relationTaxonByPostpartum").val(""); + $('#filter_postpartum_taxon').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } + } + }); + +var selectize = $select[0].selectize; + +// URL: taxon +if ( postpartum !== null ) { + $('#spinner_postpartum_taxon').show(); + $('#spinner_postpartum_taxon2').show(); + selectize.setTextboxValue(postpartum); + $("#search_postpartum option:selected").text(postpartum); + $("#search_postpartum option:selected").val(postpartum); + $('#filter_postpartum_taxon').removeAttr('disabled'); + + $.getJSON($SCRIPT_ROOT + '/_get_path', + {name: taxon, table: 'list_postpartum_taxon'}, + function success(path) { + if ( path != '' ) { + let l_path = path[0].split('/'); + let postpartumid = l_path[l_path.length-1]; + + createTableWithArgRev(postpartumid, 'has_given_birth_since', 'results_postpartum_taxon'); + + if ( $('#taxon_pt').val() != '' ) { filterColumntaxon(3); } + // if ( $('#sources_th').val() != '' ) { filterSourceColumn(5); } + // if ( $('input[name=qps_th]').is(':checked') == true ) { filterColumnCheck(4); } + + $('#spinner_postpartum_taxon').hide(); + $('#spinner_postpartum_taxon2').hide(); + + checkURL(); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_postpartum_taxon').hide(); + $('#spinner_postpartum_taxon2').hide(); + // Clear oracle + $("#relationTaxonByPostpartum").val(""); + $('#filter_postpartum_taxon').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } + }); +} +// URL: qps +// if ( qps !== null ) { +// $('input:checkbox').prop('checked', true); +// } +// URL: sources +// if ( sources !== null ) { +// $('input.column_source').val(sources.join(";")); +// } +// URL: postpartum +if ( taxon !== null ) { + $('input.column_filter').val(taxon); +} + +// Filter - taxon +function filterColumntaxon(i) { + $('#results_postpartum_taxon').DataTable().column(i).search( + $('#taxon_pt').val().replace(/;/g, "|"), true, false + ).draw(); + checkURL(); +} +$('input.column_filter').on( 'keyup click', function () { + filterColumntaxon($(this).parents('tr').attr('data-column')); +} ); + +// Filter - QPS +// function filterColumnCheck(i) { +// let state = $('input[name=qps_th]').is(':checked'); +// let qps = ""; +// if ( state == true ) { qps = "yes"; } +// $('#results_taxon_stage').DataTable().column(i).search( +// qps, true, false +// ).draw(); +// checkURL(); +// } +// $('input:checkbox').on('change', function () { +// filterColumnCheck(4); +// }); + + // Filter - Sources +// function filterSourceColumn(i) { +// $('#results_taxon_stage').DataTable().column(i).search( +// $('#sources_th').val().replace(/;/g, "|"), true, false +// ).draw(); +// checkURL(); +// } +// $('input.column_source').on( 'keyup click', function () { +// filterSourceColumn(5); +// }); + +// Check url +function checkURL() { + var url = window.location.pathname; + if ( $("#search_postpartum option:selected").text() !== '' ) { + url += "?postpartum=" + $("#search_postpartum option:selected").text(); + } + if ( $("#taxon_pt").val() !== '' ) { + url += "&taxon=" + $("#taxon_pt").val(); + } + // if ( $('#qps_th').is(":checked") ) { + // url += "&qps=yes"; + // } + // if ( $("#sources_th").val() !== '' ) { + // if ( $("#sources_th").val().includes(";") ) { + // let list = $("#sources_th").val().split(";"); + // for (let s = 0 ; s < list.length ; s++ ) { + // if ( list[s] != '' ) { + // url += "&source=" + list[s]; + // } + // } + // } + // else { + // url += "&source=" + $("#sources_th").val(); + // } + // } + history.pushState({}, null, url); +} diff --git a/static/js/searchBySampleType.js b/static/js/searchBySampleType.js new file mode 100644 index 0000000000000000000000000000000000000000..68e9e93fd49b26c4a79db7faaeb13b37c76fdbec --- /dev/null +++ b/static/js/searchBySampleType.js @@ -0,0 +1,199 @@ +/** +# Copyright 2022 Sandra Dérozier (INRAE) +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +**/ + +import { format_docs, createTableRev, createTableWithArgRev } from './utils.js'; + +$("#searchBySampleType.nav-item").addClass( "active" ); + +// Spinner +$('#spinner_sample_taxon').show(); +$('#spinner_sample_taxon2').show(); + +var thtable = $('#results_sample_taxon').DataTable(); + +var $select = $('#search_sample').selectize({ + valueField: 'path', + labelField: 'name', + searchField: 'name', + sortField: 'name', + placeholder: 'e.g. Pooled milk', + openOnFocus: false, + create: false, + maxItems: 1, + onInitialize: function() { + var that = this; + + $.getJSON($SCRIPT_ROOT + '/_get_list_obt_class', + { table: "list_sample_taxon"}, + function(data) { + data.forEach(function(item) { + that.addOption(item); + }); + $('#spinner_sample_taxon').hide(); + $('#spinner_sample_taxon2').hide(); + $('#search_sample option:selected').prop('disabled', false); + }); + }, + onChange:function(value){ + if (value != '') { + + $('#filter_sample_taxon').removeAttr('disabled'); + $('#spinner_sample_taxon').show(); + $('#spinner_sample_taxon2').show(); + + createTableRev(value, 'have_produced_1', 'results_sample_taxon'); + + if ( $('#taxon_ut').val() != '' ) { filterColumntaxon(3); } + // if ( $('#sources_th').val() != '' ) { filterSourceColumn(5); } + // if ( $('input[name=qps_th]').is(':checked') == true ) { filterColumnCheck(4); } + + $('#spinner_sample_taxon').hide(); + $('#spinner_sample_taxon2').hide(); + + checkURL(); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_sample_taxon').hide(); + $('#spinner_sample_taxon2').hide(); + // Clear oracle + $("#relationTaxonBySample").val(""); + $('#filter_sample_taxon').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } + } + }); + +var selectize = $select[0].selectize; + +// URL: taxon +if ( sample !== null ) { + $('#spinner_sample_taxon').show(); + $('#spinner_sample_taxon2').show(); + selectize.setTextboxValue(sample); + $("#search_sample option:selected").text(sample); + $("#search_sample option:selected").val(sample); + $('#filter_sample_taxon').removeAttr('disabled'); + + $.getJSON($SCRIPT_ROOT + '/_get_path', + {name: taxon, table: 'list_sample_taxon'}, + function success(path) { + if ( path != '' ) { + let l_path = path[0].split('/'); + let sampleid = l_path[l_path.length-1]; + + createTableWithArgRev(sampleid, 'have_produced_1', 'results_sample_taxon'); + + if ( $('#taxon_ut').val() != '' ) { filterColumntaxon(3); } + // if ( $('#sources_th').val() != '' ) { filterSourceColumn(5); } + // if ( $('input[name=qps_th]').is(':checked') == true ) { filterColumnCheck(4); } + + $('#spinner_sample_taxon').hide(); + $('#spinner_sample_taxon2').hide(); + + checkURL(); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_sample_taxon').hide(); + $('#spinner_sample_taxon2').hide(); + // Clear oracle + $("#relationTaxonBySample").val(""); + $('#filter_sample_taxon').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } + }); +} +// URL: qps +// if ( qps !== null ) { +// $('input:checkbox').prop('checked', true); +// } +// URL: sources +// if ( sources !== null ) { +// $('input.column_source').val(sources.join(";")); +// } +// URL: sample +if ( taxon !== null ) { + $('input.column_filter').val(taxon); +} + +// Filter - taxon +function filterColumntaxon(i) { + $('#results_sample_taxon').DataTable().column(i).search( + $('#taxon_ut').val().replace(/;/g, "|"), true, false + ).draw(); + checkURL(); +} +$('input.column_filter').on( 'keyup click', function () { + filterColumntaxon($(this).parents('tr').attr('data-column')); +} ); + +// Filter - QPS +// function filterColumnCheck(i) { +// let state = $('input[name=qps_th]').is(':checked'); +// let qps = ""; +// if ( state == true ) { qps = "yes"; } +// $('#results_taxon_stage').DataTable().column(i).search( +// qps, true, false +// ).draw(); +// checkURL(); +// } +// $('input:checkbox').on('change', function () { +// filterColumnCheck(4); +// }); + + // Filter - Sources +// function filterSourceColumn(i) { +// $('#results_taxon_stage').DataTable().column(i).search( +// $('#sources_th').val().replace(/;/g, "|"), true, false +// ).draw(); +// checkURL(); +// } +// $('input.column_source').on( 'keyup click', function () { +// filterSourceColumn(5); +// }); + +// Check url +function checkURL() { + var url = window.location.pathname; + if ( $("#search_sample option:selected").text() !== '' ) { + url += "?sample=" + $("#search_sample option:selected").text(); + } + if ( $("#taxon_ut").val() !== '' ) { + url += "&taxon=" + $("#taxon_ut").val(); + } + // if ( $('#qps_th').is(":checked") ) { + // url += "&qps=yes"; + // } + // if ( $("#sources_th").val() !== '' ) { + // if ( $("#sources_th").val().includes(";") ) { + // let list = $("#sources_th").val().split(";"); + // for (let s = 0 ; s < list.length ; s++ ) { + // if ( list[s] != '' ) { + // url += "&source=" + list[s]; + // } + // } + // } + // else { + // url += "&source=" + $("#sources_th").val(); + // } + // } + history.pushState({}, null, url); +} diff --git a/static/js/searchByTaxon.js b/static/js/searchByTaxon.js index d1ac9ba61e6e3635499223692b7e85d0f49e65d5..6647a78b9f8bff3581520a0c79996978d79099fa 100644 --- a/static/js/searchByTaxon.js +++ b/static/js/searchByTaxon.js @@ -14,21 +14,23 @@ # limitations under the License. **/ -import { format_docs } from './utils.js'; +import { format_docs, createTable, createTableWithArg } from './utils.js'; $("#searchByTaxon.nav-item").addClass( "active" ); // Spinner -$('#spinner_taxon_habitat').show(); -$('#spinner_taxon_habitat2').show(); -// $('#relationHabitatByTaxon').prop('disabled', true); +$('#spinner_taxon_stage').show(); +$('#spinner_taxon_stage2').show(); +// $('#relationstageByTaxon').prop('disabled', true); + +var thtable = $('#results_taxon_stage').DataTable(); var $select = $('#search').selectize({ valueField: 'path', labelField: 'name', searchField: 'name', sortField: 'name', - placeholder: 'e.g. Bacillus subtilis', + placeholder: 'e.g. Sus scrofa', openOnFocus: false, create: false, maxItems: 1, @@ -37,20 +39,45 @@ var $select = $('#search').selectize({ // $.getJSON($SCRIPT_ROOT + '/_get_list_term', $.getJSON($SCRIPT_ROOT + '/_get_list_obt_class', - { table: "list_taxon"}, + { table: "list_taxon_physio"}, function(data) { data.forEach(function(item) { that.addOption(item); }); - $('#spinner_taxon_habitat').hide(); - $('#spinner_taxon_habitat2').hide(); + $('#spinner_taxon_stage').hide(); + $('#spinner_taxon_stage2').hide(); $('#search option:selected').prop('disabled', false); }); }, onChange:function(value){ - if (value != "") { - createTable(value); + if (value != '') { + + $('#filter_taxon_stage').removeAttr('disabled'); + $('#spinner_taxon_stage').show(); + $('#spinner_taxon_stage2').show(); + + createTable(value, 'has_a_physiological_stage', 'results_taxon_stage'); + + if ( $('#stage_th').val() != '' ) { filterColumnstage(3); } + // if ( $('#sources_th').val() != '' ) { filterSourceColumn(5); } + // if ( $('input[name=qps_th]').is(':checked') == true ) { filterColumnCheck(4); } + + $('#spinner_taxon_stage').hide(); + $('#spinner_taxon_stage2').hide(); + + checkURL(); } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_taxon_stage').hide(); + $('#spinner_taxon_stage2').hide(); + // Clear oracle + $("#relationstageByTaxon").val(""); + $('#filter_taxon_stage').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } } }); @@ -58,404 +85,435 @@ var selectize = $select[0].selectize; // URL: taxon if ( taxon !== null ) { - $('#spinner_taxon_habitat').show(); - $('#spinner_taxon_habitat2').show(); + $('#spinner_taxon_stage').show(); + $('#spinner_taxon_stage2').show(); selectize.setTextboxValue(taxon); $("#search option:selected").text(taxon); $("#search option:selected").val(taxon); - $('#filter_taxon_habitat').removeAttr('disabled'); - - createTable_old(taxon); -} -// URL: qps -if ( qps !== null ) { - $('input:checkbox').prop('checked', true); -} -// URL: sources -if ( sources !== null ) { - $('input.column_source').val(sources.join(";")); -} -// URL: habitat -if ( habitat !== null ) { - $('input.column_filter').val(habitat); -} - -var thtable = $('#results_taxon_habitat').DataTable(); - -// Datatable -function createTable(path) { - if ( path != '' ) { - let l_path = path.split('/'); - let taxonid = l_path[l_path.length-1]; + $('#filter_taxon_stage').removeAttr('disabled'); - $('#filter_taxon_habitat').removeAttr('disabled'); - $('#spinner_taxon_habitat').show(); - $('#spinner_taxon_habitat2').show(); - - $.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]; - }} - ] - }); - - 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'}, + {name: taxon, table: 'list_taxon_physio'}, function success(path) { if ( path != '' ) { let l_path = path[0].split('/'); let taxonid = l_path[l_path.length-1]; - $.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]; - }} - ] - }); + createTableWithArg(taxonid, 'has_a_physiological_stage', 'results_taxon_stage'); - if ( $('#habitat_th').val() != '' ) { filterColumnHabitat(3); } - if ( $('#sources_th').val() != '' ) { filterSourceColumn(5); } - if ( $('input[name=qps_th]').is(':checked') == true ) { filterColumnCheck(4); } + if ( $('#stage_th').val() != '' ) { filterColumnstage(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(); + $('#spinner_taxon_stage').hide(); + $('#spinner_taxon_stage2').hide(); - checkURL(); - }); + checkURL(); } else { alert("No result for " + taxon); // Spinner off - $('#spinner_taxon_habitat').hide(); - $('#spinner_taxon_habitat2').hide(); + $('#spinner_taxon_stage').hide(); + $('#spinner_taxon_stage2').hide(); // Clear oracle - $("#relationHabitatByTaxon").val(""); - $('#filter_taxon_habitat').attr('disabled', 'disabled'); + $("#relationstageByTaxon").val(""); + $('#filter_taxon_stage').attr('disabled', 'disabled'); // Change URL window.location.replace(window.location.pathname); } }); } +// URL: qps +// if ( qps !== null ) { +// $('input:checkbox').prop('checked', true); +// } +// URL: sources +// if ( sources !== null ) { +// $('input.column_source').val(sources.join(";")); +// } +// URL: stage +if ( stage !== null ) { + $('input.column_filter').val(stage); +} -// Filter - Habitat -function filterColumnHabitat(i) { - $('#results_taxon_habitat').DataTable().column(i).search( - $('#habitat_th').val().replace(/;/g, "|"), true, false +// var thtable = $('#results_taxon_stage').DataTable(); + +// Datatable +// function createTable(path) { +// if ( path != '' ) { +// let l_path = path.split('/'); +// let taxonid = l_path[l_path.length-1]; +// +// $('#filter_taxon_stage').removeAttr('disabled'); +// $('#spinner_taxon_stage').show(); +// $('#spinner_taxon_stage2').show(); +// +// $.getJSON($SCRIPT_ROOT + '/_get_list_relations', +// { taxonid: taxonid, +// type: 'has_a_physiological_stage' +// }, +// function success(relations) { +// $('#hide').css( 'display', 'block' ); +// $('#results_taxon_stage').DataTable().destroy(); +// thtable = $('#results_taxon_stage').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] == 'Has a physiological stage' ) { rtype = 'physiologicalstage'; } +// else if ( row[2] == 'Lives in' || row[2] == 'Contains' ) { rtype = 'stage'; } +// 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] == 'Has a physiological stage' ) { rtype = 'physiologicalstage'; } +// else if ( row[2] == 'Lives in' || row[2] == 'Contains' ) { rtype = 'stage'; } +// 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]; +// }} +// ] +// }); +// +// if ( $('#stage_th').val() != '' ) { filterColumnstage(3); } +// if ( $('#sources_th').val() != '' ) { filterSourceColumn(5); } +// if ( $('input[name=qps_th]').is(':checked') == true ) { filterColumnCheck(4); } +// +// $('#spinner_taxon_stage').hide(); +// $('#spinner_taxon_stage2').hide(); +// +// checkURL(); +// }); +// } +// else { +// alert("No result for " + taxon); +// // Spinner off +// $('#spinner_taxon_stage').hide(); +// $('#spinner_taxon_stage2').hide(); +// // Clear oracle +// $("#relationstageByTaxon").val(""); +// $('#filter_taxon_stage').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) { +// if ( path != '' ) { +// let l_path = path[0].split('/'); +// let taxonid = l_path[l_path.length-1]; +// +// $.getJSON($SCRIPT_ROOT + '/_get_list_relations', +// { taxonid: taxonid, +// type: 'stage' +// }, +// function success(relations) { +// $('#hide').css( 'display', 'block' ); +// $('#results_taxon_stage').DataTable().destroy(); +// thtable = $('#results_taxon_stage').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 = 'stage'; } +// 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 = 'stage'; } +// 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]; +// }} +// ] +// }); +// +// if ( $('#stage_th').val() != '' ) { filterColumnstage(3); } +// if ( $('#sources_th').val() != '' ) { filterSourceColumn(5); } +// if ( $('input[name=qps_th]').is(':checked') == true ) { filterColumnCheck(4); } +// +// $('#spinner_taxon_stage').hide(); +// $('#spinner_taxon_stage2').hide(); +// +// checkURL(); +// }); +// } +// else { +// alert("No result for " + taxon); +// // Spinner off +// $('#spinner_taxon_stage').hide(); +// $('#spinner_taxon_stage2').hide(); +// // Clear oracle +// $("#relationstageByTaxon").val(""); +// $('#filter_taxon_stage').attr('disabled', 'disabled'); +// // Change URL +// window.location.replace(window.location.pathname); +// } +// }); +// } + +// Filter - stage +function filterColumnstage(i) { + $('#results_taxon_stage').DataTable().column(i).search( + $('#stage_th').val().replace(/;/g, "|"), true, false ).draw(); checkURL(); } $('input.column_filter').on( 'keyup click', function () { - filterColumnHabitat($(this).parents('tr').attr('data-column')); + filterColumnstage($(this).parents('tr').attr('data-column')); } ); // Filter - QPS -function filterColumnCheck(i) { - let state = $('input[name=qps_th]').is(':checked'); - let qps = ""; - if ( state == true ) { qps = "yes"; } - $('#results_taxon_habitat').DataTable().column(i).search( - qps, true, false - ).draw(); - checkURL(); -} -$('input:checkbox').on('change', function () { - filterColumnCheck(4); - }); +// function filterColumnCheck(i) { +// let state = $('input[name=qps_th]').is(':checked'); +// let qps = ""; +// if ( state == true ) { qps = "yes"; } +// $('#results_taxon_stage').DataTable().column(i).search( +// qps, true, false +// ).draw(); +// checkURL(); +// } +// $('input:checkbox').on('change', function () { +// filterColumnCheck(4); +// }); // Filter - Sources -function filterSourceColumn(i) { - $('#results_taxon_habitat').DataTable().column(i).search( - $('#sources_th').val().replace(/;/g, "|"), true, false - ).draw(); - checkURL(); -} -$('input.column_source').on( 'keyup click', function () { - filterSourceColumn(5); -}); +// function filterSourceColumn(i) { +// $('#results_taxon_stage').DataTable().column(i).search( +// $('#sources_th').val().replace(/;/g, "|"), true, false +// ).draw(); +// checkURL(); +// } +// $('input.column_source').on( 'keyup click', function () { +// filterSourceColumn(5); +// }); // Check url function checkURL() { @@ -463,24 +521,24 @@ function checkURL() { if ( $("#search option:selected").text() !== '' ) { url += "?taxon=" + $("#search option:selected").text(); } - if ( $("#habitat_th").val() !== '' ) { - url += "&habitat=" + $("#habitat_th").val(); - } - if ( $('#qps_th').is(":checked") ) { - url += "&qps=yes"; - } - if ( $("#sources_th").val() !== '' ) { - if ( $("#sources_th").val().includes(";") ) { - let list = $("#sources_th").val().split(";"); - for (let s = 0 ; s < list.length ; s++ ) { - if ( list[s] != '' ) { - url += "&source=" + list[s]; - } - } - } - else { - url += "&source=" + $("#sources_th").val(); - } + if ( $("#stage_th").val() !== '' ) { + url += "&stage=" + $("#stage_th").val(); } + // if ( $('#qps_th').is(":checked") ) { + // url += "&qps=yes"; + // } + // if ( $("#sources_th").val() !== '' ) { + // if ( $("#sources_th").val().includes(";") ) { + // let list = $("#sources_th").val().split(";"); + // for (let s = 0 ; s < list.length ; s++ ) { + // if ( list[s] != '' ) { + // url += "&source=" + list[s]; + // } + // } + // } + // else { + // url += "&source=" + $("#sources_th").val(); + // } + // } history.pushState({}, null, url); } diff --git a/static/js/searchByTaxonForLactation.js b/static/js/searchByTaxonForLactation.js new file mode 100644 index 0000000000000000000000000000000000000000..df907e7d7935d51de184780b93d06da4c66e442e --- /dev/null +++ b/static/js/searchByTaxonForLactation.js @@ -0,0 +1,497 @@ +/** +# Copyright 2022 Sandra Dérozier (INRAE) +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not lactation this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +**/ + +import { format_docs, createTable, createTableWithArg } from './utils.js'; + +$("#searchByTaxonForLactation.nav-item").addClass( "active" ); + +$('#spinner_taxon_lactation').show(); +$('#spinner_taxon_lactation2').show(); + +var thtable = $('#results_taxon_lactation').DataTable(); + +var $select = $('#search_taxon_lactation').selectize({ + valueField: 'path', + labelField: 'name', + searchField: 'name', + sortField: 'name', + placeholder: 'e.g. Equus caballus', + openOnFocus: false, + create: false, + maxItems: 1, + onInitialize: function() { + var that = this; + + // $.getJSON($SCRIPT_ROOT + '/_get_list_term', + $.getJSON($SCRIPT_ROOT + '/_get_list_obt_class', + { table: "list_taxon_lactation"}, + function(data) { + data.forEach(function(item) { + that.addOption(item); + }); + $('#spinner_taxon_lactation').hide(); + $('#spinner_taxon_lactation2').hide(); + $('#search_taxon_lactation').prop('disabled', false); + }); + }, + onChange:function(value){ + if (value != "") { + + $('#filter_taxon_lactation').removeAttr('disabled'); + $('#spinner_taxon_lactation').show(); + $('#spinner_taxon_lactation2').show(); + + createTable(value, 'have_produced_2', 'results_taxon_lactation'); + + if ( $('#lactation_tu').val() != '' ) { filterColumnlactation(3); } + // if ( $('input[name=qps_tu]').is(':checked') == true ) { filterColumnCheck(4); } + + $('#spinner_taxon_lactation').hide(); + $('#spinner_taxon_lactation2').hide(); + + checkURL(); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_taxon_lactation').hide(); + $('#spinner_taxon_lactation2').hide(); + // Clear oracle + $("#relationlactationByTaxon").val(""); + $('#filter_taxon_lactation').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } + } + }); + +var selectize = $select[0].selectize; + +// URL: taxon +if ( taxon !== null ) { + $('#spinner_taxon_lactation').show(); + $('#spinner_taxon_lactation2').show(); + selectize.setTextboxValue(taxon); + $("#search_taxon_lactation option:selected").text(taxon); + $("#search_taxon_lactation option:selected").val(taxon); + $('#filter_taxon_lactation').removeAttr('disabled'); + + $.getJSON($SCRIPT_ROOT + '/_get_path', + {name: taxon, table: 'list_taxon_lactation'}, + function success(path) { + if ( path != '' ) { + let l_path = path[0].split('/'); + let taxonid = l_path[l_path.length-1]; + + createTableWithArg(taxonid, 'have_produced_2', 'results_taxon_lactation'); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_taxon_lactation').hide(); + $('#spinner_taxon_lactation2').hide(); + // Clear oracle + $("#relationlactationByTaxon").val(""); + $('#filter_taxon_lactation').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } + }); +} +// URL: qps +// if ( qps !== null ) { +// $('input:checkbox').prop('checked', true); +// } +// URL: lactation +if ( lactation !== null ) { + $('input.column_filter').val(lactation); +} + +// var thtable = $('#results_taxon_lactation').DataTable(); + +// Data table +// function createTable(path) { +// if ( path != '' ) { +// let l_path = path.split('/'); +// let taxonid = l_path[l_path.length-1]; +// +// $('#filter_taxon_lactation').removeAttr('disabled'); +// $('#spinner_taxon_lactation').show(); +// $('#spinner_taxon_lactation2').show(); +// +// $.getJSON($SCRIPT_ROOT + '/_get_list_relations', +// { taxonid: taxonid, +// type: 'lactation' +// }, +// function success(relations) { +// $('#hide').css( 'display', 'block' ); +// $('#results_taxon_lactation').DataTable().destroy(); +// thtable = $('#results_taxon_lactation').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 = 'lactation'; } +// 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 = 'lactation'; } +// 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]; +// }} +// ] +// }); +// +// if ( $('#lactation_tu').val() != '' ) { filterColumnlactation(3); } +// if ( $('input[name=qps_tu]').is(':checked') == true ) { filterColumnCheck(4); } +// +// $('#spinner_taxon_lactation').hide(); +// $('#spinner_taxon_lactation2').hide(); +// +// checkURL(); +// }); +// } +// else { +// alert("No result for " + taxon); +// // Spinner off +// $('#spinner_taxon_lactation').hide(); +// $('#spinner_taxon_lactation2').hide(); +// // Clear oracle +// $("#relationlactationByTaxon").val(""); +// $('#filter_taxon_lactation').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_lactation'}, + function success(path) { + if ( path != '' ) { + let l_path = path[0].split('/'); + let taxonid = l_path[l_path.length-1]; + + $.getJSON($SCRIPT_ROOT + '/_get_list_relations', + { taxonid: taxonid, + type: 'lactation' + }, + function success(relations) { + $('#hide').css( 'display', 'block' ); + $('#results_taxon_lactation').DataTable().destroy(); + thtable = $('#results_taxon_lactation').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 = 'lactation'; } + 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 = 'lactation'; } + 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]; + }} + ] + }); + + if ( $('#lactation_tu').val() != '' ) { filterColumnlactation(3); } + // if ( $('input[name=qps_tu]').is(':checked') == true ) { filterColumnCheck(4); } + + $('#spinner_taxon_lactation').hide(); + $('#spinner_taxon_lactation2').hide(); + + checkURL(); + }); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_taxon_lactation').hide(); + $('#spinner_taxon_lactation2').hide(); + // Clear oracle + $("#relationlactationByTaxon").val(""); + $('#filter_taxon_lactation').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } + }); +} + +// Filter - lactation +function filterColumnlactation(i) { + $('#results_taxon_lactation').DataTable().column(i).search( + $('#lactation_tu').val().replace(/;/g, "|"), true, false + ).draw(); + checkURL(); +} +$('input.column_filter').on( 'keyup click', function () { + filterColumnlactation($(this).parents('tr').attr('data-column')); +} ); + +// Filter - QPS +// function filterColumnCheck(i) { +// let state = $('input[name=qps_tu]').is(':checked'); +// let qps = ""; +// if ( state == true ) { qps = "yes"; } +// $('#results_taxon_lactation').DataTable().column(i).search( +// qps, true, false +// ).draw(); +// checkURL(); +// } +// $('input:checkbox').on('change', function () { +// filterColumnCheck(4); +// }); + +// Check url +function checkURL() { + var url = window.location.pathname; + if ( $("#search_taxon_lactation option:selected").text() !== '' ) { + url += "?taxon=" + $("#search_taxon_lactation option:selected").text(); + } + if ( $("#lactation_tu").val() !== '' ) { + url += "&lactation=" + $("#lactation_tu").val(); + } + // if ( $('#qps_tu').is(":checked") ) { + // url += "&qps=yes"; + // } + history.pushState({}, null, url); +} diff --git a/static/js/searchByTaxonForOligosaccharideName.js b/static/js/searchByTaxonForOligosaccharideName.js new file mode 100644 index 0000000000000000000000000000000000000000..352627e9fbb01fbd0a0ec367a6893294d2837d3d --- /dev/null +++ b/static/js/searchByTaxonForOligosaccharideName.js @@ -0,0 +1,147 @@ +/** +# Copyright 2022 Sandra Dérozier (INRAE) +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +**/ + +import { format_docs, createTable, createTableWithArg } from './utils.js'; + +$("#searchByTaxonForOligosaccharideName.nav-item").addClass( "active" ); + +// Spinner +$('#spinner_taxon_oligoname').show(); +$('#spinner_taxon_oligoname2').show(); + +var thtable = $('#results_taxon_oligoname').DataTable(); + +var $select = $('#search').selectize({ + valueField: 'path', + labelField: 'name', + searchField: 'name', + sortField: 'name', + placeholder: 'e.g. Canis lupus familiaris', + openOnFocus: false, + create: false, + maxItems: 1, + onInitialize: function() { + var that = this; + + $.getJSON($SCRIPT_ROOT + '/_get_list_obt_class', + { table: "list_taxon_oligo_name"}, + function(data) { + data.forEach(function(item) { + that.addOption(item); + }); + $('#spinner_taxon_oligoname').hide(); + $('#spinner_taxon_oligoname2').hide(); + $('#search option:selected').prop('disabled', false); + }); + }, + onChange:function(value){ + if (value != '') { + + $('#filter_taxon_oligoname').removeAttr('disabled'); + $('#spinner_taxon_oligoname').show(); + $('#spinner_taxon_oligoname2').show(); + + createTable(value, 'have_produced_tmp_1', 'results_taxon_oligoname'); + + if ( $('#oligoname_th').val() != '' ) { filterColumnoligoname(3); } + + $('#spinner_taxon_oligoname').hide(); + $('#spinner_taxon_oligoname2').hide(); + + checkURL(); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_taxon_oligoname').hide(); + $('#spinner_taxon_oligoname2').hide(); + // Clear oracle + $("#relationoligonameByTaxon").val(""); + $('#filter_taxon_oligoname').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } + } + }); + +var selectize = $select[0].selectize; + +// URL: taxon +if ( taxon !== null ) { + $('#spinner_taxon_oligoname').show(); + $('#spinner_taxon_oligoname2').show(); + selectize.setTextboxValue(taxon); + $("#search option:selected").text(taxon); + $("#search option:selected").val(taxon); + $('#filter_taxon_oligoname').removeAttr('disabled'); + + $.getJSON($SCRIPT_ROOT + '/_get_path', + {name: taxon, table: 'list_taxon_oligo_name'}, + function success(path) { + if ( path != '' ) { + let l_path = path[0].split('/'); + let taxonid = l_path[l_path.length-1]; + + createTableWithArg(taxonid, 'have_produced_tmp_1', 'results_taxon_oligoname'); + + if ( $('#oligoname_th').val() != '' ) { filterColumnoligoname(3); } + + $('#spinner_taxon_oligoname').hide(); + $('#spinner_taxon_oligoname2').hide(); + + checkURL(); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_taxon_oligoname').hide(); + $('#spinner_taxon_oligoname2').hide(); + // Clear oracle + $("#relationoligonameByTaxon").val(""); + $('#filter_taxon_oligoname').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } + }); +} + +// URL: oligoname +if ( oligoname !== null ) { + $('input.column_filter').val(oligotype); +} + +// Filter - oligoname +function filterColumnoligoname(i) { + $('#results_taxon_oligoname').DataTable().column(i).search( + $('#oligoname_th').val().replace(/;/g, "|"), true, false + ).draw(); + checkURL(); +} +$('input.column_filter').on( 'keyup click', function () { + filterColumnoligoname($(this).parents('tr').attr('data-column')); +} ); + +// Check url +function checkURL() { + var url = window.location.pathname; + if ( $("#search option:selected").text() !== '' ) { + url += "?taxon=" + $("#search option:selected").text(); + } + if ( $("#oligoname_th").val() !== '' ) { + url += "&oligoname=" + $("#oligoname_th").val(); + } + history.pushState({}, null, url); +} diff --git a/static/js/searchByTaxonForOligosaccharideType.js b/static/js/searchByTaxonForOligosaccharideType.js new file mode 100644 index 0000000000000000000000000000000000000000..290ba02a8142a2e5651161e2c7b8b934208d26e1 --- /dev/null +++ b/static/js/searchByTaxonForOligosaccharideType.js @@ -0,0 +1,147 @@ +/** +# Copyright 2022 Sandra Dérozier (INRAE) +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +**/ + +import { format_docs, createTable, createTableWithArg } from './utils.js'; + +$("#searchByTaxonForOligosaccharideType.nav-item").addClass( "active" ); + +// Spinner +$('#spinner_taxon_oligotype').show(); +$('#spinner_taxon_oligotype2').show(); + +var thtable = $('#results_taxon_oligotype').DataTable(); + +var $select = $('#search').selectize({ + valueField: 'path', + labelField: 'name', + searchField: 'name', + sortField: 'name', + placeholder: 'e.g. Bos taurus', + openOnFocus: false, + create: false, + maxItems: 1, + onInitialize: function() { + var that = this; + + $.getJSON($SCRIPT_ROOT + '/_get_list_obt_class', + { table: "list_taxon_oligo_type"}, + function(data) { + data.forEach(function(item) { + that.addOption(item); + }); + $('#spinner_taxon_oligotype').hide(); + $('#spinner_taxon_oligotype2').hide(); + $('#search option:selected').prop('disabled', false); + }); + }, + onChange:function(value){ + if (value != '') { + + $('#filter_taxon_oligotype').removeAttr('disabled'); + $('#spinner_taxon_oligotype').show(); + $('#spinner_taxon_oligotype2').show(); + + createTable(value, 'have_produced_tmp_2', 'results_taxon_oligotype'); + + if ( $('#oligotype_th').val() != '' ) { filterColumnoligotype(3); } + + $('#spinner_taxon_oligotype').hide(); + $('#spinner_taxon_oligotype2').hide(); + + checkURL(); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_taxon_oligotype').hide(); + $('#spinner_taxon_oligotype2').hide(); + // Clear oracle + $("#relationoligotypeByTaxon").val(""); + $('#filter_taxon_oligotype').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } + } + }); + +var selectize = $select[0].selectize; + +// URL: taxon +if ( taxon !== null ) { + $('#spinner_taxon_oligotype').show(); + $('#spinner_taxon_oligotype2').show(); + selectize.setTextboxValue(taxon); + $("#search option:selected").text(taxon); + $("#search option:selected").val(taxon); + $('#filter_taxon_oligotype').removeAttr('disabled'); + + $.getJSON($SCRIPT_ROOT + '/_get_path', + {name: taxon, table: 'list_taxon_oligo_type'}, + function success(path) { + if ( path != '' ) { + let l_path = path[0].split('/'); + let taxonid = l_path[l_path.length-1]; + + createTableWithArg(taxonid, 'have_produced_tmp_2', 'results_taxon_oligotype'); + + if ( $('#oligotype_th').val() != '' ) { filterColumnoligotype(3); } + + $('#spinner_taxon_oligotype').hide(); + $('#spinner_taxon_oligotype2').hide(); + + checkURL(); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_taxon_oligotype').hide(); + $('#spinner_taxon_oligotype2').hide(); + // Clear oracle + $("#relationvByTaxon").val(""); + $('#filter_taxon_oligotype').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } + }); +} + +// URL: oligotype +if ( oligotype !== null ) { + $('input.column_filter').val(oligotype); +} + +// Filter - oligotype +function filterColumnoligotype(i) { + $('#results_taxon_oligotype').DataTable().column(i).search( + $('#oligotype_th').val().replace(/;/g, "|"), true, false + ).draw(); + checkURL(); +} +$('input.column_filter').on( 'keyup click', function () { + filterColumnoligotype($(this).parents('tr').attr('data-column')); +} ); + +// Check url +function checkURL() { + var url = window.location.pathname; + if ( $("#search option:selected").text() !== '' ) { + url += "?taxon=" + $("#search option:selected").text(); + } + if ( $("#oligotype_th").val() !== '' ) { + url += "&oligotype=" + $("#oligotype_th").val(); + } + history.pushState({}, null, url); +} diff --git a/static/js/searchByTaxonForPhenotype.js b/static/js/searchByTaxonForPhenotype.js deleted file mode 100644 index 71f6740b5387c9efce7bb256ae546137dc52f8b8..0000000000000000000000000000000000000000 --- a/static/js/searchByTaxonForPhenotype.js +++ /dev/null @@ -1,522 +0,0 @@ -/** -# Copyright 2022 Sandra Dérozier (INRAE) -# -# Licensed under the Apache License, Version 2.0 (the "License"); -# you may not use this file except in compliance with the License. -# You may obtain a copy of the License at -# -# http://www.apache.org/licenses/LICENSE-2.0 -# -# Unless required by applicable law or agreed to in writing, software -# distributed under the License is distributed on an "AS IS" BASIS, -# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -# See the License for the specific language governing permissions and -# limitations under the License. -**/ - -import { format_docs } from './utils.js'; - -$("#searchByTaxonForPhenotype.nav-item").addClass( "active" ); - -$('#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', - $.getJSON($SCRIPT_ROOT + '/_get_list_obt_class', - { 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); - } - } - }); - -var selectize = $select[0].selectize; - -// URL: taxon -if ( taxon !== null ) { - $('#spinner_taxon_phenotype').show(); - $('#spinner_taxon_phenotype2').show(); - selectize.setTextboxValue(taxon); - $("#search_taxon_phenotype option:selected").text(taxon); - $("#search_taxon_phenotype option:selected").val(taxon); - $('#filter_taxon_phenotype').removeAttr('disabled'); - - createTable_old(taxon); -} -// URL: qps -if ( qps !== null ) { - $('input:checkbox').prop('checked', true); -} -// URL: phenotype -if ( phenotype !== null ) { - $('input.column_filter').val(phenotype); -} - -var thtable = $('#results_taxon_phenotype').DataTable(); - -// Datatable -function createTable(path) { - if ( path != '' ) { - let l_path = path.split('/'); - let taxonid = l_path[l_path.length-1]; - - $('#filter_taxon_phenotype').removeAttr('disabled'); - $('#spinner_taxon_phenotype').show(); - $('#spinner_taxon_phenotype2').show(); - - $.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]; - }} - ] - }); - - if ( $('#phenotype_tp').val() != '' ) { filterColumnphenotype(3); } - if ( $('input[name=qps_tp]').is(':checked') == true ) { filterColumnCheck(4); } - - $('#spinner_taxon_phenotype').hide(); - $('#spinner_taxon_phenotype2').hide(); - - 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) { - if ( path != '' ) { - let l_path = path[0].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]; - }} - // {"width": "15%", "targets": 0, - // render: function(data, type, row, meta) { - // var docids = format_docs(row, alvisir, 'phenotype'); - // let docs = ""; - // if ( data.includes(', ') ) { docs = data.split(', '); } - // else { docs = data.split(','); } - // let docs_f = ""; - // if ( docs.length > 3 ) { - // docs_f = docids.split(", ").slice(0,3).join(', ') + ", ..."; - // } - // else { - // docs_f = docids; - // } - // - // return docs_f; - // } - // }, - // {"width": "30%", "targets": 1, - // "render": function ( data, type, row, meta ) { - // let taxa = data.split(', '); - // let 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>: "; - // let forms = ""; - // for ( let i = 1; i < taxa.length ; i++ ) { - // forms += taxa[i] + ", " - // } - // forms = forms.slice(0, -2); - // - // let taxa_f = ""; - // if ( taxa.length > 3 ) { - // taxa_f = taxon + forms.split(", ").slice(0,2).join(', ') + ", ..."; - // } - // else { - // taxa_f = taxon + forms; - // } - // - // return taxa_f; - // }, - // }, - // {"width": "12%", "targets": 2}, - // {"width": "28%", "targets": 3, - // "render": function ( data, type, row, meta ) { - // let elts = data.split(', '); - // let elt = "<b>"+elts[0]+"</b>: "; - // let forms = ""; - // for ( let i = 1; i < elts.length ; i++ ) { - // forms += elts[i] + ", " - // } - // forms = forms.slice(0, -2); - // - // let elts_f = ""; - // if ( elts.length > 3 ) { - // elts_f = elt + forms.split(", ").slice(0,2).join(', ') + ", ..."; - // } - // else { - // elts_f = elt + forms; - // } - // return elts_f; - // }, - // }, - // {"width": "5%", "targets": 4, "orderable": false, - // "render": function ( data, type, row, meta ) { - // let qps = data; - // return "<center>"+qps+"</center>"; - // }, - // }, - // {"width": "10%", "targets": 5 }, - // {"data": null, "orderable": false, - // "className": "details-control", "defaultContent": ""} - ] - // , - // buttons: [ - // 'copy', 'excel', 'pdf', 'print'] - }); - - if ( $('#phenotype_tp').val() != '' ) { filterColumnphenotype(3); } - if ( $('input[name=qps_tp]').is(':checked') == true ) { filterColumnCheck(4); } - - $('#spinner_taxon_phenotype').hide(); - $('#spinner_taxon_phenotype2').hide(); - - 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); - } - }); -} - -// Filter - phenotype -function filterColumnphenotype(i) { - $('#results_taxon_phenotype').DataTable().column(i).search( - $('#phenotype_tp').val().replace(/;/g, "|"), true, false - ).draw(); - checkURL(); -} -$('input.column_filter').on( 'keyup click', function () { - filterColumnphenotype($(this).parents('tr').attr('data-column')); -} ); - -// Filter - QPS -function filterColumnCheck(i) { - let state = $('input[name=qps_tp]').is(':checked'); - let qps = ""; - if ( state == true ) { qps = "yes"; } - $('#results_taxon_phenotype').DataTable().column(i).search( - qps, true, false - ).draw(); - checkURL(); -} -$('input:checkbox').on('change', function () { - filterColumnCheck(4); - }); - -// Check url -function checkURL() { - var url = window.location.pathname; - if ( $("#search_taxon_phenotype option:selected").text() !== '' ) { - url += "?taxon=" + $("#search_taxon_phenotype option:selected").text(); - } - if ( $("#phenotype_tp").val() !== '' ) { - url += "&phenotype=" + $("#phenotype_tp").val(); - } - if ( $('#qps_tp').is(":checked") ) { - url += "&qps=yes"; - } - history.pushState({}, null, url); -} diff --git a/static/js/searchByTaxonForPostpartum.js b/static/js/searchByTaxonForPostpartum.js new file mode 100644 index 0000000000000000000000000000000000000000..2fa580ba7c3c59dfdf8a7f9292140186f38bd4c8 --- /dev/null +++ b/static/js/searchByTaxonForPostpartum.js @@ -0,0 +1,569 @@ +/** +# Copyright 2022 Sandra Dérozier (INRAE) +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +**/ + +import { format_docs, createTable, createTableWithArg } from './utils.js'; + +$("#searchByTaxonForPostpartum.nav-item").addClass( "active" ); + +// Spinner +$('#spinner_taxon_postpartum').show(); +$('#spinner_taxon_postpartum2').show(); + +var thtable = $('#results_taxon_postpartum').DataTable(); + +var $select = $('#search_taxon_postpartum').selectize({ + valueField: 'path', + labelField: 'name', + searchField: 'name', + sortField: 'name', + placeholder: 'e.g. Rattus', + openOnFocus: false, + create: false, + maxItems: 1, + onInitialize: function() { + var that = this; + + // $.getJSON($SCRIPT_ROOT + '/_get_list_term', + $.getJSON($SCRIPT_ROOT + '/_get_list_obt_class', + { table: "list_taxon_postpartum"}, + function(data) { + data.forEach(function(item) { + that.addOption(item); + }); + $('#spinner_taxon_postpartum').hide(); + $('#spinner_taxon_postpartum2').hide(); + $('#search_taxon_postpartum option:selected').prop('disabled', false); + }); + }, + onChange:function(value){ + if (value != "") { + + $('#filter_taxon_postpartum').removeAttr('disabled'); + $('#spinner_taxon_postpartum').show(); + $('#spinner_taxon_postpartum2').show(); + + createTable(value, 'has_given_birth_since', 'results_taxon_postpartum'); + + if ( $('#postpartum_tp').val() != '' ) { filterColumnpostpartum(3); } + // if ( $('input[name=qps_tp]').is(':checked') == true ) { filterColumnCheck(4); } + + $('#spinner_taxon_postpartum').hide(); + $('#spinner_taxon_postpartum2').hide(); + + checkURL(); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_taxon_postpartum').hide(); + $('#spinner_taxon_postpartum2').hide(); + // Clear oracle + $("#relationpostpartumByTaxon").val(""); + $('#filter_taxon_postpartum').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } + } + }); + +var selectize = $select[0].selectize; + +// URL: taxon +if ( taxon !== null ) { + $('#spinner_taxon_postpartum').show(); + $('#spinner_taxon_postpartum2').show(); + selectize.setTextboxValue(taxon); + $("#search_taxon_postpartum option:selected").text(taxon); + $("#search_taxon_postpartum option:selected").val(taxon); + $('#filter_taxon_postpartum').removeAttr('disabled'); + + $.getJSON($SCRIPT_ROOT + '/_get_path', + {name: taxon, table: 'list_taxon_postpartum'}, + function success(path) { + if ( path != '' ) { + let l_path = path[0].split('/'); + let taxonid = l_path[l_path.length-1]; + + createTableWithArg(taxonid, 'has_given_birth_since', 'results_taxon_postpartum'); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_taxon_postpartum').hide(); + $('#spinner_taxon_postpartum2').hide(); + // Clear oracle + $("#relationpostpartumByTaxon").val(""); + $('#filter_taxon_postpartum').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } + }); +} +// URL: qps +// if ( qps !== null ) { +// $('input:checkbox').prop('checked', true); +// } +// URL: postpartum +if ( postpartum !== null ) { + $('input.column_filter').val(postpartum); +} + +// var thtable = $('#results_taxon_postpartum').DataTable(); + +// Datatable +// function createTable(path) { +// if ( path != '' ) { +// let l_path = path.split('/'); +// let taxonid = l_path[l_path.length-1]; +// +// $('#filter_taxon_postpartum').removeAttr('disabled'); +// $('#spinner_taxon_postpartum').show(); +// $('#spinner_taxon_postpartum2').show(); +// +// $.getJSON($SCRIPT_ROOT + '/_get_list_relations', +// { taxonid: taxonid, +// type: 'postpartum' +// }, +// function success(relations) { +// $('#hide').css( 'display', 'block' ); +// $('#results_taxon_postpartum').DataTable().destroy(); +// thtable = $('#results_taxon_postpartum').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 = 'postpartum'; } +// 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 = 'postpartum'; } +// 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]; +// }} +// ] +// }); +// +// if ( $('#postpartum_tp').val() != '' ) { filterColumnpostpartum(3); } +// if ( $('input[name=qps_tp]').is(':checked') == true ) { filterColumnCheck(4); } +// +// $('#spinner_taxon_postpartum').hide(); +// $('#spinner_taxon_postpartum2').hide(); +// +// checkURL(); +// }); +// } +// else { +// alert("No result for " + taxon); +// // Spinner off +// $('#spinner_taxon_postpartum').hide(); +// $('#spinner_taxon_postpartum2').hide(); +// // Clear oracle +// $("#relationpostpartumByTaxon").val(""); +// $('#filter_taxon_postpartum').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_postpartum'}, +// function success(path) { +// if ( path != '' ) { +// let l_path = path[0].split('/'); +// let taxonid = l_path[l_path.length-1]; +// +// $.getJSON($SCRIPT_ROOT + '/_get_list_relations', +// { taxonid: taxonid, +// type: 'postpartum' +// }, +// function success(relations) { +// $('#hide').css( 'display', 'block' ); +// $('#results_taxon_postpartum').DataTable().destroy(); +// thtable = $('#results_taxon_postpartum').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 = 'postpartum'; } +// 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 = 'postpartum'; } +// 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]; +// }} +// // {"width": "15%", "targets": 0, +// // render: function(data, type, row, meta) { +// // var docids = format_docs(row, alvisir, 'postpartum'); +// // let docs = ""; +// // if ( data.includes(', ') ) { docs = data.split(', '); } +// // else { docs = data.split(','); } +// // let docs_f = ""; +// // if ( docs.length > 3 ) { +// // docs_f = docids.split(", ").slice(0,3).join(', ') + ", ..."; +// // } +// // else { +// // docs_f = docids; +// // } +// // +// // return docs_f; +// // } +// // }, +// // {"width": "30%", "targets": 1, +// // "render": function ( data, type, row, meta ) { +// // let taxa = data.split(', '); +// // let 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>: "; +// // let forms = ""; +// // for ( let i = 1; i < taxa.length ; i++ ) { +// // forms += taxa[i] + ", " +// // } +// // forms = forms.slice(0, -2); +// // +// // let taxa_f = ""; +// // if ( taxa.length > 3 ) { +// // taxa_f = taxon + forms.split(", ").slice(0,2).join(', ') + ", ..."; +// // } +// // else { +// // taxa_f = taxon + forms; +// // } +// // +// // return taxa_f; +// // }, +// // }, +// // {"width": "12%", "targets": 2}, +// // {"width": "28%", "targets": 3, +// // "render": function ( data, type, row, meta ) { +// // let elts = data.split(', '); +// // let elt = "<b>"+elts[0]+"</b>: "; +// // let forms = ""; +// // for ( let i = 1; i < elts.length ; i++ ) { +// // forms += elts[i] + ", " +// // } +// // forms = forms.slice(0, -2); +// // +// // let elts_f = ""; +// // if ( elts.length > 3 ) { +// // elts_f = elt + forms.split(", ").slice(0,2).join(', ') + ", ..."; +// // } +// // else { +// // elts_f = elt + forms; +// // } +// // return elts_f; +// // }, +// // }, +// // {"width": "5%", "targets": 4, "orderable": false, +// // "render": function ( data, type, row, meta ) { +// // let qps = data; +// // return "<center>"+qps+"</center>"; +// // }, +// // }, +// // {"width": "10%", "targets": 5 }, +// // {"data": null, "orderable": false, +// // "className": "details-control", "defaultContent": ""} +// ] +// // , +// // buttons: [ +// // 'copy', 'excel', 'pdf', 'print'] +// }); +// +// if ( $('#postpartum_tp').val() != '' ) { filterColumnpostpartum(3); } +// if ( $('input[name=qps_tp]').is(':checked') == true ) { filterColumnCheck(4); } +// +// $('#spinner_taxon_postpartum').hide(); +// $('#spinner_taxon_postpartum2').hide(); +// +// checkURL(); +// }); +// } +// else { +// alert("No result for " + taxon); +// // Spinner off +// $('#spinner_taxon_postpartum').hide(); +// $('#spinner_taxon_postpartum2').hide(); +// // Clear oracle +// $("#relationpostpartumByTaxon").val(""); +// $('#filter_taxon_postpartum').attr('disabled', 'disabled'); +// // Change URL +// window.location.replace(window.location.pathname); +// } +// }); +// } + +// Filter - postpartum +function filterColumnpostpartum(i) { + $('#results_taxon_postpartum').DataTable().column(i).search( + $('#postpartum_tp').val().replace(/;/g, "|"), true, false + ).draw(); + checkURL(); +} +$('input.column_filter').on( 'keyup click', function () { + filterColumnpostpartum($(this).parents('tr').attr('data-column')); +} ); + +// Filter - QPS +// function filterColumnCheck(i) { +// let state = $('input[name=qps_tp]').is(':checked'); +// let qps = ""; +// if ( state == true ) { qps = "yes"; } +// $('#results_taxon_postpartum').DataTable().column(i).search( +// qps, true, false +// ).draw(); +// checkURL(); +// } +// $('input:checkbox').on('change', function () { +// filterColumnCheck(4); +// }); + +// Check url +function checkURL() { + var url = window.location.pathname; + if ( $("#search_taxon_postpartum option:selected").text() !== '' ) { + url += "?taxon=" + $("#search_taxon_postpartum option:selected").text(); + } + if ( $("#postpartum_tp").val() !== '' ) { + url += "&postpartum=" + $("#postpartum_tp").val(); + } + // if ( $('#qps_tp').is(":checked") ) { + // url += "&qps=yes"; + // } + history.pushState({}, null, url); +} diff --git a/static/js/searchByTaxonForSampleType.js b/static/js/searchByTaxonForSampleType.js new file mode 100644 index 0000000000000000000000000000000000000000..1375a9ea8abdeecb96a8a8e893035aad4ea25a50 --- /dev/null +++ b/static/js/searchByTaxonForSampleType.js @@ -0,0 +1,497 @@ +/** +# Copyright 2022 Sandra Dérozier (INRAE) +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +**/ + +import { format_docs, createTable, createTableWithArg } from './utils.js'; + +$("#searchByTaxonForSampleType.nav-item").addClass( "active" ); + +$('#spinner_taxon_sample').show(); +$('#spinner_taxon_sample2').show(); + +var thtable = $('#results_taxon_sample').DataTable(); + +var $select = $('#search_taxon_sample').selectize({ + valueField: 'path', + labelField: 'name', + searchField: 'name', + sortField: 'name', + placeholder: 'e.g. Bos taurus', + openOnFocus: false, + create: false, + maxItems: 1, + onInitialize: function() { + var that = this; + + // $.getJSON($SCRIPT_ROOT + '/_get_list_term', + $.getJSON($SCRIPT_ROOT + '/_get_list_obt_class', + { table: "list_taxon_sample"}, + function(data) { + data.forEach(function(item) { + that.addOption(item); + }); + $('#spinner_taxon_sample').hide(); + $('#spinner_taxon_sample2').hide(); + $('#search_taxon_sample').prop('disabled', false); + }); + }, + onChange:function(value){ + if (value != "") { + + $('#filter_taxon_sample').removeAttr('disabled'); + $('#spinner_taxon_sample').show(); + $('#spinner_taxon_sample2').show(); + + createTable(value, 'have_produced_1', 'results_taxon_sample'); + + if ( $('#sample_tu').val() != '' ) { filterColumnsample(3); } + // if ( $('input[name=qps_tu]').is(':checked') == true ) { filterColumnCheck(4); } + + $('#spinner_taxon_sample').hide(); + $('#spinner_taxon_sample2').hide(); + + checkURL(); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_taxon_sample').hide(); + $('#spinner_taxon_sample2').hide(); + // Clear oracle + $("#relationSampleByTaxon").val(""); + $('#filter_taxon_sample').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } + } + }); + +var selectize = $select[0].selectize; + +// URL: taxon +if ( taxon !== null ) { + $('#spinner_taxon_sample').show(); + $('#spinner_taxon_sample2').show(); + selectize.setTextboxValue(taxon); + $("#search_taxon_sample option:selected").text(taxon); + $("#search_taxon_sample option:selected").val(taxon); + $('#filter_taxon_sample').removeAttr('disabled'); + + $.getJSON($SCRIPT_ROOT + '/_get_path', + {name: taxon, table: 'list_taxon_sample'}, + function success(path) { + if ( path != '' ) { + let l_path = path[0].split('/'); + let taxonid = l_path[l_path.length-1]; + + createTableWithArg(taxonid, 'have_produced_1', 'results_taxon_sample'); + } + else { + alert("No result for " + taxon); + // Spinner off + $('#spinner_taxon_sample').hide(); + $('#spinner_taxon_sample2').hide(); + // Clear oracle + $("#relationSampleByTaxon").val(""); + $('#filter_taxon_sample').attr('disabled', 'disabled'); + // Change URL + window.location.replace(window.location.pathname); + } + }); +} +// URL: qps +// if ( qps !== null ) { +// $('input:checkbox').prop('checked', true); +// } +// URL: sample +if ( sample !== null ) { + $('input.column_filter').val(sample); +} + +// var thtable = $('#results_taxon_sample').DataTable(); + +// Data table +// function createTable(path) { +// if ( path != '' ) { +// let l_path = path.split('/'); +// let taxonid = l_path[l_path.length-1]; +// +// $('#filter_taxon_sample').removeAttr('disabled'); +// $('#spinner_taxon_sample').show(); +// $('#spinner_taxon_sample2').show(); +// +// $.getJSON($SCRIPT_ROOT + '/_get_list_relations', +// { taxonid: taxonid, +// type: 'sample' +// }, +// function success(relations) { +// $('#hide').css( 'display', 'block' ); +// $('#results_taxon_sample').DataTable().destroy(); +// thtable = $('#results_taxon_sample').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 = 'sample'; } +// 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 = 'sample'; } +// 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]; +// }} +// ] +// }); +// +// if ( $('#sample_tu').val() != '' ) { filterColumnsample(3); } +// if ( $('input[name=qps_tu]').is(':checked') == true ) { filterColumnCheck(4); } +// +// $('#spinner_taxon_sample').hide(); +// $('#spinner_taxon_sample2').hide(); +// +// checkURL(); +// }); +// } +// else { +// alert("No result for " + taxon); +// // Spinner off +// $('#spinner_taxon_sample').hide(); +// $('#spinner_taxon_sample2').hide(); +// // Clear oracle +// $("#relationsampleByTaxon").val(""); +// $('#filter_taxon_sample').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_sample'}, +// function success(path) { +// if ( path != '' ) { +// let l_path = path[0].split('/'); +// let taxonid = l_path[l_path.length-1]; +// +// $.getJSON($SCRIPT_ROOT + '/_get_list_relations', +// { taxonid: taxonid, +// type: 'sample' +// }, +// function success(relations) { +// $('#hide').css( 'display', 'block' ); +// $('#results_taxon_sample').DataTable().destroy(); +// thtable = $('#results_taxon_sample').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 = 'sample'; } +// 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 = 'sample'; } +// 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]; +// }} +// ] +// }); +// +// if ( $('#sample_tu').val() != '' ) { filterColumnsample(3); } +// if ( $('input[name=qps_tu]').is(':checked') == true ) { filterColumnCheck(4); } +// +// $('#spinner_taxon_sample').hide(); +// $('#spinner_taxon_sample2').hide(); +// +// checkURL(); +// }); +// } +// else { +// alert("No result for " + taxon); +// // Spinner off +// $('#spinner_taxon_sample').hide(); +// $('#spinner_taxon_sample2').hide(); +// // Clear oracle +// $("#relationsampleByTaxon").val(""); +// $('#filter_taxon_sample').attr('disabled', 'disabled'); +// // Change URL +// window.location.replace(window.location.pathname); +// } +// }); +// } + +// Filter - sample +function filterColumnsample(i) { + $('#results_taxon_sample').DataTable().column(i).search( + $('#sample_tu').val().replace(/;/g, "|"), true, false + ).draw(); + checkURL(); +} +$('input.column_filter').on( 'keyup click', function () { + filterColumnsample($(this).parents('tr').attr('data-column')); +} ); + +// Filter - QPS +// function filterColumnCheck(i) { +// let state = $('input[name=qps_tu]').is(':checked'); +// let qps = ""; +// if ( state == true ) { qps = "yes"; } +// $('#results_taxon_sample').DataTable().column(i).search( +// qps, true, false +// ).draw(); +// checkURL(); +// } +// $('input:checkbox').on('change', function () { +// filterColumnCheck(4); +// }); + +// Check url +function checkURL() { + var url = window.location.pathname; + if ( $("#search_taxon_sample option:selected").text() !== '' ) { + url += "?taxon=" + $("#search_taxon_sample option:selected").text(); + } + if ( $("#sample_tu").val() !== '' ) { + url += "&sample=" + $("#sample_tu").val(); + } + // if ( $('#qps_tu').is(":checked") ) { + // url += "&qps=yes"; + // } + history.pushState({}, null, url); +} diff --git a/static/js/searchByTaxonForUse.js b/static/js/searchByTaxonForUse.js deleted file mode 100644 index 265128d29e206cc246b69854f3e89d440ac8f773..0000000000000000000000000000000000000000 --- a/static/js/searchByTaxonForUse.js +++ /dev/null @@ -1,450 +0,0 @@ -/** -# Copyright 2022 Sandra Dérozier (INRAE) -# -# Licensed under the Apache License, Version 2.0 (the "License"); -# you may not use this file except in compliance with the License. -# You may obtain a copy of the License at -# -# http://www.apache.org/licenses/LICENSE-2.0 -# -# Unless required by applicable law or agreed to in writing, software -# distributed under the License is distributed on an "AS IS" BASIS, -# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -# See the License for the specific language governing permissions and -# limitations under the License. -**/ - -import { format_docs } from './utils.js'; - -$("#searchByTaxonForUse.nav-item").addClass( "active" ); - -$('#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', - $.getJSON($SCRIPT_ROOT + '/_get_list_obt_class', - { 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); - } - } - }); - -var selectize = $select[0].selectize; - -// URL: taxon -if ( taxon !== null ) { - $('#spinner_taxon_use').show(); - $('#spinner_taxon_use2').show(); - selectize.setTextboxValue(taxon); - $("#search_taxon_use option:selected").text(taxon); - $("#search_taxon_use option:selected").val(taxon); - $('#filter_taxon_use').removeAttr('disabled'); - createTable_old(taxon); -} -// URL: qps -if ( qps !== null ) { - $('input:checkbox').prop('checked', true); -} -// URL: use -if ( use !== null ) { - $('input.column_filter').val(use); -} - -var thtable = $('#results_taxon_use').DataTable(); - -// Data table -function createTable(path) { - if ( path != '' ) { - let l_path = path.split('/'); - let taxonid = l_path[l_path.length-1]; - - $('#filter_taxon_use').removeAttr('disabled'); - $('#spinner_taxon_use').show(); - $('#spinner_taxon_use2').show(); - - $.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]; - }} - ] - }); - - if ( $('#use_tu').val() != '' ) { filterColumnuse(3); } - if ( $('input[name=qps_tu]').is(':checked') == true ) { filterColumnCheck(4); } - - $('#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) { - if ( path != '' ) { - let l_path = path[0].split('/'); - let taxonid = l_path[l_path.length-1]; - - $.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]; - }} - ] - }); - - if ( $('#use_tu').val() != '' ) { filterColumnuse(3); } - if ( $('input[name=qps_tu]').is(':checked') == true ) { filterColumnCheck(4); } - - $('#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); - } - }); -} - -// Filter - use -function filterColumnuse(i) { - $('#results_taxon_use').DataTable().column(i).search( - $('#use_tu').val().replace(/;/g, "|"), true, false - ).draw(); - checkURL(); -} -$('input.column_filter').on( 'keyup click', function () { - filterColumnuse($(this).parents('tr').attr('data-column')); -} ); - -// Filter - QPS -function filterColumnCheck(i) { - let state = $('input[name=qps_tu]').is(':checked'); - let qps = ""; - if ( state == true ) { qps = "yes"; } - $('#results_taxon_use').DataTable().column(i).search( - qps, true, false - ).draw(); - checkURL(); -} -$('input:checkbox').on('change', function () { - filterColumnCheck(4); - }); - -// Check url -function checkURL() { - var url = window.location.pathname; - if ( $("#search_taxon_use option:selected").text() !== '' ) { - url += "?taxon=" + $("#search_taxon_use option:selected").text(); - } - if ( $("#use_tu").val() !== '' ) { - url += "&use=" + $("#use_tu").val(); - } - if ( $('#qps_tu').is(":checked") ) { - url += "&qps=yes"; - } - history.pushState({}, null, url); -} diff --git a/static/js/sheet.js b/static/js/sheet.js new file mode 100644 index 0000000000000000000000000000000000000000..99b65f78d98a77362f0086680cc51c34e51e2002 --- /dev/null +++ b/static/js/sheet.js @@ -0,0 +1,107 @@ +document.addEventListener('DOMContentLoaded', function() { + // Initial setup + initializeApp(); + + // Event listeners for global elements + setupEventListeners(); +}); + +function initializeApp() { + // Show initial section + toggleSection('oligo'); + + // Load initial structure + loadStructure('2\'-Fucosyllactose'); +} + +function setupEventListeners() { + // Navigation buttons are handled by inline onclick in HTML + + // Setup download buttons + const downloadButtons = document.querySelectorAll('.download-btn'); + downloadButtons.forEach(button => { + button.addEventListener('click', () => downloadCSV()); + }); +} + +// Section visibility toggle +window.toggleSection = function(sectionType) { + const sections = document.querySelectorAll('.section'); + sections.forEach(section => section.classList.add('hidden')); + + const activeSection = document.getElementById(`${sectionType}-section`); + if (activeSection) { + activeSection.classList.remove('hidden'); + } +} + +// CSV Download functionality +window.downloadCSV = function() { + const section = document.querySelector('.section:not(.hidden)'); + if (!section) return; + + try { + const data = collectSectionData(section); + const csvContent = convertToCSV(data); + triggerDownload(csvContent, `${section.id}_data.csv`); + } catch (error) { + console.error('Error generating CSV:', error); + alert('Error generating CSV file. Please try again.'); + } +} + +function collectSectionData(section) { + const data = []; + const infoItems = section.querySelectorAll('.info-item'); + + infoItems.forEach(item => { + const label = item.querySelector('.info-label').textContent.trim(); + const value = item.querySelector('.info-value').textContent.trim(); + data.push([label, value]); + }); + + return data; +} + +function convertToCSV(data) { + // Add header + const rows = [['Label', 'Value'], ...data]; + + // Convert to CSV format + return rows + .map(row => + row.map(cell => + `"${(cell || '').replace(/"/g, '""')}"`) + .join(',')) + .join('\n'); +} + +function triggerDownload(content, filename) { + const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' }); + const link = document.createElement('a'); + link.href = URL.createObjectURL(blob); + link.download = filename; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); +} + +// Structure loading functionality +async function loadStructure(compoundName) { + try { + // Example using PubChem API + const searchUrl = `https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/name/${encodeURIComponent(compoundName)}/PNG`; + + const structureImage = document.getElementById('structure-image'); + if (structureImage) { + structureImage.src = searchUrl; + structureImage.alt = `${compoundName} structure`; + } + } catch (error) { + console.error('Error loading structure:', error); + const structureImage = document.getElementById('structure-image'); + if (structureImage) { + structureImage.alt = 'Error loading structure'; + } + } +} \ No newline at end of file diff --git a/static/js/utils.js b/static/js/utils.js index cc575f7b5098c5c8f093090a8aad93414be7fd2b..4d83bacf7073fbd72263b622307ec92194f35499 100644 --- a/static/js/utils.js +++ b/static/js/utils.js @@ -43,6 +43,9 @@ export function format_docs(relation, alvisir, rtype) { docids += "<a target='_blank' class='doc' href='https://collection-cirmbia.fr/page/Display_souches/"+cirmid+"'>"+cirmid+"</a>, "; } } + else { + docids = relation[0] + ", " + } // CIRM-Levures // CIRM-CBPF } @@ -50,3 +53,651 @@ export function format_docs(relation, alvisir, rtype) { return docids; } + +export function createTable(path, rel_type, tablename) { + let l_path = path.split('/'); + let taxonid = l_path[l_path.length-1]; + + $.getJSON($SCRIPT_ROOT + '/_get_list_relations', + { taxonid: taxonid, + type: rel_type + }, + function success(relations) { + $('#hide').css( 'display', 'block' ); + $('#'+tablename).DataTable().destroy(); + $('#'+tablename).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: [ + // Source text + {"render": function(data, type, row, meta) { + let rtype = ''; + if ( row[2] == 'Have produced tmp 2' ) { rtype = 'Oligosaccharide_type'; } + else if ( row[2] == 'Have produced tmp 1' ) { rtype = 'Oligosaccharide_name'; } + else if ( row[2] == 'Have produced 2' ) { rtype = 'lactationstage'; } + else if ( row[2] == 'Have produced 1' ) { rtype = 'sampletype'; } + else if ( row[2] == 'Has given birth since' ) { rtype = 'postpartumage'; } + else if ( row[2] == 'Has a physiological stage' ) { rtype = 'physiologicalstage'; } + else 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; + }}, + // Scientific name of taxon + {"render": function ( data, type, row, meta ) { + // let taxa = row[1].split(', '); + // let taxon = taxa[0]; + let taxa = row[12]; + 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>"; + taxon = "<a target='_blank' class='doc' href='https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?id="+row[9].replace(/.+:/ig, '')+"'>"+taxa+"</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>"; + taxon = "<a target='_blank' class='doc' href='https://bacdive.dsmz.de/strain/"+row[9].replace(/.+:/ig, '')+"'>"+taxa+"</a>"; + } + return taxon; + }}, + // Relation type + {"render": function (data, type, row, meta) { + return row[2]; + }}, + // Reference class + {"render": function (data, type, row, meta) { + //return row[3].split(',')[0]; + return row[11]; + }}, + // QPS + {"orderable": false, "render": function (data, type, row, meta) { + return row[4]; + }}, + // Source + {"render": function (data, type, row, meta) { + return row[5]; + }}, + // Form taxon + {"render": function (data, type, row, meta) { + let taxs = row[1].split(', '); + let forms = ""; + let i = 1; + if ( rel_type == 'have_produced_tmp_2' || rel_type == 'have_produced_tmp_1' || rel_type == 'have_produced_2' || rel_type == 'have_produced_1' || rel_type == 'has_a_physiological_stage' || rel_type == 'has_given_birth_since' ) { i = 0; } + for ( i ; i < taxs.length ; i++ ) { //let i = 1; + forms += taxs[i] + if ( i != taxs.length - 1 ) { forms += ", " } + } + return forms; + }}, + // Form reference + {"render": function (data, type, row, meta) { + let elts = row[3].split(', '); + let forms = ""; + let i = 1; + if ( rel_type == 'have_produced_tmp_2' || rel_type == 'have_produced_tmp_1' || rel_type == 'have_produced_2' || rel_type == 'have_produced_1' || rel_type == 'has_a_physiological_stage' || rel_type == 'has_given_birth_since' ) { i = 0; } + for ( i ; i < elts.length ; i++ ) { //let i = 1; + forms += elts[i] + if ( i != elts.length - 1 ) { forms += ", " } + } + return forms; + }}, + // Full source text + {"render": function (data, type, row, meta) { + let rtype = ''; + if ( row[2] == 'Have produced tmp 2' ) { rtype = 'Oligosaccharide_type'; } + else if ( row[2] == 'Have produced tmp 1' ) { rtype = 'Oligosaccharide_name'; } + else if ( row[2] == 'Have produced 2' ) { rtype = 'lactationstage'; } + else if ( row[2] == 'Have produced 1' ) { rtype = 'sampletype'; } + else if ( row[2] == 'Has given birth since' ) { rtype = 'postpartumage'; } + else if ( row[2] == 'Has a physiological stage' ) { rtype = 'physiologicalstage'; } + else 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]; + }} + ] + }); + }); +} + +export function createTableRev(path, rel_type, tablename) { + + let l_path = path.split('/'); + let ontobiotopeid = l_path[l_path.length-1]; + + $.getJSON($SCRIPT_ROOT + '/_get_list_relations', + { + ontobiotopeid: ontobiotopeid, + type: rel_type + }, + function success(relations) { + $('#hide').css( 'display', 'block' ); + $('#'+tablename).DataTable().destroy(); + $('#'+tablename).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] == 'Have produced tmp 2' ) { rtype = 'Oligosaccharide_type'; } + else if ( row[2] == 'Have produced tmp 1' ) { rtype = 'Oligosaccharide_name'; } + else if ( row[2] == 'Have produced 2' ) { rtype = 'lactationstage'; } + else if ( row[2] == 'Have produced 1' ) { rtype = 'sampletype'; } + else if ( row[2] == 'Has given birth since' ) { rtype = 'postpartumage'; } + else if ( row[2] == 'Has a physiological stage' ) { rtype = 'physiologicalstage'; } + else 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) { + // return row[3].split(',')[0]; + return row[11]; + }}, + {"render": function (data, type, row, meta) { + return row[2]; + }}, + {"render": function ( data, type, row, meta ) { + // let taxa = row[1].split(', '); + // let taxon = taxa[0]; + let taxa = row[12]; + 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>"; + taxon = "<a target='_blank' class='doc' href='https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?id="+row[9].replace(/.+:/ig, '')+"'>"+taxa+"</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>"; + taxon = "<a target='_blank' class='doc' href='https://bacdive.dsmz.de/strain/"+row[9].replace(/.+:/ig, '')+"'>"+taxa+"</a>"; + } + return taxon; + }}, + {"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 elts = row[3].split(', '); + let forms = ""; + let i = 1; + if ( rel_type == 'have_produced_tmp_2' || rel_type == 'have_produced_tmp_1' || rel_type == 'have_produced_2' || rel_type == 'have_produced_1' || rel_type == 'has_a_physiological_stage' || rel_type == 'has_given_birth_since' ) { i = 0; } + for ( i ; i < elts.length ; i++ ) { //let i = 1; + forms += elts[i] + if ( i != elts.length - 1 ) { forms += ", " } + } + return forms; + }}, + {"render": function (data, type, row, meta) { + let taxs = row[1].split(', '); + let forms = ""; + let i = 1; + if ( rel_type == 'have_produced_tmp_2' || rel_type == 'have_produced_tmp_1' || rel_type == 'have_produced_2' || rel_type == 'have_produced_1' || rel_type == 'has_a_physiological_stage' || rel_type == 'has_given_birth_since' ) { i = 0; } + for ( i ; i < taxs.length ; i++ ) { //let i = 1; + forms += taxs[i] + if ( i != taxs.length - 1 ) { forms += ", " } + } + return forms; + }}, + {"render": function (data, type, row, meta) { + let rtype = ''; + if ( row[2] == 'Have produced tmp 2' ) { rtype = 'Oligosaccharide_type'; } + else if ( row[2] == 'Have produced tmp 1' ) { rtype = 'Oligosaccharide_name'; } + else if ( row[2] == 'Have produced 2' ) { rtype = 'lactationstage'; } + else if ( row[2] == 'Have produced 1' ) { rtype = 'sampletype'; } + else if ( row[2] == 'Has given birth since' ) { rtype = 'postpartumage'; } + else if ( row[2] == 'Has a physiological stage' ) { rtype = 'physiologicalstage'; } + else 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[8]; + }}, + {"visible": false, "render": function (data, type, row, meta) { + return row[6]; + }}, + {"visible": false, "render": function (data, type, row, meta) { + return row[9]; + }}, + {"visible": false, "render": function (data, type, row, meta) { + return row[7]; + }} + ] + }); + }); +} + +export function createTableWithArg(taxonid, etype, tablename) { + + $.getJSON($SCRIPT_ROOT + '/_get_list_relations', + { taxonid: taxonid, + type: etype//'habitat' + }, + function success(relations) { + $('#hide').css( 'display', 'block' ); + $('#'+tablename).DataTable().destroy(); + $('#'+tablename).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] == 'Have produced tmp 2' ) { rtype = 'Oligosaccharide_type'; } + else if ( row[2] == 'Have produced tmp 1' ) { rtype = 'Oligosaccharide_name'; } + else if ( row[2] == 'Have produced 2' ) { rtype = 'lactationstage'; } + else if ( row[2] == 'Have produced 1' ) { rtype = 'sampletype'; } + else if ( row[2] == 'Has given birth since' ) { rtype = 'postpartumage'; } + else if ( row[2] == 'Has a physiological stage' ) { rtype = 'physiologicalstage'; } + else 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>"; + taxon = "<a target='_blank' class='doc' href='https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?id="+row[9].replace(/.+:/ig, '')+"'>"+row[12]+"</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>"; + taxon = "<a target='_blank' class='doc' href='https://bacdive.dsmz.de/strain/"+row[9].replace(/.+:/ig, '')+"'>"+row[12]+"</a>"; + } + return taxon; + }}, + {"render": function (data, type, row, meta) { + return row[2]; + }}, + {"render": function (data, type, row, meta) { + // return row[3].split(',')[0]; + return row[11]; + }}, + {"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 = ""; + let i = 1; + if ( etype == 'have_produced_tmp_2' || etype == 'have_produced_tmp_1' || etype == 'have_produced_2' || etype == 'have_produced_1' || etype == 'has_a_physiological_stage' || etype == 'has_given_birth_since' ) { i = 0; } + for ( i ; 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 = ""; + let i = 1; + if ( etype == 'have_produced_tmp_2' || etype == 'have_produced_tmp_1' || etype == 'have_produced_2' || etype == 'have_produced_1' || etype == 'has_a_physiological_stage' || etype == 'has_given_birth_since' ) { i = 0; } + for ( i ; 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] == 'Have produced tmp 2' ) { rtype = 'Oligosaccharide_type'; } + else if ( row[2] == 'Have produced tmp 1' ) { rtype = 'Oligosaccharide_name'; } + else if ( row[2] == 'Has product 2' ) { rtype = 'lactationstage'; } + else if ( row[2] == 'Has product 1' ) { rtype = 'sampletype'; } + else if ( row[2] == 'Has given birth since' ) { rtype = 'postpartumage'; } + else if ( row[2] == 'Has a physiological stage' ) { rtype = 'physiologicalstage'; } + else 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]; + }} + ] + }); + }); +} + +export function createTableWithArgRev(ontobiotopeid, etype, tablename) { + + $.getJSON($SCRIPT_ROOT + '/_get_list_relations', + { ontobiotopeid: ontobiotopeid, + type: etype + }, + function success(relations) { + $('#hide').css( 'display', 'block' ); + $('#'+tablename).DataTable().destroy(); + $('#'+tablename).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] == 'Have produced 2' ) { rtype = 'lactationstage'; } + else if ( row[2] == 'Have produced 1' ) { rtype = 'sampletype'; } + else if ( row[2] == 'Has given birth since' ) { rtype = 'postpartumage'; } + else if ( row[2] == 'Has a physiological stage' ) { rtype = 'physiologicalstage'; } + else 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) { + return row[3].split(',')[0]; + }}, + {"render": function (data, type, row, meta) { + return row[2]; + }}, + {"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; + }}, + {"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 elts = row[3].split(', '); + let forms = ""; + let i = 1; + if ( etype == 'have_produced_2' || etype == 'have_produced_1' || etype == 'has_a_physiological_stage' || etype == 'has_given_birth_since' ) { i = 0; } + 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 taxs = row[1].split(', '); + let forms = ""; + let i = 1; + if ( etype == 'have_produced_2' || etype == 'have_produced_1' || etype == 'has_a_physiological_stage' || etype == 'has_given_birth_since' ) { i = 0; } + 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 rtype = ''; + if ( row[2] == 'Have produced 2' ) { rtype = 'lactationstage'; } + else if ( row[2] == 'Have produced 1' ) { rtype = 'sampletype'; } + else if ( row[2] == 'Has given birth since' ) { rtype = 'postpartumage'; } + else if ( row[2] == 'Has a physiological stage' ) { rtype = 'physiologicalstage'; } + else 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[8]; + }}, + {"visible": false, "render": function (data, type, row, meta) { + return row[6]; + }}, + {"visible": false, "render": function (data, type, row, meta) { + return row[9]; + }}, + {"visible": false, "render": function (data, type, row, meta) { + return row[7]; + }} + ] + }); + }); +} diff --git a/templates/about.html b/templates/about.html index 773ab71f26363a732c54c1af6dabbcc990247aaf..3a8882ebe98f716310794c2055b3a45f6e6e3398 100644 --- a/templates/about.html +++ b/templates/about.html @@ -26,6 +26,10 @@ <div style="margin-left: 5%;margin-right: 5%;"> + <div class="alert alert-info" role="alert"> + The content of this page will be adapted at a later date! + </div> + <h2><span style="color: #21517A;">About Omnicrobe</span></h2><br/> <IMG ALIGN="LEFT" SRC="{{ url_for('static', filename='img/textmining.png') }}" width="50" height="50"/><div class="text-info" class="text-info" style="padding-top: 10px;"><h4> Context</h4></div> diff --git a/templates/advancedSearch.html b/templates/advancedSearch.html index 1c5ba1b49297d49ad0e24c5e66cc4b3d6ab102eb..5a8dd6e3fa95db642499b69387e5dc882b9201ac 100644 --- a/templates/advancedSearch.html +++ b/templates/advancedSearch.html @@ -29,13 +29,21 @@ <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') }}" />" - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.css" /> - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.5.2/dist/css/query-builder.default.css" /> + <link rel="stylesheet" href="{{ url_for('static', filename='css/additional.css') }}" /> + <link rel="stylesheet" href="{{ url_for('static', filename='css/research.css') }}" /> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" /> - <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sql-parser-mistic@1.2.3/browser/sql-parser.js"></script> - <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/interactjs@1.6.2/dist/interact.js"></script> - <script src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.5.2/dist/js/query-builder.standalone.js"></script> +<!-- jQuery QueryBuilder --> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-QueryBuilder/2.7.0/css/query-builder.default.min.css" /> + +<!-- Interact.js --> + <script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.10.26/interact.min.js"></script> + +<!-- jQuery QueryBuilder --> + <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-QueryBuilder/2.7.0/js/query-builder.standalone.min.js"></script> + +<!-- Selectize.js --> + <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js"></script> <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/advancedSearch.js') }}"></script> @@ -47,10 +55,24 @@ .rule-value-container{ display: inline } </style> +<body> + + <div class="main-content2"> + <section class="info-section"> + <div class="info-box"> + <div class="search-icon"> + <i class="fas fa-search"></i> + </div> + <h2>Advanced Search</h2> + <p> Build complex queries with multiple criteria and filters. Ideal for research and detailed analysis of oligosaccharide data.</p> + </div> + </section> + + <div style="margin:80px 0;"></div> <div style="margin-left: 5%;margin-right: 5%;"> - <h3><span style="color: #21517A;">Advanced search</span></h3> + <!-- <h3><span style="color: #21517A;">Advanced search</span></h3> --> <div style="margin-left: 2%;margin-right: 2%;"> <div class="d-flex justify-content-center text-info"> diff --git a/templates/footer b/templates/footer index d3a64a525ce6c5f7734f783ea9781993432d6a09..30bad55a01613e3e6727a62ccd8d325cd0f9a78a 100644 --- a/templates/footer +++ b/templates/footer @@ -19,7 +19,7 @@ <table width="100%" border=0> <tr> <td width="25%"><a target="_blank"href="http://maiage.inrae.fr"><img align="left" src="{{ url_for('static', filename='img/logo_maiage_blanc.png') }}" height="30px"/></a></td> - <td width="50%"><div align="center" style="font-size: small;color: white;" class='color'>Copyright © 2023 <a class='color' style="color: white;" target="_blank"href="http://inrae.fr">INRAE</a> - <a class='color' style="color: white;" target="_blank"href="http://maiage.inrae.fr">MaIAGE</a><br/><a class='color' style="color: white;" href="mailto:omnicrobe@inrae.fr">omnicrobe@inrae.fr</a></div></td> + <td width="50%"><div align="center" style="font-size: small;color: white;" class='color'>Copyright © 2024 <a class='color' style="color: white;" target="_blank"href="http://inrae.fr">INRAE</a> - <a class='color' style="color: white;" target="_blank"href="http://maiage.inrae.fr">MaIAGE</a><br/><a class='color' style="color: white;" href="mailto:omnicrobe@inrae.fr">omnicrobe@inrae.fr</a></div></td> <td width="25%"><a target="_blank"href="http://inrae.fr"><img align="right" src="{{ url_for('static', filename='img/logo-inrae-blanc.png') }}" height="30px"/></a></td> </tr> </table> diff --git a/templates/header b/templates/header index 5d0f4acd55ef33c8f7b963a672eca03a6f83ad19..cc1f9af78210f6af9df323a4574d6ecc5d107cee 100644 --- a/templates/header +++ b/templates/header @@ -18,8 +18,8 @@ <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="robots" content="noindex" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> - <meta name="description" property="schema:description" resource="#OMNICROBE" content="Omnicrobe"/> - <title>Omnicrobe</title> + <meta name="description" property="schema:description" resource="#OMNICROBE" content="HoloOligo"/> + <title>HoloOligo</title> <script> $(document).prop('title', 'Omnicrobe'); </script> diff --git a/templates/home.html b/templates/home.html new file mode 100644 index 0000000000000000000000000000000000000000..ea9fa5a02cae665ee18a3fd74267ae8682395250 --- /dev/null +++ b/templates/home.html @@ -0,0 +1,74 @@ +{% extends 'main2' %} {% block content %} +<script type="text/javascript"> + $SCRIPT_ROOT = {{ request.script_root|tojson|safe }}; +</script> + +<script src="{{ url_for('static', filename='js/home.js') }}" defer></script> +<link + rel="stylesheet" + href="{{ url_for('static', filename='css/home.css') }}" +/> + +<!-- Header Section --> +<section class="hero-section py-5 text-white text-center"> + <div class="container"> + <img + src="{{ url_for('static', filename='img/logo_Omnicrobe_3_resize.png') }}" + alt="Omnicrobe" + class="logo mb-4" + /> + <h1 class="display-4 font-weight-bold mb-3"> + Welcome to HoloOligo Database + </h1> + <p class="description mx-auto"> + Explore comprehensive information on milk oligosaccharides across + mammalian species. Discover their roles in nutrition, gut health, and + immune modulation through curated data from scientific sources. + </p> + <a href="about" class="btn btn-info btn-lg mt-3">Learn More</a> + </div> +</section> + +<!-- Data Visualization Section --> +<section class="data-overview my-5"> + <div class="container"> + <h2 class="text-center section-title mb-5">HoloOligo Data Overview</h2> + <div class="row visualization-row"> + <div class="col-md-4"> + <div class="viz-card1"> + <h3>Entities Overview</h3> + <div class="table-wrapper"> + <table id="entitiesTable" class="table table-striped"> + <thead> + <tr> + <th>Entity</th> + <th>Count</th> + </tr> + </thead> + <tbody id="entitiesTableBody"></tbody> + </table> + </div> + </div> + </div> + + <div class="col-md-4"> + <div class="viz-card"> + <h3>Oligosaccharide Types</h3> + <canvas id="taxonsChart"></canvas> + </div> + </div> + + <div class="col-md-4"> + <div class="viz-card"> + <h3>Species Distribution</h3> + <div class="coming-soon"> + <i class="fas fa-chart-line"></i> + <p>Coming Soon</p> + </div> + </div> + </div> + </div> + </div> +</section> + +{% endblock %} diff --git a/templates/index.html b/templates/index.html index a74516bac30cdb4e22a8751ad0ca5c32a7cbb53d..737a32b139fe33bfbb290b3cf165bc990d939b7f 100644 --- a/templates/index.html +++ b/templates/index.html @@ -26,8 +26,8 @@ <div class="row no-gutters bg-light position-relative align-items-center"> <div class="col-md-9 mb-md-0 p-md-4 align-middle"> - <h4 style="color: #21517A;">Omnicrobe is a database of habitats, phenotypes and uses</h4><br/> - <p class="text-justify ">The Omnicrobe database gathers comprehensive information on habitats, phenotypes and usages of microorganisms as automatically extracted from text sources (PubMed, GenBank, DSMZ, CIRM-BIA, CIRM-CFBP, CIRM-Levures). The search offers you access to the information and their sources. <a class="text-info" href='about'>More information.</a> + <h4 style="color: #21517A;">HoloOligo is a database of oligosaccharides</h4><br/> + <p class="text-justify ">The HoloOligo database gathers comprehensive information on milk oligosaccharides of mammalian species as automatically extracted from text sources. The search offers you access to the information and their sources. <a class="text-info" href='about'>More information.</a> </p> </div> <div class="col-md-3 position-relative p-4 pl-md-0"> @@ -42,8 +42,8 @@ <div class="card" style="background-color: #21517A; border-color: #21517A; color: #fff;"> <div class="card-body"> <center><img align="center" src="{{ url_for('static', filename='img/bacteria.png') }}" width="80" height="80"/></br></br> - <h6 class="card-title">Where does a microbe live?<br/><br/><br/><br/></h6> - <a href="searchByTaxon" style="background-color: #fff; border-color: #fff; color: black;" class="btn btn-sm btn-fix">Search Taxon lives in Habitat</a></center> + <h6 class="card-title">Search Oligosaccharide name by Taxon<br/><br/><br/><br/></h6> + <a href="searchByTaxonForOligosaccharideName" style="background-color: #fff; border-color: #fff; color: black;" class="btn btn-sm btn-fix">Search Oligosaccharide name by Taxon</a></center> </div> </div> </div> @@ -51,8 +51,8 @@ <div class="card" style="background-color: #21517A; border-color: #21517A; color: #fff;"> <div class="card-body"> <center><img align="center" src="{{ url_for('static', filename='img/apple.png') }}" width="80" height="80"/></br></br> - <h6 class="card-title">Which microbes can be found in a given habitat?<br/><br/><br/></h6> - <a href="searchByHabitat" style="background-color: #fff; border-color: #fff; color: black;" class="btn btn-sm btn-fix">Search Habitat contains Taxon</a></center> + <h6 class="card-title">Search Taxon by Oligosaccharide name<br/><br/><br/></h6> + <a href="searchByOligosaccharideName" style="background-color: #fff; border-color: #fff; color: black;" class="btn btn-sm btn-fix">Search Taxon by Oligosaccharide name</a></center> </div> </div> </div> @@ -60,8 +60,49 @@ <div class="card" style="background-color: #21517A; border-color: #21517A; color: #fff;"> <div class="card-body"> <center><img align="center" src="{{ url_for('static', filename='img/bacteria.png') }}" width="80" height="80"/></br></br> - <h6 class="card-title">What are the phenotypes of a given microbe?<br/><br/><br/></h6> - <a href="searchByTaxonForPhenotype" style="background-color: #fff; border-color: #fff; color: black;" class="btn btn-sm btn-fix">Search Taxon exhibits Phenotype</a></center> + <h6 class="card-title">Search Oligosaccharide type by Taxon<br/><br/><br/><br/></h6> + <a href="searchByTaxonForOligosaccharideType" style="background-color: #fff; border-color: #fff; color: black;" class="btn btn-sm btn-fix">Search Oligosaccharide type by Taxon</a></center> + </div> + </div> + </div> + <div class="col-sm-2 d-flex"> + <div class="card" style="background-color: #21517A; border-color: #21517A; color: #fff;"> + <div class="card-body"> + <center><img align="center" src="{{ url_for('static', filename='img/apple.png') }}" width="80" height="80"/></br></br> + <h6 class="card-title">Search Taxon by Oligosaccharide type<br/><br/><br/></h6> + <a href="searchByOligosaccharideType" style="background-color: #fff; border-color: #fff; color: black;" class="btn btn-sm btn-fix">Search Taxon by Oligosaccharide type</a></center> + </div> + </div> + </div> + <div class="col-sm-2 d-flex"> + <div class="card" style="background-color: #21517A; border-color: #21517A; color: #fff;"> + <div class="card-body"> + <center><img align="center" src="{{ url_for('static', filename='img/bacteria.png') }}" width="80" height="80"/></br></br> + <h6 class="card-title">Search Physiological stage by Taxon<br/><br/><br/><br/></h6> + <a href="searchByTaxon" style="background-color: #fff; border-color: #fff; color: black;" class="btn btn-sm btn-fix">Search Physiological stage by Taxon</a></center> + </div> + </div> + </div> + <div class="col-sm-2 d-flex"> + <div class="card" style="background-color: #21517A; border-color: #21517A; color: #fff;"> + <div class="card-body"> + <center><img align="center" src="{{ url_for('static', filename='img/apple.png') }}" width="80" height="80"/></br></br> + <h6 class="card-title">Search Taxon by Physiological stage<br/><br/><br/></h6> + <a href="searchByPhysiologicalStage" style="background-color: #fff; border-color: #fff; color: black;" class="btn btn-sm btn-fix">Search Taxon by Physiological stage</a></center> + </div> + </div> + </div> + </div> + + <br/> + + <div class="row"> + <div class="col-sm-2 d-flex"> + <div class="card" style="background-color: #21517A; border-color: #21517A; color: #fff;"> + <div class="card-body"> + <center><img align="center" src="{{ url_for('static', filename='img/bacteria.png') }}" width="80" height="80"/></br></br> + <h6 class="card-title">Search Postpartum age by Taxon<br/><br/><br/></h6> + <a href="searchByTaxonForPostpartum" style="background-color: #fff; border-color: #fff; color: black;" class="btn btn-sm btn-fix">Search Postpartum age by Taxon</a></center> </div> </div> </div> @@ -69,8 +110,26 @@ <div class="card" style="background-color: #21517A; border-color: #21517A; color: #fff;"> <div class="card-body"> <center><img align="center" src="{{ url_for('static', filename='img/life-stage.png') }}" width="80" height="80"/></br></br> - <h6 class="card-title">Which microbes have this phenotype?<br/><br/><br/></h6> - <a href="searchByPhenotype" style="background-color: #fff; border-color: #fff; color: black;" class="btn btn-sm btn-fix">Search Phenotype is exhibited by Taxon</a></center> + <h6 class="card-title">Search Taxon by Postpartum age<br/><br/><br/></h6> + <a href="searchByPostpartum" style="background-color: #fff; border-color: #fff; color: black;" class="btn btn-sm btn-fix">Search Taxon by Postpartum age</a></center> + </div> + </div> + </div> + <div class="col-sm-2 d-flex"> + <div class="card" style="background-color: #21517A; border-color: #21517A; color: #fff;"> + <div class="card-body"> + <center><img align="center" src="{{ url_for('static', filename='img/bacteria.png') }}" width="80" height="80"/></br></br> + <h6 class="card-title">Search Sample type by Taxon<br/><br/><br/><br/></h6> + <a href="searchByTaxonForSampleType" style="background-color: #fff; border-color: #fff; color: black;" class="btn btn-sm btn-fix">Search Sample type by Taxon</a></center> + </div> + </div> + </div> + <div class="col-sm-2 d-flex"> + <div class="card" style="background-color: #21517A; border-color: #21517A; color: #fff;"> + <div class="card-body"> + <center><img align="center" src="{{ url_for('static', filename='img/apple.png') }}" width="80" height="80"/></br></br> + <h6 class="card-title">Search Taxon by Sample type<br/><br/><br/></h6> + <a href="searchBySampleType" style="background-color: #fff; border-color: #fff; color: black;" class="btn btn-sm btn-fix">Search Taxon by Sample type</a></center> </div> </div> </div> @@ -78,17 +137,17 @@ <div class="card" style="background-color: #21517A; border-color: #21517A; color: #fff;"> <div class="card-body"> <center><img align="center" src="{{ url_for('static', filename='img/bacteria.png') }}" width="80" height="80"/></br></br> - <h6 class="card-title">For which use is this microbe studied?<br/><br/><br/></h6> - <a href="searchByTaxonForUse" style="background-color: #fff; border-color: #fff; color: black;" class="btn btn-sm btn-fix">Search Taxon studied for Use</a></center> + <h6 class="card-title">Search Lactation stage by Taxon<br/><br/><br/></h6> + <a href="searchByTaxonForLactation" style="background-color: #fff; border-color: #fff; color: black;" class="btn btn-sm btn-fix">Search Lactation stage by Taxon</a></center> </div> </div> </div> <div class="col-sm-2 d-flex"> <div class="card" style="background-color: #21517A; border-color: #21517A; color: #fff;"> <div class="card-body"> - <center><img align="center" src="{{ url_for('static', filename='img/medicine.png') }}" width="80" height="80"/></br></br> - <h6 class="card-title">Which microbe is involved in this use?<br/><br/><br/></h6> - <a href="searchByUse" style="background-color: #fff; border-color: #fff; color: black;" class="btn btn-sm btn-fix">Search Use involves Taxon</a></center> + <center><img align="center" src="{{ url_for('static', filename='img/life-stage.png') }}" width="80" height="80"/></br></br> + <h6 class="card-title">Search Taxon by Lactation stage<br/><br/><br/></h6> + <a href="searchByLactation" style="background-color: #fff; border-color: #fff; color: black;" class="btn btn-sm btn-fix">Search Taxon by Lactation stage</a></center> </div> </div> </div> diff --git a/templates/main2 b/templates/main2 index 55c99cb7f1ff9368d105f6f59664438c4d5c89c3..0ccd73e0e72e531aa8f220d4f0d7136ceaabdcc9 100644 --- a/templates/main2 +++ b/templates/main2 @@ -17,27 +17,41 @@ <!DOCTYPE html> <html lang="en"> - <!-- CSS --> - <link href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" /> - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> - <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" /> - <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}"> - <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css" /> - <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css" /> - - <!-- JS --> - <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> - <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script> - <script src="https://code.jquery.com/jquery-3.5.1.js"></script> - <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> - <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script> - <script src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js"></script> - <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> - <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script> - <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script> - <script src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.html5.min.js"></script> - <script src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.colVis.min.js"></script> - <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>s +<!-- CSS --> +<link href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" /> +<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> +<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" /> +<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}"> +<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css" /> +<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css" /> +<link rel="stylesheet" href="{{ url_for('static', filename='css/home.css') }}"> +<link rel="stylesheet" href="{{ url_for('static', filename='css/research.css') }}"> +<link rel="stylesheet" href="{{ url_for('static', filename='css/results.css') }}"> +<link rel="stylesheet" href="{{ url_for('static', filename='css/sheet.css') }}"> +<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> + +<!-- JS --> +<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> +<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script> +<script src="https://code.jquery.com/jquery-3.5.1.js"></script> +<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> +<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script> +<script src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js"></script> +<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> +<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script> +<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script> +<script src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.html5.min.js"></script> +<script src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.colVis.min.js"></script> +<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script> +<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> +<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-matrix@1.1.0"></script> +<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-boxplot@1.0.0/dist/chartjs-chart-boxplot.min.js"></script> +<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.js"></script> +<script src="https://unpkg.com/@sgratzl/chartjs-chart-boxplot@3.6.0/build/index.umd.min.js"></script> +<script src="js/chartjs-chart-box-and-violin-plot.min.js"></script> +<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script> + + <body> <div id="left-div"> diff --git a/templates/nav b/templates/nav index 5b8c85a004d2b9f256dd6e6393f4cd204dd05c02..1e16583fbdde94ae204af098479a53ed77299a1f 100644 --- a/templates/nav +++ b/templates/nav @@ -13,52 +13,131 @@ # See the License for the specific language governing permissions and # limitations under the License. --> + <!-- + <a class="dropdown-item" href="searchByTaxonForOligosaccharideName" id="searchByTaxonForOligosaccharideName">Taxon : Oligosaccharide Name</a> + <a class="dropdown-item" href="searchByOligosaccharideName" id="searchByOligosaccharideName">Oligosaccharide Name:Taxon</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="searchByTaxonForOligosaccharideType" id="searchByTaxonForOligosaccharideType">Taxon :Oligosaccharide Type</a> + <a class="dropdown-item" href="searchByOligosaccharideType" id="searchByOligosaccharideType">Oligosaccharide Type : Taxon</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="searchByTaxon" id="searchByTaxon">Taxon : Physiological Stage</a> + <a class="dropdown-item" href="searchByPhysiologicalStage" id="searchByPhysiologicalStage">Physiological Stage :Taxon</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="searchByTaxonForPostpartum" id="searchByTaxonForPostpartum">Taxon : Postpartum Age</a> + <a class="dropdown-item" href="searchByPostpartum" id="searchByPostpartum">Postpartum Age : Taxon</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="searchByTaxonForSampleType" id="searchByTaxonForSampleType">Taxon : Sample Type</a> + <a class="dropdown-item" href="searchBySampleType" id="searchBySampleType">Sample Type : Taxon</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="searchByTaxonForLactation" id="searchByTaxonForLactation">Taxon : Lactation stage</a> + <a class="dropdown-item" href="searchByLactation" id="searchByLactation">Lactation Stage : Taxon</a> + --> + + <!DOCTYPE html> + <html lang="en"> + <head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>HoloOligo</title> + + <style> + /* Style de la Navbar */ + .navbar { + background-color:rgb(25, 70, 101) !important; /* Couleur de fond de la navbar */ + } + + .navbar-nav .nav-link { + font-size: 1.2rem; /* Taille du texte des liens */ + color: white !important; /* Couleur des liens */ + } + + .navbar-nav .nav-link:hover { + color: #ffdd57 !important; /* Couleur au survol des liens */ + } + + /* Personnalisation des éléments du dropdown */ + .dropdown-menu { + background-color:rgb(73, 122, 157); /* Fond du menu déroulant */ + } + + .dropdown-item { + color: white; /* Couleur des éléments du menu déroulant */ + } + + .dropdown-item:hover { + background-color:rgb(255, 255, 255); /* Couleur de fond au survol */ + } + + /* Style du logo de la navbar */ + .navbar-brand img { + height: 40px; /* Ajuster la taille du logo */ + } + + /* Modifier la couleur de fond et du texte du bouton burger sur mobile */ + .navbar-toggler-icon { + background-color: white; /* Couleur du menu hamburger */ + } + + /* Navbar active */ + .nav-item.active .nav-link { + color: #ffdd57 !important; /* Couleur des liens actifs */ + } + </style> + </head> + <body> + <!-- Navbar Section --> + <nav class="navbar navbar-expand-lg navbar-dark bg-info fixed-top"> + <a class="navbar-brand" href="home_page" id="main"> + <img src="{{ url_for('static', filename='img/logo_Omnicrobe_blanc_small.png') }}" /> HoloOligo + </a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + + <div class="collapse navbar-collapse" id="navbarSupportedContent"> + <ul class="navbar-nav mr-auto"> + <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + Search + </a> + <div class="dropdown-menu" aria-labelledby="navbarDropdown"> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="research" id="research">Simple search</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="advancedSearch" id="advancedSearch">Advanced search</a> + </div> + </li> + <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + About + </a> + <div class="dropdown-menu" aria-labelledby="navbarDropdown"> + <a class="dropdown-item" href="about">About</a> + <a class="dropdown-item" href="release">Release Notes</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="help">Help</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="contact" id="contact">Contact</a> + </div> + </li> + </ul> + </div> + </nav> + + <!-- Your page content goes here --> + + <!-- Scripts for Bootstrap --> + <!-- Utilisez jQuery complet pour activer les fonctionnalités Bootstrap --> + <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> + <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script> + </body> + </html> -<nav class="navbar navbar-expand-lg navbar-dark bg-info fixed-top"> + + <!-- Your page content goes here --> - <a class="navbar-brand" href="index" id="main"><img src="{{ url_for('static', filename='img/logo_Omnicrobe_blanc_small.png') }}" /> Omnicrobe</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> - <span class="navbar-toggler-icon"></span> - </button> - - <div class="collapse navbar-collapse" id="navbarSupportedContent"> - <ul class="navbar-nav mr-auto"> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> - Search - </a> - <div class="dropdown-menu" aria-labelledby="navbarDropdown"> - <a class="dropdown-item" href="searchByTaxon" id="searchByTaxon">Taxon lives in Habitat</a> - <a class="dropdown-item" href="searchByHabitat" id="searchByHabitat">Habitat contains Taxon</a> - <div class="dropdown-divider"></div> - <a class="dropdown-item" href="searchByTaxonForPhenotype" id="searchByTaxonForPhenotype">Taxon exhibits Phenotype</a> - <a class="dropdown-item" href="searchByPhenotype" id="searchByPhenotype">Phenotype is exhibited by Taxon</a> - <div class="dropdown-divider"></div> - <a class="dropdown-item" href="searchByTaxonForUse" id="searchByTaxonForUse">Taxon studied for Use</a> - <a class="dropdown-item" href="searchByUse" id="searchByUse">Use involves Taxon</a> - <div class="dropdown-divider"></div> - <a class="dropdown-item" href="advancedSearch" id="advancedSearch">Advanced search</a> - </div> - </li> - <li class="nav-item dropdown"> - <a class="nav-link" href="api" id="navbarDropdown" role="button" aria-haspopup="true"> - Web services - </a> - </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> - About - </a> - <div class="dropdown-menu" aria-labelledby="navbarDropdown"> - <a class="dropdown-item" href="about">About</a> - <a class="dropdown-item" href="release">Release Notes</a> - <div class="dropdown-divider"></div> - <a class="dropdown-item" href="help">Help</a> - <!--a class="dropdown-item" href="demo">Website usage documentation</a--> - <div class="dropdown-divider"></div> - <a class="dropdown-item" href="contact" id="contact">Contact</a> - </div> - </li> - </ul> - </div> -</nav> + <!-- Scripts for Bootstrap --> + <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> + <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script> +</body> +</html> diff --git a/templates/nav_tabs b/templates/nav_tabs index 6e7178120a7194373b0846477a5d4f914f155529..0798a05ebae4ce89c02adb595f3bf49b3c1c132c 100644 --- a/templates/nav_tabs +++ b/templates/nav_tabs @@ -14,30 +14,55 @@ # limitations under the License. --> -<div style="margin-left: 5%; margin-right: 5%;" align="center"> +<div style="margin-left: 2%; margin-right: 2%;" align="center"> <ul class="nav nav-pills flex-column flex-sm-row" id="pills-tab" role="tablist"> + <li class="nav-item" role="presentation" id="searchByTaxonForOligosaccharideName"> + <a class="flex-sm-fill text-sm-center nav-link" aria-current="page" href="searchByTaxonForOligosaccharideName">Taxon -> Oligosaccharide name</a> + </li> + <li> </li> + <li class="nav-item" role="presentation" id="searchByOligosaccharideName"> + <a class="flex-sm-fill text-sm-center nav-link" aria-current="page" href="searchByOligosaccharideName">Oligosaccharide name -> Taxon</a> + </li> + <li> </li> + + <li class="nav-item" role="presentation" id="searchByTaxonForOligosaccharideType"> + <a class="flex-sm-fill text-sm-center nav-link" aria-current="page" href="searchByTaxonForOligosaccharideType">Taxon -> Oligosaccharide type</a> + </li> + <li> </li> + <li class="nav-item" role="presentation" id="searchByOligosaccharideType"> + <a class="flex-sm-fill text-sm-center nav-link" aria-current="page" href="searchByOligosaccharideType">Oligosaccharide type -> Taxon</a> + </li> + <li> </li> <li class="nav-item" role="presentation" id="searchByTaxon"> - <a class="flex-sm-fill text-sm-center nav-link" aria-current="page" href="searchByTaxon">Taxon lives in Habitat</a> + <a class="flex-sm-fill text-sm-center nav-link" aria-current="page" href="searchByTaxon">Taxon -> Physiological stage</a> + </li> + <li> </li> + <li class="nav-item" role="presentation" id="searchByPhysiologicalStage"> + <a class="flex-sm-fill text-sm-center nav-link" aria-current="page" href="searchByPhysiologicalStage">Physiological stage -> Taxon</a> + </li> + <li> </li> + <li class="nav-item" role="presentation" id="searchByTaxonForPostpartum"> + <a class="flex-sm-fill text-sm-center nav-link" aria-current="page" href="searchByTaxonForPostpartum">Taxon -> Postpartum age</a> </li> <li> </li> - <li class="nav-item" role="presentation" id="searchByHabitat"> - <a class="flex-sm-fill text-sm-center nav-link" aria-current="page" href="searchByHabitat">Habitat contains Taxon</a> + <li class="nav-item" role="presentation" id="searchByPostpartum"> + <a class="flex-sm-fill text-sm-center nav-link" aria-current="page" href="searchByPostpartum">Postpartum age -> Taxon</a> </li> <li> </li> - <li class="nav-item" role="presentation" id="searchByTaxonForPhenotype"> - <a class="flex-sm-fill text-sm-center nav-link" aria-current="page" href="searchByTaxonForPhenotype">Taxon exhibits Phenotype</a> + <li class="nav-item" role="presentation" id="searchByTaxonForSampleType"> + <a class="flex-sm-fill text-sm-center nav-link" aria-current="page" href="searchByTaxonForSampleType">Taxon -> Sample type</a> </li> <li> </li> - <li class="nav-item" role="presentation" id="searchByPhenotype"> - <a class="flex-sm-fill text-sm-center nav-link" aria-current="page" href="searchByPhenotype">Phenotype is exhibited by Taxon</a> + <li class="nav-item" role="presentation" id="searchBySampleType"> + <a class="flex-sm-fill text-sm-center nav-link" aria-current="page" href="searchBySampleType">Sample type -> Taxon</a> </li> <li> </li> - <li class="nav-item" role="presentation" id="searchByTaxonForUse"> - <a class="flex-sm-fill text-sm-center nav-link" aria-current="page" href="searchByTaxonForUse">Taxon studied for Use</a> + <li class="nav-item" role="presentation" id="searchByTaxonForLactation"> + <a class="flex-sm-fill text-sm-center nav-link" aria-current="page" href="searchByTaxonForLactation">Taxon -> Lactation stage</a> </li> <li> </li> - <li class="nav-item" role="presentation" id="searchByUse"> - <a class="flex-sm-fill text-sm-center nav-link" aria-current="page" href="searchByUse">Use involves Taxon</a> + <li class="nav-item" role="presentation" id="searchByLactation"> + <a class="flex-sm-fill text-sm-center nav-link" aria-current="page" href="searchByLactation">Lactation stage -> Taxon</a> </li> </ul> </div> diff --git a/templates/release.html b/templates/release.html index 47b66fdf00ebcefc868081a00abc5b3b782616eb..9ae3221c0260a66ff3b1d6ebebef47092635bc2a 100644 --- a/templates/release.html +++ b/templates/release.html @@ -31,92 +31,66 @@ <div class="card" style="border-color: #21517A;"> <div class="card-header text-center" style="background-color: #21517A; border-color: #21517A; color: #fff;"> - Omnicrobe 1.2 (<i>current release</i>) + HoloOligo 0.1 (<i>current release</i>) </div> <div class="card-body"> <p align='justify'> <h5 class="text-info">Information about the data</h5> - <ul> + <!--ul> <li>Ontologies used: <a href="http://agroportal.lirmm.fr/ontologies/ONTOBIOTOPE" target="_blank">OntoBiotope</a> version 2022-04-28 & <a href="https://forgemia.inra.fr/omnicrobe/extended-microorganisms-taxonomy" target="_blank">Taxonomy</a> version 2023-02-24.</li> - </ul> - <div style="margin-left: 15%;margin-right: 15%;"> + </ul--> + <div style="margin-left: 35%;margin-right: 35%;"> <table class="table table-sm table-striped"> - <caption class="text-center">Versions and number of relationships per source</caption> + <caption class="text-center">Number of relationships per type</caption> <thead> <tr> <th scope="col"></th> - <th class="text-right" scope="col">PubMed</th> - <th class="text-right" scope="col">GenBank</th> - <th class="text-right" scope="col">DSMZ</th> - <th class="text-right" scope="col">CIRM-BIA</th> - <th class="text-right" scope="col">CIRM-CFBP</th> - <th class="text-right" scope="col">CIRM-Levures</th> + <th class="text-right" scope="col">WoS / PubMed</th> </tr> </thead> <tbody> <tr> - <th scope="row">Version</th> - <td class="text-right">2023-03-27</td> - <td class="text-right">2023-03-27</td> - <td class="text-right">2023-03-27</td> - <td class="text-right">2023-02-09</td> - <td class="text-right">2023-03-16</td> - <td class="text-right">2022-10-14</td> + <th scope="row">Taxa - Oligo name</th> + <td class="text-center">157</td> </tr> <tr> - <th scope="row">Taxa - Habitat relations</th> - <td class="text-right">764,796</td> - <td class="text-right">268,781</td> - <td class="text-right">51,176</td> - <td class="text-right">682</td> - <td class="text-right">1,223</td> - <td class="text-right">942</td> + <th scope="row">Taxa - Oligo type</th> + <td class="text-center">36</td> </tr> <tr> - <th scope="row">Taxa - Phenotype relations</th> - <td class="text-right">53,377</td> - <td class="text-right">-</td> - <td class="text-right">-</td> - <td class="text-right">-</td> - <td class="text-right">-</td> - <td class="text-right">-</td> + <th scope="row">Taxa - Physiological stage</th> + <td class="text-center">1</td> </tr> <tr> - <th scope="row">Taxa - Use relations</th> - <td class="text-right">18,145</td> - <td class="text-right">-</td> - <td class="text-right">-</td> - <td class="text-right">-</td> - <td class="text-right">-</td> - <td class="text-right">-</td> + <th scope="row">Taxa - Postpartum age</th> + <td class="text-center">12</td> + </tr> + <tr> + <th scope="row">Taxa - Sample type</th> + <td class="text-center">38</td> + </tr> + <tr> + <th scope="row">Taxa - Lactation stage</th> + <td class="text-center">25</td> </tr> </tbody> </table> </div> - <h5 class="text-info">New features and improvements in this release</h5> + <!--h5 class="text-info">New features and improvements in this release</h5> <ul> <li>improved extraction quality</li> <li>fixed bugs</li> <li>updated taxonomy</li> - </ul> - <!-- <h5 class="text-info">Fixed in this release</h5> - <ul> - <li>...</li> - </ul> --> - <!--h5 class="text-info">Source code</h5> - <ul> - <li>Text-mining workflow: GitHub repository (<a class="text-info" target="_blank" href="https://creativecommons.org/licenses/by/2.0/deed.en">CC-BY license</a>).</li> - <li>Web interface: GitHub repository (<a class="text-info" target="_blank" href="https://creativecommons.org/licenses/by/2.0/deed.en">CC-BY license</a>).</li> </ul--> </p> </div> <div class="card-footer text-center" style="background-color: #21517A; border-color: #21517A; color: #fff;"> - 6 April 2023 + 5 June 2024 </div> </div> <br/> - <p><h4 class="text-info">Previous releases</h4></p> + <!--p><h4 class="text-info">Previous releases</h4></p> <div class="card" style="border-color: #21517A;"> <div class="card-header text-center" style="background-color: #21517A; border-color: #21517A; color: #fff;"> @@ -268,15 +242,6 @@ <li>updated taxonomy</li> <li>updated OntoBiotope</li> </ul> - <!-- <h5 class="text-info">Fixed in this release</h5> - <ul> - <li>...</li> - </ul> --> - <!--h5 class="text-info">Source code</h5> - <ul> - <li>Text-mining workflow: GitHub repository (<a class="text-info" target="_blank" href="https://creativecommons.org/licenses/by/2.0/deed.en">CC-BY license</a>).</li> - <li>Web interface: GitHub repository (<a class="text-info" target="_blank" href="https://creativecommons.org/licenses/by/2.0/deed.en">CC-BY license</a>).</li> - </ul--> </p> </div> <div class="card-footer text-center" style="background-color: #21517A; border-color: #21517A; color: #fff;"> @@ -436,7 +401,7 @@ <div class="card-footer text-center" style="background-color: #21517A; border-color: #21517A; color: #fff;"> 22 september 2021 </div> - </div> + </div--> </div> <div style="margin:80px 0;"></div> diff --git a/templates/research.html b/templates/research.html new file mode 100644 index 0000000000000000000000000000000000000000..42badcfcdbca3f165bbd61c0af2d9aa8ddc2b6fc --- /dev/null +++ b/templates/research.html @@ -0,0 +1,128 @@ +{% extends 'main2' %} {% block content %} + +<head> + <link + rel="stylesheet" + href="{{ url_for('static', filename='css/research.css') }}" + /> + <script + src="{{ url_for('static', filename='js/research.js') }}" + defer + ></script> +</head> + +<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> + +<script + type="application/javascript" + src="https://cdn.jsdelivr.net/npm/chartjs-chart-boxplot@4.0.0/dist/chartjs-chart-boxplot.min.js" +></script> + +<script + type="application/javascript" + src="/static/js/chartjs-chart-box-and-violin-plot.min.js" +></script> + +<body> + <div class="main-content2"> + <section class="info-section"> + <div class="info-box"> + <div class="search-icon"> + <i class="fas fa-search"></i> + </div> + <h2>Simple Search</h2> + <p> + Quickly find oligosaccharides by name, type, species, or lactation + stage. Perfect for direct queries when you know what you're looking + for. + </p> + </div> + </section> + + <!-- Section "Getting Started" + <section class="getting-started"> + <div class="info-box"> + <h3>Getting Started</h3> + <ul> + <li>Select your search type from the dropdown menu</li> + <li>Enter your search terms in the search bar</li> + <li>Use the autocomplete suggestions for accurate results</li> + <li>Click search to view your results</li> + </ul> + </div> + </section>--> + + <!-- Simple Search Form --> + <section id="simple-search-section" class="search-section"> + <div class="search-bar2"> + <span>Search By:</span> + <select id="simple-search-type"> + <option value="oligosaccharide_name">Oligosaccharide Name</option> + <option value="oligosaccharide_type">Oligosaccharide Type</option> + <option value="species">Species</option> + <option value="samples">Samples</option> + <option value="lactation-stage">Lactation Stage</option> + </select> + <input + type="text" + id="simple-search" + placeholder="Enter a keyword to begin..." + onkeyup="autocompleteSearch(this.value)" + /> + <div id="autocomplete-suggestions" class="autocomplete-box"></div> + <button class="search-btn" onclick="showSimpleSearchResults()"> + Search + </button> + <div id="suggestion-box" class="autocomplete-box"></div> + </div> + </section> + + <!-- Results Section --> + <section id="results-section" class="results-section"> + <h2>Search Results</h2> + <div id="column-toggles"> + <label + ><input type="checkbox" data-column="0" checked /> Oligosaccharide + Name</label + > + <label + ><input type="checkbox" data-column="1" checked /> Oligosaccharide + Type</label + > + <label><input type="checkbox" data-column="2" checked /> Sample</label> + <label><input type="checkbox" data-column="3" checked /> Species</label> + <label + ><input type="checkbox" data-column="4" checked /> Lactation + Stage</label + > + <label><input type="checkbox" data-column="5" checked /> Details</label> + </div> + + <table class="results-table"> + <thead> + <tr> + <th onclick="sortTable(0)"> + Oligosaccharide Name <i class="fas fa-sort"></i> + </th> + <th onclick="sortTable(1)"> + Oligosaccharide Type <i class="fas fa-sort"></i> + </th> + <th onclick="sortTable(2)">Sample <i class="fas fa-sort"></i></th> + <th onclick="sortTable(3)">Species <i class="fas fa-sort"></i></th> + <th onclick="sortTable(4)"> + Lactation Stage <i class="fas fa-sort"></i> + </th> + <th onclick="sortTable(5)">Details <i class="fas fa-sort"></i></th> + </tr> + </thead> + <tbody id="results-body"> + <!-- Rows will be dynamically populated by JavaScript --> + </tbody> + </table> + + <div id="pagination" style="margin-top: 20px; text-align: center"></div> + </section> + </div> +</body> + +{% endblock %} diff --git a/templates/searchByLactationStage.html b/templates/searchByLactationStage.html new file mode 100644 index 0000000000000000000000000000000000000000..ed22462aa4bf79753e3cd71d92a3d105c5b1dff8 --- /dev/null +++ b/templates/searchByLactationStage.html @@ -0,0 +1,142 @@ +<!-- +# Copyright 2022 Sandra Dérozier (INRAE) +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +--> + +{% extends 'main' %} +{% block content %} +<section> + + <script type=text/javascript> + $SCRIPT_ROOT = {{ request.script_root|tojson|safe }}; + </script> + + <script> + var lactation = JSON.parse('{{ lactation | tojson | safe }}'); + var taxon = JSON.parse('{{ taxon | tojson | safe }}'); + var version = JSON.parse('{{ version | tojson | safe }}'); + var alvisir = JSON.parse('{{ alvisir | tojson | safe }}'); + </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/searchByLactationStage.js') }}"></script> + + <div style="margin:30px 0;"></div> + + <div style="margin-left: 5%;margin-right: 5%;"> + <h3><span style="color: #21517A;">Lactation stage --> Taxon</span></h3> + <div style="margin-left: 2%;margin-right: 2%;"> + <div class="d-flex justify-content-center text-info"> + <div id="spinner_lactation_taxon" class="spinner-border" role="status" style="display: none;"> + <span class="sr-only">Loading...</span> + </div> + <div id="spinner_lactation_taxon2" style="display: none;"><strong> Loading...</strong></div> + </div> + <div style="margin:40px 0;"></div> + </div> + + <div class="container"> + <div class="row justify-content-center"> + <div class="col-8"> + <div class="input-group"> + <label class="button-select input-group-text" for="relationTaxonByLactation">Search relations by lactation stage</label> + <select class="form-select" id="search_lactation"></select> + <button id="filter_lactation_taxon" type="button" class="button-select-filter btn btn-info" data-toggle="collapse" data-target="#demo" disabled>Filter selection</button> + </div> + </div> + </div> + <!-- <div class="row justify-content-center"> + <div class="col-8"> + <div class="p-2"> + <img width="3%" src="{{ url_for('static', filename='img/treeTest.png') }}" data-toggle="modal" data-target="#treeModalHabitat" style="cursor: pointer;"><a class="link-info link-cur" data-toggle="modal" data-target="#treeModalHabitat">OntoBiotope navigation</a> + </div> + </div> + </div> --> + </div> + + <div id="demo" class="collapse" style="margin-top: 1%;" align="center"> + <table align="center"> + <tr id="filter_col4" data-column="3"> + <!-- <td> + <div style="float:left;">Filter by sources </div> + <div style="float:left;" title="Available sources: PubMed, GenBank, DSMZ, CIRM-BIA, CIRM-CFBP, CIRM-Levures"> + <svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-info-circle-fill' fill='currentColor' xmlns='http://www.w3.org/2000/svg'> \ + <path fill-rule='evenodd' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/> \ + </svg> + </div> + </td> --> + <!-- <td align="center"><input type="text" class="column_source" id="sources_ht"></td> --> + <td> Filter by Taxon </td> + <td align="center"><input type="text" class="column_filter" id="taxon_lt"></td> + <!-- <td> QPS only </td> + <td><input type="checkbox" name="qps_ht" id="qps_ht" value="yes" /></td> --> + </tr> + </table> + <small id="help" class="form-text text-muted"><b>Note:</b> to filter by taxon, you can use ";" for "or" (example: "sows;gorilla" for taxon).</small> + </div> + <div id="hide" style="display:none"> + <br/> + <table id="results_lactation_taxon" class="display responsive nowrap collapsed" style="width:100%"> <!-- visibility="none" --> + <thead> + <tr> + <th>Source text</th> + <th>Reference class</th> + <th>Relation type</th> + <th>Scientific name of taxon</th> + <th>QPS</th> + <th>Source</th> + <th>Occurrence in text (lactation)</th> + <th>Occurrence in text (taxon)</th> + <th>Full source text</th> + <th>ID Reference</th> + <th>Reference hierarchical path</th> + <th>TaxonID</th> + <th>Taxonomy hierarchical path</th> + </tr> + </thead> + </table> + </div> + </div> + + <div style="margin:80px 0;"></div> + + <!-- Tree navigation (modal) --> + <!-- <div class="modal fade" id="treeModalHabitat" tabindex="-1" aria-labelledby="treeModalHabitatLabel" aria-hidden="true"> + <div class="modal-dialog modal-dialog-centered modal-lg"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title text-info" id="treeModalHabitatLabel">OntoBiotope navigation</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + <div class="input-group"> + <label style="background-color: #21517A; border-color: #21517A; color: #fff;" class="input-group-text" for="searchtreehabitat">Search OntoBiotope class</label> + <input type="search" class="form-control" id="searchtreehabitat"> + </div> + <div id="habitattree"></div> + </div> + </div> + </div> + </div> --> + +</section> +{% endblock %} diff --git a/templates/searchByOligosaccharideName.html b/templates/searchByOligosaccharideName.html new file mode 100644 index 0000000000000000000000000000000000000000..8381b8210fee24ea66e73cbf9e67830a8a920da6 --- /dev/null +++ b/templates/searchByOligosaccharideName.html @@ -0,0 +1,103 @@ +<!-- +# Copyright 2022 Sandra Dérozier (INRAE) +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +--> + +{% extends 'main' %} +{% block content %} +<section> + + <script type=text/javascript> + $SCRIPT_ROOT = {{ request.script_root|tojson|safe }}; + </script> + + <script> + var oligoname = JSON.parse('{{ oligoname | tojson | safe }}'); + var taxon = JSON.parse('{{ taxon | tojson | safe }}'); + var version = JSON.parse('{{ version | tojson | safe }}'); + var alvisir = JSON.parse('{{ alvisir | tojson | safe }}'); + </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/searchByOligosaccharideName.js') }}"></script> + + <div style="margin:30px 0;"></div> + + <div style="margin-left: 5%;margin-right: 5%;"> + <h3><span style="color: #21517A;">Oligosaccharide Name --> Taxon</span></h3> + <div style="margin-left: 2%;margin-right: 2%;"> + <div class="d-flex justify-content-center text-info"> + <div id="spinner_oligoname_taxon" class="spinner-border" role="status" style="display: none;"> + <span class="sr-only">Loading...</span> + </div> + <div id="spinner_oligoname_taxon2" style="display: none;"><strong> Loading...</strong></div> + </div> + <div style="margin:40px 0;"></div> + </div> + + <div class="container"> + <div class="row justify-content-center"> + <div class="col-8"> + <div class="input-group"> + <label class="button-select input-group-text" for="relationTaxonByOligoname">Search relations by oligosaccharide Name</label> + <select class="form-select" id="search_oligoname"></select> + <button id="filter_oligoname_taxon" type="button" class="button-select-filter btn btn-info" data-toggle="collapse" data-target="#demo" disabled>Filter selection</button> + </div> + </div> + </div> + </div> + + <div id="demo" class="collapse" style="margin-top: 1%;" align="center"> + <table align="center"> + <tr id="filter_col4" data-column="3"> + <td> Filter by Taxon </td> + <td align="center"><input type="text" class="column_filter" id="taxon_lt"></td> + </tr> + </table> + <small id="help" class="form-text text-muted"><b>Note:</b> to filter by taxon, you can use ";" for "or" (example: "arctos;maritimus" for taxon).</small> + </div> + <div id="hide" style="display:none"> + <br/> + <table id="results_oligoname_taxon" class="display responsive nowrap collapsed" style="width:100%"> + <thead> + <tr> + <th>Source text</th> + <th>Reference class</th> + <th>Relation type</th> + <th>Scientific name of taxon</th> + <th>QPS</th> + <th>Source</th> + <th>Occurrence in text (oligosaccharide name)</th> + <th>Occurrence in text (taxon)</th> + <th>Full source text</th> + <th>ID Reference</th> + <th>Reference hierarchical path</th> + <th>TaxonID</th> + <th>Taxonomy hierarchical path</th> + </tr> + </thead> + </table> + </div> + </div> + + <div style="margin:80px 0;"></div> + +</section> +{% endblock %} diff --git a/templates/searchByOligosaccharideType.html b/templates/searchByOligosaccharideType.html new file mode 100644 index 0000000000000000000000000000000000000000..6e5796ee69518da0ac9748bc79b254e9d06db0cd --- /dev/null +++ b/templates/searchByOligosaccharideType.html @@ -0,0 +1,103 @@ +<!-- +# Copyright 2022 Sandra Dérozier (INRAE) +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +--> + +{% extends 'main' %} +{% block content %} +<section> + + <script type=text/javascript> + $SCRIPT_ROOT = {{ request.script_root|tojson|safe }}; + </script> + + <script> + var oligotype = JSON.parse('{{ oligotype | tojson | safe }}'); + var taxon = JSON.parse('{{ taxon | tojson | safe }}'); + var version = JSON.parse('{{ version | tojson | safe }}'); + var alvisir = JSON.parse('{{ alvisir | tojson | safe }}'); + </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/searchByOligosaccharideType.js') }}"></script> + + <div style="margin:30px 0;"></div> + + <div style="margin-left: 5%;margin-right: 5%;"> + <h3><span style="color: #21517A;">Oligosaccharide Type --> Taxon</span></h3> + <div style="margin-left: 2%;margin-right: 2%;"> + <div class="d-flex justify-content-center text-info"> + <div id="spinner_oligotype_taxon" class="spinner-border" role="status" style="display: none;"> + <span class="sr-only">Loading...</span> + </div> + <div id="spinner_oligotype_taxon2" style="display: none;"><strong> Loading...</strong></div> + </div> + <div style="margin:40px 0;"></div> + </div> + + <div class="container"> + <div class="row justify-content-center"> + <div class="col-8"> + <div class="input-group"> + <label class="button-select input-group-text" for="relationTaxonByOligotype">Search relations by oligosaccharide Type</label> + <select class="form-select" id="search_oligotype"></select> + <button id="filter_oligotype_taxon" type="button" class="button-select-filter btn btn-info" data-toggle="collapse" data-target="#demo" disabled>Filter selection</button> + </div> + </div> + </div> + </div> + + <div id="demo" class="collapse" style="margin-top: 1%;" align="center"> + <table align="center"> + <tr id="filter_col4" data-column="3"> + <td> Filter by Taxon </td> + <td align="center"><input type="text" class="column_filter" id="taxon_lt"></td> + </tr> + </table> + <small id="help" class="form-text text-muted"><b>Note:</b> to filter by taxon, you can use ";" for "or" (example: "elephas;ovis" for taxon).</small> + </div> + <div id="hide" style="display:none"> + <br/> + <table id="results_oligotype_taxon" class="display responsive nowrap collapsed" style="width:100%"> + <thead> + <tr> + <th>Source text</th> + <th>Reference class</th> + <th>Relation type</th> + <th>Scientific name of taxon</th> + <th>QPS</th> + <th>Source</th> + <th>Occurrence in text (oligosaccharide type)</th> + <th>Occurrence in text (taxon)</th> + <th>Full source text</th> + <th>ID Reference</th> + <th>Reference hierarchical path</th> + <th>TaxonID</th> + <th>Taxonomy hierarchical path</th> + </tr> + </thead> + </table> + </div> + </div> + + <div style="margin:80px 0;"></div> + +</section> +{% endblock %} diff --git a/templates/searchByHabitat.html b/templates/searchByPhysiologicalStage.html similarity index 75% rename from templates/searchByHabitat.html rename to templates/searchByPhysiologicalStage.html index d6880610c1455c4209a814e27bc344b2c91b187d..d64b8d9727b1022ee81dfe18273822c0f55657d5 100644 --- a/templates/searchByHabitat.html +++ b/templates/searchByPhysiologicalStage.html @@ -23,10 +23,8 @@ </script> <script> - var habitat = JSON.parse('{{ habitat | tojson | safe }}'); + var stage = JSON.parse('{{ stage | tojson | safe }}'); var taxon = JSON.parse('{{ taxon | tojson | safe }}'); - var qps = JSON.parse('{{ qps | tojson | safe }}'); - var sources = JSON.parse('{{ sources | tojson | safe }}'); var version = JSON.parse('{{ version | tojson | safe }}'); var alvisir = JSON.parse('{{ alvisir | tojson | safe }}'); </script> @@ -38,18 +36,18 @@ <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> + <script type="module" src="{{ url_for('static', filename='js/searchByPhysiologicalStage.js') }}"></script> <div style="margin:30px 0;"></div> <div style="margin-left: 5%;margin-right: 5%;"> - <h3><span style="color: #21517A;">Habitat contains Taxon</span></h3> + <h3><span style="color: #21517A;">Physiological Stage --> Taxon</span></h3> <div style="margin-left: 2%;margin-right: 2%;"> <div class="d-flex justify-content-center text-info"> - <div id="spinner_habitat_taxon" class="spinner-border" role="status" style="display: none;"> + <div id="spinner_stage_taxon" class="spinner-border" role="status" style="display: none;"> <span class="sr-only">Loading...</span> </div> - <div id="spinner_habitat_taxon2" style="display: none;"><strong> Loading...</strong></div> + <div id="spinner_stage_taxon2" style="display: none;"><strong> Loading...</strong></div> </div> <div style="margin:40px 0;"></div> </div> @@ -58,57 +56,57 @@ <div class="row justify-content-center"> <div class="col-8"> <div class="input-group"> - <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> + <label class="button-select input-group-text" for="relationTaxonByStage">Search relations by physiological stage</label> + <select class="form-select" id="search_stage"></select> + <button id="filter_stage_taxon" type="button" class="button-select-filter btn btn-info" data-toggle="collapse" data-target="#demo" disabled>Filter selection</button> </div> </div> </div> - <div class="row justify-content-center"> + <!-- <div class="row justify-content-center"> <div class="col-8"> <div class="p-2"> <img width="3%" src="{{ url_for('static', filename='img/treeTest.png') }}" data-toggle="modal" data-target="#treeModalHabitat" style="cursor: pointer;"><a class="link-info link-cur" data-toggle="modal" data-target="#treeModalHabitat">OntoBiotope navigation</a> </div> </div> - </div> + </div> --> </div> <div id="demo" class="collapse" style="margin-top: 1%;" align="center"> <table align="center"> <tr id="filter_col4" data-column="3"> - <td> + <!-- <td> <div style="float:left;">Filter by sources </div> <div style="float:left;" title="Available sources: PubMed, GenBank, DSMZ, CIRM-BIA, CIRM-CFBP, CIRM-Levures"> <svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-info-circle-fill' fill='currentColor' xmlns='http://www.w3.org/2000/svg'> \ <path fill-rule='evenodd' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/> \ </svg> </div> - </td> - <td align="center"><input type="text" class="column_source" id="sources_ht"></td> + </td> --> + <!-- <td align="center"><input type="text" class="column_source" id="sources_ht"></td> --> <td> Filter by Taxon </td> <td align="center"><input type="text" class="column_filter" id="taxon_ht"></td> - <td> QPS only </td> - <td><input type="checkbox" name="qps_ht" id="qps_ht" value="yes" /></td> + <!-- <td> QPS only </td> + <td><input type="checkbox" name="qps_ht" id="qps_ht" value="yes" /></td> --> </tr> </table> - <small id="help" class="form-text text-muted"><b>Note:</b> to filter by sources and to filter by taxon, you can use ";" for "or" (example: "genbank;dsmz" for sources and "delbrueckii;thermophilus" for taxon).</small> + <small id="help" class="form-text text-muted"><b>Note:</b> to filter by taxon, you can use ";" for "or" (example: "delbrueckii;thermophilus" for taxon).</small> </div> <div id="hide" style="display:none"> <br/> - <table id="results_habitat_taxon" class="display responsive nowrap collapsed" style="width:100%"> <!-- visibility="none" --> + <table id="results_stage_taxon" class="display responsive nowrap collapsed" style="width:100%"> <!-- visibility="none" --> <thead> <tr> <th>Source text</th> - <th>OntoBiotope class</th> + <th>Reference class</th> <th>Relation type</th> <th>Scientific name of taxon</th> <th>QPS</th> <th>Source</th> - <th>Occurrence in text (habitat)</th> + <th>Occurrence in text (stage)</th> <th>Occurrence in text (taxon)</th> <th>Full source text</th> - <th>ID OntoBiotope</th> - <th>OntoBiotope hierarchical path</th> + <th>ID Reference</th> + <th>Reference hierarchical path</th> <th>TaxonID</th> <th>Taxonomy hierarchical path</th> </tr> @@ -120,7 +118,7 @@ <div style="margin:80px 0;"></div> <!-- Tree navigation (modal) --> - <div class="modal fade" id="treeModalHabitat" tabindex="-1" aria-labelledby="treeModalHabitatLabel" aria-hidden="true"> + <!-- <div class="modal fade" id="treeModalHabitat" tabindex="-1" aria-labelledby="treeModalHabitatLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-header"> @@ -138,7 +136,7 @@ </div> </div> </div> - </div> + </div> --> </section> {% endblock %} diff --git a/templates/searchByPhenotype.html b/templates/searchByPostpartum.html similarity index 77% rename from templates/searchByPhenotype.html rename to templates/searchByPostpartum.html index 4aa96ca26f89a692abc7e1fab997ab3f2c2bd953..a29e0ee8ca25cbe8c90e9e34afef3b7af6b8ca47 100644 --- a/templates/searchByPhenotype.html +++ b/templates/searchByPostpartum.html @@ -23,9 +23,8 @@ </script> <script> - var phenotype = JSON.parse('{{ phenotype | tojson | safe }}'); + var postpartum = JSON.parse('{{ postpartum | tojson | safe }}'); var taxon = JSON.parse('{{ taxon | tojson | safe }}'); - var qps = JSON.parse('{{ qps | tojson | safe }}'); var version = JSON.parse('{{ version | tojson | safe }}'); var alvisir = JSON.parse('{{ alvisir | tojson | safe }}'); </script> @@ -36,18 +35,18 @@ <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> + <script type="module" src="{{ url_for('static', filename='js/searchByPostpartum.js') }}"></script> <div style="margin:30px 0;"></div> <div style="margin-left: 5%;margin-right: 5%;"> - <h3><span style="color: #21517A;">Phenotype is exhibited by Taxon</span></h3> + <h3><span style="color: #21517A;">Postpartum Age --> Taxon</span></h3> <div style="margin-left: 2%;margin-right: 2%;"> <div class="d-flex justify-content-center text-info"> - <div id="spinner_phenotype_taxon" class="spinner-border" role="status" style="display: none;"> + <div id="spinner_postpartum_taxon" class="spinner-border" role="status" style="display: none;"> <span class="sr-only">Loading...</span> </div> - <div id="spinner_phenotype_taxon2" style="display: none;"><strong> Loading...</strong></div> + <div id="spinner_postpartum_taxon2" style="display: none;"><strong> Loading...</strong></div> </div> <div style="margin:40px 0;"></div> </div> @@ -56,19 +55,19 @@ <div class="row justify-content-center"> <div class="col-8"> <div class="input-group"> - <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> + <label class="button-select input-group-text" for="relationTaxonByPostpartum">Search relations by postpartum</label> + <select class="form-select" id="search_postpartum"></select> + <button id="filter_postpartum_taxon" type="button" class="button-select-filter btn btn-info" data-toggle="collapse" data-target="#demo" disabled>Filter selection</button> </div> </div> </div> - <div class="row justify-content-center"> + <!-- <div class="row justify-content-center"> <div class="col-8"> <div class="p-2"> <img width="3%" src="{{ url_for('static', filename='img/treeTest.png') }}" data-toggle="modal" data-target="#treeModalPhenotype" style="cursor: pointer;"><a class="link-info link-cur" data-toggle="modal" data-target="#treeModalPhenotype">OntoBiotope navigation</a> </div> </div> - </div> + </div> --> </div> <div id="demo" class="collapse" style="margin-top: 1%;" align="center"> @@ -76,15 +75,15 @@ <tr id="filter_col4" data-column="3"> <td> Filter by Taxon </td> <td align="center"><input type="text" class="column_filter" id="taxon_pt"></td> - <td> QPS only </td> - <td><input type="checkbox" name="qps_pt" id="qps_pt" value="yes" /></td> + <!-- <td> QPS only </td> + <td><input type="checkbox" name="qps_pt" id="qps_pt" value="yes" /></td> --> </tr> </table> - <small id="help" class="form-text text-muted"><b>Note:</b> to filter by taxon, you can use ";" for "or" (example: "delbrueckii;thermophilus" for taxon).</small> + <small id="help" class="form-text text-muted"><b>Note:</b> to filter by taxon, you can use ";" for "or" (example: "rat;cows" for taxon).</small> </div> <div id="hide" style="display:none"> <br/> - <table id="results_phenotype_taxon" class="display responsive nowrap collapsed" style="width:100%"> <!-- width="100%" visibility="none"--> + <table id="results_postpartum_taxon" class="display responsive nowrap collapsed" style="width:100%"> <!-- width="100%" visibility="none"--> <thead> <tr> <th>Source text</th> @@ -93,7 +92,7 @@ <th>Scientific name of taxon</th> <th>QPS</th> <th>Source</th> - <th>Occurrence in text (phenotype)</th> + <th>Occurrence in text (postpartum)</th> <th>Occurrence in text (taxon)</th> <th>Full source text</th> <th>ID OntoBiotope</th> @@ -109,7 +108,7 @@ <div style="margin:80px 0;"></div> <!-- Tree navigation (modal) --> - <div class="modal fade" id="treeModalPhenotype" tabindex="-1" aria-labelledby="treeModalPhenotypeLabel" aria-hidden="true"> + <!-- <div class="modal fade" id="treeModalPhenotype" tabindex="-1" aria-labelledby="treeModalPhenotypeLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-header"> @@ -127,7 +126,7 @@ </div> </div> </div> - </div> + </div> --> </section> {% endblock %} diff --git a/templates/searchByUse.html b/templates/searchBySampleType.html similarity index 78% rename from templates/searchByUse.html rename to templates/searchBySampleType.html index da7b9711e9f8b18c4bb1ab507979d44d9f11f72b..b955e7dd8cbb0cb31ad78f3c4eb45d65c211a1c5 100644 --- a/templates/searchByUse.html +++ b/templates/searchBySampleType.html @@ -23,9 +23,8 @@ </script> <script> - var use = JSON.parse('{{ use | tojson | safe }}'); + var sample = JSON.parse('{{ sample | tojson | safe }}'); var taxon = JSON.parse('{{ taxon | tojson | safe }}'); - var qps = JSON.parse('{{ qps | tojson | safe }}'); var version = JSON.parse('{{ version | tojson | safe }}'); var alvisir = JSON.parse('{{ alvisir | tojson | safe }}'); </script> @@ -37,19 +36,19 @@ <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> + <script type="module" src="{{ url_for('static', filename='js/searchBySampleType.js') }}"></script> <div style="margin:30px 0;"></div> <div style="margin-left: 5%;margin-right: 5%;"> - <h3><span style="color: #21517A;">Use involves Taxon</span></h3> + <h3><span style="color: #21517A;">Sample Type --> Taxon</span></h3> <div style="margin-left: 2%;margin-right: 2%;"> <div class="d-flex justify-content-center text-info"> - <div id="spinner_use_taxon" class="spinner-border" role="status" style="display: none;"> + <div id="spinner_sample_taxon" class="spinner-border" role="status" style="display: none;"> <span class="sr-only">Loading...</span> </div> - <div id="spinner_use_taxon2" style="display: none;"><strong> Loading...</strong></div> + <div id="spinner_sample_taxon2" style="display: none;"><strong> Loading...</strong></div> </div> <div style="margin:40px 0;"></div> </div> @@ -58,19 +57,19 @@ <div class="row justify-content-center"> <div class="col-8"> <div class="input-group"> - <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> + <label class="button-select input-group-text" for="relationTaxonBySample">Search relations by sample</label> + <select class="form-select" id="search_sample"></select> + <button id="filter_sample_taxon" type="button" class="button-select-filter btn btn-info" data-toggle="collapse" data-target="#demo" disabled>Filter selection</button> </div> </div> </div> - <div class="row justify-content-center"> + <!-- <div class="row justify-content-center"> <div class="col-8"> <div class="p-2"> <img width="3%" src="{{ url_for('static', filename='img/treeTest.png') }}" data-toggle="modal" data-target="#treeModalUse" style="cursor: pointer;"><a class="link-info link-cur" data-toggle="modal" data-target="#treeModalUse">OntoBiotope navigation</a> </div> </div> - </div> + </div> --> </div> <div id="demo" class="collapse" style="margin-top: 1%;" align="center"> @@ -78,15 +77,15 @@ <tr id="filter_col4" data-column="3"> <td> Filter by Taxon </td> <td align="center"><input type="text" class="column_filter" id="taxon_ut"></td> - <td> QPS only </td> - <td><input type="checkbox" name="qps_ut" id="qps_ut" value="yes" /></td> + <!-- <td> QPS only </td> + <td><input type="checkbox" name="qps_ut" id="qps_ut" value="yes" /></td> --> </tr> </table> - <small id="help" class="form-text text-muted"><b>Note:</b> to filter by taxon, you can use ";" for "or" (example: "delbrueckii;thermophilus" for taxon).</small> + <small id="help" class="form-text text-muted"><b>Note:</b> to filter by taxon, you can sample ";" for "or" (example: "cows;dog" for taxon).</small> </div> <div id="hide" style="display:none"> <br/> - <table id="results_use_taxon" class="display responsive nowrap collapsed" style="width:100%"> <!--width="100%" visibility="none"--> + <table id="results_sample_taxon" class="display responsive nowrap collapsed" style="width:100%"> <!--width="100%" visibility="none"--> <thead> <tr> <th>Source text</th> @@ -95,7 +94,7 @@ <th>Scientific name of taxon</th> <th>QPS</th> <th>Source</th> - <th>Occurrence in text (use)</th> + <th>Occurrence in text (sample)</th> <th>Occurrence in text (taxon)</th> <th>Full source text</th> <th>ID OntoBiotope</th> @@ -111,7 +110,7 @@ <div style="margin:80px 0;"></div> <!-- Tree navigation (modal) --> - <div class="modal fade" id="treeModalUse" tabindex="-1" aria-labelledby="treeModalUseLabel" aria-hidden="true"> + <!-- <div class="modal fade" id="treeModalUse" tabindex="-1" aria-labelledby="treeModalUseLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-header"> @@ -129,7 +128,7 @@ </div> </div> </div> - </div> + </div> --> </section> {% endblock %} diff --git a/templates/searchByTaxon.html b/templates/searchByTaxon.html index 95b66d14a8b2cba0dba87262620bb585d1b004a2..17c9c74bb7d0ed67f331cc51a8dc69bf0f866c88 100644 --- a/templates/searchByTaxon.html +++ b/templates/searchByTaxon.html @@ -24,9 +24,7 @@ <script> var taxon = JSON.parse('{{ taxon | tojson | safe }}'); - var habitat = JSON.parse('{{ habitat | tojson | safe }}'); - var qps = JSON.parse('{{ qps | tojson | safe }}'); - var sources = JSON.parse('{{ sources | tojson | safe }}'); + var stage = JSON.parse('{{ stage | tojson | safe }}'); var version = JSON.parse('{{ version | tojson | safe }}'); var alvisir = JSON.parse('{{ alvisir | tojson | safe }}'); </script> @@ -41,12 +39,13 @@ <div style="margin:30px 0;"></div> <div style="margin-left: 5%;margin-right: 5%;"> - <h3><span style="color: #21517A;">Taxon lives in Habitat</span></h3> + <!-- <h3><span style="color: #21517A;">Taxon lives in stage</span></h3> --> + <h3><span style="color: #21517A;">Taxon -> Physiological Stage</span></h3> <div class="d-flex justify-content-center text-info"> - <div id="spinner_taxon_habitat" class="spinner-border" role="status" style="display: none;"> + <div id="spinner_taxon_stage" class="spinner-border" role="status" style="display: none;"> <span class="sr-only">Loading...</span> </div> - <div id="spinner_taxon_habitat2" style="display: none;"><strong> Loading...</strong></div> + <div id="spinner_taxon_stage2" style="display: none;"><strong> Loading...</strong></div> </div> <div style="margin:40px 0;"> @@ -54,9 +53,9 @@ <div class="row justify-content-center"> <div class="col-8"> <div class="input-group mb-3"> - <label class="button-select input-group-text" for="relationHabitatByTaxon">Search relations by taxon</label> + <label class="button-select input-group-text" for="relationstageByTaxon">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> + <button id="filter_taxon_stage" type="button" class="btn btn-info button-select-filter" data-toggle="collapse" data-target="#demo" disabled>Filter selection</button> </div> </div> </div> @@ -65,7 +64,7 @@ <div id="demo" class="collapse" style="margin-top: 1%;" align="center"> <table align="center"> <tr id="filter_col4" data-column="3"> - <td> + <!-- <td> <div style="float:left;">Filter by sources </div> <div style="float:left;" title="Available sources: PubMed, GenBank, DSMZ, CIRM-BIA, CIRM-CFBP, CIRM-Levures"> <svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-info-circle-fill' fill='currentColor' xmlns='http://www.w3.org/2000/svg'> \ @@ -73,33 +72,33 @@ </svg> </div> </td> - <td align="center"><input type="text" class="column_source" id="sources_th"></td> - <td> Filter by Habitat </td> - <td align="center"><input type="text" class="column_filter" id="habitat_th"></td> - <td> QPS only </td> - <td><input type="checkbox" name="qps_th" id="qps_th" value="yes" /></td> + <td align="center"><input type="text" class="column_source" id="sources_th"></td> --> + <td> Filter by Physiological stage </td> + <td align="center"><input type="text" class="column_filter" id="stage_th"></td> + <!-- <td> QPS only </td> + <td><input type="checkbox" name="qps_th" id="qps_th" value="yes" /></td> --> </tr> </table> - <small id="help" class="form-text text-muted"><b>Note:</b> to filter by sources and to filter by habitat, you can use ";" for "or" (example: "genbank;dsmz" for sources and "cow;horse" for habitat).</small><br/> + <small id="help" class="form-text text-muted"><b>Note:</b> to filter by stage, you can use ";" for "or" (example: "bred;multiparous" for physiological stage).</small><br/> </div> <div id="hide" style="display:none"> - <table id="results_taxon_habitat" class="display responsive nowrap collapsed" style="width:100%"> <!--width="100%" visibility="none"--> + <table id="results_taxon_stage" class="display responsive nowrap collapsed" style="width:100%"> <!--width="100%" visibility="none"--> <thead> <tr> <th>Source text</th> <th>Scientific name of taxon</th> <th>Relation type</th> - <th>OntoBiotope class</th> + <th>Reference class</th> <th>QPS</th> <th>Source</th> <th>Occurrence in text (taxon)</th> - <th>Occurrence in text (habitat)</th> + <th>Occurrence in text (physiological stage)</th> <th>Full source text</th> <th>TaxonID</th> <th>Taxonomy hierarchical path</th> - <th>ID OntoBiotope</th> - <th>OntoBiotope hierarchical path</th> + <th>ID Reference</th> + <th>Reference hierarchical path</th> </tr> </thead> </table> diff --git a/templates/searchByTaxonForPhenotype.html b/templates/searchByTaxonForLactation.html similarity index 68% rename from templates/searchByTaxonForPhenotype.html rename to templates/searchByTaxonForLactation.html index a35c6507b377b10271a098ed1c125c8b15fd26f9..7edb31ad2b76797fe8ee2858af89744d153e5884 100644 --- a/templates/searchByTaxonForPhenotype.html +++ b/templates/searchByTaxonForLactation.html @@ -2,7 +2,7 @@ # Copyright 2022 Sandra Dérozier (INRAE) # # Licensed under the Apache License, Version 2.0 (the "License"); -# you may not use this file except in compliance with the License. +# you may not lactation this file except in compliance with the License. # You may obtain a copy of the License at # # http://www.apache.org/licenses/LICENSE-2.0 @@ -23,10 +23,9 @@ </script> <script> - var taxon = JSON.parse('{{ taxon | tojson | safe }}'); - var phenotype = JSON.parse('{{ phenotype | tojson | safe }}'); - var qps = JSON.parse('{{ qps | tojson | safe }}'); - var version = JSON.parse('{{ version | tojson | safe }}'); + var taxon = JSON.parse('{{ taxon | tojson | safe }}'); + var lactation = JSON.parse('{{ lactation | tojson | safe }}'); + var version = JSON.parse('{{ version | tojson | safe }}'); var alvisir = JSON.parse('{{ alvisir | tojson | safe }}'); </script> @@ -35,18 +34,18 @@ <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> + <script type="module" src="{{ url_for('static', filename='js/searchByTaxonForLactation.js') }}"></script> <div style="margin:30px 0;"></div> <div style="margin-left: 5%;margin-right: 5%;"> - <h3><span style="color: #21517A;">Taxon exhibits Phenotype</span></h3> + <h3><span style="color: #21517A;">Taxon -> Lactation Stage</span></h3> <div class="d-flex justify-content-center text-info"> - <div id="spinner_taxon_phenotype" class="spinner-border" role="status" style="display: none;"> + <div id="spinner_taxon_lactation" class="spinner-border" role="status" style="display: none;"> <span class="sr-only">Loading...</span> </div> - <div id="spinner_taxon_phenotype2" style="display: none;"><strong> Loading...</strong></div> + <div id="spinner_taxon_lactation2" style="display: none;"><strong> Loading...</strong></div> </div> <div style="margin:40px 0;"> @@ -54,41 +53,43 @@ <div class="row justify-content-center"> <div class="col-8"> <div class="input-group"> - <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> + <label class="button-select input-group-text" for="relationlactationByTaxon">Search relations by taxon</label> + <select class="form-select" id="search_taxon_lactation"></select> + <button id="filter_taxon_lactation" type="button" class="button-select-filter btn btn-info" data-toggle="collapse" data-target="#demo" disabled>Filter selection</button> </div> </div> </div> </div> + <div id="demo" class="collapse" style="margin-top: 1%;" align="center"> <table align="center"> <tr id="filter_col4" data-column="3"> - <td> Filter by Phenotype </td> - <td align="center"><input type="text" class="column_filter" id="phenotype_tp"></td> - <td> QPS only </td> - <td><input type="checkbox" name="qps_tp" id="qps_tp" value="yes" /></td> + <td> Filter by Lactation stage </td> + <td align="center"><input type="text" class="column_filter" id="lactation_tu"></td> + <!-- <td> QPS only </td> + <td><input type="checkbox" name="qps_tu" id="qps_tu" value="yes" /></td> --> </tr> </table> - <small id="help" class="form-text text-muted"><b>Note:</b> to filter by phenotype, you can use ";" for "or" (example: "acidophile;adherent" for phenotype).</small><br/> + <small id="help" class="form-text text-muted"><b>Note:</b> to filter by lactation stage, you can use ";" for "or" (example: "colostrum;milk" for lactation stage).</small><br/> </div> + <div id="hide" style="display:none"> - <table id="results_taxon_phenotype" class="display responsive nowrap collapsed" style="width:100%"><!-- width="100%" visibility="none"--> + <table id="results_taxon_lactation" class="display responsive nowrap collapsed" style="width:100%"><!-- width="100%" visibility="none"--> <thead> <tr> <th>Source text</th> <th>Scientific name of taxon</th> <th>Relation type</th> - <th>OntoBiotope class</th> + <th>Reference class</th> <th>QPS</th> <th>Source</th> <th>Occurrence in text (taxon)</th> - <th>Occurrence in text (phenotype)</th> + <th>Occurrence in text (lactation)</th> <th>Full source text</th> <th>TaxonID</th> <th>Taxonomy hierarchical path</th> - <th>ID OntoBiotope</th> - <th>OntoBiotope hierarchical path</th> + <th>ID Reference</th> + <th>Reference hierarchical path</th> </tr> </thead> </table> diff --git a/templates/searchByTaxonForOligosaccharideName.html b/templates/searchByTaxonForOligosaccharideName.html new file mode 100644 index 0000000000000000000000000000000000000000..c91563e91286a46531a8a4103afddf219bba6fb3 --- /dev/null +++ b/templates/searchByTaxonForOligosaccharideName.html @@ -0,0 +1,100 @@ +<!-- +# Copyright 2022 Sandra Dérozier (INRAE) +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +--> + +{% extends 'main' %} +{% block content %} +<section> + + <script type=text/javascript> + $SCRIPT_ROOT = {{ request.script_root|tojson|safe }}; + </script> + + <script> + var taxon = JSON.parse('{{ taxon | tojson | safe }}'); + var oligoname = JSON.parse('{{ oligoname | tojson | safe }}'); + var version = JSON.parse('{{ version | tojson | safe }}'); + 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/searchByTaxonForOligosaccharideName.js') }}"></script> + + <div style="margin:30px 0;"></div> + + <div style="margin-left: 5%;margin-right: 5%;"> + <h3><span style="color: #21517A;">Taxon -> Oligosaccharide name</span></h3> + <div class="d-flex justify-content-center text-info"> + <div id="spinner_taxon_oligoname" class="spinner-border" role="status" style="display: none;"> + <span class="sr-only">Loading...</span> + </div> + <div id="spinner_taxon_oligoname2" style="display: none;"><strong> Loading...</strong></div> + </div> + + <div style="margin:40px 0;"> + <div class="container"> + <div class="row justify-content-center"> + <div class="col-8"> + <div class="input-group mb-3"> + <label class="button-select input-group-text" for="relationoligonameByTaxon">Search relations by taxon</label> + <select class="form-select" id="search"></select> + <button id="filter_taxon_oligoname" type="button" class="btn btn-info button-select-filter" data-toggle="collapse" data-target="#demo" disabled>Filter selection</button> + </div> + </div> + </div> + </div> + + <div id="demo" class="collapse" style="margin-top: 1%;" align="center"> + <table align="center"> + <tr id="filter_col4" data-column="3"> + <td> Filter by Oligosaccharide name </td> + <td align="center"><input type="text" class="column_filter" id="oligoname_th"></td> + </tr> + </table> + <small id="help" class="form-text text-muted"><b>Note:</b> to filter by oligosaccharide name, you can use ";" for "or" (example: "fucosyl;asialo" for oligosaccharide name).</small><br/> + </div> + + <div id="hide" style="display:none"> + <table id="results_taxon_oligoname" class="display responsive nowrap collapsed" style="width:100%"> <!--width="100%" visibility="none"--> + <thead> + <tr> + <th>Source text</th> + <th>Scientific name of taxon</th> + <th>Relation type</th> + <th>Reference class</th> + <th>QPS</th> + <th>Source</th> + <th>Occurrence in text (taxon)</th> + <th>Occurrence in text (oligosaccharide name)</th> + <th>Full source text</th> + <th>TaxonID</th> + <th>Taxonomy hierarchical path</th> + <th>ID Reference</th> + <th>Reference hierarchical path</th> + </tr> + </thead> + </table> + </div> + </div> + </div> + + <div style="margin:80px 0;"></div> + +</section> +{% endblock %} diff --git a/templates/searchByTaxonForOligosaccharideType.html b/templates/searchByTaxonForOligosaccharideType.html new file mode 100644 index 0000000000000000000000000000000000000000..b72b164343d035dbf34c7a44bac088cd2f1e6c63 --- /dev/null +++ b/templates/searchByTaxonForOligosaccharideType.html @@ -0,0 +1,100 @@ +<!-- +# Copyright 2022 Sandra Dérozier (INRAE) +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +--> + +{% extends 'main' %}; +{% block content %} +<section> + + <script type=text/javascript> + $SCRIPT_ROOT = {{ request.script_root|tojson|safe }}; + </script> + + <script> + var taxon = JSON.parse('{{ taxon | tojson | safe }}'); + var oligotype = JSON.parse('{{ oligotype | tojson | safe }}'); + var version = JSON.parse('{{ version | tojson | safe }}'); + 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/searchByTaxonForOligosaccharideType.js') }}"></script> + + <div style="margin:30px 0;"></div> + + <div style="margin-left: 5%;margin-right: 5%;"> + <h3><span style="color: #21517A;">Taxon -> Oligosaccharide type</span></h3> + <div class="d-flex justify-content-center text-info"> + <div id="spinner_taxon_oligotype" class="spinner-border" role="status" style="display: none;"> + <span class="sr-only">Loading...</span> + </div> + <div id="spinner_taxon_oligotype2" style="display: none;"><strong> Loading...</strong></div> + </div> + + <div style="margin:40px 0;"> + <div class="container"> + <div class="row justify-content-center"> + <div class="col-8"> + <div class="input-group mb-3"> + <label class="button-select input-group-text" for="relationoligotypeByTaxon">Search relations by taxon</label> + <select class="form-select" id="search"></select> + <button id="filter_taxon_oligotype" type="button" class="btn btn-info button-select-filter" data-toggle="collapse" data-target="#demo" disabled>Filter selection</button> + </div> + </div> + </div> + </div> + + <div id="demo" class="collapse" style="margin-top: 1%;" align="center"> + <table align="center"> + <tr id="filter_col4" data-column="3"> + <td> Filter by Oligosaccharide type </td> + <td align="center"><input type="text" class="column_filter" id="oligotype_th"></td> + </tr> + </table> + <small id="help" class="form-text text-muted"><b>Note:</b> to filter by oligosaccharide type, you can use ";" for "or" (example: "fuco;sialy" for oligosaccharide type).</small><br/> + </div> + + <div id="hide" style="display:none"> + <table id="results_taxon_oligotype" class="display responsive nowrap collapsed" style="width:100%"> <!--width="100%" visibility="none"--> + <thead> + <tr> + <th>Source text</th> + <th>Scientific name of taxon</th> + <th>Relation type</th> + <th>Reference class</th> + <th>QPS</th> + <th>Source</th> + <th>Occurrence in text (taxon)</th> + <th>Occurrence in text (oligosaccharide type)</th> + <th>Full source text</th> + <th>TaxonID</th> + <th>Taxonomy hierarchical path</th> + <th>ID Reference</th> + <th>Reference hierarchical path</th> + </tr> + </thead> + </table> + </div> + </div> + </div> + + <div style="margin:80px 0;"></div> + +</section> +{% endblock %} diff --git a/templates/searchByTaxonForPostpartum.html b/templates/searchByTaxonForPostpartum.html new file mode 100644 index 0000000000000000000000000000000000000000..de4dced64ae43d032101cf5ee66e178b2ea1fcd8 --- /dev/null +++ b/templates/searchByTaxonForPostpartum.html @@ -0,0 +1,101 @@ +<!-- +# Copyright 2022 Sandra Dérozier (INRAE) +# +# Licensed under the Apache License, Version 2.0 (the "License"); +# you may not use this file except in compliance with the License. +# You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +--> + +{% extends 'main' %} +{% block content %} +<section> + + <script type=text/javascript> + $SCRIPT_ROOT = {{ request.script_root|tojson|safe }}; + </script> + + <script> + var taxon = JSON.parse('{{ taxon | tojson | safe }}'); + var postpartum = JSON.parse('{{ postpartum | tojson | safe }}'); + var version = JSON.parse('{{ version | tojson | safe }}'); + 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/searchByTaxonForPostpartum.js') }}"></script> + + <div style="margin:30px 0;"></div> + + <div style="margin-left: 5%;margin-right: 5%;"> + <h3><span style="color: #21517A;">Taxon -> Postpartum Age</span></h3> + + <div class="d-flex justify-content-center text-info"> + <div id="spinner_taxon_postpartum" class="spinner-border" role="status" style="display: none;"> + <span class="sr-only">Loading...</span> + </div> + <div id="spinner_taxon_postpartum2" style="display: none;"><strong> Loading...</strong></div> + </div> + + <div style="margin:40px 0;"> + <div class="container"> + <div class="row justify-content-center"> + <div class="col-8"> + <div class="input-group"> + <label class="button-select input-group-text" for="relationpostpartumByTaxon">Search relations by taxon</label> + <select class="form-select" id="search_taxon_postpartum"></select> + <button id="filter_taxon_postpartum" type="button" class="button-select-filter btn btn-info" data-toggle="collapse" data-target="#demo" disabled>Filter selection</button> + </div> + </div> + </div> + </div> + <div id="demo" class="collapse" style="margin-top: 1%;" align="center"> + <table align="center"> + <tr id="filter_col4" data-column="3"> + <td> Filter by Postpartum age </td> + <td align="center"><input type="text" class="column_filter" id="postpartum_tp"></td> + <!-- <td> QPS only </td> + <td><input type="checkbox" name="qps_tp" id="qps_tp" value="yes" /></td> --> + </tr> + </table> + <small id="help" class="form-text text-muted"><b>Note:</b> to filter by postpartum, you can use ";" for "or" (example: "7;12" for postpartum age).</small><br/> + </div> + <div id="hide" style="display:none"> + <table id="results_taxon_postpartum" class="display responsive nowrap collapsed" style="width:100%"><!-- width="100%" visibility="none"--> + <thead> + <tr> + <th>Source text</th> + <th>Scientific name of taxon</th> + <th>Relation type</th> + <th>Reference class</th> + <th>QPS</th> + <th>Source</th> + <th>Occurrence in text (taxon)</th> + <th>Occurrence in text (postpartum age)</th> + <th>Full source text</th> + <th>TaxonID</th> + <th>Taxonomy hierarchical path</th> + <th>ID Reference</th> + <th>Reference hierarchical path</th> + </tr> + </thead> + </table> + </div> + </div> + </div> + + <div style="margin:80px 0;"></div> + +</section> +{% endblock %} diff --git a/templates/searchByTaxonForUse.html b/templates/searchByTaxonForSampleType.html similarity index 67% rename from templates/searchByTaxonForUse.html rename to templates/searchByTaxonForSampleType.html index 930eceb8639bb5cfe572ea9850053c514f152cc8..3e6e7223dfca261b8478b13dccc0a05b75a55c11 100644 --- a/templates/searchByTaxonForUse.html +++ b/templates/searchByTaxonForSampleType.html @@ -2,7 +2,7 @@ # Copyright 2022 Sandra Dérozier (INRAE) # # Licensed under the Apache License, Version 2.0 (the "License"); -# you may not use this file except in compliance with the License. +# you may not sample this file except in compliance with the License. # You may obtain a copy of the License at # # http://www.apache.org/licenses/LICENSE-2.0 @@ -24,8 +24,7 @@ <script> var taxon = JSON.parse('{{ taxon | tojson | safe }}'); - var use = JSON.parse('{{ use | tojson | safe }}'); - var qps = JSON.parse('{{ qps | tojson | safe }}'); + var sample = JSON.parse('{{ sample | tojson | safe }}'); var version = JSON.parse('{{ version | tojson | safe }}'); var alvisir = JSON.parse('{{ alvisir | tojson | safe }}'); </script> @@ -35,18 +34,18 @@ <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> + <script type="module" src="{{ url_for('static', filename='js/searchByTaxonForSampleType.js') }}"></script> <div style="margin:30px 0;"></div> <div style="margin-left: 5%;margin-right: 5%;"> - <h3><span style="color: #21517A;">Taxon studied for Use</span></h3> + <h3><span style="color: #21517A;">Taxon -> Sample Type</span></h3> <div class="d-flex justify-content-center text-info"> - <div id="spinner_taxon_use" class="spinner-border" role="status" style="display: none;"> + <div id="spinner_taxon_sample" class="spinner-border" role="status" style="display: none;"> <span class="sr-only">Loading...</span> </div> - <div id="spinner_taxon_use2" style="display: none;"><strong> Loading...</strong></div> + <div id="spinner_taxon_sample2" style="display: none;"><strong> Loading...</strong></div> </div> <div style="margin:40px 0;"> @@ -54,9 +53,9 @@ <div class="row justify-content-center"> <div class="col-8"> <div class="input-group"> - <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> + <label class="button-select input-group-text" for="relationSampleByTaxon">Search relations by taxon</label> + <select class="form-select" id="search_taxon_sample"></select> + <button id="filter_taxon_sample" type="button" class="button-select-filter btn btn-info" data-toggle="collapse" data-target="#demo" disabled>Filter selection</button> </div> </div> </div> @@ -65,32 +64,32 @@ <div id="demo" class="collapse" style="margin-top: 1%;" align="center"> <table align="center"> <tr id="filter_col4" data-column="3"> - <td> Filter by Use </td> - <td align="center"><input type="text" class="column_filter" id="use_tu"></td> - <td> QPS only </td> - <td><input type="checkbox" name="qps_tu" id="qps_tu" value="yes" /></td> + <td> Filter by Sample type </td> + <td align="center"><input type="text" class="column_filter" id="sample_tu"></td> + <!-- <td> QPS only </td> + <td><input type="checkbox" name="qps_tu" id="qps_tu" value="yes" /></td> --> </tr> </table> - <small id="help" class="form-text text-muted"><b>Note:</b> to filter by use, you can use ";" for "or" (example: "antimicrobial activity;antiviral activity" for use).</small><br/> + <small id="help" class="form-text text-muted"><b>Note:</b> to filter by sample, you can use ";" for "or" (example: "mixed;pooled" for sample type).</small><br/> </div> <div id="hide" style="display:none"> - <table id="results_taxon_use" class="display responsive nowrap collapsed" style="width:100%"><!-- width="100%" visibility="none"--> + <table id="results_taxon_sample" class="display responsive nowrap collapsed" style="width:100%"><!-- width="100%" visibility="none"--> <thead> <tr> <th>Source text</th> <th>Scientific name of taxon</th> <th>Relation type</th> - <th>OntoBiotope class</th> + <th>Reference class</th> <th>QPS</th> <th>Source</th> <th>Occurrence in text (taxon)</th> - <th>Occurrence in text (use)</th> + <th>Occurrence in text (sample)</th> <th>Full source text</th> <th>TaxonID</th> <th>Taxonomy hierarchical path</th> - <th>ID OntoBiotope</th> - <th>OntoBiotope hierarchical path</th> + <th>ID Reference</th> + <th>Reference hierarchical path</th> </tr> </thead> </table> diff --git a/templates/sheet.html b/templates/sheet.html new file mode 100644 index 0000000000000000000000000000000000000000..dbe9808ea284738899ec2df18469d88bae2b7994 --- /dev/null +++ b/templates/sheet.html @@ -0,0 +1,123 @@ +{% extends 'main2' %} +{% block content %} +<script src="{{ url_for('static', filename='js/sheet.js') }}" defer></script> +<link href="{{ url_for('static', filename='css/sheet.css') }}" rel="stylesheet"/> + +<main class="main-container"> + <!-- Navigation Sidebar --> + <nav class="sidebar"> + <ul class="nav-menu"> + <li><button class="nav-btn" onclick="toggleSection('oligo')">Oligosaccharides</button></li> + <li><button class="nav-btn" onclick="toggleSection('species')">Species</button></li> + <li><button class="nav-btn" onclick="toggleSection('samples')">Samples</button></li> + </ul> + </nav> + + <!-- Content Area --> + <div class="content"> + <!-- Oligosaccharides Section --> + <section id="oligo-section" class="section"> + <div class="info-card"> + <h2 class="card-header">Oligosaccharide Information</h2> + <div class="info-grid"> + {% for label, value in [ + ('Milk Oligosaccharide ID', 'OLIGO0137'), + ('Milk Oligosaccharide Normalized Name', '2\'-Fucosyllactose'), + ('Abbreviated Normalized MO Name', '2\'-FL'), + ('Formula', 'C18H32O15'), + ('Synonyms', '2\'FL | 2\'fucosyllactose | 2FL') + ] %} + <div class="info-item"> + <span class="info-label">{{ label }}</span> + <span class="info-value">{{ value }}</span> + </div> + {% endfor %} + </div> + </div> + + <div class="info-card"> + <h2 class="card-header">Matched Information</h2> + <div class="info-grid"> + {% for label, value in [ + ('Text Occurrence', 'fucosyllactose'), + ('Reference Class', '2\'-Fucosyllactose'), + ('Species', 'Rabbit'), + ('MO Type', 'XX'), + ('MO Samples', 'Unidentified'), + ('Methods of Analysis', 'HPAEC-PAD'), + ('Text Snippet', 'HPAEC-PAD was used to quantify 2\'-fucosyllactose (2\'-FL)'), + ('Number of Occurrences', '2'), + ('Number of Matched Documents', '13') + ] %} + <div class="info-item"> + <span class="info-label">{{ label }}</span> + <span class="info-value">{{ value }}</span> + </div> + {% endfor %} + </div> + </div> + + <div class="info-card"> + <h2 class="card-header">3D Structure</h2> + <div class="structure-viewer"> + <img id="structure-image" class="structure-image" alt="3D Structure"> + </div> + </div> + + <div class="action-bar"> + <button class="download-btn" onclick="downloadCSV()">Download CSV</button> + </div> + </section> + + <!-- Species Section --> + <section id="species-section" class="section hidden"> + <div class="info-card"> + <h2 class="card-header">Species Information</h2> + <div class="info-grid"> + {% for label, value in [ + ('Species ID', ''), + ('Species Scientific Name', ''), + ('Number Of Occurrence', ''), + ('Physiological Stage', ''), + ('Breed', ''), + ('Geography', ''), + ('Postpartum age', '') + ] %} + <div class="info-item"> + <span class="info-label">{{ label }}</span> + <span class="info-value">{{ value }}</span> + </div> + {% endfor %} + </div> + </div> + <div class="action-bar"> + <button class="download-btn" onclick="downloadCSV()">Download CSV</button> + </div> + </section> + + <!-- Samples Section --> + <section id="samples-section" class="section hidden"> + <div class="info-card"> + <h2 class="card-header">Samples Information</h2> + <div class="info-grid"> + {% for label, value in [ + ('Samples ID', ''), + ('Samples Scientific Name', ''), + ('Associated Species', ''), + ('MO Normalization Method', ''), + ('Lactation Stage', '') + ] %} + <div class="info-item"> + <span class="info-label">{{ label }}</span> + <span class="info-value">{{ value }}</span> + </div> + {% endfor %} + </div> + </div> + <div class="action-bar"> + <button class="download-btn" onclick="downloadCSV()">Download CSV</button> + </div> + </section> + </div> +</main> +{% endblock %} \ No newline at end of file