diff options
Diffstat (limited to 'bh20simplewebuploader')
| -rw-r--r-- | bh20simplewebuploader/static/main.css | 6 | ||||
| -rw-r--r-- | bh20simplewebuploader/templates/form.html | 43 |
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 %} |