New Browse Scores page using pagination on the server side + updates …

benchmark/views.py

@@ -7,7 +7,7 @@
 from .models import *
 from .tables import *
 from catalog.models import Score, EFOTrait
-from catalog.views import ancestry_legend
+from catalog.views import ancestry_filter
 
 bm_db = 'benchmark'
 
@@ -195,7 +195,7 @@ def benchmark(request):
         'pgs_data': pgs_data,
         'table_scores': table_scores,
         'cohorts': cohort_data,
-        'ancestry_legend': ancestry_legend(),
+        'ancestry_filter': ancestry_filter(),
         'has_table': 1,
         'has_chart': 1,
         'is_benchmark': 1

catalog/context_processors.py

@@ -90,4 +90,43 @@ def html_author(author):
 
     return {
         'pgs_contributors': html
-    }
+    }
+
+
+def pgs_ancestry_legend(request) -> str:
+    ''' HTML code for the Ancestry legend. '''
+    ancestry_labels = constants.ANCESTRY_LABELS
+    count = 0
+    ancestry_keys = ancestry_labels.keys()
+    val = len(ancestry_keys) / 2
+    entry_per_col = int((len(ancestry_keys) + 1) / 2);
+
+    div_html_1 = '<div class="ancestry_legend'
+
+    div_html = div_html_1
+
+    legend_html = ''
+    div_content = ''
+    for key in ancestry_keys:
+        if count == entry_per_col:
+            div_html += ' mr-3">'
+            div_html += div_content+'</div>'
+            legend_html += div_html
+            # New div
+            div_html = div_html_1
+            div_content = ''
+            count = 0
+
+        label = ancestry_labels[key]
+        div_content += '<div><span class="ancestry_box_legend anc_colour_'+key+'" data-key="'+key+'"></span>'+label+'</div>'
+        count += 1
+    div_html += '">'+div_content+'</div>'
+    legend_html += div_html
+
+    return {
+        'ancestry_legend': '''
+    <div id="ancestry_legend" class="filter_container mb-3">
+        <div class="filter_header">Ancestry legend <a class="pgs_no_icon_link info-icon" target="_blank" href="/docs/ancestry/#anc_category" data-toggle="tooltip" data-placement="bottom" title="Click on this icon to see more information about the Ancestry Categories (open in a new tab)"><i class="fas fa-info-circle"></i></a></div>
+        <div id="ancestry_legend_content">{}</div>
+    </div>'''.format(legend_html)
+    }

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,93 @@ $(document).ready(function() {
     });
 
 
-    function filter_score_table() {
+    /*
+     * Browse Scores Form
+     */
 
+    // Ancestry filtering - Browse Scores
+    var anc_form_name = 'browse_ancestry_form';
+    $('#browse_ancestry_type_list').on('change', function() {
+      submit_browse_score_form();
+    });
+    $('#browse_ancestry_filter_ind').on('change', function() {
+      submit_browse_score_form();
+    });
+    $("#browse_ancestry_filter_list").on("change", ".browse_ancestry_filter_cb",function() {
+      submit_browse_score_form();
+    });
+    show_hide_european_filter(true);
+
+    // Search box events for - Browse Scores
+    $('#browse_scores_search_btn').on("click", function(e) {
+      submit_browse_score_form();
+    });
+    var $browse_scores_search_input = $('#browse_scores_search');
+    $browse_scores_search_input.on("keypress", function(e) {
+      if (e.keyCode === 13) {
+        submit_browse_score_form();
+      }
+    });
+    // Catch event when the "X" button is clicked in the search box.
+    $browse_scores_search_input.on('search', function () {
+      submit_browse_score_form();
+    });
+    // Functions to set timer on typing before submitting the form
+    var search_typing_timer;
+    //on keyup, start the countdown
+    $browse_scores_search_input.on('keyup', function () {
+      clearTimeout(search_typing_timer);
+      search_typing_timer = setTimeout(function() {
+        submit_browse_score_form();
+      }, 1000);
+    });
+    //on keydown, clear the countdown
+    $browse_scores_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 = $('#'+anc_form_name).attr('action');
+      show_hide_european_filter();
+      $('#'+anc_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 = $('#'+anc_form_name).attr('action');
+      show_hide_european_filter();
+      $('#'+anc_form_name).attr('action', url+sort_url).submit();
+    });
+
+
+    function submit_browse_score_form() {
+      show_hide_european_filter();
+      document.forms[anc_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 //
@@ -327,7 +428,6 @@ $(document).ready(function() {
 
       var stage = $("#ancestry_type_list option:selected").val();
       var anc_eur_cb = 'anc_cb_EUR';
-      var anc_eur = 'EUR';
 
       // Single ancestry selection + show/hide European checkbox filter
       var ind_anc = $("#ancestry_filter_ind option:selected").val();
@@ -572,11 +672,13 @@ function alter_external_links(prefix) {
 
 // FTP Scoring File Link
 function scoring_file_link() {
-  $(data_toggle_table).on("click", '.file_link', function(){
-    var ftp_url = $(this).parent().find('.only_export').html();
-    ftp_url = ftp_url.substring(0, ftp_url.lastIndexOf('/'))+'/';
-    window.open(ftp_url,'_blank');
-  });
+  for (const element of data_table_elements) {
+    $(element).on("click", '.file_link', function(){
+      var ftp_url = $(this).parent().find('.only_export').html();
+      ftp_url = ftp_url.substring(0, ftp_url.lastIndexOf('/'))+'/';
+      window.open(ftp_url,'_blank');
+    });
+  }
 }