mason/search/markers/results.mas

   1 <%doc>
   2
   3 =head1 NAME
   4
   5 /search/variants.mas - Unified Marker / Variants search page
   6
   7 =head1 DESCRIPTION
   8
   9 This page will display the results of the unified marker / variant
  10 search results
  11
  12 =head1 AUTHOR
  13
  14 David Waring <djw64@cornell.edu>
  15
  16 =cut
  17
  18 </%doc>
  19
  20 <& /util/import_javascript.mas, classes => [ 'jquery', 'jquery.dataTables' ] &>
  21
  22 <& /page/page_title.mas, title=>"Marker Search Results" &>
  23
  24
  25 <button id="btn-modify-search" class="btn btn-info">
  26     <span class="glyphicon glyphicon-chevron-left"></span>&nbsp;Modify Marker Search
  27 </button>
  28
  29 <br /><br /><br />
  30
  31 <div id="genotyped-markers" style="display: none">
  32     <&| /page/info_section.mas, title=>'Markers From Genotype Projects', collapsible=>1, collapsed=>0 &>
  33         <div id="genotyped-marker-results" class="well">
  34             <table id="genotyped-marker-results-table" class="display"></table>
  35             <br />
  36             <div id="genotyped-marker-results-status">
  37                 <span style="float: left">
  38                     <span id="genotyped-marker-results-displayed"></span><br />
  39                     <span id="genotyped-marker-results-pages"></span>
  40                 </span>
  41                 <div class="btn-group" style="float: right">
  42                     <button id="genotyped-marker-page-prev" type="button" class="btn btn-default" disabled><span class="glyphicon glyphicon-chevron-left"></span>&nbsp;Prev</button>
  43                     <button id="genotyped-marker-page-next" type="button" class="btn btn-default" disabled>Next&nbsp;<span class="glyphicon glyphicon-chevron-right"></span></button>
  44                 </div>
  45             </div>
  46             <br /><br />
  47         </div>
  48     </&>
  49 </div>
  50
  51
  52
  53 <div id="mapped-markers" style="display: none">
  54     <&| /page/info_section.mas, title=>'Markers from Maps', collapsible=>1, collapsed=>0 &>
  55         <div id="mapped-marker-results" class="well">
  56             <table id="mapped-marker-results-table" class="display"></table>
  57             <br />
  58             <div id="mapped-marker-results-status">
  59                 <span style="float: left">
  60                     <span id="mapped-marker-results-displayed"></span><br />
  61                     <span id="mapped-marker-results-pages"></span>
  62                 </span>
  63                 <div class="btn-group" style="float: right">
  64                     <button id="mapped-marker-page-prev" type="button" class="btn btn-default" disabled><span class="glyphicon glyphicon-chevron-left"></span>&nbsp;Prev</button>
  65                     <button id="mapped-marker-page-next" type="button" class="btn btn-default" disabled>Next&nbsp;<span class="glyphicon glyphicon-chevron-right"></span></button>
  66                 </div>
  67             </div>
  68             <br /><br />
  69         </div>
  70     </&>
  71 </div>
  72
  73
  74
  75 <script type="text/javascript">
  76
  77 // QUERY PARAMS SENT AS SEARCH ARGUMENTS
  78 let TYPE;
  79 let MARKER_NAME, MARKER_NAME_MATCH;
  80 let REFMAP, SPECIES, CHROM, START, END;
  81 let PROTOCOL;
  82
  83 let GENOTYPED_MARKERS_PAGE = 1;         // Current page of genotyped marker results
  84 const GENOTYPED_MARKERS_LIMIT = 50;     // Limit of markers for the genotyped marker search
  85 let MAPPED_MARKERS_PAGE = 1;            // Current page of mapped marker results
  86 const MAPPED_MARKERS_LIMIT = 50;        // Limit of markers for the mapped marker search
  87
  88
  89 jQuery(document).ready(function() {
  90
  91     // Init Genotyped DataTable
  92     jQuery('#genotyped-marker-results-table').DataTable({
  93         dom: 'frt',
  94         autoWidth: false,
  95         pageLength: GENOTYPED_MARKERS_LIMIT,
  96         language: {
  97             zeroRecords: "No markers found",
  98         },
  99         data: [],
 100         columns: [
 101             {
 102                 title: "Marker",
 103                 data: "marker_name",
 104                 render: function(data, type, row) {
 105                     return data && data !== "" ? "<strong><a href='/variant/" + row.variant_name + "/details'>" + data + "</a></strong>" : "";
 106                 }
 107             },
 108             {
 109                 title: "Protocol",
 110                 data: "nd_protocol_name",
 111                 render: function(data, type, row) {
 112                     return data && data !== "" ? "<a href='/breeders_toolbox/protocol/" + row.nd_protocol_id + "'>" + data + "</a>" : "";
 113                 }
 114             },
 115             { title: "Species", data: "species_name" },
 116             { title: "Reference Genome", data: "reference_genome_name" },
 117             { title: "Chromosome", data: "chrom" },
 118             { title: "Position", data: "pos" },
 119             { title: "Ref", data: "ref" },
 120             { title: "Alt", data: "alt" }
 121         ],
 122         order: [[ 0, "asc" ]]
 123     });
 124
 125     // Init Mapped DataTable
 126     jQuery('#mapped-marker-results-table').DataTable({
 127         dom: 'frt',
 128         autoWidth: false,
 129         pageLength: GENOTYPED_MARKERS_LIMIT,
 130         language: {
 131             zeroRecords: "No markers found",
 132         },
 133         data: [],
 134         columns: [
 135             {
 136                 title: "Marker",
 137                 data: "marker_name",
 138                 render: function(data, type, row) {
 139                     return data && data !== "" ? "<strong><a href='/search/markers/markerinfo.pl?marker_id=" + row.marker_id + "'>" + data + "</a></strong>" : "";
 140                 }
 141             },
 142             { title: "Protocol", data: "protocol" },
 143             { title: "Species", data: "species_name" },
 144             { title: "Map", data: "map_name" },
 145             { title: "Chromosome", data: "lg_name" },
 146             { title: "Position", data: "position" },
 147             { title: "Map Units", data: "map_units" },
 148         ],
 149         order: [[ 0, "asc" ]]
 150     });
 151
 152     // Click Listeners
 153     jQuery("#genotyped-marker-page-prev").click(searchGenotypedMarkersPrev);
 154     jQuery("#genotyped-marker-page-next").click(searchGenotypedMarkersNext);
 155     jQuery("#mapped-marker-page-prev").click(searchMappedMarkersPrev);
 156     jQuery("#mapped-marker-page-next").click(searchMappedMarkersNext);
 157     jQuery("#btn-modify-search").click(backToSearch);
 158
 159     // Start the Marker Search
 160     parseArgs();
 161     startSearch()
 162
 163     // Toggle the marker type display
 164     jQuery("#genotyped-markers").css("display", !TYPE || TYPE==='genotyped' ? 'block' : 'none');
 165     jQuery("#mapped-markers").css("display", !TYPE || TYPE==='mapped' ? 'block' : 'none');
 166
 167 });
 168
 169
 170 /**
 171  * Parse the query params and set the search argument values
 172  */
 173 function parseArgs() {
 174     const params = new URLSearchParams(window.location.search);
 175     TYPE = _getValue("type");
 176     MARKER_NAME = _getValue("marker_name");
 177     MARKER_NAME_MATCH = _getValue("marker_name_match", "exactly");
 178     REFMAP = _getValue("refmap");
 179     SPECIES = _getValue("species");
 180     CHROM = _getValue("chrom");
 181     START = _getValue("start");
 182     END = _getValue("end");
 183     PROTOCOL = _getValue("protocol");
 184
 185     function _getValue(key, def) {
 186         return params.has(key) ? params.get(key) : def;
 187     }
 188 }
 189
 190
 191 /**
 192  * Start the initial search
 193  * - start the genotyped marker search
 194  * - start the mapped marker search
 195  */
 196 function startSearch() {
 197     searchGenotypedMarkers();
 198     searchMappedMarkers();
 199 }
 200
 201
 202 /**
 203  * Go to the marker search page with the same search parameters
 204  */
 205 function backToSearch() {
 206     const params = new URLSearchParams(window.location.search);
 207     window.location = "/search/variants?" + params.toString();
 208 }
 209
 210
 211
 212
 213
 214 //
 215 // GENOTYPED MARKER SEARCH
 216 //
 217
 218
 219 /**
 220  * Start the search for genotyped markers
 221  * - Parse the query params to form the genotyped marker search
 222  * - use GENOTYPED_MARKERS_PAGE and GENOTYPED_MARKERS_LIMIT for pagination
 223  * - call displayGenotypedMarkers() when complete
 224  */
 225 function searchGenotypedMarkers() {
 226     if ( TYPE && TYPE !== 'genotyped' ) return;
 227
 228     // Update status
 229     let dt = jQuery('#genotyped-marker-results-table').DataTable();
 230     dt.clear();
 231     dt.draw();
 232     jQuery("#genotyped-marker-results-table .dataTables_empty").html("Searching...");
 233     jQuery("#genotyped-marker-page-prev").attr('disabled', true);
 234     jQuery("#genotyped-marker-page-next").attr('disabled', true);
 235
 236     // Query genotyped markers
 237     jQuery.ajax({
 238         type: 'GET',
 239         url: '/ajax/markers/genotyped/query',
 240         data: {
 241             name: MARKER_NAME,
 242             name_match: MARKER_NAME_MATCH,
 243             species: SPECIES,
 244             reference_genome: REFMAP,
 245             chrom: CHROM,
 246             start: START,
 247             end: END,
 248             nd_protocol_id: PROTOCOL,
 249             page: GENOTYPED_MARKERS_PAGE,
 250             limit: GENOTYPED_MARKERS_LIMIT
 251         },
 252         dataType: 'json',
 253         success: function(data) {
 254             displayGenotypedMarkers(dt, data);
 255         },
 256         error: function() {
 257             alert("ERROR: Could not perform genotyped marker search");
 258         }
 259     });
 260
 261 }
 262
 263 /**
 264  * Start the search of genotyped markers for the previous page
 265  * - Decrement GENOTYPED_MARKERS_PAGE
 266  * - call searchGenotypedMarkers()
 267  */
 268 function searchGenotypedMarkersPrev() {
 269     if ( GENOTYPED_MARKERS_PAGE > 1 ) {
 270         GENOTYPED_MARKERS_PAGE--;
 271         searchGenotypedMarkers();
 272     }
 273 }
 274
 275 /**
 276  * Start the search of genotyped markers for the next page
 277  * - Increment GENOTYPED_MARKERS_PAGE
 278  * - call searchGenotypedMarkers()
 279  */
 280 function searchGenotypedMarkersNext() {
 281     GENOTYPED_MARKERS_PAGE++;
 282     searchGenotypedMarkers();
 283 }
 284
 285 /**
 286  * Display the results of the genotyped marker search
 287  * @param {DataTable} dt The DataTable to put the results in
 288  * @param {Object} data The response from the marker search request
 289  */
 290 function displayGenotypedMarkers(dt, data) {
 291
 292     // Get Markers from response
 293     let markers = [];
 294     let total = "";
 295     if ( data && data.results && data.results.counts && data.results.counts.markers && data.results.counts.markers > 0 ) {
 296         let variants = data.results.variants;
 297         total = data.results.counts.markers;
 298         for ( let variant in variants ) {
 299             if ( variants.hasOwnProperty(variant) ) {
 300                 let m = variants[variant];
 301                 for ( let i = 0; i < m.length; i++ ) {
 302                     markers.push(m[i]);
 303                 }
 304             }
 305         }
 306     }
 307
 308     // Update Table with Markers
 309     dt.clear();
 310     dt.rows.add(markers);
 311     dt.draw();
 312
 313     // Update Status Info
 314     let end = GENOTYPED_MARKERS_PAGE*GENOTYPED_MARKERS_LIMIT;
 315     let start = (end-GENOTYPED_MARKERS_LIMIT)+1;
 316     end = end > total ? total : end;
 317     let displayed = start + " - " + end + " / " + total;
 318     let max_page = Math.ceil(total/GENOTYPED_MARKERS_LIMIT);
 319     let page = GENOTYPED_MARKERS_PAGE + " / " + max_page;
 320     jQuery("#genotyped-marker-results-displayed").html("<strong>MARKERS:</strong> " + displayed);
 321     jQuery("#genotyped-marker-results-pages").html("<strong>PAGE:</strong> " + page);
 322     jQuery("#genotyped-marker-page-prev").attr('disabled', GENOTYPED_MARKERS_PAGE === 1);
 323     jQuery("#genotyped-marker-page-next").attr('disabled', GENOTYPED_MARKERS_PAGE === max_page || max_page === 0);
 324
 325 }
 326
 327
 328
 329 //
 330 // MAPPED MARKER SEARCH
 331 //
 332
 333
 334 /**
 335  * Start the search for mapped markers
 336  * - Parse the query params to form the mapped marker search
 337  * - use MAPPED_MARKERS_PAGE and MAPPED_MARKERS_LIMIT for pagination
 338  * - call displayMappedMarkers() when complete
 339  */
 340 function searchMappedMarkers() {
 341     if ( TYPE && TYPE !== 'mapped' ) return;
 342
 343     // Update status
 344     let dt = jQuery('#mapped-marker-results-table').DataTable();
 345     dt.clear();
 346     dt.draw();
 347     jQuery("#mapped-marker-results-table .dataTables_empty").html("Searching...");
 348     jQuery("#mapped-marker-page-prev").attr('disabled', true);
 349     jQuery("#mapped-marker-page-next").attr('disabled', true);
 350
 351     // Query mapped markers
 352     jQuery.ajax({
 353         type: 'GET',
 354         url: '/ajax/markers/mapped/query',
 355         data: {
 356             name: MARKER_NAME,
 357             name_match: MARKER_NAME_MATCH,
 358             species: SPECIES,
 359             map_id: REFMAP,
 360             chrom: CHROM,
 361             start: START,
 362             end: END,
 363             page: MAPPED_MARKERS_PAGE,
 364             limit: MAPPED_MARKERS_LIMIT
 365         },
 366         dataType: 'json',
 367         success: function(data) {
 368             displayMappedMarkers(dt, data);
 369         },
 370         error: function() {
 371             alert("ERROR: Could not perform mapped marker search");
 372         }
 373     });
 374
 375 }
 376
 377 /**
 378  * Start the search of mapped markers for the previous page
 379  * - Decrement MAPPED_MARKERS_PAGE
 380  * - call searchMappedMarkers()
 381  */
 382 function searchMappedMarkersPrev() {
 383     if ( MAPPED_MARKERS_PAGE > 1 ) {
 384         MAPPED_MARKERS_PAGE--;
 385         searchMappedMarkers();
 386     }
 387 }
 388
 389 /**
 390  * Start the search of mapped markers for the next page
 391  * - Increment MAPPED_MARKERS_PAGE
 392  * - call searchMappedMarkers()
 393  */
 394 function searchMappedMarkersNext() {
 395     MAPPED_MARKERS_PAGE++;
 396     searchMappedMarkers();
 397 }
 398
 399 /**
 400  * Display the results of the mapped marker search
 401  * @param {DataTable} dt The DataTable to put the results in
 402  * @param {Object} data The response from the marker search request
 403  */
 404 function displayMappedMarkers(dt, data) {
 405
 406     // Get Markers from response
 407     let markers = [];
 408     let total = 0;
 409     if ( data && data.results && data.results.markers && data.results.markers.length > 0 ) {
 410         markers = data.results.markers;
 411         total = data.results.marker_count;
 412     }
 413
 414     // Update Table with Markers
 415     dt.clear();
 416     dt.rows.add(markers);
 417     dt.draw();
 418
 419     // Update Status Info
 420     let end = MAPPED_MARKERS_PAGE*MAPPED_MARKERS_LIMIT;
 421     let start = (end-MAPPED_MARKERS_LIMIT)+1;
 422     end = end > total ? total : end;
 423     let displayed = start + " - " + end + " / " + total;
 424     let max_page = Math.ceil(total/MAPPED_MARKERS_LIMIT);
 425     let page = MAPPED_MARKERS_PAGE + " / " + max_page;
 426     jQuery("#mapped-marker-results-displayed").html("<strong>MARKERS:</strong> " + displayed);
 427     jQuery("#mapped-marker-results-pages").html("<strong>PAGE:</strong> " + page);
 428     jQuery("#mapped-marker-page-prev").attr('disabled', MAPPED_MARKERS_PAGE === 1);
 429     jQuery("#mapped-marker-page-next").attr('disabled', MAPPED_MARKERS_PAGE === max_page || max_page === 0);
 430
 431 }
 432 </script>
 433
 434
 435
 436
 437 <style>
 438 </style>