From b5609975d5752f61a85ec4e0bbf309eac4b01e7c Mon Sep 17 00:00:00 2001
From: Preeti <singhpreeti236@gmail.com>
Date: Wed, 8 Jan 2020 08:53:45 -0500
Subject: [PATCH] Ps mp undo filters (#187)

* revert the filters

* fix the dataset dropdown - change the default selected dataset

* add dataset

* updated number of datasets and phenotypes on home page

Co-authored-by: mariacos <mariacos@broadinstitute.org>
---
 grails-app/views/trait/_traitTableHeader.gsp  | 14 ++--
 .../js/lib/dport/manhattanplotTableHeader.js  | 71 ++++++++++---------
 2 files changed, 44 insertions(+), 41 deletions(-)

diff --git a/grails-app/views/trait/_traitTableHeader.gsp b/grails-app/views/trait/_traitTableHeader.gsp
index b9fa09c37..b55aa5ba1 100755
--- a/grails-app/views/trait/_traitTableHeader.gsp
+++ b/grails-app/views/trait/_traitTableHeader.gsp
@@ -22,6 +22,7 @@
 
     $( document ).ready(function() {
         mpgSoftware.manhattanplotTableHeader.fillSampleGroupDropdown('<%=phenotypeKey%>');
+        mpgSoftware.manhattanplotTableHeader.fillPhenotypesDropdownNew('T2D', '<%=phenotypeKey%>');
         mpgSoftware.manhattanplotTableHeader.fillPhenotypesDropdown('<%=params.trait%>' || 'T2D', 'manhattanPhenotypeDropdownWrapper','phenotypeDropdown');
         mpgSoftware.manhattanplotTableHeader.fillRegionalTraitAnalysis('<%=phenotypeKey%>','');
     });
@@ -41,23 +42,20 @@
 
 <div id="phenotypedropdown" style = "width: 30%; float: left; padding-right: 15px">
     <p class= "dk-footnote" style="width:83%;">Phenotype</p>
+    <select  style = " width:100%; overflow: hidden; text-overflow: ellipsis;" id="phenotypeVFChoser" selected = "selected" name="phenotypeVFChoser" onchange="mpgSoftware.manhattanplotTableHeader.onCLickPhenotype(this.value)">
+    </select>
 
-    %{--<select  style = " width:100%; overflow: hidden; text-overflow: ellipsis;" id="phenotypeVFChoser" selected = "selected" name="phenotypeVFChoser" onchange="mpgSoftware.manhattanplotTableHeader.onCLickPhenotype(this.value)">--}%
-    %{--</select>--}%
-
-    <div id = "manhattanPhenotypeDropdownWrapper" style="padding-top: 1px;"></div>
 </div>
 
 <div id="datasetdropdown" style = "width: 30%; float: left; padding-right: 15px">
     <p class= "dk-footnote" style="width:83%;">Dataset&nbsp;&nbsp;<g:helpText title="manhattan_datasets_help.header" placement="bottom" body="manhattan_datasets_help.text"/></p>
     <span id="traitTableDescription"></span>
-    <select  class = "selectpicker" style = " width:100%; overflow: hidden; text-overflow: ellipsis;" id="manhattanSampleGroupChooser" name="manhattanSampleGroupChooser" onchange="mpgSoftware.manhattanplotTableHeader.callFillClumpVariants()">
-    </select>
+    <select  style = " width:100%; overflow: hidden; text-overflow: ellipsis;" id="manhattanSampleGroupChooser" name="manhattanSampleGroupChooser" onchange="mpgSoftware.manhattanplotTableHeader.callFillClumpVariants()"></select>;
 </div>
 
-<div id = "r2dropdown" style = "width: 30%; float: left; padding-right: 15px">
+<div id = "r2dropdown" style = "width: auto;" >
     <p class = "dk-footnote" style="width:83%;">r<sup>2</sup> threshold&nbsp;&nbsp;<g:helpText title="r_squared.help.header" placement="bottom" body="r_squared.help.text"/></p>
-    <select class = "selectpicker" style = "width: 100%; overflow: hidden; text-overflow: ellipsis;" id="rthreshold" name="rthreshold" onchange="mpgSoftware.manhattanplotTableHeader.callFillClumpVariants()">
+    <select style = "width: 150px; overflow: hidden; text-overflow: ellipsis;" id="rthreshold" name="rthreshold" onchange="mpgSoftware.manhattanplotTableHeader.callFillClumpVariants()">
         <option value="0.1000001" >0.1 </option>
         <option value="0.2" >0.2 </option>
         <option value="0.4" >0.4 </option>
diff --git a/web-app/js/lib/dport/manhattanplotTableHeader.js b/web-app/js/lib/dport/manhattanplotTableHeader.js
index 81ffd80c3..620032716 100644
--- a/web-app/js/lib/dport/manhattanplotTableHeader.js
+++ b/web-app/js/lib/dport/manhattanplotTableHeader.js
@@ -7,6 +7,7 @@ var mpgSoftware = mpgSoftware || {};
     mpgSoftware.manhattanplotTableHeader = (function () {
 
         var mySavedVariables = {};
+        var globalFirstDataset = "";
         var setMySavedVariables = function(saveTheseVariables){
             mySavedVariables = saveTheseVariables;
         }
@@ -34,19 +35,18 @@ var mpgSoftware = mpgSoftware || {};
                         (data)) {
                         if ((data.sampleGroups) &&
                             (data.sampleGroups.length > 0)) {
-                            //first empty the old one
-                            $('#manhattanSampleGroupChooser').empty()
-                            //assume we have data and process it
+                            var options = $('#manhattanSampleGroupChooser');
+                            options.empty();
+                            options.append("<option selected hidden value=default>-- &nbsp;&nbsp;select a dataset&nbsp;&nbsp; --</option>");
+
                             for (var i = 0; i < data.sampleGroups.length; i++) {
                                 var sampleGroup = data.sampleGroups[i];
-                                console.log("sample group default: "+sampleGroup.default);
-                                $('#manhattanSampleGroupChooser').append(new Option(sampleGroup.sgn, sampleGroup.sg, sampleGroup.default));
+                                var newOption = $("<option />").val(sampleGroup.sg).html(sampleGroup.sgn);
+                                options.append(newOption);
                             }
-
                             }
                          }
                     loader.hide();
-                    $('#manhattanSampleGroupChooser.selectpicker').selectpicker('refresh');
                 },
                 error: function (jqXHR, exception) {
                     loader.hide();
@@ -59,13 +59,15 @@ var mpgSoftware = mpgSoftware || {};
 
         var onCLickPhenotype = function (phenotype){
             var coreVariables = mpgSoftware.manhattanplotTableHeader.getMySavedVariables();
-            //on click of phenotype populate the dataset dropdown list again
-            mpgSoftware.manhattanplotTableHeader.fillSampleGroupDropdown(phenotype)
-            var sampleGroup = $('#manhattanSampleGroupChooser').val()
-            mpgSoftware.manhattanplotTableHeader.callFillClumpVariants()
-            // mpgSoftware.manhattanplotTableHeader.fillRegionalTraitAnalysis(phenotype,$('#manhattanSampleGroupChooser').val());
-           window.history.pushState('page2', 'Type 2 Diabetes', coreVariables.traitSearchUrl + "?trait=" + phenotype + "&significance=" + 0.0005);
+            mpgSoftware.manhattanplotTableHeader.fillSampleGroupDropdown(phenotype);
+            $('#manhattanPlot1').empty();
+            $('#traitTableBody').empty();
+            $('#phenotypeTraits').DataTable().rows().remove();
+            $('#phenotypeTraits').dataTable({"retrieve": true}).fnDestroy();
+            window.history.pushState('page2', 'Type 2 Diabetes', coreVariables.traitSearchUrl + "?trait=" + phenotype + "&significance=" + 0.0005);
 
+
+            // console.log("globalFirstDataset  " + globalFirstDataset);
         }
 
         var fillClumpVariants = function (phenotype, dataset, r2) {
@@ -138,12 +140,13 @@ var mpgSoftware = mpgSoftware || {};
         var callFillClumpVariants = function() {
             var mySavedVars = mpgSoftware.manhattanplotTableHeader.getMySavedVariables();
             var r2 = $('#rthreshold').val();
-            var selectedPhenotype = $('#phenotypeVFChoser').val();
+            var selectedPhenotype = $('#phenotypeVFChoser').val()
+            var selectedDataset = $('#manhattanSampleGroupChooser').val()
             //phenotype is null when its not selected from the manhattan plot page
             if(selectedPhenotype == null){
                 selectedPhenotype = mySavedVars.phenotypeName;
             }
-            var selectedDataset = document.getElementById("manhattanSampleGroupChooser").value;
+
                 $('#manhattanPlot1').empty();
                 $('#traitTableBody').empty();
                 $('#phenotypeTraits').DataTable().rows().remove();
@@ -152,12 +155,9 @@ var mpgSoftware = mpgSoftware || {};
         };
 
 
-        var fillPhenotypesDropdown = function (portaltype, WRAPPER, PHENOTYPELIST) {
+        var fillPhenotypesDropdown = function (portaltype) {
             var rememVars = mpgSoftware.manhattanplotTableHeader.getMySavedVariables();
             var rememberportaltype = portaltype;
-            var wrapper = '#' + WRAPPER;
-
-            $(wrapper).append('<select onchange="mpgSoftware.manhattanplotTableHeader.onCLickPhenotype(this.value)" class="'+ PHENOTYPELIST +' form-control selectpicker" data-live-search="true" id="'+ PHENOTYPELIST +'" name="'+ PHENOTYPELIST +'"></select>');
 
             $.ajax({
                 cache: false,
@@ -171,12 +171,8 @@ var mpgSoftware = mpgSoftware || {};
                         ( typeof data.datasets !== 'undefined' ) &&
                         (  data.datasets !== null )) {
 
+                        UTILS.fillPhenotypeCompoundDropdown(data.datasets, '#phenotypeVFChoser', true, [], rememberportaltype);
 
-                        while ($("#"+ PHENOTYPELIST).length) {
-                            UTILS.fillPhenotypeCompoundDropdown(data.datasets, "#" + PHENOTYPELIST, true, [], rememberportaltype);
-
-                            break;
-                        }
                     }
 
                     if (data.message == 'There is an error')
@@ -187,14 +183,6 @@ var mpgSoftware = mpgSoftware || {};
 
                     var startTime = new Date();
 
-                    while ($("#"+ PHENOTYPELIST).find("option").length > 0) {
-                        console.log("phenotype list loaded");
-                        break;
-                    }
-
-                    $('#'+PHENOTYPELIST+'.selectpicker').selectpicker('refresh');
-
-
                 },
                 error: function (jqXHR, exception) {
 
@@ -207,7 +195,23 @@ var mpgSoftware = mpgSoftware || {};
             });
         };
 
-
+        var fillPhenotypesDropdownNew = function (portaltype, selectedHomePagePhenotype) {
+            var rememVars = mpgSoftware.manhattanplotTableHeader.getMySavedVariables();
+            var loading = $('#spinner').show();
+            var rememberportaltype = portaltype;
+            $.ajax({
+                cache: false,
+                type: "post",
+                url: rememVars.retrievePhenotypesAjaxUrl,
+                data: {getNonePhenotype: false},
+                async: true,
+                success: function (data) {
+                    if (( data !== null ) &&
+                        ( typeof data !== 'undefined') &&
+                        ( typeof data.datasets !== 'undefined' ) &&
+                        (  data.datasets !== null )) {
+                        UTILS.fillPhenotypeCompoundDropdownNew(data.datasets, '#phenotypeVFChoser', true, [], rememberportaltype, selectedHomePagePhenotype);
+                    }}})};
 
 
         var refreshManhattanplotTableView = (function(data) {
@@ -322,6 +326,7 @@ var mpgSoftware = mpgSoftware || {};
             setMySavedVariables:setMySavedVariables,
             getMySavedVariables:getMySavedVariables,
             fillPhenotypesDropdown: fillPhenotypesDropdown,
+            fillPhenotypesDropdownNew: fillPhenotypesDropdownNew,
             onCLickPhenotype: onCLickPhenotype
         }