diff options
Diffstat (limited to 'bh20simplewebuploader/templates/form.html')
| -rw-r--r-- | bh20simplewebuploader/templates/form.html | 144 |
1 files changed, 118 insertions, 26 deletions
diff --git a/bh20simplewebuploader/templates/form.html b/bh20simplewebuploader/templates/form.html index d960bb2..df66e8c 100644 --- a/bh20simplewebuploader/templates/form.html +++ b/bh20simplewebuploader/templates/form.html @@ -7,10 +7,12 @@ body { color: #101010; + background-color: #F9EDE1; } - h1, h4 { + h1, h2, h3, h4 { font-family: 'Roboto Slab', serif; + color: darkblue; } h1 { @@ -21,8 +23,19 @@ color: #505050; font-style: italic; } + .header { + background-color: white; + margin: 0 auto; + padding: 20px; + text-align: center; + height: 150px; + } - p, form { + .logo { + float: right; + } + + p, form, .about, .footer { font-family: 'Raleway', sans-serif; line-height: 1.5; } @@ -36,9 +49,23 @@ } .intro { + background-color: lightgrey; + margin: 0 auto; + padding: 20px; + } + + .about { + background-color: lightgrey; margin: 0 auto; padding: 20px; } + .footer { + background-color: white; + margin: 0 auto; + } + + span.dropt {border-bottom: thin dotted; background: #ffeedd;} + span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; } .grid-container { display: grid; @@ -59,10 +86,16 @@ } .fasta-file-select { + padding: 1em; grid-area: b; } .metadata { + padding: 1em; + grid-area: c; + } + .metadata_upload_form { + padding: 1em; grid-area: c; } @@ -115,40 +148,65 @@ <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&family=Roboto+Slab&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>Simple Web Uploader for Public SARS-CoV-2 Sequence Resource</title> + <title>Web uploader for Public SARS-CoV-2 Sequence Resource</title> </head> <body> - <h1>Simple Web Uploader for Public SARS-CoV-2 Sequence Resource</h1> + <section class="header"> + <div class="logo"><a href="http://covid-19.genenetwork.org/"><img src="static/image/coronasmallcomp.gif" width="150" title="COVID-19 image by Tyler Morgan-Wall"></a></div> + <h1>Web uploader for Public SARS-CoV-2 Sequence Resource</h1> + +<small>Disabled until we got everything wired up</small> + + </section> <hr> + <section> <form action="/submit" method="POST" enctype="multipart/form-data" id="main_form" class="grid-container"> - <p class="intro"> - This tool can be used to upload sequenced genomes of SARS-CoV-2 samples to the <a href="https://workbench.lugli.arvadosapi.com/collections/lugli-4zz18-z513nlpqm03hpca">Public SARS-CoV-2 Sequence Resource</a>. Your uploaded sequence will automatically be processed and incorporated into the public pangenome. - </p> + <p class="intro"> + Upload your SARS-CoV-2 sequence (FASTA or FASTQ formats) with metadata (JSONLD) to the <a href="https://workbench.lugli.arvadosapi.com/collections/lugli-4zz18-z513nlpqm03hpca">public sequence resource</a>. The upload will trigger a + recompute with all available sequences into a Pangenome + available for + <a href="https://workbench.lugli.arvadosapi.com/collections/lugli-4zz18-z513nlpqm03hpca">download</a>! + Your uploaded sequence will automatically be processed + and incorporated into the public pangenome with + metadata using worklows from the High Performance Open Biology Lab defined <a href="https://github.com/hpobio-lab/viral-analysis/tree/master/cwl/pangenome-generate">here</a>. All data is published under + a <a href="https://creativecommons.org/licenses/by/4.0/">Creative + Commons 4.0 attribution license</a> (CC-BY-4.0). You + can take the published (GFA/RDF/FASTA) data and store it in + a triple store for further processing. We also plan to + combine identifiers with clinical data stored securely at <a href="https://redcap-covid19.elixir-luxembourg.org/redcap/">REDCap</a>. + A free command line version of the uploader can be + installed from <a href="https://github.com/arvados/bh20-seq-resource">source</a>. + </p> + <div class="fasta-file-select"> - <label for="fasta">Select FASTA file for assembled genome (max 1MB):</label> + <label for="fasta">Select FASTA file of assembled genome (max 50K), or FASTQ of reads (<span class="dropt" title="For a larger fastq file you'll need to use a CLI uploader">max 150MB<span style="width:500px;"></span></span>) : </label> <br> - <input type="file" id="fasta" name="fasta" accept=".fa,.fasta,.fna" required> + <input type="file" id="fasta" name="fasta" accept=".fa,.fasta,.fna,.fq" required> <br> + <small> + Note that by uploading your data you automatically agree to a <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY-4.0 license</a>. </small> </div> <div class="metadata"> - <label>Select metadata submission method:</label> - <br> - <input type="radio" id="metadata_upload" name="metadata_type" value="upload" onchange="setMode()" checked required> - <label for="metadata_upload">Upload metadata file</label> - <input type="radio" id="metadata_form" name="metadata_type" value="fill" onchange="setMode()" required> - <label for="metadata_form">Fill in metadata manually</label> - <br> - </div> + <label>Select metadata submission method:</label> + <br> + <input type="radio" id="metadata_form" name="metadata_type" value="fill" onchange="setMode()" checked required> + <label for="metadata_form">Fill in metadata manually</label> + <input type="radio" id="metadata_upload" name="metadata_type" value="upload" onchange="setMode()" required> + <label for="metadata_upload">Upload metadata file</label> + <br> + <small>Make sure the metadata has submitter attribution details.</small> - <div id="metadata_upload_form_spot"> + <div id="metadata_upload_form_spot"> <div id="metadata_upload_form"> - <label for="metadata">Select JSON or YAML metadata file following <a href="https://github.com/arvados/bh20-seq-resource/blob/master/bh20sequploader/bh20seq-schema.yml" target="_blank">this schema</a> (<a href="https://github.com/arvados/bh20-seq-resource/blob/master/example/metadata.yaml" target="_blank">Example 1</a>, <a href="https://github.com/arvados/bh20-seq-resource/blob/master/example/minimal_example.yaml" target="_blank">Example 2</a>, max 1MB):</label> - <br> - <input type="file" id="metadata" name="metadata" accept=".json,.yml,.yaml" required> - <br> + <br> + <label for="metadata">Select JSON or YAML metadata file following <a href="https://github.com/arvados/bh20-seq-resource/blob/master/bh20sequploader/bh20seq-schema.yml" target="_blank">this schema</a> and <a href="https://github.com/arvados/bh20-seq-resource/blob/master/example/metadata.yaml" target="_blank">example</a> (max 50K):</label> + <br> + <input type="file" id="metadata" name="metadata" accept=".json,.yml,.yaml" required> + <br> </div> + </div> </div> <div id="metadata_fill_form_spot"> @@ -157,7 +215,7 @@ {% for record in fields %} {% if 'heading' in record %} - {% if loop.index > 1 %} + {% if loop.index > 1 and 2 < 3 %} </div> {% endif %} <div class="record"> @@ -180,11 +238,45 @@ </div> - <input class="submit" type="submit" value="Add to Pangenome"> +<input class="submit" type="submit" value="Add to Pangenome"> </form> </section> - <hr> - <small><a href="https://github.com/adamnovak/bh20-simple-web-uploader">Source</a> · Made for <a href="https://github.com/virtual-biohackathons/covid-19-bh20">COVID-19-BH20</a></small> +<hr> +<br> +<div class="about"> + <h3>ABOUT</h3> + <p> + This a public repository created at the COVID-19 BioHackathon + that has a low barrier to entry for uploading sequence data using + best practices. I.e., data is published with a creative commons + 4.0 (CC-4.0) license with metadata using state-of-the art + standards and, perhaps most importantly, providing standardized + workflows that get triggered on upload, so that results are + immediately available in standardized data formats. The repository + will be maintained and expanded for the duration of the + pandemic. To contribute data simply upload it! To contribute code + and/or workflows see + the <a href="https://github.com/arvados/bh20-seq-resource">project + repository</a>. For more information see the <a href="https://github.com/arvados/bh20-seq-resource/blob/master/paper/paper.md">paper</a> (WIP). + </p> + <br> +</div> + + <hr> +<div class="footer"> + <a href="https://arvados.org/"><img src="static/image/arvados-logo.png" align="top"></a> + <a href="https://www.commonwl.org/"><img src="static/image/CWL-Logo-Header.png" height="70"></a> + + <a href="https://github.com/virtual-biohackathons/covid-19-bh20"> + <img src="static/image/covid19biohackathon.png" align="right" height="70"></a> + + <center> + <small><a href="https://github.com/arvados/bh20-seq-resource">Source code</a> · Powered by <a href="https://www.commonwl.org/">Common Workflow Language</a> & <a href="https://arvados.org/">Arvados</a>; Made for <a href="https://github.com/virtual-biohackathons/covid-19-bh20">COVID-19-BH20</a> + </small> + </center> + + +</div> <script type="text/javascript"> let uploadForm = document.getElementById('metadata_upload_form') |