-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
WIP, localised branchwater search interface
- Loading branch information
Showing
4 changed files
with
301 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,228 @@ | ||
| {% include 'header.html' %} | ||
|
|
||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <!-- Tabulator CSS file options: https://cdnjs.com/libraries/tabulator--> | ||
| <link | ||
| crossorigin="anonymous" | ||
| href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.4.4/css/tabulator_bootstrap5.min.css" | ||
| integrity="sha512-E3brrBS070QzILPd7448M+21NlCrA3fht9RmFvS9GIKo443nGQRF3tVOuK7YcY1gzPQsaks2cP/Ivp/yhoJCNA==" | ||
| referrerpolicy="no-referrer" | ||
| rel="stylesheet" | ||
| /> | ||
|
|
||
| <script | ||
| defer="defer" | ||
| src="static/mgnify-component/mgnify-sourmash-component.js" | ||
| ></script> | ||
|
|
||
| <!-- Custom scripts and functions --> | ||
| <script src="static/dashboard.js"></script> | ||
| <script src="static/ex_sig.js"></script> | ||
|
|
||
| <!-- Tabulator and plotly libraries --> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.4.4/js/tabulator.min.js"></script> | ||
| <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> | ||
| </head> | ||
| <body class="vf-body"> | ||
| <div> | ||
| <h1 class="vf-text vf-text-heading--1">Try out the search!</h1> | ||
| <p class="vf-text"> | ||
| Submit one of the genomes below to examine its potential SRA metagenome | ||
| matches and explore the default metadata options. | ||
| <br> | ||
| <strong>Refresh the page to try a different genome.</strong> | ||
| </p> | ||
| </div> | ||
| <hr style="border-width: 3px; border-color: black" /> | ||
|
|
||
| <!-- Create form --> | ||
| <style> | ||
| .form-row { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .form-row input[type="radio"] { | ||
| margin-right: 20px; | ||
| } | ||
| </style> | ||
| <div id="form-container"></div> | ||
| <form class="vf-stack vf-stack--400" id="form"> | ||
|
|
||
| <fieldset class="vf-form__fieldset | vf-stack vf-stack--400"> | ||
| <legend class="vf-form__legend">Which do you like?</legend> | ||
| <div class="vf-form__item vf-form__item--radio"> | ||
| <input class="vf-form__radio" id="Ralso" name="options" type="radio" value="option1"> | ||
| <label class="vf-form__label" for="Ralso"> | ||
| <em>Ralstonia solanacearum</em>: a soilborne bacterial pathogen that | ||
| causes bacterial wilt in several crops. | ||
| <a class="vf-link" href="https://www.ncbi.nlm.nih.gov/datasets/taxonomy/305/">RefSeq:GCF_021117135.1</a> | ||
| </label> | ||
| </div> | ||
|
|
||
|
|
||
| <div class="vf-form__item vf-form__item--radio"> | ||
| <input class="vf-form__radio" id="Sal" name="options" type="radio" value="option2" /> | ||
| <label class="vf-form__label" for="Sal"> | ||
| <em>Salmonella enterica</em> subsp. <em>enterica</em>: a widespread | ||
| bacterial pathogen that causes salmonellosis in humans. (<a | ||
| href="https://www.ncbi.nlm.nih.gov/datasets/taxonomy/59201/" | ||
| >RefSeq:GCF_000006945.2</a | ||
| >) | ||
| </label> | ||
| </div> | ||
|
|
||
|
|
||
| <div class="vf-form__item vf-form__item--radio"> | ||
| <input class="vf-form__radio" id="Promar" name="options" type="radio" value="option3" /> | ||
| <label class="vf-form__label" for="Promar"> | ||
| <em>Prochlorococcus marinus</em>: a widespread and abundant marine | ||
| cyanobacteria. (<a | ||
| href="https://www.ncbi.nlm.nih.gov/datasets/taxonomy/1219/" | ||
| >RefSeq:GCF_000015665.1</a | ||
| >) | ||
| </label> | ||
| </div> | ||
|
|
||
|
|
||
| <div class="vf-form__item vf-form__item--radio"> | ||
| <input class="vf-form__radio" id="Canal" name="options" type="radio" value="option4" /> | ||
| <label class="vf-form__label" for="Canal"> | ||
| <em>Candida albicans</em>: a fungi common in the human gut and other parts of the body. It is an opportunistic | ||
| pathogen and causes infection under certain conditions. <a | ||
| class="vf-link" href="https://www.ncbi.nlm.nih.gov/datasets/taxonomy/5476/">RefSeq:GCF_000182965.3</a>) | ||
| </label> | ||
| </div> | ||
|
|
||
|
|
||
| <div class="vf-form__item vf-form__item--radio"> | ||
| <input class="vf-form__radio" id="Aspsyd" name="options" type="radio" value="option5" /> | ||
| <label class="vf-form__label" for="Aspsyd"> | ||
| <em>Aspergillus sydowii </em>: a fungal pathogen that can cause | ||
| disease in humans and sea fan corals. (<a | ||
| href="https://www.ncbi.nlm.nih.gov/datasets/taxonomy/75750/" | ||
| >RefSeq:GCF_001890705.1</a | ||
| >) | ||
| </label> | ||
| </div> | ||
|
|
||
| <div class="vf-form__item vf-form__item--radio"> | ||
| <input class="vf-form__radio" id="Pelagi" name="options" type="radio" value="option6" /> | ||
| <label class="vf-form__label" for="Pelagi"> | ||
| <em>Candidatus Pelagibacter ubique </em>: ubiquitous marine bacterium | ||
| SAR11, strain HTCC1062. (<a | ||
| href="https://www.ncbi.nlm.nih.gov/datasets/taxonomy/335992/" | ||
| >RefSeq:GCF_000012345.1</a | ||
| >) | ||
| </label> | ||
| </div> | ||
| </fieldset> | ||
| <button class="vf-button vf-button--primary" id="myButton" type="submit"> | ||
| Submit | ||
| </button> | ||
| </form> | ||
|
|
||
| <!-- Create container for dashboard --> | ||
| <div id="dashboard" style="margin: 30px"></div> | ||
|
|
||
| <script> | ||
| //Once data submitted, add notification and send data to flask app | ||
| form.addEventListener('submit', (event) => { | ||
| event.preventDefault(); | ||
| document.querySelector('#myButton').disabled = true; | ||
| // add disabled class as well | ||
| document.querySelector('#myButton').classList.add('vf-button--disabled'); | ||
| // Create a new <nav> element | ||
| const navElement = document.createElement('nav'); | ||
| navElement.classList.add( | ||
| 'navbar', | ||
| 'navbar-expand-lg', | ||
| 'navbar-light', | ||
| 'bg-light', | ||
| ); | ||
| navElement.style.textAlign = 'center'; // Add the text-align style | ||
|
|
||
| // Create a new <p> element and add it to the <nav> element | ||
| const paragraphElement = document.createElement('h3'); | ||
| paragraphElement.contentEditable = true; // Make the text editable | ||
| paragraphElement.textContent = | ||
| 'Do not navigate from page. The query may take up to 5 minutes!'; // Set the initial text content | ||
| navElement.appendChild(paragraphElement); | ||
| // Add an event listener to the <p> element to handle text changes | ||
| paragraphElement.addEventListener('input', (event) => { | ||
| console.log(`New text: ${event.target.textContent}`); | ||
| }); | ||
| // Add the <nav> element to the DOM | ||
| dashboard.appendChild(navElement); | ||
|
|
||
| //select signatures from 'ex_sig.js' based on form | ||
| const selectedOption = form.querySelector( | ||
| 'input[name=\'options\']:checked', | ||
| ); | ||
| let formdata; | ||
| if (selectedOption.id === 'Ralso') { | ||
| formdata = Ralso_sig; | ||
| } else if (selectedOption.id === 'Sal') { | ||
| formdata = Sal_sig; | ||
| } else if (selectedOption.id === 'Promar') { | ||
| formdata = Promar_sig; | ||
| } else if (selectedOption.id === 'Canal') { | ||
| formdata = Canal_sig; | ||
| } else if (selectedOption.id === 'Aspsyd') { | ||
| formdata = Aspsyd_sig; | ||
| } else if (selectedOption.id == 'Pelagi') { | ||
| formdata = Pelagi_sig; | ||
| } | ||
|
|
||
| //Do fetch request to proper route and create dashboard | ||
| fetch('/', { | ||
| method: 'POST', | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| body: JSON.stringify(formdata), | ||
| }) | ||
| .then((response) => response.json()) | ||
| .then((jsonData) => | ||
| createdashboard(jsonData, paragraphElement, navElement), | ||
| ) | ||
| .catch((error) => { | ||
| console.error('Error sending data to Flask server:', error); | ||
| }); | ||
| }); | ||
| </script> | ||
|
|
||
| <p class="vf-text"> | ||
| This example search allows you to try out the | ||
| <a class="vf-link" href="/home"><b>default search</b></a | ||
| >, which rapidly searches over 700,000 metagenomes deposited in NCBI's | ||
| <a class="vf-link" href="https://www.ncbi.nlm.nih.gov/sra/" | ||
| >sequence read archive (SRA)</a | ||
| > | ||
| and bypasses additional steps for metadata collation. Search typically | ||
| takes less than 5 minutes. Default results return SRA metagenomes with | ||
| >10% containment of the query genome presented in a table, map, and | ||
| summary plots for selected high-interest metadata. If you'd like to have | ||
| greater control over the included metadata, an | ||
| <a class="vf-link" href="/advanced">advanced search</a> is available. Metadata selection | ||
| does not change the datasets that are searched; it only impacts which | ||
| metadata are included in the table and plots. Please note that | ||
| SRA run accessions vary greatly in which metadata categories have | ||
| information available. Further details regarding the curated metadata | ||
| can be found on the <a class="vf-link" href="/about">about page</a>. | ||
| </p> | ||
| <!-- Script for tooltips --> | ||
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | ||
| <script> | ||
| var tooltipTriggerList = [].slice.call( | ||
| document.querySelectorAll('[data-bs-toggle="tooltip"]'), | ||
| ); | ||
| var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) { | ||
| return new bootstrap.Tooltip(tooltipTriggerEl); | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> | ||
| {% include 'footer.html' %} |