Select Git revision
restriction.py
_id.vue 19.15 KiB
<template>
<v-container>
<v-row v-show="!isready"
class="fill-height"
align-content="center"
justify="center"
>
<v-col
class="text-subtitle-1 text-center"
cols="12"
>
<h2>Creating the worktable ! It might take a few minutes</h2>
</v-col>
<v-col
class="text-subtitle-1 text-center"
cols="12"
>
<PhenotypeCard v-for="pheno in phenotypesDict" :key="pheno.id" :phe="pheno"/>
</v-col>
<v-col cols="12" md="8" lg="6">
<v-progress-linear
color="#298e49"
striped
rounded
height="20"
:value="progress"
>
<strong style="color:white; text-transform:capitalize;">{{progress}} %</strong>
</v-progress-linear>
</v-col>
<v-col
class="text-subtitle-1 text-center"
cols="12"
v-if="(activeTask == 0) || (pendingTask != 0)"
>
Task: {{activeTask}} running and {{pendingTask}} pending.
</v-col>
</v-row>
<v-row v-show="isready" align="center">
<v-col cols="12">
<v-card >
<ShareLink :pageUrl="sharedUrl"/>
</v-card>
<div class="row" style="text-align:left;padding:12px;margin:0;">
<h1 style="text-transform:none;">Results for :</h1>
<PhenotypeCard v-for="pheno in phenotypesDict" :key="pheno.id" :phe="pheno"/>
</div>
<v-card style="margin-top:10px; margin-bottom:10px;" outlined tile no-gutter>
<v-card-title class="text-h5">
<v-row justify="start" no-gutters>
<v-col >
<h4>ANALYSIS PARAMETER SUMMARY</h4>
<br>
<b>Number of phenotype included:</b>{{phenotypes.length}}
<br>
<b>Number of SNPs included:</b>{{metadata.nb_snps}}
<br>
<b>Genomic region analyzed:</b> Whole Genome
<br>
<b>Test performed:</b>Omnibus
</v-col>
<v-col >
<v-card>
Genetic covariance derived with <a href="https://www.nature.com/articles/ng.3406">the LDScore</a>
The value on the diagonal correspond to the heritability of the trait.
<div id="divCorrelationHeat" ref="divCorrelationHeat"><!-- Plotly chart will be drawn inside this DIV --></div>
</v-card>
</v-col>
</v-row>
</v-card-title>
</v-card>
<v-card style="margin-top:10px; margin-bottom:10px;" outlined tile no-gutter>
<v-card-title class="text-h5">
<v-row justify="start" no-gutters>
<v-col >
<h4>RESULTS SUMMARY</h4>
<b>Univariate and multivariate significant regions:</b> <br>
Not significant Regions: {{summary.JASSNotSignif.MinUnivNotSignif}}<br>
Univariate only significant Regions: {{summary.JASSNotSignif.MinUnivSignif}}<br>
Multivariate only significant Regions : {{summary.JASSSignif.MinUnivNotSignif}}<br>
Univariate and multivariate significant Regions : {{summary.JASSSignif.MinUnivSignif}}<br>
</v-col>
<v-col >
<vue-json-to-csv :json-data="Regions">
<v-btn small color="#298e49" style="color:#fff; text-transform:capitalize;" v-on:click="processExportAllJASSPVAL()" >
Export LD-independent lead SNPs
</v-btn>
</vue-json-to-csv>
<v-btn
:disabled="status.genome_full_csv != 'READY'"
small
color="#298e49"
style="color:#fff;text-transform:capitalize;"
v-on:click="genomeFullCsv()"
>
Export genome wide summary statistics
<v-progress-circular
v-if="status.genome_full_csv != 'READY'"
:size="15"
:width="2"
style="margin-left:5px"
indeterminate
></v-progress-circular>
</v-btn>
<v-btn
:disabled="status.global_manhattan != 'READY'"
small
color="#298e49" style="color:#fff;text-transform:capitalize;"
v-on:click="manhattanPlot()">
Manhattan Plot
<v-progress-circular
v-if="status.global_manhattan != 'READY'"
:size="15"
:width="2"
style="margin-left:5px"
indeterminate
></v-progress-circular>
</v-btn>
<v-btn
:disabled="status.quadrant_plot != 'READY'"
small color="#298e49" style="color:#fff;text-transform:capitalize;"
v-on:click="quadranPlot()">
Quadrant plot
<v-progress-circular
v-if="status.quadrant_plot != 'READY'"
:size="15"
:width="2"
style="margin-left:5px"
indeterminate
></v-progress-circular>
</v-btn>
<v-btn
:disabled="status.qq_plot != 'READY'"
small color="#298e49" style="color:#fff;text-transform:capitalize;"
v-on:click="qqPlot()">
QQ plot
<v-progress-circular
v-if="status.qq_plot != 'READY'"
:size="15"
:width="2"
style="margin-left:5px"
indeterminate
></v-progress-circular>
</v-btn>
<p>Tips : You can share the link of this page with your collaborators. They will have access to the same results.</p>
</v-col>
</v-row>
</v-card-title>
</v-card>
<v-card style="margin-top:10px; margin-bottom:10px;" outlined tile no-gutter>
<v-card-title class="text-h5">
<v-row justify="start" no-gutters>
<v-col >
<h4>MANATHAN PLOT</h4>
<p>
The Omnibus test Manhattan plot by Linkage Desiquilibrium independent regions.
The p-values displayed corresponds to the p-value of the lead SNPs in the region.
To zoom in on a region click on one of the points.
</p>
<div id="divWholeStatPlot" ref="divWholeStatPlot"><!-- Plotly chart will be drawn inside this DIV --></div>
</v-col>
</v-row>
<v-btn small color="#298e49" style="color:#fff;text-transform:capitalize;" v-on:click="show = !show;processShowGJASSPVAL()">
Show significant lead SNPs by region
</v-btn>
<div>
<transition name="slide-fade">
<p v-if="show">
<v-data-table
:headers="headers"
:items="significantsRegions"
:items-per-page="5"
class="elevation-1"
></v-data-table>
<vue-json-to-csv :json-data="significantsRegions">
<v-btn small color="#298e49" style="color:#fff;">export csv</v-btn>
<!-- <button>
<b>export csv</b>
</button> -->
</vue-json-to-csv>
</p>
</transition>
</div>
</v-card-title>
</v-card>
<v-card style="margin-top:10px; margin-bottom:10px;padding:20px;" v-show="isready2" outlined tile no-gutter>
<v-row justify="start" no-gutters>
<v-col >
<h4 style="text-transform:uppercase;">Omnibus test Manhattan plot by SNPs</h4>
<p>Zoom in on rejoin by clicking and draging your mouse on the region of interest</p>
<p>Zoom out by double clicking on the plot</p>
</v-col>
</v-row>
<div id="divLocalStatPlot" ref="divLocalStatPlot"><!-- Plotly chart will be drawn inside this DIV --></div>
<!-- <v-card-title >Univariate Zscore heatmap</v-card-title>
<v-card-text>Association signal for each SNPs and Each phenotypes. The association is measured as a Zscore (beta regression coefficient divided by their standard error).
</v-card-text> -->
<div id="divHeatPlot" ><!-- Plotly chart will be drawn inside this DIV --></div>
</v-card>
</v-col>
</v-row>
<v-row>
</v-row>
</v-container>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
</style>
<script>
// import Plotly from 'plotly.js-dist/plotly';
import VueJsonToCsv from 'vue-json-to-csv';
import Plotly from 'plotly.js-dist';
import PhenotypeCard from "@/components/PhenotypeCard.vue";
import ShareLink from "@/components/ShareLink.vue";
import manhattan from "../../components/Manhattan.js";
import heatmap from "../../components/Heatmap.js";
import submanhattan from "../../components/SubManhattan.js";
const _ = require('lodash');
console.log(heatmap);
const d3 = require("d3");
export default {
async asyncData({ $axios, params, $auth }) {
const project = await $axios.$get('/projects/' + params.id,)
console.log(project);
const phenotypes =[];
const outcomes =[];
project.phenotypes.forEach(pheno => {
phenotypes.push(pheno.id);
})
project.phenotypes.forEach(pheno => {
outcomes.push(pheno.outcome);
})
const phenotypesDict = project.phenotypes;
return {
project,phenotypes,outcomes,phenotypesDict,ShareLink
}
},
components: {
// Multiselect,
VueJsonToCsv,
PhenotypeCard
},
data() {
return {
phenotypes: null,
phenotypesDict:null,
project: null,
manhattan:null,
heatmap:null,
submanhattan:null,
headers:[],
significantsRegions:[],
Regions:[],
show: false,
status: null,
isready: false,
isready2: false,
progress:0,
activeTask: 1,
pendingTask: 0,
gencov:null,
metadata:{"nb_phenotypes":0,"nb_snps":0},
summary:{"JASSSignif":{"MinUnivNotSignif":0,"MinUnivSignif":0},"JASSNotSignif":{"MinUnivNotSignif":0,"MinUnivSignif":0}},
sharedUrl: ''
}
},
created(){
this.status = this.getStatus();
},
mounted() {
/* console.log("mounted ");
console.log(this.phenotypes);
// this.getStatus();
if(this.status != null){
console.log(this.status);
}
const colorscale = [
['0.0', 'white'],
['0.111111111111', 'rgb(215,48,39)'],
['0.222222222222', 'rgb(244,109,67)'],
['0.333333333333', 'rgb(253,174,97)'],
['0.444444444444', 'rgb(254,224,144)'],
['0.555555555556', 'rgb(224,243,248)'],
['0.666666666667', 'rgb(171,217,233)'],
['0.777777777778', 'rgb(116,173,209)'],
['0.888888888889', 'rgb(69,117,180)'],
['1.0', 'rgb(49,54,149)']];
const dataplot = [
{
z: [[0.1324,0.067,0.1215], [0.067,0.062,null], [0.1215,null,null]],
x: ['z_GIANT_WC','z_GIANT_WHR','z_GIANT_HIP'],
y: ['z_GIANT_WC','z_GIANT_WHR','z_GIANT_HIP'],
type: 'heatmap',
colorscale: 'Picnic'
}
];
const layout = {
width :400,
xaxis: {
showgrid: false
},
yaxis: {
showgrid: false,
showline: true
}
};
console.log(this.$refs);
// console.log(manhattan);
this.manhattan = manhattan;
this.heatmap = heatmap;
this.submanhattan = submanhattan;
manhattan.makePlot(this);
Plotly.newPlot('divCorrelationHeat', dataplot,layout,{displayModeBar: false});
// Plotly.newPlot('divHeatPlot', dataplot,layout);
// Plotly.newPlot('divLocalStatPlot', dataplot,layout);
console.log(this.$refs);
console.log(this.$refs.divWholeStatPlot);
*/
/* this.$refs.divWholeStatPlot.on('plotly_click', function(data){
console.log(data);
});
this.$refs.divWholeStatPlot.on('plotly_relayout',
function(eventdata){
console.log(eventdata);
const update = {
'xaxis.range': [eventdata['xaxis.range[0]'],
eventdata['xaxis.range[1]']]
}
Plotly.relayout('divLocalStatPlot',update);
}); */
/* plot1.on('plotly_click', function(data){
console.log(data);
} */
}
,
methods:{
createPlots(){
console.log("createPlots ");
console.log(this.phenotypes);
// this.getStatus();
if(this.status != null){
console.log(this.status);
}
console.log("SUMMARY");
console.log(this.summary);
console.log(this.summary.JASSSignif.MinUnivNotSignif);
const zLine = [];
console.log("X");
const x = this.outcomes.sort();
console.log(x);
console.log("GENCOV");
console.log(this.gencov);
for (let i = 0; i < x.length; i++){
zLine.push([]);
for (let j = 0; j < (this.gencov.length); j++){
if(x[i]===this.gencov[j].phenotypeID_A){
zLine[i].push(this.gencov[j].gencov);
}
}
const NantoAdd = x.length-zLine[i].length;
for (let j = 0; j < NantoAdd; j++){
zLine[i].unshift(NaN);
}
}
console.log(zLine)
const dataplot = [
{
z: zLine,
x,
y: x,
type: 'heatmap',
colorscale: [['-1','#4A6FE3'],
['-0.9','#5F7BE1'],
['-0.8','#7086E1'],
['-0.7','#8091E1'],
['-0.6','#8F9DE1'],
['-0.5','#9DA8E2'],
['-0.4','#ABB4E2'],
['-0.3','#B9BFE3'],
['-0.2','#C7CBE3'],
['-0.1','#D5D7E3'],
['0','#E2E2E2'],
['0.1','#E4D3D6'],['0.2','#E6C4C9'],
['0.3','#E6B4BD'],['0.4','#E5A5B1'],
['0.5','#E495A5'],['0.6','#E28699'],
['0.7','#DF758D'],['0.8','#DB6581'],
['0.9','#D75376'],['1','#D33F6A']]
}
];
console.log(dataplot);
const layout = {
width :400,
margin: {l:100, r:100, t:10, b:80},
xaxis: {
showgrid: false
},
yaxis: {
showgrid: false,
showline: true
}
};
this.manhattan = manhattan;
this.heatmap = heatmap;
this.submanhattan = submanhattan;
manhattan.makePlot(this);
Plotly.newPlot('divCorrelationHeat', dataplot,layout,{displayModeBar: false});
// Plotly.newPlot('divHeatPlot', dataplot,layout);
// Plotly.newPlot('divLocalStatPlot', dataplot,layout);
console.log(this.$refs);
console.log(this.$refs.divWholeStatPlot);
},
createHeatmapPlot () {
Plotly.newPlot('divWholeStatPlot', manhattan.data.data,manhattan.data.layout);
this.$refs.divWholeStatPlot.on('plotly_click', function(data){
console.log(data);
manhattan.reactOnClick(data);
Plotly.update('divWholeStatPlot',manhattan.data.layout);
});
},
quadranPlot(){
const desiredLink = process.env.API_URL+"/projects/"+this.project.id+"/quadrant";
console.log("quadrant "+desiredLink);
window.open(desiredLink,'_blank');
},
qqPlot(){
const desiredLink = process.env.API_URL+"/projects/"+this.project.id+"/qqplot";
console.log("qq "+desiredLink);
window.open(desiredLink,'_blank');
},
manhattanPlot(){
const desiredLink = process.env.API_URL+"/projects/"+this.project.id+"/globalmanhattan";
console.log("globalmanhattan "+desiredLink);
window.open(desiredLink,'_blank');
},
genomeFullCsv(){
const desiredLink = process.env.API_URL+"/projects/"+this.project.id+"/genome_full";
console.log("manhattan "+desiredLink);
window.open(desiredLink,'_blank');
},
processShowGJASSPVAL(){
this.headers = [ { text: 'CHR', value: 'CHR' },
{ text: 'JOSTmin', value: 'JOSTmin' },
{ text: 'MiddlePosition', value: 'MiddlePosition' },
{ text: 'PVALmin', value: 'PVALmin' },
{ text: 'Region', value: 'Region' },
{ text: 'signif_status', value: 'signif_status' },
{ text: 'snp_ids', value: 'snp_ids' }];
/* this.headersCsv = { text: 'CHR', value: 'CHR' ,
text: 'JOSTmin', value: 'JOSTmin' ,
text: 'MiddlePosition', value: 'MiddlePosition' ,
text: 'PVALmin', value: 'PVALmin' ,
text: 'Region', value: 'Region' ,
text: 'signif_status', value: 'signif_status' ,
text: 'snp_ids', value: 'snp_ids' }; */
// console.log(this.manhattan.data.datarows);
this.significantsRegions=this.manhattan.data.datarows.filter( function(obj){
return obj.signif_status === 'Joint';
});
},
processExportAllJASSPVAL(){
this.headers = [ { text: 'CHR', value: 'CHR' },
{ text: 'JOSTmin', value: 'JOSTmin' },
{ text: 'MiddlePosition', value: 'MiddlePosition' },
{ text: 'PVALmin', value: 'PVALmin' },
{ text: 'Region', value: 'Region' },
{ text: 'signif_status', value: 'signif_status' },
{ text: 'snp_ids', value: 'snp_ids' }];
/* this.headersCsv = { text: 'CHR', value: 'CHR' ,
text: 'JOSTmin', value: 'JOSTmin' ,
text: 'MiddlePosition', value: 'MiddlePosition' ,
text: 'PVALmin', value: 'PVALmin' ,
text: 'Region', value: 'Region' ,
text: 'signif_status', value: 'signif_status' ,
text: 'snp_ids', value: 'snp_ids' }; */
// console.log(this.manhattan.data.datarows);
this.Regions=this.manhattan.data.datarows
},
async getStatus(){
await this.$axios.$get('/queue_status/').then((async function (resultStatus) {
console.log(resultStatus);
this.activeTask = resultStatus.active;
this.pendingTask = resultStatus.reserved;
}).bind(this));
await this.$axios.$get('/projects/'+this.project.id).then((async function (result) {
console.log(result.status.worktable);
console.log(result.progress);
this.progress=result.progress;
this.sharedUrl = "http://"+window.location.host + "/projects/" + this.project.id;
console.log(this.project.id);
this.status=result.status;
if(result.status.worktable ==="READY" && ! this.isready){
await this.$axios.$get('/projects/'+this.project.id+"/gencov").then((async function (result2) {
this.gencov = result2;
await this.$axios.$get('/projects/'+this.project.id+"/summary").then((function (result3) {
this.summary = result3;
console.log(result3);
// show Plot ...
// console.log(this.summary);
this.isready =true;
// console.log(this.gencov);
this.createPlots();
console.log("ready");
}).bind(this));
await this.$axios.$get('/projects/'+this.project.id+"/metadata").then((function (result4) {
this.metadata = result4;
}).bind(this));
}).bind(this));
}
for (const step in result.status){
if (result.status[step] !=="READY"){
setTimeout(this.getStatus, 3000);
break;
}
}
}).bind(this));
}
}
}
</script>