aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorzsloan2021-06-18 19:28:47 +0000
committerzsloan2021-06-18 19:28:47 +0000
commit498a7760fa70788827a28b90ea6f2fd0d94931a5 (patch)
tree4d7ac34ba6549c180a8545b1879029f942192a76
parentaefd88a9950592fb8cdc28cda43a2ca3c39e7f60 (diff)
downloadgenenetwork2-498a7760fa70788827a28b90ea6f2fd0d94931a5.tar.gz
Resolving conflict in search_result_page.html
-rw-r--r--wqflask/wqflask/templates/search_result_page.html519
1 files changed, 303 insertions, 216 deletions
diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index 7ec335d5..13f3c7c1 100644
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -7,6 +7,7 @@
<link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='fontawesome/css/all.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="/static/new/css/show_trait.css" />
<link rel="stylesheet" type="text/css" href="static/new/css/trait_list.css" />
+ <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
{% endblock %}
{% block content %}
<!-- Start of body -->
@@ -171,225 +172,311 @@
return params;
};
- //ZS: Need to make sort by symbol, also need to make sure blank symbol fields at the bottom and symbols starting with numbers below letters
- trait_table = $('#trait_table').DataTable( {
- 'drawCallback': function( settings ) {
- $('#trait_table tr').off().on("click", function(event) {
- if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') {
- var obj =$(this).find('input');
- obj.prop('checked', !obj.is(':checked'));
- }
- if ($(this).hasClass("selected") && event.target.tagName.toLowerCase() !== 'a'){
- $(this).removeClass("selected")
- } else if (event.target.tagName.toLowerCase() !== 'a') {
- $(this).addClass("selected")
- }
- change_buttons()
- });
- },
- 'createdRow': function ( row, data, index ) {
- $('td', row).eq(0).attr("style", "text-align: center; padding: 0px 10px 2px 13px;");
- $('td', row).eq(1).attr("align", "right");
- $('td', row).eq(1).attr('data-export', index+1);
- $('td', row).eq(2).attr('data-export', $('td', row).eq(2).text());
- {% if dataset.type == 'ProbeSet' %}
- $('td', row).eq(3).attr('title', $('td', row).eq(3).text());
- $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
- if ($('td', row).eq(3).text().length > 20) {
- $('td', row).eq(3).text($('td', row).eq(3).text().substring(0, 20));
- $('td', row).eq(3).text($('td', row).eq(3).text() + '...')
- }
- $('td', row).eq(4).attr('title', $('td', row).eq(4).text());
- $('td', row).eq(4).attr('data-export', $('td', row).eq(4).text());
- $('td', row).slice(5,10).attr("align", "right");
- $('td', row).eq(5).attr('data-export', $('td', row).eq(5).text());
- $('td', row).eq(6).attr('data-export', $('td', row).eq(6).text());
- $('td', row).eq(7).attr('data-export', $('td', row).eq(7).text());
- $('td', row).eq(8).attr('data-export', $('td', row).eq(8).text());
- $('td', row).eq(9).attr('data-export', $('td', row).eq(9).text());
- {% elif dataset.type == 'Publish' %}
- $('td', row).eq(3).attr('title', $('td', row).eq(3).text());
- $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
- $('td', row).eq(4).attr('title', $('td', row).eq(4).text());
- $('td', row).eq(4).attr('data-export', $('td', row).eq(4).text());
- $('td', row).eq(4).attr('align', 'right');
- $('td', row).slice(6,10).attr("align", "right");
- $('td', row).eq(5).attr('data-export', $('td', row).eq(5).text());
- $('td', row).eq(6).attr('data-export', $('td', row).eq(6).text());
- $('td', row).eq(7).attr('data-export', $('td', row).eq(7).text());
- $('td', row).eq(8).attr('data-export', $('td', row).eq(8).text());
- $('td', row).eq(9).attr('data-export', $('td', row).eq(8).text());
- {% elif dataset.type == 'Geno' %}
- $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
- {% endif %}
+ var tableId = "trait_table";
+
+ columnDefs = [
+ {
+ 'data': null,
+ 'width': "25px",
+ 'orderDataType': "dom-checkbox",
+ 'orderable': false,
+ 'render': function(data, type, row, meta) {
+ return '<input type="checkbox" name="searchResult" class="checkbox trait_checkbox" value="' + data.hmac + '">'
+ }
+ },
+ {
+ 'title': "Index",
+ 'type': "natural",
+ 'width': "30px",
+ 'data': "index"
+ },
+ {
+ 'title': "Record",
+ 'type': "natural-minus-na",
+ 'data': null,
+ 'width': "60px",
+ 'render': function(data, type, row, meta) {
+ return '<a target="_blank" href="/show_trait?trait_id=' + data.name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>'
+ }
+ }{% if dataset.type == 'ProbeSet' %},
+ {
+ 'title': "Symbol",
+ 'type': "natural",
+ 'width': "120px",
+ 'data': "symbol"
+ },
+ {
+ 'title': "Description",
+ 'type': "natural",
+ 'data': null,
+ 'render': function(data, type, row, meta) {
+ try {
+ return decodeURIComponent(escape(data.description))
+ } catch(err){
+ return escape(data.description)
+ }
+ }
+ },
+ {
+ 'title': "<div style='text-align: right;'>Location</div>",
+ 'type': "natural-minus-na",
+ 'width': "125px",
+ 'data': "location"
+ },
+ {
+ 'title': "<div style='text-align: right;'>Mean</div>",
+ 'type': "natural-minus-na",
+ 'width': "30px",
+ 'data': "mean",
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "<div style='text-align: right;'>Peak <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a></div><div style='text-align: right;'>LOD&ensp;&emsp;</div>",
+ 'type': "natural-minus-na",
+ 'data': "lod_score",
+ 'width': "60px",
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "<div style='text-align: right;'>Peak Location</div>",
+ 'type': "natural-minus-na",
+ 'width': "125px",
+ 'data': "lrs_location"
+ },
+ {
+ 'title': "<div style='text-align: right;'>Effect <a href=\"{{ url_for('glossary_blueprint.glossary') }}#A\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a></div><div style='text-align: right;'>Size&ensp;&emsp;</div>",
+ 'type': "natural-minus-na",
+ 'data': "additive",
+ 'width': "60px",
+ 'orderSequence': [ "desc", "asc"]
+ }{% elif dataset.type == 'Publish' %},
+ {
+ 'title': "Description",
+ 'type': "natural",
+ 'width': "500px",
+ 'data': null,
+ 'render': function(data, type, row, meta) {
+ try {
+ return decodeURIComponent(escape(data.description))
+ } catch(err){
+ return data.description
+ }
+ }
+ },
+ {
+ 'title': "<div style='text-align: right;'>Mean</div>",
+ 'type': "natural-minus-na",
+ 'width': "30px",
+ 'data': "mean",
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "Authors",
+ 'type': "natural",
+ 'width': "300px",
+ 'data': null,
+ 'render': function(data, type, row, meta) {
+ author_list = data.authors.split(",")
+ if (author_list.length >= 6) {
+ author_string = author_list.slice(0, 6).join(",") + ", et al."
+ } else{
+ author_string = data.authors
+ }
+ return author_string
+ }
+ },
+ {
+ 'title': "<div style='text-align: right;'>Year</div>",
+ 'type': "natural-minus-na",
+ 'data': null,
+ 'width': "25px",
+ 'render': function(data, type, row, meta) {
+ if (data.pubmed_id != "N/A"){
+ return '<a href="' + data.pubmed_link + '">' + data.pubmed_text + '</a>'
+ } else {
+ return data.pubmed_text
+ }
},
- 'data': trait_list,
- 'columns': [
- {
- 'data': null,
- 'width': "10px",
- 'orderDataType': "dom-checkbox",
- 'orderable': false,
- 'render': function(data, type, row, meta) {
- return '<input type="checkbox" name="searchResult" class="checkbox trait_checkbox" value="' + data.hmac + '">'
- }
- },
- {
- 'title': "Index",
- 'type': "natural",
- 'width': "30px",
- 'data': "index"
- },
- {
- 'title': "Record",
- 'type': "natural-minus-na",
- 'data': null,
- 'width': "60px",
- 'render': function(data, type, row, meta) {
- return '<a target="_blank" href="/show_trait?trait_id=' + data.name + '&dataset=' + data.dataset + '">' + data.display_name + '</a>'
- }
- }{% if dataset.type == 'ProbeSet' %},
- {
- 'title': "Symbol",
- 'type': "natural",
- 'width': "120px",
- 'data': "symbol"
- },
- {
- 'title': "Description",
- 'type': "natural",
- 'data': null,
- 'render': function(data, type, row, meta) {
- try {
- return decodeURIComponent(escape(data.description))
- } catch(err){
- return escape(data.description)
- }
- }
- },
- {
- 'title': "<div style='text-align: right;'>Location</div>",
- 'type': "natural-minus-na",
- 'width': "125px",
- 'data': "location"
- },
- {
- 'title': "<div style='text-align: right;'>Mean</div>",
- 'type': "natural-minus-na",
- 'width': "30px",
- 'data': "mean",
- 'orderSequence': [ "desc", "asc"]
- },
- {
- 'title': "<div style='text-align: right;'>Peak <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a></div><div style='text-align: right;'>LOD&ensp;&emsp;</div>",
- 'type': "natural-minus-na",
- 'data': "lod_score",
- 'width': "60px",
- 'orderSequence': [ "desc", "asc"]
- },
- {
- 'title': "<div style='text-align: right;'>Peak Location</div>",
- 'type': "natural-minus-na",
- 'width': "125px",
- 'data': "lrs_location"
- },
- {
- 'title': "<div style='text-align: right;'>Effect <a href=\"{{ url_for('glossary_blueprint.glossary') }}#A\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a></div><div style='text-align: right;'>Size&ensp;&emsp;</div>",
- 'type': "natural-minus-na",
- 'data': "additive",
- 'width': "60px",
- 'orderSequence': [ "desc", "asc"]
- }{% elif dataset.type == 'Publish' %},
- {
- 'title': "Description",
- 'type': "natural",
- 'width': "500px",
- 'data': null,
- 'render': function(data, type, row, meta) {
- try {
- return decodeURIComponent(escape(data.description))
- } catch(err){
- return data.description
- }
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "<div style='text-align: right;'>Peak <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a></div><div style='text-align: right;'>LOD&ensp;&emsp;</div>",
+ 'type': "natural-minus-na",
+ 'data': "lod_score",
+ 'width': "60px",
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "<div style='text-align: right;'>Peak Location</div>",
+ 'type': "natural-minus-na",
+ 'width': "120px",
+ 'data': "lrs_location"
+ },
+ {
+ 'title': "<div style='text-align: right;'>Effect <a href=\"{{ url_for('glossary_blueprint.glossary') }}#A\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a></div><div style='text-align: right;'>Size&ensp;&emsp;</div>",
+ 'type': "natural-minus-na",
+ 'width': "60px",
+ 'data': "additive",
+ 'orderSequence': [ "desc", "asc"]
+ }{% elif dataset.type == 'Geno' %},
+ {
+ 'title': "<div style='text-align: right;'>Location</div>",
+ 'type': "natural-minus-na",
+ 'width': "120px",
+ 'data': "location"
+ }{% endif %}
+ ];
+
+ loadDataTable();
+
+ function loadDataTable(){
+ //ZS: Need to make sort by symbol, also need to make sure blank symbol fields at the bottom and symbols starting with numbers below letters
+ trait_table = $('#' + tableId).DataTable( {
+ 'drawCallback': function( settings ) {
+ $('#' + tableId + ' tr').off().on("click", function(event) {
+ if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') {
+ var obj =$(this).find('input');
+ obj.prop('checked', !obj.is(':checked'));
+ }
+ if ($(this).hasClass("selected") && event.target.tagName.toLowerCase() !== 'a'){
+ $(this).removeClass("selected")
+ } else if (event.target.tagName.toLowerCase() !== 'a') {
+ $(this).addClass("selected")
+ }
+ change_buttons()
+ });
+ },
+ 'createdRow': function ( row, data, index ) {
+ $('td', row).eq(0).attr("style", "text-align: center; padding: 0px 10px 2px 10px;");
+ $('td', row).eq(1).attr("align", "right");
+ $('td', row).eq(1).attr('data-export', index+1);
+ $('td', row).eq(2).attr('data-export', $('td', row).eq(2).text());
+ {% if dataset.type == 'ProbeSet' %}
+ $('td', row).eq(3).attr('title', $('td', row).eq(3).text());
+ $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
+ if ($('td', row).eq(3).text().length > 20) {
+ $('td', row).eq(3).text($('td', row).eq(3).text().substring(0, 20));
+ $('td', row).eq(3).text($('td', row).eq(3).text() + '...')
}
- },
- {
- 'title': "<div style='text-align: right;'>Mean</div>",
- 'type': "natural-minus-na",
- 'width': "30px",
- 'data': "mean",
- 'orderSequence': [ "desc", "asc"]
- },
- {
- 'title': "Authors",
- 'type': "natural",
- 'width': "300px",
- 'data': null,
- 'render': function(data, type, row, meta) {
- author_list = data.authors.split(",")
- if (author_list.length >= 6) {
- author_string = author_list.slice(0, 6).join(",") + ", et al."
- } else{
- author_string = data.authors
- }
- return author_string
+ $('td', row).eq(4).attr('title', $('td', row).eq(4).text());
+ $('td', row).eq(4).attr('data-export', $('td', row).eq(4).text());
+ $('td', row).slice(5,10).attr("align", "right");
+ $('td', row).eq(5).attr('data-export', $('td', row).eq(5).text());
+ $('td', row).eq(6).attr('data-export', $('td', row).eq(6).text());
+ $('td', row).eq(7).attr('data-export', $('td', row).eq(7).text());
+ $('td', row).eq(8).attr('data-export', $('td', row).eq(8).text());
+ $('td', row).eq(9).attr('data-export', $('td', row).eq(9).text());
+ {% elif dataset.type == 'Publish' %}
+ $('td', row).eq(3).attr('title', $('td', row).eq(3).text());
+ $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
+ $('td', row).eq(4).attr('title', $('td', row).eq(4).text());
+ $('td', row).eq(4).attr('data-export', $('td', row).eq(4).text());
+ $('td', row).eq(4).attr('align', 'right');
+ $('td', row).slice(6,10).attr("align", "right");
+ $('td', row).eq(5).attr('data-export', $('td', row).eq(5).text());
+ $('td', row).eq(6).attr('data-export', $('td', row).eq(6).text());
+ $('td', row).eq(7).attr('data-export', $('td', row).eq(7).text());
+ $('td', row).eq(8).attr('data-export', $('td', row).eq(8).text());
+ $('td', row).eq(9).attr('data-export', $('td', row).eq(8).text());
+ {% elif dataset.type == 'Geno' %}
+ $('td', row).eq(3).attr('data-export', $('td', row).eq(3).text());
+ {% endif %}
+ },
+ "data": trait_list,
+ "columns": columnDefs,
+ "order": [[1, "asc" ]],
+ "sDom": "iti",
+ "destroy": true,
+ "autoWidth": false,
+ "deferRender": true,
+ "bSortClasses": false,
+ {% if trait_list|length > 20 %}
+ "scrollY": "100vh",
+ "scroller": true,
+ "scrollCollapse": true,
+ {% else %}
+ "iDisplayLength": -1,
+ {% endif %}
+ "initComplete": function (settings) {
+ //Add JQueryUI resizable functionality to each th in the ScrollHead table
+ $('#' + tableId + '_wrapper .dataTables_scrollHead thead th').resizable({
+ handles: "e",
+ alsoResize: '#' + tableId + '_wrapper .dataTables_scrollHead table', //Not essential but makes the resizing smoother
+ stop: function () {
+ saveColumnSettings();
+ loadDataTable();
}
- },
- {
- 'title': "<div style='text-align: right;'>Year</div>",
- 'type': "natural-minus-na",
- 'data': null,
- 'width': "25px",
- 'render': function(data, type, row, meta) {
- if (data.pubmed_id != "N/A"){
- return '<a href="' + data.pubmed_link + '">' + data.pubmed_text + '</a>'
- } else {
- return data.pubmed_text
- }
- },
- 'orderSequence': [ "desc", "asc"]
- },
- {
- 'title': "<div style='text-align: right;'>Peak <a href=\"{{ url_for('glossary_blueprint.glossary') }}#LRS\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a></div><div style='text-align: right;'>LOD&ensp;&emsp;</div>",
- 'type': "natural-minus-na",
- 'data': "lod_score",
- 'width': "60px",
- 'orderSequence': [ "desc", "asc"]
- },
- {
- 'title': "<div style='text-align: right;'>Peak Location</div>",
- 'type': "natural-minus-na",
- 'width': "120px",
- 'data': "lrs_location"
- },
- {
- 'title': "<div style='text-align: right;'>Effect <a href=\"{{ url_for('glossary_blueprint.glossary') }}#A\" target=\"_blank\" style=\"color: white;\">&nbsp;<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></a></div><div style='text-align: right;'>Size&ensp;&emsp;</div>",
- 'type': "natural-minus-na",
- 'width': "60px",
- 'data': "additive",
- 'orderSequence': [ "desc", "asc"]
- }{% elif dataset.type == 'Geno' %},
- {
- 'title': "<div style='text-align: right;'>Location</div>",
- 'type': "natural-minus-na",
- 'width': "120px",
- 'data': "location"
- }{% endif %}
- ],
- "order": [[1, "asc" ]],
- 'sDom': "iti",
- "autoWidth": true,
- "bSortClasses": false,
- {% if trait_list|length > 20 %}
- "scrollY": "100vh",
- "scroller": true,
- "scrollCollapse": true
- {% else %}
- "iDisplayLength": -1
- {% endif %}
- } );
+ });
+ },
+ } );
+ }
+
+ function setUserColumnsDefWidths() {
+
+ var userColumnDef;
+
+ // Get the settings for this table from localStorage
+ var userColumnDefs = JSON.parse(localStorage.getItem(tableId)) || [];
+
+ if (userColumnDefs.length === 0 ) return;
+
+ columnDefs.forEach( function(columnDef) {
+
+ // Check if there is a width specified for this column
+ userColumnDef = userColumnDefs.find( function(column) {
+ return column.targets === columnDef.targets;
+ });
+
+ // If there is, set the width of this columnDef in px
+ if ( userColumnDef ) {
+
+ columnDef.width = userColumnDef.width + 'px';
+
+ }
+
+ });
+
+ }
+
+
+ function saveColumnSettings() {
+
+ var userColumnDefs = JSON.parse(localStorage.getItem(tableId)) || [];
+
+ var width, header, existingSetting;
+
+ trait_table.columns().every( function ( targets ) {
+
+ // Check if there is a setting for this column in localStorage
+ existingSetting = userColumnDefs.findIndex( function(column) { return column.targets === targets;});
+
+ // Get the width of this column
+ header = this.header();
+ width = $(header).width();
+
+ if ( existingSetting !== -1 ) {
+
+ // Update the width
+ userColumnDefs[existingSetting].width = width;
+
+ } else {
+
+ // Add the width for this column
+ userColumnDefs.push({
+ targets: targets,
+ width: width,
+ });
+
+ }
+
+ });
+
+ // Save (or update) the settings in localStorage
+ localStorage.setItem(tableId, JSON.stringify(userColumnDefs));
+
+ }
- trait_table.draw(); //ZS: This makes the table adjust its height properly on initial load
+ //trait_table.draw(); //ZS: This makes the table adjust its height properly on initial load
$('.toggle-vis').on( 'click', function (e) {
e.preventDefault();
@@ -409,7 +496,7 @@
$('#redraw').click(function() {
- var table = $('#trait_table').DataTable();
+ var table = $('#' + tableId).DataTable();
table.colReorder.reset()
});