Skip to content
This repository was archived by the owner on Feb 26, 2025. It is now read-only.

Commit f1a40bf

Browse files
preetisipreetisi
authored
add the select filters to phenotype, add style to dataset and r2 drop… (#185)
* add the select filters to phenotype, add style to dataset and r2 dropdown * Dropdown issues fixed
1 parent f609811 commit f1a40bf

File tree

4 files changed

+63
-44
lines changed

4 files changed

+63
-44
lines changed

‎grails-app/views/trait/_traitTableHeader.gsp

+19-10
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@
22
<h1 class="dk-page-title" xmlns="http://www.w3.org/1999/html">Interactive Manhattan plot</h1>
33

44

5-
65
<script>
6+
77
var drivingVariables = {
88
phenotypeName: '<%=phenotypeKey%>',
99
ajaxClumpDataUrl: '${createLink(controller: "trait", action: "ajaxClumpData")}',
1010
traitSearchUrl: "${createLink(controller: 'trait', action: 'traitSearch')}",
1111
retrievePhenotypesAjaxUrl:'<g:createLink controller="variantSearch" action="retrievePhenotypesAjax" />',
1212
ajaxSampleGroupsPerTraitUrl: '${createLink(controller: "trait", action: "ajaxSampleGroupsPerTrait")}',
13+
retrieveGwasSpecificPhenotypesAjaxUrl:"${createLink(controller:'VariantSearch', action:'retrieveGwasSpecificPhenotypesAjax')}",
1314
phenotypeAjaxUrl: '${createLink(controller: "trait", action: "phenotypeAjax")}',
1415
variantInfoUrl: '${createLink(controller: "variantInfo", action: "variantInfo")}',
1516
requestedSignificance:'<%=requestedSignificance%>',
@@ -21,7 +22,7 @@
2122
2223
$( document ).ready(function() {
2324
mpgSoftware.manhattanplotTableHeader.fillSampleGroupDropdown('<%=phenotypeKey%>');
24-
mpgSoftware.manhattanplotTableHeader.fillPhenotypesDropdownNew('T2D', '<%=phenotypeKey%>');
25+
mpgSoftware.manhattanplotTableHeader.fillPhenotypesDropdown('T2D', 'manhattanPhenotypeDropdownWrapper','phenotypeDropdown');
2526
mpgSoftware.manhattanplotTableHeader.fillRegionalTraitAnalysis('<%=phenotypeKey%>','');
2627
});
2728
</script>
@@ -31,31 +32,39 @@
3132
<p><g:message code="informational.traitTableHeader.help3"></g:message></p>
3233
<p><g:message code="informational.traitTableHeader.help4"></g:message></p>
3334
<p>&nbsp;</p>
35+
<style>
36+
/* DK is adding the following styles since they are Manhattan plot page specific */
37+
38+
#datasetdropdown .btn-group.bootstrap-select, #r2dropdown .btn-group.bootstrap-select { width: 100% !important;}
39+
40+
</style>
3441

35-
<div style = "width: 30%; float: left; padding-right: 15px">
42+
<div id="phenotypedropdown" style = "width: 30%; float: left; padding-right: 15px">
3643
<p class= "dk-footnote" style="width:83%;">Phenotype</p>
37-
<select style = " width:100%; overflow: hidden; text-overflow: ellipsis;" id="phenotypeVFChoser" selected = "selected" name="phenotypeVFChoser" onchange="mpgSoftware.manhattanplotTableHeader.onCLickPhenotype(this.value)">
38-
</select>
44+
45+
%{--<select style = " width:100%; overflow: hidden; text-overflow: ellipsis;" id="phenotypeVFChoser" selected = "selected" name="phenotypeVFChoser" onchange="mpgSoftware.manhattanplotTableHeader.onCLickPhenotype(this.value)">--}%
46+
%{--</select>--}%
47+
48+
<div id = "manhattanPhenotypeDropdownWrapper" style="padding-top: 1px;"></div>
3949
</div>
4050

41-
<div style = "width: 30%; float: left; padding-right: 15px">
51+
<div id="datasetdropdown" style = "width: 30%; float: left; padding-right: 15px">
4252
<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>
4353
<span id="traitTableDescription"></span>
44-
<select style = " width:100%; overflow: hidden; text-overflow: ellipsis;" id="manhattanSampleGroupChooser" name="manhattanSampleGroupChooser" onchange="mpgSoftware.manhattanplotTableHeader.callFillClumpVariants()">
54+
<select class = "selectpicker" style = " width:100%; overflow: hidden; text-overflow: ellipsis;" id="manhattanSampleGroupChooser" name="manhattanSampleGroupChooser" onchange="mpgSoftware.manhattanplotTableHeader.callFillClumpVariants()">
4555
</select>
4656
</div>
4757

48-
<div id = "r2dropdown" style = "width: auto;" >
58+
<div id = "r2dropdown" style = "width: 30%; float: left; padding-right: 15px">
4959
<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>
50-
<select style = "width: 150px; overflow: hidden; text-overflow: ellipsis;" id="rthreshold" name="rthreshold" onchange="mpgSoftware.manhattanplotTableHeader.callFillClumpVariants()">
60+
<select class = "selectpicker" style = "width: 100%; overflow: hidden; text-overflow: ellipsis;" id="rthreshold" name="rthreshold" onchange="mpgSoftware.manhattanplotTableHeader.callFillClumpVariants()">
5161
<option value="0.1000001" >0.1 </option>
5262
<option value="0.2" >0.2 </option>
5363
<option value="0.4" >0.4 </option>
5464
<option value="0.6" >0.6 </option>
5565
<option value="0.8" >0.8 </option>
5666
<option value="1" selected="selected"> 1 </option>
5767
</select>
58-
5968
</div>
6069

6170
<style>

‎grails-app/views/trait/phenotype.gsp

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta name="layout" content="t2dGenesCore"/>
5-
<r:require modules="core,phenotype,traitInfo, datatables"/>
5+
<r:require modules="core,phenotype,traitInfo, datatables, traitsFilter"/>
66
<r:layoutResources/>
77
<%@ page import="org.broadinstitute.mpg.RestServerService" %>
88
</head>

‎web-app/js/lib/dport/manhattanplotTableHeader.js

+40-33
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,14 @@ var mpgSoftware = mpgSoftware || {};
3939
//assume we have data and process it
4040
for (var i = 0; i < data.sampleGroups.length; i++) {
4141
var sampleGroup = data.sampleGroups[i];
42-
$('#manhattanSampleGroupChooser').append(new Option(sampleGroup.sgn, sampleGroup.sg, sampleGroup.default))
42+
console.log("sample group default: "+sampleGroup.default);
43+
$('#manhattanSampleGroupChooser').append(new Option(sampleGroup.sgn, sampleGroup.sg, sampleGroup.default));
4344
}
45+
4446
}
4547
}
4648
loader.hide();
49+
$('#manhattanSampleGroupChooser.selectpicker').selectpicker('refresh');
4750
},
4851
error: function (jqXHR, exception) {
4952
loader.hide();
@@ -76,6 +79,9 @@ var mpgSoftware = mpgSoftware || {};
7679
async: true,
7780
success: function (data) {
7881
loading.hide();
82+
83+
document.getElementById("r2dropdown").style.display = "block";
84+
7985
if(data.variant.results[0].isClump == false){
8086
document.getElementById("r2dropdown").style.display = "none";
8187
mpgSoftware.manhattanplotTableHeader.fillRegionalTraitAnalysis(phenotype,dataset);
@@ -146,11 +152,13 @@ var mpgSoftware = mpgSoftware || {};
146152
};
147153

148154

149-
// called when page loads
150-
var fillPhenotypesDropdown = function (portaltype) {
155+
var fillPhenotypesDropdown = function (portaltype, WRAPPER, PHENOTYPELIST) {
151156
var rememVars = mpgSoftware.manhattanplotTableHeader.getMySavedVariables();
152-
var loading = $('#spinner').show();
153157
var rememberportaltype = portaltype;
158+
var wrapper = '#' + WRAPPER;
159+
160+
$(wrapper).append('<select onchange="mpgSoftware.manhattanplotTableHeader.onCLickPhenotype(this.value)" class="'+ PHENOTYPELIST +' form-control selectpicker" data-live-search="true" id="'+ PHENOTYPELIST +'" name="'+ PHENOTYPELIST +'"></select>');
161+
154162
$.ajax({
155163
cache: false,
156164
type: "post",
@@ -162,46 +170,46 @@ var mpgSoftware = mpgSoftware || {};
162170
( typeof data !== 'undefined') &&
163171
( typeof data.datasets !== 'undefined' ) &&
164172
( data.datasets !== null )) {
165-
UTILS.fillPhenotypeCompoundDropdown(data.datasets, '#phenotypeVFChoser', true, [], rememberportaltype);
173+
174+
175+
while ($("#"+ PHENOTYPELIST).length) {
176+
UTILS.fillPhenotypeCompoundDropdown(data.datasets, "#" + PHENOTYPELIST, true, [], rememberportaltype);
177+
178+
break;
179+
}
166180
}
167-
loading.hide();
168-
},
169-
error: function (jqXHR, exception) {
170-
loading.hide();
171-
core.errorReporter(jqXHR, exception);
172-
}
173-
});
174-
};
175181

176-
// called when page loads
177-
var fillPhenotypesDropdownNew = function (portaltype, selectedHomePagePhenotype) {
178-
var rememVars = mpgSoftware.manhattanplotTableHeader.getMySavedVariables();
179-
var loading = $('#spinner').show();
180-
var rememberportaltype = portaltype;
181-
$.ajax({
182-
cache: false,
183-
type: "post",
184-
url: rememVars.retrievePhenotypesAjaxUrl,
185-
data: {getNonePhenotype: false},
186-
async: true,
187-
success: function (data) {
188-
if (( data !== null ) &&
189-
( typeof data !== 'undefined') &&
190-
( typeof data.datasets !== 'undefined' ) &&
191-
( data.datasets !== null )) {
192-
UTILS.fillPhenotypeCompoundDropdownNew(data.datasets, '#phenotypeVFChoser', true, [], rememberportaltype, selectedHomePagePhenotype);
182+
if (data.message == 'There is an error')
183+
{
184+
mpgSoftware.moduleLaunch.handleAjaxError();
185+
return;
193186
}
194-
loading.hide();
187+
188+
var startTime = new Date();
189+
190+
while ($("#"+ PHENOTYPELIST).find("option").length > 0) {
191+
console.log("phenotype list loaded");
192+
break;
193+
}
194+
195+
$('#'+PHENOTYPELIST+'.selectpicker').selectpicker('refresh');
196+
197+
195198
},
196199
error: function (jqXHR, exception) {
197-
loading.hide();
200+
201+
console.log(jqXHR);
202+
console.log(exception);
203+
204+
mpgSoftware.moduleLaunch.handleAjaxError();
198205
core.errorReporter(jqXHR, exception);
199206
}
200207
});
201208
};
202209

203210

204211

212+
205213
var refreshManhattanplotTableView = (function(data) {
206214
var savedVar = mpgSoftware.manhattanplotTableHeader.getMySavedVariables();
207215
var collector = [];
@@ -314,7 +322,6 @@ var mpgSoftware = mpgSoftware || {};
314322
setMySavedVariables:setMySavedVariables,
315323
getMySavedVariables:getMySavedVariables,
316324
fillPhenotypesDropdown: fillPhenotypesDropdown,
317-
fillPhenotypesDropdownNew: fillPhenotypesDropdownNew,
318325
onCLickPhenotype: onCLickPhenotype
319326
}
320327

‎web-app/js/lib/utils.js

+3
Original file line numberDiff line numberDiff line change
@@ -407,6 +407,7 @@ var UTILS = {
407407
.html("&nbsp;&nbsp;&nbsp;" + groupContents[j][1]));
408408
}
409409
options.append("</optgroup>");
410+
$(phenotypeDropDownIdentifier).selectpicker('refresh');
410411
});
411412
// enable the input
412413
options.prop('disabled', false);
@@ -439,7 +440,9 @@ var UTILS = {
439440
}
440441
}
441442
options.append("</optgroup>");
443+
// $(phenotypeDropDownIdentifier).selectpicker('refresh');
442444
});
445+
443446
// enable the input
444447
options.prop('disabled', false);
445448

0 commit comments

Comments
 (0)