Skip to content

Commit

Permalink
Use barplot for gnomAD in modal (Fix #48)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Char-Al
Char-Al committed Jul 4, 2023
1 parent d9ac833 commit 4394b8e
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 63 deletions.
3 changes: 3 additions & 0 deletions seal/static/seal/analysis/sample.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,3 +26,6 @@ div.dataTables_processing span{
background-color: rgb(255,255,255,0.5);
border-radius: 10px;
}
#barPopulation > div > div > svg:nth-child(1) > g.cartesianlayer > g > g.plot > g > g > g > g > path {
clip-path: inset(0% 0% round 50px 50px 0% 0%);
}
104 changes: 45 additions & 59 deletions seal/static/seal/analysis/sample.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -390,7 +390,6 @@ $(document).ready(function() {
franklin = '<a target="_blank" href="https://franklin.genoox.com/clinical-db/variant/snp/' + data["id"] + '" class="fa-layers fa-fw w3-text-flat-midnight-blue w3-hover-text-flat-wet-asphalt" style="cursor: pointer;"><span class="fa-layers"><i class="fas fa-bookmark"></i> <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-10 up-2" style="font-weight:900">F</span></span> Franklin</a> ';
gnomad = '<a target="_blank" href="https://gnomad.broadinstitute.org/variant/' + data["id"] + '" class="fa-fw w3-text-indigo w3-hover-text-black" style="cursor: pointer;"><span class="fa-layers"><i class="fas fa-bookmark"></i> <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-10 up-2" style="font-weight:900">G</span></span> GnomAD</a> ';
return "<div class='w3-tiny'>" + mobidetails + franklin + "<br />" + gnomad + "</div>";
return mobidetails + franklin + gnomad;
}
}
},
Expand Down Expand Up @@ -1339,6 +1338,7 @@ function openDetailsVariantModal(id, sample_id) {
}

var allScoresPopulation = {
"gnomADg_AF": null,
"gnomADg_AF_AFR": null,
"gnomADg_AF_AMR": null,
"gnomADg_AF_ASJ": null,
Expand Down Expand Up @@ -1563,7 +1563,6 @@ function openDetailsVariantModal(id, sample_id) {
}
teams=""
for (i in data["samples"][x]["teams"]) {
console.log(i);
teams += '<span class="w3-tag" style="max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;background-color:' + data["samples"][x]["teams"][i]["color"] + '">' + data["samples"][x]["teams"][i]["teamname"] + '</span> ';
};
inSeal = inSeal + '<tr>'+
Expand Down Expand Up @@ -1621,21 +1620,6 @@ function openDetailsVariantModal(id, sample_id) {
tableScoresConservation = tableScoresConservation + '</table>';
$("#tableScoresConservation").html(tableScoresConservation);

tableScoresPopulation = '<table class="table-modal w3-table-all w3-tiny w3-card" cellpadding="5" cellspacing="0" border="0">';
tableScoresPopulation = tableScoresPopulation + '<thead class="w3-flat-silver"><tr>'+
'<th class="w3-flat-silver">Name</th>'+
'<th class="w3-flat-silver">Score</th>'+
'</tr></thead>';
tableScoresPopulation = tableScoresPopulation + '<tbody>';
for (nameScore in allScoresPopulation) {
tableScoresPopulation = tableScoresPopulation + '<tr>'+
'<td class="w3-text-black showTitle">'+nameScore+'</td>'+
'<td class="w3-text-black showTitle">'+allScoresPopulation[nameScore]+'</td>'+
'</tr>';
};
tableScoresPopulation = tableScoresPopulation + '</tbody>';
tableScoresPopulation = tableScoresPopulation + '</table>';
$("#tableScoresPopulation").html(tableScoresPopulation);
$('.table-modal').DataTable();

wi1 = window.screen.width;
Expand All @@ -1647,8 +1631,8 @@ function openDetailsVariantModal(id, sample_id) {
}


radarData = [];
radarLabels = [];
var radarData = [];
var radarLabels = [];
for (nameScore in allScoresPredictions) {
if (allScoresPredictions[nameScore] != null) {
radarData.push(allScoresPredictions[nameScore]);
Expand All @@ -1657,7 +1641,7 @@ function openDetailsVariantModal(id, sample_id) {
};
radarData.push(radarData[0]);
radarLabels.push(radarLabels[0]);
data1 = [{
var data_missense = [{
type: 'scatterpolar',
r: [
Math.max(allScoresPredictions["CADD_raw_rankscore"], 0),
Expand Down Expand Up @@ -1688,7 +1672,7 @@ function openDetailsVariantModal(id, sample_id) {
fill: 'toself'
}]

layout = {
var layout_radar = {
width: apply,
polar: {
radialaxis: {
Expand All @@ -1699,63 +1683,65 @@ function openDetailsVariantModal(id, sample_id) {
showlegend: false
}

radarData = [];
radarLabels = [];
var radarData = [];
var radarLabels = [];
for (nameScore in allScoresConservation) {
radarData.push(Math.max(allScoresConservation[nameScore], 0));
radarLabels.push(nameScore.replace(/_rankscore$/gm,''));
};
radarData.push(radarData[0]);
radarLabels.push(radarLabels[0]);

data2 = [{
var data_cons = [{
type: 'scatterpolar',
r: radarData,
theta: radarLabels,
fill: 'toself'
}]
var config = {responsive: true}

Plotly.newPlot("radarMissense", data_missense, layout_radar, config)
Plotly.newPlot("radarConservation", data_cons, layout_radar, config)

layout2 = {
width: apply,
polar: {
radialaxis: {
visible: true,
range: [0, 1]
}
},
showlegend: false
}
gnomad = '<a target="_blank" href="https://gnomad.broadinstitute.org/variant/' + id + '" class="w3-text-blue w3-hover-text-indigo" style="cursor: pointer;">GnomAD</a> ';
$("#population h3").html("Population (" + gnomad + ")");

radarData = [];
radarLabels = [];
var gnomad_data = [];
var gnomad_labels = [];
for (nameScore in allScoresPopulation) {
radarData.push(Math.max(allScoresPopulation[nameScore], 0));
radarLabels.push(nameScore.replace(/_rankscore$/gm,''));
gnomad_data.push(Math.max(allScoresPopulation[nameScore], 0));
gnomad_labels.push(nameScore.replace(/_rankscore$|^gnomADg_|AF_/gm,'').replace(/^AF$/gm,'ALL'));
};
radarData.push(radarData[0]);
radarLabels.push(radarLabels[0]);

data3 = [{
type: 'scatterpolar',
r: radarData,
theta: radarLabels,
fill: 'toself'
}]

layout3 = {
width: apply,
polar: {
radialaxis: {
visible: true,
range: [0, 1]
}
var data_gnomad = [
{
x: gnomad_labels,
y: gnomad_data,
type: 'bar',
text: gnomad_data.map(function (k) { if (k && k< 0.01) { return k.toExponential(2); } else if(k){return k.toFixed(4);} else {return 'NA'}}),
textposition:'outside',
textfont: {
size: 14,
},
width: 0.15,
constraintext: 'none',
}
];

layout_bar = {
hovermode: false,
width: $("#modal-details-variant div header").width(),
margin: {
l: 50,
r: 0,
b: 50,
t: 0,
pad: 4
},
showlegend: false
yaxis: {fixedrange: true},
xaxis : {fixedrange: true}
}

Plotly.newPlot("radarMissense", data1, layout)
Plotly.newPlot("radarConservation", data2, layout2)
Plotly.newPlot("radarPopulation", data3, layout3)
Plotly.newPlot('barPopulation', data_gnomad, layout_bar, config);

var traceMES = {
x: ['Ref', 'Alt'],
Expand Down
6 changes: 2 additions & 4 deletions seal/templates/analysis/sample.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -350,10 +350,7 @@ <h3>Conservation</h3>
<div id="population" class="w3-container detail">
<h3>Population</h3>
<div class="w3-row">
<div id='radarPopulation' class="w3-col l6 m12 s12"><!-- Plotly chart will be drawn inside this DIV --></div>
<div class="w3-col l6 m12 s12">
<div id="tableScoresPopulation"></div>
</div>
<div id='barPopulation' class=""><!-- Plotly chart will be drawn inside this DIV --></div>
</div>
</div>

Expand Down Expand Up @@ -422,6 +419,7 @@ <h3>Comments (<span class="commentsCountVar"></span>)</h3>
<script type="text/javascript" src="{{ url_for('static', filename='sweetalert/sweetalert2.min.js') }}"></script>
<script src="{{ url_for('static', filename='select2/js/select2.full.min.js') }}"></script>
<script src="{{ url_for('static', filename='DOMPurify/purify.min.js') }}"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script>

<script type="text/javascript">
var sample_filter_id = "{{ sample.filter_id }}";
Expand Down

0 comments on commit 4394b8e

Please sign in to comment.