From f1a40bf9f8b8e9e834ca12f00383d1ded10f58d2 Mon Sep 17 00:00:00 2001
From: Preeti <singhpreeti236@gmail.com>
Date: Fri, 11 Oct 2019 15:23:04 -0400
Subject: [PATCH] =?UTF-8?q?add=20the=20select=20filters=20to=20phenotype,?=
 =?UTF-8?q?=20add=20style=20to=20dataset=20and=20r2=20drop=E2=80=A6=20(#18?=
 =?UTF-8?q?5)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* add the select filters to phenotype, add style to dataset and r2 dropdown

* Dropdown issues fixed
---
 grails-app/views/trait/_traitTableHeader.gsp  | 29 +++++---
 grails-app/views/trait/phenotype.gsp          |  2 +-
 .../js/lib/dport/manhattanplotTableHeader.js  | 73 ++++++++++---------
 web-app/js/lib/utils.js                       |  3 +
 4 files changed, 63 insertions(+), 44 deletions(-)

diff --git a/grails-app/views/trait/_traitTableHeader.gsp b/grails-app/views/trait/_traitTableHeader.gsp
index caab0a5fd..3c6193838 100755
--- a/grails-app/views/trait/_traitTableHeader.gsp
+++ b/grails-app/views/trait/_traitTableHeader.gsp
@@ -2,14 +2,15 @@
 <h1 class="dk-page-title" xmlns="http://www.w3.org/1999/html">Interactive Manhattan plot</h1>
 
 
-
 <script>
+
     var drivingVariables = {
         phenotypeName: '<%=phenotypeKey%>',
         ajaxClumpDataUrl: '${createLink(controller: "trait", action: "ajaxClumpData")}',
         traitSearchUrl: "${createLink(controller: 'trait', action: 'traitSearch')}",
         retrievePhenotypesAjaxUrl:'<g:createLink controller="variantSearch" action="retrievePhenotypesAjax" />',
         ajaxSampleGroupsPerTraitUrl: '${createLink(controller: "trait", action: "ajaxSampleGroupsPerTrait")}',
+        retrieveGwasSpecificPhenotypesAjaxUrl:"${createLink(controller:'VariantSearch', action:'retrieveGwasSpecificPhenotypesAjax')}",
         phenotypeAjaxUrl: '${createLink(controller: "trait", action: "phenotypeAjax")}',
         variantInfoUrl: '${createLink(controller: "variantInfo", action: "variantInfo")}',
         requestedSignificance:'<%=requestedSignificance%>',
@@ -21,7 +22,7 @@
 
     $( document ).ready(function() {
         mpgSoftware.manhattanplotTableHeader.fillSampleGroupDropdown('<%=phenotypeKey%>');
-        mpgSoftware.manhattanplotTableHeader.fillPhenotypesDropdownNew('T2D', '<%=phenotypeKey%>');
+        mpgSoftware.manhattanplotTableHeader.fillPhenotypesDropdown('T2D', 'manhattanPhenotypeDropdownWrapper','phenotypeDropdown');
         mpgSoftware.manhattanplotTableHeader.fillRegionalTraitAnalysis('<%=phenotypeKey%>','');
     });
 </script>
@@ -31,23 +32,32 @@
 <p><g:message code="informational.traitTableHeader.help3"></g:message></p>
 <p><g:message code="informational.traitTableHeader.help4"></g:message></p>
 <p>&nbsp;</p>
+<style>
+    /* DK is adding the following styles since they are Manhattan plot page specific */
+
+    #datasetdropdown .btn-group.bootstrap-select, #r2dropdown .btn-group.bootstrap-select { width: 100% !important;}
+
+</style>
 
-<div style = "width: 30%; float: left; padding-right: 15px">
+<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 style = "width: 30%; float: left; padding-right: 15px">
+<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  style = " width:100%; overflow: hidden; text-overflow: ellipsis;" id="manhattanSampleGroupChooser" name="manhattanSampleGroupChooser" onchange="mpgSoftware.manhattanplotTableHeader.callFillClumpVariants()">
+    <select  class = "selectpicker" style = " width:100%; overflow: hidden; text-overflow: ellipsis;" id="manhattanSampleGroupChooser" name="manhattanSampleGroupChooser" onchange="mpgSoftware.manhattanplotTableHeader.callFillClumpVariants()">
     </select>
 </div>
 
-<div id = "r2dropdown" style = "width: auto;" >
+<div id = "r2dropdown" style = "width: 30%; float: left; padding-right: 15px">
     <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 style = "width: 150px; overflow: hidden; text-overflow: ellipsis;" id="rthreshold" name="rthreshold" onchange="mpgSoftware.manhattanplotTableHeader.callFillClumpVariants()">
+    <select class = "selectpicker" style = "width: 100%; 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>
@@ -55,7 +65,6 @@
         <option value="0.8" >0.8 </option>
         <option value="1" selected="selected"> 1 </option>
     </select>
-
 </div>
 
 <style>
diff --git a/grails-app/views/trait/phenotype.gsp b/grails-app/views/trait/phenotype.gsp
index 5e6e9a1ad..dc6d600ff 100755
--- a/grails-app/views/trait/phenotype.gsp
+++ b/grails-app/views/trait/phenotype.gsp
@@ -2,7 +2,7 @@
 <html>
 <head>
     <meta name="layout" content="t2dGenesCore"/>
-    <r:require modules="core,phenotype,traitInfo, datatables"/>
+    <r:require modules="core,phenotype,traitInfo, datatables, traitsFilter"/>
     <r:layoutResources/>
     <%@ page import="org.broadinstitute.mpg.RestServerService" %>
 </head>
diff --git a/web-app/js/lib/dport/manhattanplotTableHeader.js b/web-app/js/lib/dport/manhattanplotTableHeader.js
index 21ccd2d6f..81ffd80c3 100644
--- a/web-app/js/lib/dport/manhattanplotTableHeader.js
+++ b/web-app/js/lib/dport/manhattanplotTableHeader.js
@@ -39,11 +39,14 @@ var mpgSoftware = mpgSoftware || {};
                             //assume we have data and process it
                             for (var i = 0; i < data.sampleGroups.length; i++) {
                                 var sampleGroup = data.sampleGroups[i];
-                                $('#manhattanSampleGroupChooser').append(new Option(sampleGroup.sgn, sampleGroup.sg, sampleGroup.default))
+                                console.log("sample group default: "+sampleGroup.default);
+                                $('#manhattanSampleGroupChooser').append(new Option(sampleGroup.sgn, sampleGroup.sg, sampleGroup.default));
                             }
+
                             }
                          }
                     loader.hide();
+                    $('#manhattanSampleGroupChooser.selectpicker').selectpicker('refresh');
                 },
                 error: function (jqXHR, exception) {
                     loader.hide();
@@ -76,6 +79,9 @@ var mpgSoftware = mpgSoftware || {};
                 async: true,
                 success: function (data) {
                     loading.hide();
+
+                    document.getElementById("r2dropdown").style.display = "block";
+
                     if(data.variant.results[0].isClump == false){
                         document.getElementById("r2dropdown").style.display = "none";
                         mpgSoftware.manhattanplotTableHeader.fillRegionalTraitAnalysis(phenotype,dataset);
@@ -146,11 +152,13 @@ var mpgSoftware = mpgSoftware || {};
         };
 
 
-        // called when page loads
-        var fillPhenotypesDropdown = function (portaltype) {
+        var fillPhenotypesDropdown = function (portaltype, WRAPPER, PHENOTYPELIST) {
             var rememVars = mpgSoftware.manhattanplotTableHeader.getMySavedVariables();
-            var loading = $('#spinner').show();
             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,
                 type: "post",
@@ -162,39 +170,38 @@ var mpgSoftware = mpgSoftware || {};
                         ( typeof data !== 'undefined') &&
                         ( 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;
+                        }
                     }
-                    loading.hide();
-                },
-                error: function (jqXHR, exception) {
-                    loading.hide();
-                    core.errorReporter(jqXHR, exception);
-                }
-            });
-        };
 
-        // called when page loads
-        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);
+                    if (data.message == 'There is an error')
+                    {
+                        mpgSoftware.moduleLaunch.handleAjaxError();
+                        return;
                     }
-                    loading.hide();
+
+                    var startTime = new Date();
+
+                    while ($("#"+ PHENOTYPELIST).find("option").length > 0) {
+                        console.log("phenotype list loaded");
+                        break;
+                    }
+
+                    $('#'+PHENOTYPELIST+'.selectpicker').selectpicker('refresh');
+
+
                 },
                 error: function (jqXHR, exception) {
-                    loading.hide();
+
+                    console.log(jqXHR);
+                    console.log(exception);
+
+                    mpgSoftware.moduleLaunch.handleAjaxError();
                     core.errorReporter(jqXHR, exception);
                 }
             });
@@ -202,6 +209,7 @@ var mpgSoftware = mpgSoftware || {};
 
 
 
+
         var refreshManhattanplotTableView = (function(data) {
             var savedVar = mpgSoftware.manhattanplotTableHeader.getMySavedVariables();
             var collector = [];
@@ -314,7 +322,6 @@ var mpgSoftware = mpgSoftware || {};
             setMySavedVariables:setMySavedVariables,
             getMySavedVariables:getMySavedVariables,
             fillPhenotypesDropdown: fillPhenotypesDropdown,
-            fillPhenotypesDropdownNew: fillPhenotypesDropdownNew,
             onCLickPhenotype: onCLickPhenotype
         }
 
diff --git a/web-app/js/lib/utils.js b/web-app/js/lib/utils.js
index c7e86131f..137791629 100755
--- a/web-app/js/lib/utils.js
+++ b/web-app/js/lib/utils.js
@@ -407,6 +407,7 @@ var UTILS = {
                         .html("&nbsp;&nbsp;&nbsp;" + groupContents[j][1]));
                 }
                 options.append("</optgroup>");
+                $(phenotypeDropDownIdentifier).selectpicker('refresh');
             });
             // enable the input
             options.prop('disabled', false);
@@ -439,7 +440,9 @@ var UTILS = {
                     }
                 }
                 options.append("</optgroup>");
+                // $(phenotypeDropDownIdentifier).selectpicker('refresh');
             });
+
             // enable the input
             options.prop('disabled', false);