Skip to content

Commit

Permalink
add the select filters to phenotype, add style to dataset and r2 drop… (
Browse files Browse the repository at this point in the history 
#185)

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

* Dropdown issues fixed
  • Loading branch information
@preetisi
preetisi authored Oct 11, 2019
1 parent f609811 commit f1a40bf
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 44 deletions.
29 changes: 19 additions & 10 deletions grails-app/views/trait/_traitTableHeader.gsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%>',
Expand All @@ -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>
Expand All @@ -31,31 +32,39 @@
<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>
<option value="0.6" >0.6 </option>
<option value="0.8" >0.8 </option>
<option value="1" selected="selected"> 1 </option>
</select>

</div>

<style>
Expand Down
2 changes: 1 addition & 1 deletion grails-app/views/trait/phenotype.gsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
73 changes: 40 additions & 33 deletions web-app/js/lib/dport/manhattanplotTableHeader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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",
Expand All @@ -162,46 +170,46 @@ 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);
}
});
};




var refreshManhattanplotTableView = (function(data) {
var savedVar = mpgSoftware.manhattanplotTableHeader.getMySavedVariables();
var collector = [];
Expand Down Expand Up @@ -314,7 +322,6 @@ var mpgSoftware = mpgSoftware || {};
setMySavedVariables:setMySavedVariables,
getMySavedVariables:getMySavedVariables,
fillPhenotypesDropdown: fillPhenotypesDropdown,
fillPhenotypesDropdownNew: fillPhenotypesDropdownNew,
onCLickPhenotype: onCLickPhenotype
}

Expand Down
3 changes: 3 additions & 0 deletions web-app/js/lib/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -439,7 +440,9 @@ var UTILS = {
}
}
options.append("</optgroup>");
// $(phenotypeDropDownIdentifier).selectpicker('refresh');
});

// enable the input
options.prop('disabled', false);

Expand Down

0 comments on commit f1a40bf

Please sign in to comment.