aboutsummaryrefslogtreecommitdiff
path: root/bh20simplewebuploader/templates/form.html
diff options
context:
space:
mode:
Diffstat (limited to 'bh20simplewebuploader/templates/form.html')
-rw-r--r--bh20simplewebuploader/templates/form.html144
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> &middot; 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> &middot; Powered by <a href="https://www.commonwl.org/">Common Workflow Language</a> &amp; <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')