|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1"> |
|
|
|
<title>Phenogrid and VueJS</title> |
|
|
|
<link |
|
rel="stylesheet" |
|
href="https://bootswatch.com/4/sketchy/bootstrap.min.css"> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vue"></script> |
|
|
|
<script src="https://unpkg.com/phenogrid@1.3.11/config/phenogrid_config.js"></script> |
|
<script src="https://unpkg.com/phenogrid@1.3.11/dist/phenogrid-bundle.js"></script> |
|
|
|
<link rel="stylesheet" type="text/css" href="https://unpkg.com/phenogrid@1.3.11/dist/phenogrid-bundle.css"> |
|
|
|
</head> |
|
|
|
|
|
|
|
<body> |
|
|
|
<div |
|
id="app" |
|
class="container-fluid"> |
|
<div |
|
v-if="selectedAssociation" |
|
class="row"> |
|
<div |
|
class="col-12" |
|
style="border:5px solid royalblue;border-radius:5px;"> |
|
<phenogridbox |
|
v-bind:association="selectedAssociation" |
|
v-bind:index="'selected-'+selectedDivIndex"> |
|
</phenogridbox> |
|
</div> |
|
</div> |
|
<div |
|
class="row" |
|
v-if="associations.length > 0"> |
|
<div class="col-12"> |
|
<div class="table-sm"> |
|
<table class="table"> |
|
<thead> |
|
<tr> |
|
<th>ID/Label/Evidence</th> |
|
<th>Phenogrid</th> |
|
</tr> |
|
</thead> |
|
|
|
<tbody> |
|
<tr |
|
v-for="(association, index) in associations"> |
|
<td style="max-width:10%;"> |
|
{{association.object.id}} |
|
<hr> |
|
{{association.object.label}} |
|
<hr> |
|
{{formatEvidence(association)}} |
|
</td> |
|
<td style="max-width:50%;" |
|
v-on:click="viewDiagram(association, index)"> |
|
<phenogridbox |
|
v-bind:association="association" |
|
v-bind:index="index"> |
|
</phenogridbox> |
|
</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
|
|
|
|
<script> |
|
Vue.component('phenogridbox', { |
|
props: ['association', 'index'], |
|
template: |
|
` |
|
<div |
|
style="border:2px solid lightgray;" |
|
ref="phenogridbox" |
|
v-if="pgVersion === index" |
|
v-bind:id="'phenogridbox-'+index"> |
|
</div> |
|
`, |
|
|
|
mounted() { |
|
this.pgVersion = this.index; |
|
// this.$nextTick(_ => { |
|
// this.draw(); |
|
// }); |
|
}, |
|
beforeUpdate() { |
|
}, |
|
updated() { |
|
if (this.pgVersion === this.index) { |
|
this.draw(); |
|
} |
|
else { |
|
this.pgVersion = this.index; |
|
} |
|
}, |
|
|
|
data() { |
|
return { |
|
pgVersion: null |
|
}; |
|
}, |
|
|
|
methods: { |
|
draw() { |
|
const association = this.association; |
|
var pgConfig = { |
|
"title": `${this.index}: ${association.object.label}`, |
|
"xAxis": [ |
|
{ |
|
"groupId": "9606", |
|
"groupName": "Homo sapiens" |
|
}, |
|
{ |
|
"groupId": "10090", |
|
"groupName": "Mus musculus" |
|
}, |
|
{ |
|
"groupId": "7955", |
|
"groupName": "Danio rerio" |
|
} |
|
], |
|
"yAxis": [ |
|
{ |
|
"id": association.object.id, |
|
"term": association.object.label |
|
}, |
|
] |
|
}; |
|
|
|
const outerDiv = this.$refs.phenogridbox; |
|
var pgResult = Phenogrid.createPhenogridForElement(outerDiv, { |
|
serverURL: "https://beta.monarchinitiative.org", |
|
gridSkeletonData: pgConfig |
|
}); |
|
} |
|
} |
|
}); |
|
|
|
var app = new Vue({ |
|
el: '#app', |
|
data: { |
|
associations: [], |
|
selectedAssociation: null, |
|
selectedDivIndex: 0 |
|
}, |
|
|
|
mounted() { |
|
this.loadData(); |
|
}, |
|
|
|
methods: { |
|
loadData() { |
|
const diseaseID = 'OMIM:134600'; // Primary Fanconi syndrome |
|
const phenotypesURL = `https://api.monarchinitiative.org/api/bioentity/disease/${diseaseID}/phenotypes/?fetch_objects=true&rows=5`; |
|
const that = this; |
|
|
|
function handleResponse() { |
|
var response = JSON.parse(this.response); |
|
|
|
that.associations = response.associations; |
|
console.log('Associations', that.associations); |
|
} |
|
|
|
var request = new XMLHttpRequest(); |
|
request.withCredentials = false; |
|
request.url = phenotypesURL; |
|
request.addEventListener('load', handleResponse); |
|
request.open('GET', phenotypesURL); |
|
request.send(); |
|
}, |
|
|
|
formatEvidence(association) { |
|
const pairs = association.evidence_graph.nodes.map(e => { |
|
return `${e.id} (${e.lbl})`; |
|
}); |
|
return pairs.join(' '); |
|
}, |
|
|
|
viewDiagram(association, index) { |
|
this.selectedAssociation = association; |
|
this.selectedDivIndex++; |
|
// console.log('viewDiagram', this.selectedDivIndex, this.selectedAssociation.object.label); |
|
} |
|
} |
|
}); |
|
|
|
|
|
</script> |
|
</body> |
|
</html> |
