'''.format(legend_html)
+ }
diff --git a/catalog/static/catalog/pgs.js b/catalog/static/catalog/pgs.js
index 6a230209..9165b206 100644
--- a/catalog/static/catalog/pgs.js
+++ b/catalog/static/catalog/pgs.js
@@ -6,6 +6,9 @@ var anc_types = {
};
var data_toggle_table = 'table[data-toggle="table"]';
+var data_big_table = '.pgs_big_table';
+var data_table_elements = [data_toggle_table,data_big_table];
+var anc_eur = 'EUR';
$(document).ready(function() {
@@ -113,54 +116,79 @@ $(document).ready(function() {
};
- // Search autocompletion
+ /*
+ * Search autocompletion
+ */
+
var autocomplete_url = "/autocomplete/";
- $("#q").autocomplete({
- minLength: 3,
- source: function (request, response) {
- $.ajax({
- url: autocomplete_url,
- data: { 'q': request.term },
- success: function (data) {
- response(data.results);
- },
- error: function () {
- response([]);
- }
- });
- },
- select: function(event, ui) {
- $("#q").val(ui.item.id);
- $("#search_form").submit();
- }
- })
- .autocomplete( "instance" )._renderItem = function( ul, item ) {
- return format_autocomplete(ul,item);
- };
- // Search autocompletion - small screen
- $("#q2").autocomplete({
- minLength: 3,
- source: function (request, response) {
- $.ajax({
- url: autocomplete_url,
- data: { 'q': request.term },
- success: function (data) {
- response(data.results);
- },
- error: function () {
- response([]);
- }
- });
- },
- select: function(event, ui) {
- $("#q2").val(ui.item.id);
- $("#search_form_2").submit();
- }
- })
- .autocomplete( "instance" )._renderItem = function( ul, item ) {
- return format_autocomplete(ul,item);
- };
+ // Search autocompletion - Main box ('q')
+ var main_search_id = 'q';
+ if ($("#"+main_search_id).length) {
+ var main_search_form_id = 'search_form';
+ $("#"+main_search_id).autocomplete({
+ minLength: 3,
+ source: function (request, response) {
+ $.ajax({
+ url: autocomplete_url,
+ data: { 'q': request.term }, // <= Keep 'q'
+ success: function (data) {
+ response(data.results);
+ },
+ error: function () {
+ response([]);
+ }
+ });
+ },
+ select: function(event, ui) {
+ $("#"+main_search_id).val(ui.item.id);
+ $("#"+main_search_form_id).submit();
+ }
+ })
+ .autocomplete( "instance" )._renderItem = function( ul, item ) {
+ return format_autocomplete(ul,item);
+ };
+ // Submit button control
+ $('#search_btn').click(function() {
+ if ($('#'+main_search_id).val() && $('#'+main_search_id).val() != ''){
+ $('#'+main_search_form_id).submit();
+ }
+ })
+ }
+
+ // Search autocompletion - small screen (q2)
+ var alt_search_id = 'q2';
+ if ($("#"+alt_search_id).length) {
+ var alt_search_form_id = 'search_form_2';
+ $("#"+alt_search_id).autocomplete({
+ minLength: 3,
+ source: function (request, response) {
+ $.ajax({
+ url: autocomplete_url,
+ data: { 'q': request.term }, // <= Keep 'q'
+ success: function (data) {
+ response(data.results);
+ },
+ error: function () {
+ response([]);
+ }
+ });
+ },
+ select: function(event, ui) {
+ $("#"+alt_search_id).val(ui.item.id);
+ $("#"+alt_search_form_id).submit();
+ }
+ })
+ .autocomplete( "instance" )._renderItem = function( ul, item ) {
+ return format_autocomplete(ul,item);
+ };
+ // Submit button control
+ $('#search_btn_2').click(function() {
+ if ($("#"+alt_search_id).val() && $("#"+alt_search_id).val() != ''){
+ $("#"+alt_search_form_id).submit();
+ }
+ })
+ }
// Button toggle
$('.toggle_btn').click(function() {
@@ -215,18 +243,6 @@ $(document).ready(function() {
});
- // Control on search form(s)
- $('#search_btn').click(function() {
- if ($('#q').val() && $('#q').val() != ''){
- $('#search_form').submit();
- }
- })
- $('#search_btn_2').click(function() {
- if ($('#q2').val() && $('#q2').val() != ''){
- $('#search_form_2').submit();
- }
- })
-
// Buttons in the Search page results
$('.search_facet').click(function(){
if ($(this).find('i.fa-circle')) {
@@ -296,8 +312,95 @@ $(document).ready(function() {
});
- function filter_score_table() {
+ /*
+ * Browse Scores Form
+ */
+
+ // Ancestry filtering - Browse Scores
+ var browse_form_name = 'browse_form';
+ $('#browse_ancestry_type_list').on('change', function() {
+ submit_browse_form();
+ });
+ $('#browse_ancestry_filter_ind').on('change', function() {
+ submit_browse_form();
+ });
+ $("#browse_ancestry_filter_list").on("change", ".browse_ancestry_filter_cb",function() {
+ submit_browse_form();
+ });
+ show_hide_european_filter(true);
+
+ // Search box events for - Browse Scores
+ $('#browse_search_btn').on("click", function(e) {
+ submit_browse_form();
+ });
+ var $browse_search_input = $('#browse_search');
+ $browse_search_input.on("keypress", function(e) {
+ if (e.keyCode === 13) {
+ submit_browse_form();
+ }
+ });
+ // Catch event when the "X" button is clicked in the search box.
+ $browse_search_input.on('search', function () {
+ submit_browse_form();
+ });
+ // Functions to set timer on typing before submitting the form
+ var search_typing_timer;
+ //on keyup, start the countdown
+ $browse_search_input.on('keyup', function () {
+ clearTimeout(search_typing_timer);
+ search_typing_timer = setTimeout(function() {
+ submit_browse_form();
+ }, 1000);
+ });
+ //on keydown, clear the countdown
+ $browse_search_input.on('keydown', function () {
+ clearTimeout(search_typing_timer);
+ });
+ // Send form with updated URL (sort) - Browse Scores
+ $('.orderable > a').click(function(e) {
+ e.preventDefault();
+ var sort_url = $(this).attr('href');
+ var url = $('#'+browse_form_name).attr('action');
+ show_hide_european_filter();
+ $('#'+browse_form_name).attr('action', url+sort_url).submit();
+ });
+ // Send form with updated URL (pagination)
+ $('.pagination > li > a').click(function(e) {
+ e.preventDefault();
+ var sort_url = $(this).attr('href');
+ var url = $('#'+browse_form_name).attr('action');
+ show_hide_european_filter();
+ $('#'+browse_form_name).attr('action', url+sort_url).submit();
+ });
+
+
+ function submit_browse_form() {
+ if ($('#browse_anc_cb_EUR').length) {
+ show_hide_european_filter();
+ }
+ document.forms[browse_form_name].submit();
+ }
+
+
+ function show_hide_european_filter(show_hide_parent) {
+ // Function to show/hide the European filter checkbox - Browse Scores page
+ var filter_ind_anc = $("#browse_ancestry_filter_ind option:selected").val();
+ var $cb_eur_id_elem = $('#browse_anc_cb_EUR');
+ if (filter_ind_anc == anc_eur) {
+ var default_val = $cb_eur_id_elem.data('default');
+ $cb_eur_id_elem.prop('checked', default_val);
+ if (show_hide_parent) {
+ $cb_eur_id_elem.parent().hide();
+ }
+ }
+ else if (filter_ind_anc != anc_eur && show_hide_parent) {
+ $cb_eur_id_elem.parent().show();
+ }
+ }
+
+
+ function filter_score_table() {
/** Get data from Ancestry Filters form **/
// Traits //
@@ -326,29 +429,29 @@ $(document).ready(function() {
$(sample_table_id).bootstrapTable('filterBy', {});
var stage = $("#ancestry_type_list option:selected").val();
- var anc_eur_cb = 'anc_cb_EUR';
- var anc_eur = 'EUR';
+ var anc_eur_cb_id = 'anc_cb_EUR';
+ var $anc_eur_cb = $('#'+anc_eur_cb_id);
// Single ancestry selection + show/hide European checkbox filter
var ind_anc = $("#ancestry_filter_ind option:selected").val();
if (ind_anc != '') {
// Hide European checkbox if European selected in the dropdown
if (ind_anc == anc_eur) {
- var default_val = $('#'+anc_eur_cb).data('default');
- $('#'+anc_eur_cb).prop('checked', default_val);
- $('#'+anc_eur_cb).parent().hide();
+ var default_val = $anc_eur_cb.data('default');
+ $anc_eur_cb.prop('checked', default_val);
+ $anc_eur_cb.parent().hide();
}
anc_filter.push(ind_anc);
}
// Show European checkbox if European is not selected in the dropdown
if (ind_anc != anc_eur) {
- $('#'+anc_eur_cb).parent().show();
+ $anc_eur_cb.parent().show();
}
// Fetch checkboxes selection
$(".ancestry_filter_cb").each(function () {
// Add filter when "European" checkbox is NOT checked
- if ($(this).attr('id') == anc_eur_cb) {
+ if ($(this).attr('id') == anc_eur_cb_id) {
if (!$(this).prop('checked')) {
anc_filter.push('non-'+anc_eur);
}
@@ -362,8 +465,11 @@ $(document).ready(function() {
/** Filter the PGS Scores table **/
+ if (anc_filter_length != 0 || stage || trait_filter != '') {
- if ((anc_filter_length != 0 && stage) || trait_filter != '') {
+ if (stage) {
+ anc_filter_length += 1;
+ }
if (trait_filter != '') {
anc_filter_length += 1;
@@ -383,23 +489,49 @@ $(document).ready(function() {
}
pgs_ids_list_link[scores_table_id] = [];
-
var data = $(scores_table_id).bootstrapTable('getData');
+ // Filter each row
$.each(data,function(i, row) {
var pass_filter = 0;
// Ancestry
- if (anc_filter.length != 0 && stage) {
+ if (anc_filter.length != 0 || stage) {
var ancestry_html = $(row[ancestry_col]);
- var anc_list = ancestry_html.attr('data-anc-'+stage);
- if (!anc_list) {
- return;
+ var stages_list = [stage];
+ if (stage == 'all') {
+ stages_list = ['gwas','dev','eval'];
}
- anc_list = JSON.parse(anc_list);
-
- for (var f in anc_filter) {
- if (anc_list.includes(anc_filter[f])) {
- pass_filter += 1;
+ var pass_anc_stage = 0;
+ var pass_anc_filter = 0;
+ for (var i=0; i ul {
}
}
+.pgs_big_table {
+ border-bottom: 1px solid $bootstrap-table_border_colour;
+ th {
+ background-color: $pgs_light_grey;
+ color: $bootstrap-table_colour;
+ }
+ th, td {
+ border-left: 1px solid $bootstrap-table_border_colour;
+ }
+ th:last-child, td:last-child {
+ border-right: 1px solid $bootstrap-table_border_colour;
+ }
+ tr:hover {
+ background-color: rgba(0,0,0,.075);
+ }
+ th.orderable > a {
+ color: $bootstrap-table_colour;
+ border-bottom: none;
+ &:after {
+ font-family: "Font Awesome 6 Free";
+ font-weight: 900;
+ content: "\f0dc";
+ color: $pgs_darkC;
+ padding-left: 0.5rem;
+ }
+ }
+ th.orderable.asc > a {
+ &:after {
+ font-family: "Font Awesome 6 Free";
+ font-weight: 900;
+ content: "\f0de";
+ color: $pgs_colour_1;
+ padding-left: 0.5rem;
+ }
+ }
+ th.orderable.desc > a {
+ &:after {
+ font-family: "Font Awesome 6 Free";
+ font-weight: 900;
+ content: "\f0dd";
+ color: $pgs_colour_1;
+ padding-left: 0.5rem;
+ }
+ }
+}
+
+.pgs_search_toolbar {
+ display:flex;
+ justify-content:flex-end;
+ > div:first-child {
+ width:200px;
+ margin: 8px 5px 8px 8px;
+ }
+ > div:last-child {
+ margin: 8px 0px;
+ }
+}
+
+
/* Icons related CSS */
.external-link:after {
font-family: "Font Awesome 6 Free";
@@ -2350,7 +2416,10 @@ footer {
display: flex;
justify-content: flex-start;
> div:not(:last-child) {
- margin-right: 1rem!important;
+ margin-right: 1rem;
+ }
+ .filter_container {
+ margin-bottom: 1rem;
}
}
/* Mobile phone display */
@@ -2359,7 +2428,7 @@ footer {
flex-direction:column;
justify-content: center;
> div {
- margin-right:0px;
+ margin-right:0px !important;
}
}
}
@@ -2478,6 +2547,22 @@ footer {
}
}
+.anc_col_subtitle {
+ display:flex;
+ font-size:12px;
+ white-space:nowrap;
+ text-align:center;
+ font-weight: normal !important;
+ div {
+ display:inline-block;
+ width:48px;
+ padding:4px 5px;
+ margin:0px;
+ }
+ div:not(:first-child) {
+ border-left: 1px solid $bootstrap-table_border_colour;
+ }
+}
.anc_chart_container {
display:flex;
> div {
diff --git a/catalog/tables.py b/catalog/tables.py
index cb4d5e06..12e60d06 100644
--- a/catalog/tables.py
+++ b/catalog/tables.py
@@ -13,6 +13,7 @@
page_size = "50"
empty_cell_char = '—'
is_pgs_on_curation_site = settings.PGS_ON_CURATION_SITE
+anc_groups = '
GWAS
Dev
Eval
'
def smaller_in_bracket(value):
@@ -45,6 +46,120 @@ def publication_format(value, is_external=False):
return format_html(f'{value.id} {citation}{extra_html}')
+def ancestries_format(value, record, include_filter=False):
+ if not value:
+ return '-'
+
+ anc_labels = constants.ANCESTRY_LABELS
+ stages = constants.PGS_STAGES
+
+ ancestries_data = value
+ pgs_id = record.num
+ chart_id = f'ac_{pgs_id}'
+ data_stage = {}
+ data_title = {}
+ anc_list = {}
+ anc_all_list = { 'dev_all': set(), 'any': set() }
+ multi_anc = 'multi'
+
+ # Fetch and store the data for each stage
+ for stage in stages:
+ if stage in ancestries_data:
+ ancestries_data_stage = ancestries_data[stage]
+ anc_list[stage] = set()
+ data_stage[stage] = []
+ data_title[stage] = []
+
+ # Details of the multi ancestry data
+ multi_title = {}
+ if multi_anc in ancestries_data_stage:
+ for mt in ancestries_data_stage[multi_anc]:
+ (ma,anc) = mt.split('_') # e.g. MAO_AFR
+ if ma not in multi_title:
+ multi_title[ma] = []
+ multi_title[ma].append(f'
{anc_labels[anc]}
')
+
+ if anc == 'MAE':
+ continue
+ # Add to the unique list of ancestries
+ anc_list[stage].add(anc)
+ # Add to the unique list of ALL ancestries
+ anc_all_list['any'].add(anc)
+ # Add to the unique list of DEV ancestries
+ if stage != 'eval':
+ anc_all_list['dev_all'].add(anc)
+
+ # Ancestry data for the stage: distribution, list of ancestries and content of the chart tootlip
+ for key,val in sorted(ancestries_data_stage['dist'].items(), key=lambda item: float(item[1]), reverse=True):
+ data_stage[stage].append(f'"{key}",{val}')
+ extra_title = ''
+ if key in multi_title:
+ extra_title += '
'+''.join(multi_title[key])+'
'
+ data_title[stage].append(f'
{val}%{extra_title}
')
+
+ if key == 'MAE':
+ continue
+ # Add to the unique list of ancestries
+ anc_list[stage].add(key)
+ # Add to the unique list of ALL ancestries
+ anc_all_list['any'].add(key)
+ # Add to the unique list of DEV ancestries
+ if stage != 'eval':
+ anc_all_list['dev_all'].add(key)
+
+
+ # Skip if no expected data "stage" available
+ if data_stage.keys() == 0:
+ return None
+
+ # Format the data for each stage: build the HTML
+ html_list = []
+ html_filter = []
+ for stage in stages:
+ if stage in data_stage:
+ id = chart_id+'_'+stage
+
+ # Code use to add filters (except in the Browse Scores table)
+ if include_filter:
+ anc_list_stage = anc_list[stage]
+ html_filter = add_ancestries_filter(stage,anc_list_stage,html_filter)
+
+ title_count = ''
+ count = ancestries_data[stage]['count']
+ if count != 0:
+ title_count = '{:,}'.format(count)
+ title = ''.join(data_title[stage])+title_count
+ html_chart = f''
+ html_list.append(html_chart)
+ else:
+ html_list.append('
-
')
+
+
+ # Code use to add filters for all dev and all data (except in the Browse Scores table)
+ if include_filter:
+ for all_stages in anc_all_list.keys():
+ if len(anc_all_list[all_stages]):
+ anc_all_data = anc_all_list[all_stages]
+ html_filter = add_ancestries_filter(all_stages,anc_all_data,html_filter)
+
+ # Wrap up the HTML
+ html = '
'
+ html += ''.join(html_list)
+ html += '
'
+ return format_html(html)
+
+
+def add_ancestries_filter(stage:str,anc_data:list,html_filter:list) -> list:
+ ''' Add ancestry filter for a given study stage '''
+ if len(anc_data) > 1:
+ anc_data.add('MAO')
+ if 'EUR' not in anc_data:
+ anc_data.add('non-EUR')
+ anc_data = [f'"{x}"' for x in list(anc_data)]
+ html_filter.append("data-anc-"+stage+"='["+','.join(anc_data)+"]'")
+ return html_filter
+
+
class Column_joinlist(tables.Column):
def render(self, value):
values = smaller_in_bracket(' '.join(value))
@@ -156,6 +271,9 @@ def render(self, value):
return format_html(value)
+################################################################################
+
+
class Browse_PublicationTable(tables.Table):
'''Table to browse Publications in the PGS Catalog'''
id = tables.Column(accessor='id', verbose_name=format_html('PGS Publication/Study ID (PGP)'))
@@ -167,10 +285,8 @@ class Browse_PublicationTable(tables.Table):
class Meta:
model = Publication
attrs = {
- "data-show-columns" : "true",
- "data-sort-name" : "id",
- "data-page-size" : page_size,
- "data-export-options" : '{"fileName": "pgs_publications_data"}'
+ "id": "publications_table",
+ "data-sort-name" : "id"
}
fields = [
'id',
@@ -183,7 +299,7 @@ class Meta:
'doi',
'PMID'
]
- template_name = 'catalog/pgs_catalog_django_table.html'
+ template_name = 'catalog/pgs_catalog_django_tables2_browse.html'
def render_id(self, value):
return format_html('{}', value, value)
@@ -267,16 +383,13 @@ class Browse_ScoreTable(tables.Table):
publication = tables.Column(accessor='publication', verbose_name=format_html('PGS Publication ID (PGP)'), orderable=True)
trait_efo = tables.Column(accessor='trait_efo', verbose_name=format_html('Mapped Trait(s) (Ontology)'), orderable=False)
ftp_link = tables.Column(accessor='link_filename', verbose_name=format_html('Scoring File (FTP Link)'), orderable=False)
- ancestries = Column_format_html(accessor='ancestries', verbose_name='Ancestry distribution', orderable=False)
+ ancestries = Column_format_html(accessor='ancestries', verbose_name=format_html('Ancestry distribution'+anc_groups), orderable=False)
class Meta:
model = Score
attrs = {
"id": "scores_table",
- "data-show-columns" : "true",
- "data-sort-name" : "id",
- "data-page-size" : page_size,
- "data-export-options" : '{"fileName": "pgs_scores_data"}'
+ "data-sort-name" : "id"
}
fields = [
'id',
@@ -287,7 +400,8 @@ class Meta:
'ancestries',
'ftp_link'
]
- template_name = 'catalog/pgs_catalog_django_table.html'
+ template_name = 'catalog/pgs_catalog_django_tables2_browse.html'
+
def render_id(self, value, record):
return score_format(record)
@@ -315,132 +429,75 @@ def render_variants_number(self, value):
def render_ancestries(self, value, record):
- if not value:
- return '-'
-
- anc_labels = constants.ANCESTRY_LABELS
- stages = constants.PGS_STAGES
-
- ancestries_data = value
- pgs_id = record.num
- chart_id = f'ac_{pgs_id}'
- data_stage = {}
- data_title = {}
- anc_list = {}
- multi_list = {}
- anc_all_list = {
- 'dev_all': set(),
- 'all': set()
- }
-
- # Fetch the data for each stage
- for stage in stages:
- if stage in ancestries_data:
- ancestries_data_stage = ancestries_data[stage]
- anc_list[stage] = set()
- # Details of the multi ancestry data
- multi_title = {}
- multi_anc = 'multi'
- if multi_anc in ancestries_data_stage:
- for mt in ancestries_data_stage[multi_anc]:
- (ma,anc) = mt.split('_')
- if ma not in multi_title:
- multi_title[ma] = []
- multi_title[ma].append(f'
{anc_labels[anc]}
')
-
- if anc == 'MAE':
- continue
- # Add to the unique list of ancestries
- anc_list[stage].add(anc)
- # Add to the unique list of ALL ancestries
- anc_all_list['all'].add(anc)
- # Add to the unique list of DEV ancestries
- if stage != 'eval':
- anc_all_list['dev_all'].add(anc)
-
- # Ancestry data for the stage: distribution, list of ancestries and content of the chart tootlip
- data_stage[stage] = []
- data_title[stage] = []
- for key,val in sorted(ancestries_data_stage['dist'].items(), key=lambda item: float(item[1]), reverse=True):
- label = anc_labels[key]
- data_stage[stage].append(f'"{key}",{val}')
- extra_title = ''
- if key in multi_title:
- extra_title += '
'+''.join(multi_title[key])+'
'
- data_title[stage].append(f'
{val}%{extra_title}
')
-
- if key == 'MAE':
- continue
- # Add to the unique list of ancestries
- anc_list[stage].add(key)
- # Add to the unique list of ALL ancestries
- anc_all_list['all'].add(key)
- # Add to the unique list of DEV ancestries
- if stage != 'eval':
- anc_all_list['dev_all'].add(key)
-
+ return ancestries_format(value, record)
- # Skip if no expected data "stage" available
- if data_stage.keys() == 0:
- return None
- # Format the data for each stage: build the HTML
- html_list = []
- html_filter = []
- for stage in stages:
- if stage in data_stage:
- id = chart_id+'_'+stage
- anc_list_stage = anc_list[stage]
-
- if len(anc_list_stage) > 1:
- anc_list_stage.add('MAO')
- if 'EUR' not in anc_list_stage:
- anc_list_stage.add('non-EUR')
+class ScoreTable(tables.Table):
+ '''Table to browse Scores (PGS) in the PGS Catalog'''
+ id = tables.Column(accessor='id', verbose_name='Polygenic Score ID & Name', orderable=True)
+ publication = tables.Column(accessor='publication', verbose_name=format_html('PGS Publication ID (PGP)'), orderable=True)
+ trait_efo = tables.Column(accessor='trait_efo', verbose_name=format_html('Mapped Trait(s) (Ontology)'), orderable=False)
+ ftp_link = tables.Column(accessor='link_filename', verbose_name=format_html('Scoring File (FTP Link)'), orderable=False)
+ ancestries = Column_format_html(accessor='ancestries', verbose_name=format_html(f'Ancestry distribution
'''.format(legend_html)
-
-
-def ancestry_form():
- ''' HTML code for the Ancestry form. '''
-
- option_html = ''
-
+def ancestry_filter(form_data:dict=None) -> str:
+ ''' HTML code for the Ancestry filter. '''
+ # Ancestry form
+ ancestry_filter_ind_option_html = ''
ancestry_labels = constants.ANCESTRY_LABELS
for key in ancestry_labels.keys():
-
label = ancestry_labels[key]
-
if key != 'MAO' and key != 'MAE':
- opt = f''
- option_html += opt
-
- checkbox_title_eur = 'This button can be used to hide PGS with any European ancestry data to only show scores with data from other non-European ancestry group. The button is selected by default, displaying all PGS.'
- checkbox_title_multi = 'Shows only PGS that include data from multiple ancestry groups at the selected study stage, hiding PGS with data from a single ancestry group.'
-
- return '''
-