From 6e78df4be9abb7e1ce959e9b83b9d38bd77fcade Mon Sep 17 00:00:00 2001
From: zsloan
Date: Tue, 2 Mar 2021 22:49:52 +0000
Subject: Adoping code from the following link to make resizeable columns for
search result table -
https://datatables.net/forums/discussion/63231/resizing-columns-using-jquery-ui
---
wqflask/wqflask/templates/search_result_page.html | 519 +++++++++++++---------
1 file changed, 303 insertions(+), 216 deletions(-)
diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index e7a7bc51..a33d1b1a 100644
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -7,6 +7,7 @@
' + data.display_name + ' '
+ }
+ }{% 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': "Location
",
+ 'type': "natural-minus-na",
+ 'width': "125px",
+ 'data': "location"
+ },
+ {
+ 'title': "Mean
",
+ 'type': "natural-minus-na",
+ 'width': "30px",
+ 'data': "mean",
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "LOD
",
+ 'type': "natural-minus-na",
+ 'data': "lod_score",
+ 'width': "60px",
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "Peak Location
",
+ 'type': "natural-minus-na",
+ 'width': "125px",
+ 'data': "lrs_location"
+ },
+ {
+ 'title': "Size
",
+ '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': "Mean
",
+ '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': "Year
",
+ 'type': "natural-minus-na",
+ 'data': null,
+ 'width': "25px",
+ 'render': function(data, type, row, meta) {
+ if (data.pubmed_id != "N/A"){
+ return '' + data.pubmed_text + ' '
+ } else {
+ return data.pubmed_text
+ }
},
- 'data': trait_list,
- 'columns': [
- {
- 'data': null,
- 'width': "25px",
- 'orderDataType': "dom-checkbox",
- 'orderable': false,
- 'render': function(data, type, row, meta) {
- return '' + data.display_name + ' '
- }
- }{% 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': "Location
",
- 'type': "natural-minus-na",
- 'width': "125px",
- 'data': "location"
- },
- {
- 'title': "Mean
",
- 'type': "natural-minus-na",
- 'width': "30px",
- 'data': "mean",
- 'orderSequence': [ "desc", "asc"]
- },
- {
- 'title': "LOD
",
- 'type': "natural-minus-na",
- 'data': "lod_score",
- 'width': "60px",
- 'orderSequence': [ "desc", "asc"]
- },
- {
- 'title': "Peak Location
",
- 'type': "natural-minus-na",
- 'width': "125px",
- 'data': "lrs_location"
- },
- {
- 'title': "Size
",
- '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': "LOD
",
+ 'type': "natural-minus-na",
+ 'data': "lod_score",
+ 'width': "60px",
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "Peak Location
",
+ 'type': "natural-minus-na",
+ 'width': "120px",
+ 'data': "lrs_location"
+ },
+ {
+ 'title': "Size
",
+ 'type': "natural-minus-na",
+ 'width': "60px",
+ 'data': "additive",
+ 'orderSequence': [ "desc", "asc"]
+ }{% elif dataset.type == 'Geno' %},
+ {
+ 'title': "Location
",
+ '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': "Mean
",
- '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': "Year
",
- 'type': "natural-minus-na",
- 'data': null,
- 'width': "25px",
- 'render': function(data, type, row, meta) {
- if (data.pubmed_id != "N/A"){
- return '' + data.pubmed_text + ' '
- } else {
- return data.pubmed_text
- }
- },
- 'orderSequence': [ "desc", "asc"]
- },
- {
- 'title': "LOD
",
- 'type': "natural-minus-na",
- 'data': "lod_score",
- 'width': "60px",
- 'orderSequence': [ "desc", "asc"]
- },
- {
- 'title': "Peak Location
",
- 'type': "natural-minus-na",
- 'width': "120px",
- 'data': "lrs_location"
- },
- {
- 'title': "Size
",
- 'type': "natural-minus-na",
- 'width': "60px",
- 'data': "additive",
- 'orderSequence': [ "desc", "asc"]
- }{% elif dataset.type == 'Geno' %},
- {
- 'title': "Location
",
- '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()
});
--
cgit 1.4.1
From 3c4043e445d0708490b2a14805b8e3eaa75c23fd Mon Sep 17 00:00:00 2001
From: zsloan
Date: Thu, 11 Mar 2021 22:35:11 +0000
Subject: Added some CSS to make cell content cut off with ellipses if a column
is narrower than the content's width
---
wqflask/wqflask/static/new/css/trait_list.css | 18 ++++++++++++++++++
1 file changed, 18 insertions(+)
diff --git a/wqflask/wqflask/static/new/css/trait_list.css b/wqflask/wqflask/static/new/css/trait_list.css
index c7249721..6d49f009 100644
--- a/wqflask/wqflask/static/new/css/trait_list.css
+++ b/wqflask/wqflask/static/new/css/trait_list.css
@@ -52,3 +52,21 @@ div.dts div.dataTables_paginate,div.dts div.dataTables_length{
display:none
}
+/* This is the important CSS */
+table.dataTable {
+ table-layout: fixed;
+ width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+table.dataTable th {
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+table.dataTable td {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
\ No newline at end of file
--
cgit 1.4.1
From c03dded58477b48ce54a8a03da90aae45a256758 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Thu, 11 Mar 2021 22:43:35 +0000
Subject: Made a variety of changes to make column resizeability work - the
main issue was related to there being both an sWidth and width parameter
---
wqflask/wqflask/templates/search_result_page.html | 317 +++++++++++-----------
1 file changed, 166 insertions(+), 151 deletions(-)
diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index a33d1b1a..210cef30 100644
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -125,8 +125,8 @@
{% endif %}
{% endif %}
-
-
+
+
Loading...
@@ -175,161 +175,174 @@
var tableId = "trait_table";
columnDefs = [
- {
- 'data': null,
- 'width': "25px",
- 'orderDataType': "dom-checkbox",
- 'orderable': false,
- 'render': function(data, type, row, meta) {
- return '' + data.display_name + ' '
+ {
+ 'data': null,
+ 'width': "25px",
+ 'orderDataType': "dom-checkbox",
+ 'orderable': false,
+ 'targets': 0,
+ 'render': function(data, type, row, meta) {
+ return '' + data.display_name + ' '
+ }
+ }{% if dataset.type == 'ProbeSet' %},
+ {
+ 'title': "Symbol",
+ 'type': "natural",
+ 'width': "120px",
+ 'targets': 3,
+ 'data': "symbol"
+ },
+ {
+ 'title': "Description",
+ 'type': "natural",
+ 'data': null,
+ 'targets': 4,
+ 'render': function(data, type, row, meta) {
+ try {
+ return decodeURIComponent(escape(data.description))
+ } catch(err){
+ return escape(data.description)
}
- }{% 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 {
+ }
+ },
+ {
+ 'title': "Location
",
+ 'type': "natural-minus-na",
+ 'width': "125px",
+ 'targets': 5,
+ 'data': "location"
+ },
+ {
+ 'title': "Mean
",
+ 'type': "natural-minus-na",
+ 'width': "30px",
+ 'data': "mean",
+ 'targets': 6,
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "LOD
",
+ 'type': "natural-minus-na",
+ 'data': "lod_score",
+ 'width': "60px",
+ 'targets': 7,
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "Peak Location
",
+ 'type': "natural-minus-na",
+ 'width': "125px",
+ 'targets': 8,
+ 'data': "lrs_location"
+ },
+ {
+ 'title': "Size
",
+ 'type': "natural-minus-na",
+ 'data': "additive",
+ 'width': "60px",
+ 'targets': 9,
+ '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 escape(data.description)
- }
+ } catch(err){
+ return data.description
}
- },
- {
- 'title': "Location
",
- 'type': "natural-minus-na",
- 'width': "125px",
- 'data': "location"
- },
- {
- 'title': "Mean
",
- 'type': "natural-minus-na",
- 'width': "30px",
- 'data': "mean",
- 'orderSequence': [ "desc", "asc"]
- },
- {
- 'title': "LOD
",
- 'type': "natural-minus-na",
- 'data': "lod_score",
- 'width': "60px",
- 'orderSequence': [ "desc", "asc"]
- },
- {
- 'title': "Peak Location
",
- 'type': "natural-minus-na",
- 'width': "125px",
- 'data': "lrs_location"
- },
- {
- 'title': "Size
",
- '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': "Mean
",
+ '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
}
- },
- {
- 'title': "Mean
",
- '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
+ return author_string
+ }
+ },
+ {
+ 'title': "Year
",
+ 'type': "natural-minus-na",
+ 'data': null,
+ 'width': "25px",
+ 'render': function(data, type, row, meta) {
+ if (data.pubmed_id != "N/A"){
+ return '' + data.pubmed_text + ' '
+ } else {
+ return data.pubmed_text
}
},
- {
- 'title': "Year
",
- 'type': "natural-minus-na",
- 'data': null,
- 'width': "25px",
- 'render': function(data, type, row, meta) {
- if (data.pubmed_id != "N/A"){
- return '' + data.pubmed_text + ' '
- } else {
- return data.pubmed_text
- }
- },
- 'orderSequence': [ "desc", "asc"]
- },
- {
- 'title': "LOD
",
- 'type': "natural-minus-na",
- 'data': "lod_score",
- 'width': "60px",
- 'orderSequence': [ "desc", "asc"]
- },
- {
- 'title': "Peak Location
",
- 'type': "natural-minus-na",
- 'width': "120px",
- 'data': "lrs_location"
- },
- {
- 'title': "Size
",
- 'type': "natural-minus-na",
- 'width': "60px",
- 'data': "additive",
- 'orderSequence': [ "desc", "asc"]
- }{% elif dataset.type == 'Geno' %},
- {
- 'title': "Location
",
- 'type': "natural-minus-na",
- 'width': "120px",
- 'data': "location"
- }{% endif %}
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "LOD
",
+ 'type': "natural-minus-na",
+ 'data': "lod_score",
+ 'width': "60px",
+ 'orderSequence': [ "desc", "asc"]
+ },
+ {
+ 'title': "Peak Location
",
+ 'type': "natural-minus-na",
+ 'width': "120px",
+ 'data': "lrs_location"
+ },
+ {
+ 'title': "Size
",
+ 'type': "natural-minus-na",
+ 'width': "60px",
+ 'data': "additive",
+ 'orderSequence': [ "desc", "asc"]
+ }{% elif dataset.type == 'Geno' %},
+ {
+ 'title': "Location
",
+ 'type': "natural-minus-na",
+ 'width': "120px",
+ 'data': "location"
+ }{% endif %}
];
loadDataTable();
function loadDataTable(){
+
+ setUserColumnsDefWidths();
+
//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 ) {
@@ -391,7 +404,8 @@
"deferRender": true,
"bSortClasses": false,
{% if trait_list|length > 20 %}
- "scrollY": "100vh",
+ "scrollY": "500px",
+ "scrollX": true,
"scroller": true,
"scrollCollapse": true,
{% else %}
@@ -411,6 +425,10 @@
} );
}
+ window.addEventListener('resize', function(){
+ trait_table.columns.adjust();
+ });
+
function setUserColumnsDefWidths() {
var userColumnDef;
@@ -430,12 +448,12 @@
// If there is, set the width of this columnDef in px
if ( userColumnDef ) {
+ columnDef.sWidth = userColumnDef.width + 'px';
columnDef.width = userColumnDef.width + 'px';
}
});
-
}
@@ -473,11 +491,8 @@
// 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
-
$('.toggle-vis').on( 'click', function (e) {
e.preventDefault();
--
cgit 1.4.1
From 8d727b8de708e48b298f42c673f8e902ac3df6a4 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Thu, 11 Mar 2021 22:57:49 +0000
Subject: Added a parameter to prevent columnDefs from being overwritten on
initial table generation + changed the default table width to 100%
---
wqflask/wqflask/templates/search_result_page.html | 12 +++++++-----
1 file changed, 7 insertions(+), 5 deletions(-)
diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index 210cef30..973e9c23 100644
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -125,8 +125,8 @@
{% endif %}
{% endif %}
-
-
+
+
Loading...
@@ -337,11 +337,13 @@
}{% endif %}
];
- loadDataTable();
+ loadDataTable(true);
- function loadDataTable(){
+ function loadDataTable(first_run=false){
- setUserColumnsDefWidths();
+ if (!first_run){
+ setUserColumnsDefWidths();
+ }
//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( {
--
cgit 1.4.1
From 814258b95436c5aabd76d932fde8386fea187e84 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Thu, 11 Mar 2021 23:08:43 +0000
Subject: Set scrollX in all cases so the adjustablee columns also work for
shorter results that don't use Scroller (<20 results)
---
wqflask/wqflask/templates/search_result_page.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index 973e9c23..b2820496 100644
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -405,9 +405,9 @@
"autoWidth": false,
"deferRender": true,
"bSortClasses": false,
+ "scrollX": true,
{% if trait_list|length > 20 %}
"scrollY": "500px",
- "scrollX": true,
"scroller": true,
"scrollCollapse": true,
{% else %}
--
cgit 1.4.1
From f421a7b319696bb57b9ea4c0a3ec94a32fa4aa65 Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 24 Mar 2021 19:31:04 +0000
Subject: Use autoWidth on initial table load, though I'll change this to only
apply when certain fields (like Description) are below a certain width
Added some code tracking the change in width when a column's width is adjusted, so that the table_container width can be changed accordingly
---
wqflask/wqflask/templates/search_result_page.html | 23 ++++++++++++++++-------
1 file changed, 16 insertions(+), 7 deletions(-)
diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index b2820496..22a22e68 100644
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -126,7 +126,7 @@
{% endif %}
-
+
Loading...
@@ -174,6 +174,8 @@
var tableId = "trait_table";
+ var width_change = 0; //ZS: For storing the change in width so overall table width can be adjusted by that amount
+
columnDefs = [
{
'data': null,
@@ -196,7 +198,6 @@
'title': "Record",
'type': "natural-minus-na",
'data': null,
- 'width': "60px",
'targets': 2,
'render': function(data, type, row, meta) {
return '' + data.display_name + ' '
@@ -232,7 +233,7 @@
{
'title': "Mean
",
'type': "natural-minus-na",
- 'width': "30px",
+ 'width': "40px",
'data': "mean",
'targets': 6,
'orderSequence': [ "desc", "asc"]
@@ -346,7 +347,7 @@
}
//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( {
+ table_settings = {
'drawCallback': function( settings ) {
$('#' + tableId + ' tr').off().on("click", function(event) {
if (event.target.type !== 'checkbox' && event.target.tagName.toLowerCase() !== 'a') {
@@ -402,7 +403,7 @@
"order": [[1, "asc" ]],
"sDom": "iti",
"destroy": true,
- "autoWidth": false,
+ "autoWidth": true,
"deferRender": true,
"bSortClasses": false,
"scrollX": true,
@@ -418,13 +419,22 @@
$('#' + tableId + '_wrapper .dataTables_scrollHead thead th').resizable({
handles: "e",
alsoResize: '#' + tableId + '_wrapper .dataTables_scrollHead table', //Not essential but makes the resizing smoother
+ resize: function( event, ui ) {
+ width_change = ui.size.width - ui.originalSize.width;
+ },
stop: function () {
saveColumnSettings();
loadDataTable();
}
});
},
- } );
+ }
+
+ if (!first_run){
+ table_settings['autoWidth'] = false;
+ $('#table_container').css("width", String($('#trait_table').width() + width_change) + "px"); //ZS : Change the container width by the change in width of the adjusted column, so the overall table size adjusts properly
+ }
+ trait_table = $('#' + tableId).DataTable(table_settings);
}
window.addEventListener('resize', function(){
@@ -488,7 +498,6 @@
});
}
-
});
// Save (or update) the settings in localStorage
--
cgit 1.4.1
From ed911b95571948c8c34ff5f3286f322cc9cfbbcf Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 24 Mar 2021 22:12:14 +0000
Subject: Store a dictionary of maximum widths for each field + create a
variable indicating if there are any wide columns (too wide to use
DataTables' 'autoWidth' setting)
---
wqflask/wqflask/search_results.py | 14 +++++++++++++-
1 file changed, 13 insertions(+), 1 deletion(-)
diff --git a/wqflask/wqflask/search_results.py b/wqflask/wqflask/search_results.py
index f23c0582..c4d8d4ce 100644
--- a/wqflask/wqflask/search_results.py
+++ b/wqflask/wqflask/search_results.py
@@ -98,7 +98,6 @@ class SearchResultPage(object):
species = webqtlDatabaseFunction.retrieve_species(self.dataset.group.name)
# result_set represents the results for each search term; a search of
# "shh grin2b" would have two sets of results, one for each term
- logger.debug("self.results is:", pf(self.results))
for index, result in enumerate(self.results):
if not result:
@@ -164,6 +163,19 @@ class SearchResultPage(object):
trait_dict[key] = trait_dict[key].decode('utf-8')
trait_list.append(trait_dict)
+ self.max_widths = {}
+ for i, trait in enumerate(trait_list):
+ for key in trait.keys():
+ self.max_widths[key] = max(len(str(trait[key])), self.max_widths[key]) if key in self.max_widths else len(str(trait[key]))
+
+ self.wide_columns_exist = False
+ if this_trait.dataset.type == "Publish":
+ if (self.max_widths['display_name'] > 25 or self.max_widths['description'] > 100 or self.max_widths['authors']> 80):
+ self.wide_columns_exist = True
+ if this_trait.dataset.type == "ProbeSet":
+ if (self.max_widths['display_name'] > 25 or self.max_widths['symbol'] > 25 or self.max_widths['description'] > 100):
+ self.wide_columns_exist = True
+
self.trait_list = trait_list
if self.dataset.type == "ProbeSet":
--
cgit 1.4.1
From 52dcfe71be8cd86bfc19fa310fa3d65920d6f2af Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 24 Mar 2021 22:12:57 +0000
Subject: Added some default widths for situations where some wide columns
exist and autoWidth can't be used on initial load + changed the logic for how
to recalculate table width when a column is manually resized
---
wqflask/wqflask/templates/search_result_page.html | 55 +++++++++++++++++------
1 file changed, 42 insertions(+), 13 deletions(-)
diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html
index 22a22e68..8ecddc53 100644
--- a/wqflask/wqflask/templates/search_result_page.html
+++ b/wqflask/wqflask/templates/search_result_page.html
@@ -125,7 +125,7 @@
{% endif %}
{% endif %}
-
+
Loading... ' + data.display_name + ' '
}
- }{% if dataset.type == 'ProbeSet' %},
+ },
{
'title': "Symbol",
'type': "natural",
- 'width': "120px",
+ {% if wide_columns_exist == true %}
+ 'width': "200px",
+ {% endif %}
'targets': 3,
'data': "symbol"
},
@@ -214,6 +220,9 @@
'title': "Description",
'type': "natural",
'data': null,
+ {% if wide_columns_exist == true %}
+ 'width': "600px",
+ {% endif %}
'targets': 4,
'render': function(data, type, row, meta) {
try {
@@ -261,10 +270,21 @@
'targets': 9,
'orderSequence': [ "desc", "asc"]
}{% elif dataset.type == 'Publish' %},
+ {
+ 'title': "Record",
+ 'type': "natural-minus-na",
+ 'data': null,
+ {% if wide_columns_exist == true %}
+ 'width': "100px",
+ {% endif %}
+ 'targets': 2,
+ 'render': function(data, type, row, meta) {
+ return '' + data.display_name + ' '
+ }
+ },
{
'title': "Description",
'type': "natural",
- 'width': "500px",
'data': null,
'render': function(data, type, row, meta) {
try {
@@ -277,14 +297,16 @@
{
'title': "Mean
",
'type': "natural-minus-na",
- 'width': "30px",
+ 'width': "60px",
'data': "mean",
'orderSequence': [ "desc", "asc"]
},
{
'title': "Authors",
'type': "natural",
- 'width': "300px",
+ {% if wide_columns_exist == true %}
+ 'width': "400px",
+ {% endif %}
'data': null,
'render': function(data, type, row, meta) {
author_list = data.authors.split(",")
@@ -300,7 +322,7 @@
'title': "Year
",
'type': "natural-minus-na",
'data': null,
- 'width': "25px",
+ 'width': "50px",
'render': function(data, type, row, meta) {
if (data.pubmed_id != "N/A"){
return '' + data.pubmed_text + ' '
@@ -403,7 +425,11 @@
"order": [[1, "asc" ]],
"sDom": "iti",
"destroy": true,
+ {% if wide_columns_exist != true %}
"autoWidth": true,
+ {% else %}
+ "autoWidth": false,
+ {% endif %}
"deferRender": true,
"bSortClasses": false,
"scrollX": true,
@@ -432,9 +458,15 @@
if (!first_run){
table_settings['autoWidth'] = false;
- $('#table_container').css("width", String($('#trait_table').width() + width_change) + "px"); //ZS : Change the container width by the change in width of the adjusted column, so the overall table size adjusts properly
+ $('#table_container').css("width", String($('#trait_table').width() + width_change {% if trait_list|length > 20 %}+ 17{% endif %}) + "px"); //ZS : Change the container width by the change in width of the adjusted column, so the overall table size adjusts properly
}
trait_table = $('#' + tableId).DataTable(table_settings);
+
+ {% if trait_list|length > 20 %}
+ if (first_run){
+ $('#table_container').css("width", String($('#trait_table').width() + 17) + "px");
+ }
+ {% endif %}
}
window.addEventListener('resize', function(){
@@ -442,7 +474,6 @@
});
function setUserColumnsDefWidths() {
-
var userColumnDef;
// Get the settings for this table from localStorage
@@ -468,9 +499,7 @@
});
}
-
function saveColumnSettings() {
-
var userColumnDefs = JSON.parse(localStorage.getItem(tableId)) || [];
var width, header, existingSetting;
--
cgit 1.4.1