aboutsummaryrefslogtreecommitdiff
path: root/bh20simplewebuploader
diff options
context:
space:
mode:
Diffstat (limited to 'bh20simplewebuploader')
-rw-r--r--bh20simplewebuploader/static/main.css6
-rw-r--r--bh20simplewebuploader/templates/form.html43
2 files changed, 26 insertions, 23 deletions
diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css
index c881253..1bb9c8e 100644
--- a/bh20simplewebuploader/static/main.css
+++ b/bh20simplewebuploader/static/main.css
@@ -10,7 +10,7 @@ body {
h1, h2, h3, h4 {
font-family: 'Inter', sans-serif;
- color: #0ED1CD;
+ color: #008066;
}
h1 {
@@ -68,7 +68,7 @@ form h4 {
.button {
border-radius: 5px;
- background: #0ED1CD;
+ background: #B2F8F8;
margin: 0.3em auto;
padding: 0.4em;
}
@@ -125,7 +125,7 @@ span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; }
}
a {
- color: #40DBD8;
+ color: #008066;
font-weight: 700;
}
diff --git a/bh20simplewebuploader/templates/form.html b/bh20simplewebuploader/templates/form.html
index 1bbf515..6196624 100644
--- a/bh20simplewebuploader/templates/form.html
+++ b/bh20simplewebuploader/templates/form.html
@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="UTF-8">
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="/static/main.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web uploader for Public SARS-CoV-2 Sequence Resource</title>
@@ -21,10 +21,10 @@
<p>[Demo] Display content sequences by: </p>
<div>
- <button class="button" onclick="fetchSEQBySpecimen()">Specimen Source</button>
+ <button class="button" onclick="fetchSEQBySpecimen()">Specimen source</button>
<button class="button" onclick="fetchSEQByLocation()">Location</button>
- <button class="button" onclick="fetchSEQByTech()">Tech</button>
- <button class="button" onclick="fetchAllaccessions()">Allaccessions</button>
+ <button class="button" onclick="fetchSEQByTech()">Sequencer</button>
+ <button class="button" onclick="fetchAllaccessions()">All accessions</button>
</div>
</div>
@@ -66,7 +66,9 @@
A free command line version of the uploader can be
installed from <a href="https://github.com/arvados/bh20-seq-resource">source</a>.
</p>
-
+ <p>
+ Note that form fields contain web <a href="https://en.wikipedia.org/wiki/Web_Ontology_Language">onthology URI's</a> for <a href="https://en.wikipedia.org/wiki/Wikipedia:Disambiguation">disambiguation</a> and machine readable metadata. For examples of use, see the <a href="https://github.com/arvados/bh20-seq-resource/blob/master/doc/blog/using-covid-19-pubseq-part1.org">BLOG</a>.
+ </p>
</div>
<div class="fasta-file-select">
@@ -75,8 +77,8 @@
<path fill-rule="evenodd" d="M5 8.854a.5.5 0 00.707 0L8 6.56l2.293 2.293A.5.5 0 1011 8.146L8.354 5.5a.5.5 0 00-.708 0L5 8.146a.5.5 0 000 .708z" clip-rule="evenodd"/>
<path fill-rule="evenodd" d="M8 6a.5.5 0 01.5.5v8a.5.5 0 01-1 0v-8A.5.5 0 018 6z" clip-rule="evenodd"/>
</svg> Upload SARS-CoV-2 Sequence</h2>
-
- <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>
+
+ <label for="fasta">Select FASTA file of assembled genome (form upload <span class="dropt" title="For larger files or bulk uploads you can use a CLI uploader">max 50K<span style="width:500px;"></span></span>; FASTQ and BAM is coming soon): </label>
<br>
<input type="file" id="fasta" name="fasta" accept=".fa,.fasta,.fna,.fq" required>
<br>
@@ -97,7 +99,7 @@
<div id="metadata_upload_form_spot">
<div id="metadata_upload_form">
<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>
+ <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/maximum_metadata_example.yaml" target="_blank">example</a> (max 50K):</label>
<br>
<input type="file" id="metadata" name="metadata" accept=".json,.yml,.yaml" required>
<br>
@@ -105,6 +107,7 @@
</div>
</div>
+
<div id="metadata_fill_form_spot">
<div id="metadata_fill_form">
{% for record in fields %}
@@ -113,35 +116,35 @@
{% if loop.index > 1 and 2 < 3 %}
</div>
{% endif %}
- <div class="record">
+ <div class="record"> <!-- from block, e.g. host fields -->
<h4>{{ record['heading'] }}</h4>
- {% else %}
+ {% else %} <!-- handles one field -->
<div class="field-group" data-keypath="{{ record['id'] }}">
<div class="field" data-number="0">
<label for="{{ record['id'] }}{{ '[0]' if record['list'] else ''}}" title="{{ record.get('docstring', '') }}">
{{ record['label'] }}
{{ "*" if record['required'] else "" }}
{% if 'docstring' in record %}
- <a href='javascript:alert({{ record['docstring'] | tojson }})'>❓</a>
+ <a href='javascript:alert({{ record['docstring'] | tojson }})'>❓</a>
{% endif %}
{% if 'ref_iri' in record %}
- <a href="{{ record['ref_iri'] }}" target="_blank" title="Ontology Link">🔗</a>
+ <a href="{{ record['ref_iri'] }}" target="_blank" title="Ontology Link">🔗</a>
{% endif %}
</label>
{% if record['type'] == 'select' %}
- <select class="control" id="{{ record['id'] }}{{ '[0]' if record['list'] else ''}}" name="{{ record['id'] }}{{ '[0]' if record['list'] else ''}}" {{ "required" if record['required'] else "" }}>
- <option value="" selected>Choose one...</option>
+ <select class="control" id="{{ record['id'] }}{{ '[0]' if record['list'] else ''}}" name="{{ record['id'] }}{{ '[0]' if record['list'] else ''}}" {{ "required" if record['required'] else "" }}>
+ <option value="" selected>Choose one...</option>
{% for option in record['options'] %}
- <option value="{{ option[1] }}">{{ option[0] }}</option>
+ <option value="{{ option[1] }}">{{ option[0] }}</option>
{% endfor %}
- </select>
- {% else %}
- <input class="control" type="{{ record['type'] }}" id="{{ record['id'] }}{{ '[0]' if record['list'] else ''}}" name="{{ record['id'] }}{{ '[0]' if record['list'] else ''}}" {{ "required" if record['required'] else "" }} {{ ("step=" + record['step']) if 'step' in record else ""}}>
+ </select>
+ {% else %} <!-- input field -->
+ <input class="control" type="{{ record['type'] }}" id="{{ record['id'] }}{{ '[0]' if record['list'] else ''}}" name="{{ record['id'] }}{{ '[0]' if record['list'] else ''}}" {{ "required" if record['required'] else "" }} {{ ("step=" + record['step']) if 'step' in record else ""}}>
{% endif %}
</div>
{% if record['list'] %}
- <button type="button" title="Remove field" class="remove-field invisible">➖</button>
- <button type="button" title="Add field" class="add-field">➕</button>
+ <button type="button" title="Remove field" class="remove-field invisible">➖</button>
+ <button type="button" title="Add field" class="add-field">➕</button>
{% endif %}
</div>
{% endif %}