Commit ecd25b67 authored by Kenzo-Hugo Hillion's avatar Kenzo-Hugo Hillion
Browse files

sourceCard component

parent 28926923
<v-flex xs12 md6 lg4 xl3>
<v-card>
<v-toolbar class="tertiary white--text" dense>
<v-icon class="white--text">fas fa-book-open</v-icon>
<v-toolbar-title class="white--text">
Gene catalog
</v-toolbar-title>
</v-toolbar>
<div class="text-xs-center" v-if="requestDone == false">
<v-progress-circular
indeterminate
color="secondary"
></v-progress-circular>
</div>
<div v-else-if="sourceDetails.length == 0" class="text-xs-center">
<div class="nodata body-2 text-uppercase pa-3">No annotation for this entry</div>
</div>
<!-- Simple information -->
<SimpleListing v-else :listData="sourceDetails" :color="color"/>
<!-- Expandable details (pathways, diseases, references...) -->
<SimpleExpand :expandData="sourceExpandDetails" :color="color"/>
</v-card>
</v-flex>
\ No newline at end of file
import axios from 'axios';
import SimpleExpand from '@/components/listing/simpleexpand/simpleexpand.vue';
import SimpleListing from '@/components/listing/simplelisting/simplelisting.vue';
export default {
components: {
SimpleExpand, SimpleListing,
},
name: 'KeggCard',
props: {
sourceId: String,
color: String,
},
mounted() {
this.getSourceDetails();
},
data() {
return {
sourceDetails: [],
sourceExpandDetails: [],
keggReferences: [],
requestDone: false,
};
},
methods: {
getSourceDetails() {
if (this.sourceId == 'no_kegg') {
this.requestDone = true;
return;
}
axios.get(`/api/catalog/v1/sources/${this.sourceId}`, {
headers: {
Accept: 'application/json',
},
})
.then((response) => {
this.buildsourceDetails(response);
this.buildSourceExpandDetails(response);
})
.catch((error) => {
console.log(error);
})
.finally(() => {
this.requestDone = true;
});
},
buildsourceDetails(response) {
this.sourceDetails = [
{
title: 'Catalog Name',
content: response.data.name,
url: response.data.url,
url_label: "Visit website",
},
{
title: 'Reference',
content: response.data.doi,
url: `https://doi.org/${response.data.doi}`,
},
];
},
buildSourceExpandDetails(response) {
this.keggExpandDetails = [
this.buildEcNumbers(response),
this.buildPathways(response),
this.buildDiseases(response),
this.buildModules(response),
this.buildReferences(response),
];
},
buildEcNumbers(response) {
var ec_numbers = {
title: 'EC numbers',
icon: 'fas fa-exchange-alt',
content: [],
};
if(response.data.ec_numbers) {
Object.entries(response.data.ec_numbers).forEach(([key, value]) => {
var link_id = value.split('.-')[0]
ec_numbers.content.push(
{
id: value,
url: `https://www.ebi.ac.uk/intenz/query?cmd=SearchEC&ec=${link_id}`,
url_label: "Open in IntEnz",
},
);
});
}
return ec_numbers;
},
buildPathways(response) {
var pathways = {
title: 'Pathways',
icon: 'fas fa-bezier-curve',
content: [],
};
if(response.data.pathways) {
Object.entries(response.data.pathways).forEach(([key, value]) => {
pathways.content.push(
{
id: key,
name: value,
url: `https://www.genome.jp/kegg-bin/show_pathway?${key}+${this.sourceId}`,
url_label: "Open in KEGG",
fetch: true,
},
);
});
}
return pathways;
},
buildModules(response) {
var modules = {
title: 'Modules',
icon: 'fas fa-bezier-curve',
content: [],
};
if(response.data.modules) {
Object.entries(response.data.modules).forEach(([key, value]) => {
modules.content.push(
{
id: key,
name: value,
url: `https://www.genome.jp/kegg-bin/show_module?${key}+${this.sourceId}`,
url_label: "Open in KEGG"
},
);
});
}
return modules;
},
buildDiseases(response) {
var diseases = {
title: 'Diseases',
icon: 'fas fa-laptop-medical',
content: [],
};
if(response.data.diseases) {
Object.entries(response.data.diseases).forEach(([key, value]) => {
diseases.content.push(
{
id: key,
name: value,
url: `https://www.genome.jp/dbget-bin/www_bget?ds:${key}`,
},
);
});
}
return diseases;
},
buildReferences(response) {
var references = {
title: 'References',
icon: 'fas fa-book-open',
content: [],
};
if (response.data.references) {
for (let i = 0; i < response.data.references.length; i++) {
var url = null
if (response.data.references[i].doi){
var url = `https://doi.org/${response.data.references[i].doi}`;
var url_label = "Open in doi.org";
}
else if (response.data.references[i].pubmed_id) {
var url = `https://www.ncbi.nlm.nih.gov/pubmed/${response.data.references[i].pubmed_id}`;
var url_label = "Open in Pubmed";
}
if (url) {
references.content.push(
{
id: response.data.references[i].title,
name: `${response.data.references[i].authors[0]} et al. ${response.data.references[i].journal}`,
url: url,
url_label: url_label,
},
);
}
else {
references.content.push(
{
id: response.data.references[i].title,
name: `${response.data.references[i].authors[0]} et al. ${response.data.references[i].journal}`,
},
);
}
};
}
return references;
},
},
};
\ No newline at end of file
<template src="./sourcecard.html" lang="html"></template>
<script src="./sourcecard.js" lang="js"></script>
\ No newline at end of file
......@@ -64,19 +64,7 @@
</v-card>
</v-flex>
<!-- Source -->
<v-flex xs12 md6 lg4 xl3>
<v-card>
<v-toolbar class="tertiary white--text" dense>
<v-icon class="white--text">format_list_bulleted</v-icon>
<v-toolbar-title>
Gene catalog
</v-toolbar-title>
</v-toolbar>
<!-- Simple information -->
<SimpleListing :listData="sourceDetail"/>
<v-divider></v-divider>
</v-card>
</v-flex>
<SourceCard v-if="sourceId" :sourceId='sourceId'></SourceCard>
<!-- KEGG Function -->
<template v-for="keggId in keggIds">
<KeggCard v-if="keggId" :keggId='keggId'></KeggCard>
......
......@@ -2,16 +2,17 @@ import axios from 'axios';
import EggNogCard from '@/components/eggnogcard/eggnogcard.vue';
import KeggCard from '@/components/keggcard/keggcard.vue';
import TaxonomyCard from '@/components/taxonomycard/taxonomycard.vue';
import SourceCard from '@/components/sourcecard/sourcecard.vue';
import SimpleListing from '@/components/listing/simplelisting/simplelisting.vue';
export default {
components: { KeggCard, TaxonomyCard, EggNogCard, SimpleListing },
components: { KeggCard, TaxonomyCard, EggNogCard, SimpleListing, SourceCard },
name: 'gene-detail',
data() {
return {
geneId: '',
geneDetail: [],
sourceDetail: [],
sourceId: '',
sequence: '',
keggIds: [],
taxonomyId: '',
......@@ -61,20 +62,7 @@ export default {
content: response.data.length,
},
];
this.sourceDetail = [
{
title: 'Name',
content: response.data.source.name,
url: response.data.source.url,
url_label: response.data.source.url,
},
{
title: 'Reference',
content: response.data.source.doi,
url: `https://doi.org/${response.data.source.doi}`,
url_label: `https://doi.org/${response.data.source.doi}`,
},
]
this.sourceId = response.data.source.slug;
if (response.data.sequence) {
this.sequence = '>' + response.data.gene_id + '\n' + response.data.sequence;
}
......@@ -88,8 +76,6 @@ export default {
}
})
} else {
this.keggId = '';
}
if (response.data.taxonomy) {
this.taxonomyId = response.data.taxonomy.tax_id;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment