aboutsummaryrefslogtreecommitdiff
path: root/qc_app/templates/index.html
blob: 0d301f53bcd6d299e87b30a7841ee5e9d66069c1 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
{%extends "base.html"%}
{%from "flash_messages.html" import flash_messages%}
{%from "upload_progress_indicator.html" import upload_progress_indicator%}

{%block title%}Data Upload{%endblock%}

{%block contents%}
<div class="row">
  <h1 class="heading">data upload</h1>

  <div class="explainer">
    <p>Each of the sections below gives you a different option for data upload.
      Please read the documentation for each section carefully to understand what
      each section is about.</p>
  </div>
</div>

<div class="row">
  <h2 class="heading">R/qtl2 Bundles</h2>

  <div class="explainer">
    <p>This feature combines and extends the two upload methods below. Instead of
      uploading one item at a time, the R/qtl2 bundle you upload can contain both
      the genotypes data (samples/individuals/cases and their data) and the
      expression data.</p>
    <p>The R/qtl2 bundle, additionally, can contain extra metadata, that neither
      of the methods below can handle.</p>

    <a href={{url_for("upload.rqtl2.select_species")}}
       title="Upload a zip bundle of R/qtl2 files">
      <button class="btn btn-primary">upload R/qtl2 bundle</button></a>
  </div>
</div>


<div class="row">
  <h2 class="heading">Expression Data</h2>

  <div class="explainer">
    <p>This feature enables you to upload expression data. It expects the data to
      be in <strong>tab-separated values (TSV)</strong> files. The data should be
      a simple matrix of <em>phenotype × sample</em>, i.e. The first column is a
      list of the <em>phenotypes</em> and the first row is a list of
      <em>samples/cases</em>.</p>

    <p>If you haven't done so please go to this page to learn the requirements for
      file formats and helpful suggestions to enter your data in a fast and easy
      way.</p>

    <ol>
      <li><strong>PLEASE REVIEW YOUR DATA.</strong>Make sure your data complies
        with our system requirements. (
        <a href="{{url_for('entry.data_review')}}#data-concerns"
	   title="Details for the data expectations.">Help</a>
        )</li>
      <li><strong>UPLOAD YOUR DATA FOR DATA VERIFICATION.</strong> We accept
        <strong>.csv</strong>, <strong>.txt</strong> and <strong>.zip</strong>
        files (<a href="{{url_for('entry.data_review')}}#file-types"
	          title="Details for the data expectations.">Help</a>)</li>
    </ol>
  </div>

  <form action="{{url_for('entry.upload_file')}}"
        method="POST"
        enctype="multipart/form-data"
        id="frm-upload-expression-data">
    <legend class="heading">upload expression data</legend>
    {{flash_messages("error-expr-data")}}

    <div class="form-group">
      <label for="select_species01" class="form-label">Species</label>
      <select id="select_species01"
	      name="speciesid"
	      required="required"
              class="form-control">
        <option value="">Select species</option>
        {%for aspecies in species%}
        <option value="{{aspecies.SpeciesId}}">{{aspecies.MenuName}}</option>
        {%endfor%}
      </select>
    </div>

    <div class="form-group">
      <legend class="heading">file type</legend>

      <div class="form-check">
        <input type="radio" name="filetype" value="average" id="filetype_average"
	       required="required" class="form-check-input" />
        <label for="filetype_average" class="form-check-label">average</label>
      </div>

      <div class="form-check">
        <input type="radio" name="filetype" value="standard-error"
	       id="filetype_standard_error" required="required"
	       class="form-check-input" />
        <label for="filetype_standard_error" class="form-check-label">
          standard error
        </label>
      </div>
    </div>

    <div class="form-group">
      <span id="no-file-error" class="alert-danger" style="display: none;">
        No file selected
      </span>
      <label for="file_upload" class="form-label">select file</label>
      <input type="file" name="qc_text_file" id="file_upload"
	     accept="text/plain, text/tab-separated-values, application/zip"
	     class="form-control"/>
    </div>

    <button type="submit" class="btn btn-primary" />upload file</button>
</form>

{{upload_progress_indicator()}}
</div>

<div class="row">
  <h2 class="heading">samples/cases</h2>

  <div class="explainer">
    <p>For the expression data above, you need the samples/cases in your file to
      already exist in the GeneNetwork database. If there are any samples that do
      not already exist the upload of the expression data will fail.</p>
    <p>This section gives you the opportunity to upload any missing samples</p>
  </div>

  <a href={{url_for("samples.select_species")}}
     title="Upload samples/cases/individuals for your data"
     class="btn btn-primary">upload Samples/Cases</a>
</div>

{%endblock%}


{%block javascript%}
<script type="text/javascript" src="static/js/upload_progress.js"></script>
<script type="text/javascript">
  function setup_formdata(form) {
      var formdata = new FormData();
      formdata.append(
	  "speciesid",
	  form.querySelector("#select_species01").value)
      formdata.append(
	  "qc_text_file",
	  form.querySelector("input[type='file']").files[0]);
      formdata.append(
	  "filetype",
	  selected_filetype(
	      Array.from(form.querySelectorAll("input[type='radio']"))));
      return formdata;
  }

  setup_upload_handlers(
      "frm-upload-expression-data", make_data_uploader(setup_formdata));
</script>
{%endblock%}