-
Notifications
You must be signed in to change notification settings - Fork 29
/
upload_table.html
126 lines (97 loc) · 4.85 KB
/
upload_table.html
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
{% extends 'base.html' %}
{% import 'macros.html' as macros %}
<!-- Title -->
{% block title %} BioJupies | Upload Matrix File {% endblock %}
<!-- Content -->
{% block content %}
<div class="px-6">
<!-- Title -->
<div class="row pt-4">
<div class="col-12 very-large text-center light px-5">Upload an Expression Table File</div>
</div>
<!-- Introduction -->
<hr width="100%" class="my-4">
<div class="row">
<div class="light very-small my-1 col-lg-8 col-xl-9 text-justify">
Use the form below to upload your <b>gene expression table file</b>.
This file should contain <b>gene symbols on rows</b>, <b>samples on columns</b>, and <b>gene expression counts</b> as values.
Once you have uploaded the desired file, click <b>Continue</b> to proceed.
</div>
<div class="col-lg-4 col-xl-3 my-auto text-center pt-3 pt-lg-0">
<button class="btn black border-custom bg-white nodecoration mr-2" onclick="goBack();"><i class="fa fa-angle-left mr-2"></i>Back</button>
<button class="btn navigate black border-custom bg-white nodecoration" form="upload-expression-form" type="submit" formaction="{{ url_for('upload_table') }}" formmethod="post" disabled="true">Continue<i class="fa fa-angle-right ml-2"></i></button>
</div>
</div>
<!-- Upload File -->
<div class="row">
<hr width="100%" class="my-4">
<div class="col-12 px-4 pt-1">
<!-- Expression Table Dropzone -->
<div id="dropzone" class="dropzone border-grey rounded" style="background-image: url({{ url_for('static', filename='img/dropzone/expression_table.png') }}); background-size: 100% 100%;"></div>
<form id="upload-expression-form"><input type="hidden" id="expression" name="expression" value=""></form>
<div id="preview" class="mt-2"></div>
<!-- Formats and Examples -->
<div id="formats" class="mt-2 tiny light pl-1">
Supported formats: <span class="font-italic">.txt, .csv, .tsv, .xls, .xlsx</span>.
<div class="dropdown show d-block float-sm-right my-3 my-sm-0">
<a class="btn bg-white border-custom black nodecoration tiny regular my-auto dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown">
Example
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Load Example</a>
<a class="dropdown-item" href="{{ url_for('static', filename='data/biojupies_example_matrix.txt') }}" download>Download Example File</a>
</div>
</div>
</div>
<!-- Disclaimer -->
<div class="mt-0 mt-sm-4 light tiny text-muted text-left pt-2"><b>Note:</b> the tool is currently optimized for analysis of <b>raw RNA-seq read counts</b>. While it is possible to load normalized RNA-seq and microarray datasets, <span class="font-italic">the analysis plugins are currently not optimized for such data, thus results should be interpreted accordingly.</span></div>
<div class="mt-0 light tiny text-muted text-left pt-2 mb-5">It is recommended to use <b>gene symbols</b> as row identifiers. While other identifier systems (e.g. Ensembl or Entrez IDs) are accepted, enrichment analyses and small molecule queries may not perform optimally. Automated identifier conversion is currently under development.</div>
</div>
</div>
</div>
{% endblock %}
{% block footer %}
<script type="text/javascript">
// Add Table
var addTable = function(dataset) {
// Save data
$('#expression').val(JSON.stringify(dataset));
// Toggle Interfaces
$('button[form="upload-expression-form"]').prop('disabled', false);
$('button[form="upload-expression-form"]').toggleClass('black white bg-white bg-blue');
$('#dropzone').hide();
$('#formats').hide();
addPreviewTable(dataset, true);
$('#intro').html('The uploaded dataset contains <span class="highlight">'+dataset['columns'].length+' samples</span> and <span class="highlight">'+dataset['index'].length+' genes</span>. Check that the preview below is correct, then click Continue to proceed.')
}
// Initialize Dropzone
dropzone = $("#dropzone").dropzone({
dictDefaultMessage: "Drag and drop your file here, or click to browse and upload it.",
url: "{{ url_for('upload_dataframe_api') }}",
success: function(file, response){
// Parse response
response = JSON.parse(response);
// Add dataset
addTable(response);
}
});
// Load Example
$('.dropdown-menu .dropdown-item:first-child').click(function(evt) {
// Toggle Interfaces
$('#dropzone').hide();
$('#preview').html($('<div>', {'class': 'text-center medium regular py-5 border-grey rounded'}).html($('<div>', {'class': 'py-3'}).html('Loading Example Matrix...')));
// AJAX Query
$.ajax({
url: "{{ url_for('example_table_api') }}",
method: 'post',
data: JSON.stringify({'filename': 'biojupies_example_matrix.txt'}),
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function(response) {
// Add dataset
addTable(response);
}
})
})
</script>
{% endblock %}