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

starting eggnog card for gene detail

parent 9861b4c3
Pipeline #32026 passed with stages
in 3 minutes and 11 seconds
<v-flex xs12 md6 lg4>
<v-card>
<v-toolbar class="eggnog white--text" dense>
<v-icon class="white--text">fa-braille</v-icon>
<v-toolbar-title class="eggnog white--text">
EggNOG
</v-toolbar-title>
</v-toolbar>
<div class="text-xs-center" v-if="requestDone == false">
<v-progress-circular
indeterminate
color="eggnog"
></v-progress-circular>
</div>
<div v-else-if="eggnogDetails.length == 0" class="text-xs-center">
<div class="nodata body-2 text-uppercase pa-3">No annotation for this entry</div>
</div>
<v-list v-else>
<!-- Basic information about the EggNOG KO-->
<template v-for="(item, index) in eggnogDetails">
<v-divider
v-if="index > 0"
:key="index + '_details'"
></v-divider>
<v-list-tile :key="item.title">
<v-list-tile-content>
<v-list-tile-title v-html="item.title"></v-list-tile-title>
<v-list-tile-sub-title v-html="item.content"></v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action v-if="item.url">
<v-tooltip right>
<template v-slot:activator="{ on }">
<v-btn :href="item.url" flat icon class="eggnog--text text--darken-1" target="_blank" v-on="on">
<v-icon>open_in_new</v-icon>
</v-btn>
</template>
<span>Open in EggNOG</span>
</v-tooltip>
</v-list-tile-action>
</v-list-tile>
</template>
<!-- Expandable details (pathways and diseases) -->
<template v-for="(expanditem, expandindex) in eggnogExpandDetails">
<v-expansion-panel v-if="expanditem.content.length > 0" :key="expandindex">
<v-divider
:key="expanditem.title"
></v-divider>
<v-expansion-panel-content>
<template v-slot:header>
<div>{{ expanditem.title }}</div>
</template>
<v-card>
<v-list>
<template v-for="(item, index) in expanditem.content">
<v-divider
v-if="index > 0"
:key="index + '_expanded'"
></v-divider>
<v-list-tile :key="item.id" class="dropdown">
<v-list-tile-content>
<v-list-tile-sub-title v-html="item.name"></v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</template>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</template>
</v-list>
</v-card>
</v-flex>
\ No newline at end of file
import axios from 'axios';
export default {
name: 'EggNogCard',
props: {
eggnogId: String,
},
mounted() {
this.getEggNogDetail();
},
data() {
return {
eggnogDetails: [],
eggnogExpandDetails: [],
eggnogReferences: [],
requestDone: false,
};
},
methods: {
getEggNogDetail() {
if (this.eggnogId == 'no_eggnog') {
this.requestDone = true;
return;
}
axios.get(`/api/catalog/v1/eggnogs/${this.eggnogId}`, {
headers: {
Accept: 'application/json',
},
})
.then((response) => {
this.buildEggNogDetails(response);
this.buildEggNogExpandDetails(response);
this.buildReferences(response);
})
.catch((error) => {
console.log(error);
})
.finally(() => {
this.requestDone = true;
});
},
buildEggNogDetails(response) {
console.log(response.data)
this.eggnogDetails = [
{
title: 'ID',
content: response.data.function_id,
},
{
title: 'Name',
content: response.data.name,
},
{
title: 'EggNOG version',
content: response.data.version,
},
];
},
buildEggNogExpandDetails(response) {
this.eggnogExpandDetails = [
this.buildFunctionalCategories(response),
];
},
buildFunctionalCategories(response) {
const pathways = {
title: 'Functional Categories',
content: [],
};
Object.entries(response.data.functional_categories).forEach(value => {
pathways.content.push(
{
name: value[1],
},
);
});
return pathways;
},
},
};
\ No newline at end of file
<template src="./eggnogcard.html" lang="html"></template>
<script src="./eggnogcard.js" lang="js"></script>
\ No newline at end of file
......@@ -3,21 +3,21 @@
<v-toolbar class="kegg white--text" dense>
<v-icon class="white--text">fa-braille</v-icon>
<v-toolbar-title class="kegg white--text">
KEGG Function
KEGG Orthology
</v-toolbar-title>
</v-toolbar>
<div class="text-xs-center" v-if="kegg_id == '' || request_done == false">
<div class="text-xs-center" v-if="requestDone == false">
<v-progress-circular
indeterminate
color="kegg"
></v-progress-circular>
</div>
<div v-else-if="kegg_details.length == 0" class="text-xs-center">
<div v-else-if="keggDetails.length == 0" class="text-xs-center">
<div class="nodata body-2 text-uppercase pa-3">No annotation for this entry</div>
</div>
<v-list v-else>
<!-- Basic information about the KEGG KO-->
<template v-for="(item, index) in kegg_details">
<template v-for="(item, index) in keggDetails">
<v-divider
v-if="index > 0"
:key="index + '_details'"
......@@ -41,7 +41,7 @@
</template>
<!-- Expandable details (pathways and diseases) -->
<template v-for="(expanditem, expandindex) in kegg_expand_details">
<template v-for="(expanditem, expandindex) in keggExpandDetails">
<v-expansion-panel v-if="expanditem.content.length > 0" :key="expandindex">
<v-divider
:key="expanditem.title"
......@@ -81,7 +81,7 @@
</template>
<!-- References -->
<v-expansion-panel v-if="kegg_references.length > 0">
<v-expansion-panel v-if="keggReferences.length > 0">
<v-divider/>
<v-expansion-panel-content>
<template v-slot:header>
......@@ -89,7 +89,7 @@
</template>
<v-card>
<v-list>
<template v-for="(item, index) in kegg_references">
<template v-for="(item, index) in keggReferences">
<v-divider
v-if="index > 0"
:key="index + '_ref'"
......
......@@ -5,23 +5,21 @@ export default {
props: {
keggId: String,
},
watch: {
keggId(val, oldVal) {
this.getKeggDetail();
},
mounted() {
this.getKeggDetail();
},
data() {
return {
kegg_details: [],
kegg_expand_details: [],
kegg_references: [],
request_done: false,
keggDetails: [],
keggExpandDetails: [],
keggReferences: [],
requestDone: false,
};
},
methods: {
getKeggDetail() {
if (this.keggId == 'no_kegg') {
this.request_done = true;
this.requestDone = true;
return;
}
axios.get(`/api/catalog/v1/kegg-orthologies/${this.keggId}?detailed=true`, {
......@@ -38,11 +36,11 @@ export default {
console.log(error);
})
.finally(() => {
this.request_done = true;
this.requestDone = true;
});
},
buildKeggDetails(response) {
this.kegg_details = [
this.keggDetails = [
{
title: 'ID',
content: response.data.entry_id,
......@@ -59,7 +57,7 @@ export default {
];
},
buildKeggExpandDetails(response) {
this.kegg_expand_details = [
this.keggExpandDetails = [
this.buildPathways(response),
this.buildDiseases(response),
];
......@@ -98,7 +96,7 @@ export default {
},
buildReferences(response) {
for (let i = 0; i < response.data.references.length; i++) {
this.kegg_references.push(
this.keggReferences.push(
{
title: response.data.references[i].title,
authors: `${response.data.references[i].authors[0]} et al. ${response.data.references[i].journal}`,
......
......@@ -6,17 +6,17 @@
Taxonomy
</v-toolbar-title>
</v-toolbar>
<div class="text-xs-center" v-if="taxonomyId == '' || request_done == false">
<div class="text-xs-center" v-if="requestDone == false">
<v-progress-circular
indeterminate
color="taxonomy"
></v-progress-circular>
</div>
<div v-else-if="taxonomy_detail.length == 0" class="text-xs-center">
<div v-else-if="taxonomyDetail.length == 0" class="text-xs-center">
<div class="nodata body-2 text-uppercase pa-3">No annotation for this entry</div>
</div>
<v-list v-else>
<template v-for="(item, index) in taxonomy_detail">
<template v-for="(item, index) in taxonomyDetail">
<v-divider
v-if="index > 0"
:key="index"
......
......@@ -5,23 +5,17 @@ export default {
props: {
taxonomyId: String,
},
watch: {
taxonomyId(val, oldVal) {
this.getTaxonomyDetail();
},
mounted() {
this.getTaxonomyDetail();
},
data() {
return {
taxonomy_detail: [],
request_done: false,
taxonomyDetail: [],
requestDone: false,
};
},
methods: {
getTaxonomyDetail() {
if (this.taxonomyId == 'no_taxonomy') {
this.request_done = true;
return;
}
axios.get(`/api/catalog/v1/taxonomy/${this.taxonomyId}`, {
headers: {
Accept: 'application/json',
......@@ -29,7 +23,7 @@ export default {
})
.then((response) => {
const ncbi_tax_url = 'https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?id=';
this.taxonomy_detail = [
this.taxonomyDetail = [
{
title: 'Superkingdom',
content: response.data.hierarchy.superkingdom,
......@@ -71,7 +65,7 @@ export default {
color: 'species',
},
];
this.taxonomy_detail.forEach((item, index) => {
this.taxonomyDetail.forEach((item, index) => {
if (item.content) {
item.url = ncbi_tax_url + item.content.tax_id;
}
......@@ -81,7 +75,7 @@ export default {
console.log(error);
})
.finally(() => {
this.request_done = true;
this.requestDone = true;
});
},
},
......
......@@ -64,8 +64,9 @@
</v-card>
</v-flex>
<!-- KEGG Function -->
<KeggCard :keggId='keggId'></KeggCard>
<TaxonomyCard :taxonomyId='taxonomyId'></TaxonomyCard>
<KeggCard v-if="keggId" :keggId='keggId'></KeggCard>
<EggNogCard v-if="eggnogId" :eggnogId='eggnogId'></EggNogCard>
<TaxonomyCard v-if="taxonomyId" :taxonomyId='taxonomyId'></TaxonomyCard>
</v-layout>
</v-container>
</v-card>
......
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';
export default {
components: { KeggCard, TaxonomyCard },
components: { KeggCard, TaxonomyCard, EggNogCard },
name: 'gene-detail',
data() {
return {
......@@ -12,6 +13,7 @@ export default {
sequence: '',
keggId: '',
taxonomyId: '',
eggnogId: '',
notFound: false,
};
},
......@@ -47,14 +49,22 @@ export default {
];
this.sequence = '>' + response.data.geneId + '\n' + response.data.sequence;
if (response.data.functions.length > 0) {
this.keggId = response.data.functions[0].function_id;
response.data.functions.forEach(funcAnnot => {
if (funcAnnot.source == 'kegg') {
this.keggId = funcAnnot.function_id;
}
else if (funcAnnot.source == 'eggnog') {
this.eggnogId = funcAnnot.function_id;
}
})
} else {
this.keggId = 'no_kegg';
this.keggId = '';
}
if (response.data.taxonomy) {
this.taxonomyId = response.data.taxonomy.tax_id;
} else {
this.taxonomyId = 'no_taxonomy';
this.taxonomyId = '';
}
})
.catch((error) => {
......
Supports Markdown
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