diff options
Diffstat (limited to 'qc_app')
| -rw-r--r-- | qc_app/static/js/upload_samples.js | 132 | ||||
| -rw-r--r-- | qc_app/templates/samples/upload-samples.html | 56 |
2 files changed, 178 insertions, 10 deletions
diff --git a/qc_app/static/js/upload_samples.js b/qc_app/static/js/upload_samples.js new file mode 100644 index 0000000..aed536f --- /dev/null +++ b/qc_app/static/js/upload_samples.js @@ -0,0 +1,132 @@ +/* + * Read the file content and set the `data-preview-content` attribute on the + * file element + */ +function read_first_n_lines(event, + fileelement, + numlines, + firstlineheading = true) { + var thefile = fileelement.files[0]; + var reader = new FileReader(); + reader.addEventListener("load", (event) => { + var filecontent = event.target.result.split( + "\n").slice( + 0, (numlines + (firstlineheading ? 1 : 0))).map( + (line) => {return line.trim("\r");}); + fileelement.setAttribute( + "data-preview-content", JSON.stringify(filecontent)); + display_preview(event); + }) + reader.readAsText(thefile); +} + +function remove_rows(preview_table) { + var table_body = preview_table.getElementsByTagName("tbody")[0]; + while(table_body.children.length > 0) { + table_body.removeChild(table_body.children.item(0)); + } +} + +/* + * Display error row + */ +function display_error_row(preview_table, error_message) { + remove_rows(preview_table); + row = document.createElement("tr"); + cell = document.createElement("td"); + cell.setAttribute("colspan", 4); + cell.innerHTML = error_message; + row.appendChild(cell); + preview_table.getElementsByTagName("tbody")[0].appendChild(row); +} + +function strip(str, chars) { + var end = str.length; + var start = 0 + for(var j = str.length; j > 0; j--) { + if(!chars.includes(str[j - 1])) { + break; + } + end = end - 1; + } + for(var i = 0; i < end; i++) { + if(!chars.includes(str[i])) { + break; + } + start = start + 1; + } + return str.slice(start, end); +} + +function process_preview_data(preview_data, separator, delimiter) { + return preview_data.map((line) => { + return line.split(separator).map((field) => { + return strip(field, delimiter); + }); + }); +} + +function render_preview(preview_table, preview_data) { + remove_rows(preview_table); + var table_body = preview_table.getElementsByTagName("tbody")[0]; + preview_data.forEach((line) => { + var row = document.createElement("tr"); + line.forEach((field) => { + var cell = document.createElement("td"); + cell.innerHTML = field; + row.appendChild(cell); + }); + table_body.appendChild(row); + }); +} + +/* + * Display a preview of the data, relying on the user's selection. + */ +function display_preview(event) { + var data_preview_table = document.getElementById("tbl:samples-preview"); + remove_rows(data_preview_table); + + var separator = document.getElementById("select:separator").value; + if(separator === "other") { + separator = document.getElementById("txt:separator").value; + } + if(separator == "") { + display_error_row(data_preview_table, "Please provide a separator."); + return false; + } + + var delimiter = document.getElementById("txt:delimiter").value; + + var firstlineheading = document.getElementById("chk:heading").checked; + + var fileelement = document.getElementById("file:samples"); + var preview_data = JSON.parse( + fileelement.getAttribute("data-preview-content") || "[]"); + if(preview_data.length == 0) { + display_error_row( + data_preview_table, + "No file data to preview. Check that file is provided."); + } + + render_preview(data_preview_table, process_preview_data( + preview_data.slice(0 + (firstlineheading ? 1 : 0)), + separator, + delimiter)); +} + +document.getElementById("chk:heading").addEventListener( + "change", display_preview); +document.getElementById("select:separator").addEventListener( + "change", display_preview); +document.getElementById("txt:separator").addEventListener( + "keyup", display_preview); +document.getElementById("txt:delimiter").addEventListener( + "keyup", display_preview); +document.getElementById("file:samples").addEventListener( + "change", (event) => { + read_first_n_lines(event, + document.getElementById("file:samples"), + 30, + document.getElementById("chk:heading").checked); + }); diff --git a/qc_app/templates/samples/upload-samples.html b/qc_app/templates/samples/upload-samples.html index b19e38c..23dc8a8 100644 --- a/qc_app/templates/samples/upload-samples.html +++ b/qc_app/templates/samples/upload-samples.html @@ -46,13 +46,21 @@ <fieldset> <input type="hidden" name="species_id" value="{{species.SpeciesId}}" /> <label class="form-col-1">species:</label> - <label class="form-col-2">{{species.SpeciesName}} [{{species.MenuName}}]</label> + <span class="form-col-2">{{species.SpeciesName}} [{{species.MenuName}}]</span> </fieldset> <fieldset> <input type="hidden" name="inbredset_id" value="{{population.InbredSetId}}" /> <label class="form-col-1">grouping/population:</label> - <label class="form-col-2">{{population.Name}} [{{population.FullName}}]</label> + <span class="form-col-2">{{population.Name}} [{{population.FullName}}]</span> + </fieldset> + + <fieldset> + <input id="chk:heading" + type="checkbox" + name="first_line_heading" + class="form-col-1" /> + <label for="chk:heading" class="form-col-2">first line is a heading?</label> </fieldset> <fieldset> @@ -68,27 +76,34 @@ <option value=";">Semicolon</option> <option value="other">Other</option> </select> - <input type="text" name="other_separator" class="form-col-2" /> - <label class="form-col-2"> + <input id="txt:separator" + type="text" + name="other_separator" + class="form-col-2" /> + <span class="form-col-2"> This is the character that separates the fields in your CSV file. If you select "<strong>Other</strong>", then you must provide the separator in the text field provided. - </label> + </span> </fieldset> <fieldset> <label for="txt:delimiter" class="form-col-1">field delimiter</label> - <input type="text" name="field_delimiter" class="form-col-2" /> - <label class="form-col-2"> + <input id="txt:delimiter" + type="text" + name="field_delimiter" + maxlength="1" + class="form-col-2" /> + <span class="form-col-2"> If there is a character delimiting the string texts within particular fields in your CSV, provide the character here. This can be left blank if no such delimiters exist in your file. - </label> + </span> </fieldset> <fieldset> - <label for="file_upload" class="form-col-1">select file</label> - <input type="file" name="samples_file" id="file_upload" + <label for="file:samples" class="form-col-1">select file</label> + <input type="file" name="samples_file" id="file:samples" accept="text/csv, text/tab-separated-values" class="form-col-2" /> </fieldset> @@ -100,8 +115,29 @@ </fieldset> </form> +<table id="tbl:samples-preview"> + <caption class="heading">preview content</caption> + + <thead> + <tr> + <th>Name</th> + <th>Name2</th> + <th>Symbol</th> + <th>Alias</th> + </tr> + </thead> + + <tbody> + <tr id="default-row"> + <td colspan="4"> + Please make some selections to preview the data.</td> + </tr> + </tbody> +</table> + {%endblock%} {%block javascript%} +<script src="/static/js/upload_samples.js" type="text/javascript"></script> {%endblock%} |