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(-) (limited to 'wqflask') 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 @@ + {% endblock %} {% block content %} @@ -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 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() + '...') - } - $('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 '' + } + }, + { + '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 '' + 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': "
Peak  
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': "
Effect  
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 '' - } - }, - { - '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 '' + 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': "
Peak  
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': "
Effect  
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': "
Peak  
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': "
Effect  
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': "
Peak  
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': "
Effect  
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 v1.2.3 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(+) (limited to 'wqflask') 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 v1.2.3 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(-) (limited to 'wqflask') 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 %} -
- +
+
@@ -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 '' - } - }, - { - '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 '' + data.display_name + '' + { + 'data': null, + 'width': "25px", + 'orderDataType': "dom-checkbox", + 'orderable': false, + 'targets': 0, + 'render': function(data, type, row, meta) { + return '' + } + }, + { + 'title': "Index", + 'type': "natural", + 'width': "30px", + 'targets': 1, + 'data': "index" + }, + { + 'title': "Record", + 'type': "natural-minus-na", + 'data': null, + 'width': "60px", + 'targets': 2, + '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': "
Peak  
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': "
Effect  
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': "
Peak  
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': "
Effect  
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': "
Peak  
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': "
Effect  
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': "
Peak  
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': "
Effect  
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 v1.2.3 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(-) (limited to 'wqflask') 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 v1.2.3 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(-) (limited to 'wqflask') 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 v1.2.3 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(-) (limited to 'wqflask') 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 v1.2.3 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(-) (limited to 'wqflask') 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 v1.2.3 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(-) (limited to 'wqflask') 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...
@@ -190,23 +190,29 @@ { 'title': "Index", 'type': "natural", - 'width': "30px", + 'width': "35px", 'targets': 1, 'data': "index" - }, + } + {% if dataset.type == 'ProbeSet' %}, { 'title': "Record", 'type': "natural-minus-na", 'data': null, + {% if wide_columns_exist == true %} + 'width': "{{ max_widths.display_name * 5 }}px", + {% endif %} 'targets': 2, 'render': function(data, type, row, meta) { return '' + 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 v1.2.3

Loading...