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

refactor kegg and taxonomy components

parent bbe79674
Pipeline #32013 passed with stages
in 3 minutes and 17 seconds
<v-flex xs12 md6 lg4>
<v-card>
<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
</v-toolbar-title>
</v-toolbar>
<div class="text-xs-center" v-if="kegg_id == '' || request_done == false">
<v-progress-circular
indeterminate
color="kegg"
></v-progress-circular>
</div>
<div v-else-if="kegg_details.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">
<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="kegg--text text--darken-1" target="_blank" v-on="on">
<v-icon>open_in_new</v-icon>
</v-btn>
</template>
<span>Open in KEGG</span>
</v-tooltip>
</v-list-tile-action>
</v-list-tile>
</template>
<!-- Expandable details (pathways and diseases) -->
<template v-for="(expanditem, expandindex) in kegg_expand_details">
<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-title v-html="item.id"></v-list-tile-title>
<v-list-tile-sub-title v-html="item.name"></v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-tooltip right>
<template v-slot:activator="{ on }">
<v-btn :href="item.url" flat icon class="kegg--text text--darken-1" target="_blank" v-on="on">
<v-icon>open_in_new</v-icon>
</v-btn>
</template>
<span>Open in KEGG</span>
</v-tooltip>
</v-list-tile-action>
</v-list-tile>
</template>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</template>
<!-- References -->
<v-expansion-panel v-if="kegg_references.length > 0">
<v-divider/>
<v-expansion-panel-content>
<template v-slot:header>
<div>References</div>
</template>
<v-card>
<v-list>
<template v-for="(item, index) in kegg_references">
<v-divider
v-if="index > 0"
:key="index + '_ref'"
></v-divider>
<v-list-tile :key="item.id" class="dropdown">
<v-list-tile-content>
<v-list-tile-title v-html="item.title"></v-list-tile-title>
<v-list-tile-sub-title v-html="item.authors"></v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-tooltip right>
<template v-slot:activator="{ on }">
<v-btn :href="item.url" flat icon class="kegg--text text--darken-1" target="_blank" v-on="on">
<v-icon>open_in_new</v-icon>
</v-btn>
</template>
<span>Open in pubmed</span>
</v-tooltip>
</v-list-tile-action>
</v-list-tile>
</template>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-list>
</v-card>
</v-flex>
\ No newline at end of file
<template>
<v-flex xs12 md6 lg4>
<v-card>
<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
</v-toolbar-title>
</v-toolbar>
<div class="text-xs-center" v-if="kegg_id == '' || request_done == false">
<v-progress-circular
indeterminate
color="kegg"
></v-progress-circular>
</div>
<div v-else-if="kegg_details.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">
<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="kegg--text text--darken-1" target="_blank" v-on="on">
<v-icon>open_in_new</v-icon>
</v-btn>
</template>
<span>Open in KEGG</span>
</v-tooltip>
</v-list-tile-action>
</v-list-tile>
</template>
<!-- Expandable details (pathways and diseases) -->
<template v-for="(expanditem, expandindex) in kegg_expand_details">
<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-title v-html="item.id"></v-list-tile-title>
<v-list-tile-sub-title v-html="item.name"></v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-tooltip right>
<template v-slot:activator="{ on }">
<v-btn :href="item.url" flat icon class="kegg--text text--darken-1" target="_blank" v-on="on">
<v-icon>open_in_new</v-icon>
</v-btn>
</template>
<span>Open in KEGG</span>
</v-tooltip>
</v-list-tile-action>
</v-list-tile>
</template>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</template>
<!-- References -->
<v-expansion-panel v-if="kegg_references.length > 0">
<v-divider/>
<v-expansion-panel-content>
<template v-slot:header>
<div>References</div>
</template>
<v-card>
<v-list>
<template v-for="(item, index) in kegg_references">
<v-divider
v-if="index > 0"
:key="index + '_ref'"
></v-divider>
<v-list-tile :key="item.id" class="dropdown">
<v-list-tile-content>
<v-list-tile-title v-html="item.title"></v-list-tile-title>
<v-list-tile-sub-title v-html="item.authors"></v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-tooltip right>
<template v-slot:activator="{ on }">
<v-btn :href="item.url" flat icon class="kegg--text text--darken-1" target="_blank" v-on="on">
<v-icon>open_in_new</v-icon>
</v-btn>
</template>
<span>Open in pubmed</span>
</v-tooltip>
</v-list-tile-action>
</v-list-tile>
</template>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-list>
</v-card>
</v-flex>
</template>
<script>
import axios from 'axios';
export default {
name: 'KeggCard',
props: {
kegg_id: String,
keggId: String,
},
watch: {
kegg_id(val, oldVal) {
keggId(val, oldVal) {
this.getKeggDetail();
},
},
......@@ -145,11 +20,11 @@ export default {
},
methods: {
getKeggDetail() {
if (this.kegg_id == 'no_kegg') {
if (this.keggId == 'no_kegg') {
this.request_done = true;
return;
}
axios.get(`/api/catalog/v1/kegg-orthologies/${this.kegg_id}?detailed=true`, {
axios.get(`/api/catalog/v1/kegg-orthologies/${this.keggId}?detailed=true`, {
headers: {
Accept: 'application/json',
},
......@@ -199,7 +74,7 @@ export default {
{
id: key,
name: value,
url: `https://www.genome.jp/kegg-bin/show_pathway?${key}+${this.kegg_id}`,
url: `https://www.genome.jp/kegg-bin/show_pathway?${key}+${this.keggId}`,
},
);
});
......@@ -233,6 +108,4 @@ export default {
}
},
},
};
</script>
};
\ No newline at end of file
<template src="./keggcard.html" lang="html"></template>
<script src="./keggcard.js" lang="js"></script>
\ No newline at end of file
<v-flex xs12 md6 lg4>
<v-card>
<v-toolbar class="taxonomy white--text" dense>
<v-icon class="white--text">fa-sitemap</v-icon>
<v-toolbar-title class="taxonomy white--text">
Taxonomy
</v-toolbar-title>
</v-toolbar>
<div class="text-xs-center" v-if="taxonomyId == '' || request_done == false">
<v-progress-circular
indeterminate
color="taxonomy"
></v-progress-circular>
</div>
<div v-else-if="taxonomy_detail.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">
<v-divider
v-if="index > 0"
:key="index"
></v-divider>
<v-list-tile v-if="item.content" :key="item.title">
<div :class="item.color" style="width: 6px;height: 82%;margin-right: 10px; margin-left: -5px;"></div>
<v-list-tile-content :key="item.title">
<v-list-tile-title v-html="item.title"></v-list-tile-title>
<v-list-tile-sub-title v-html="item.content.name"></v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn :href="item.url" icon flat target="_blank" class="taxonomy--text">
<v-icon>open_in_new</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
</template>
</v-list>
</v-card>
</v-flex>
\ No newline at end of file
<template>
<v-flex xs12 md6 lg4>
<v-card>
<v-toolbar class="taxonomy white--text" dense>
<v-icon class="white--text">fa-sitemap</v-icon>
<v-toolbar-title class="taxonomy white--text">
Taxonomy
</v-toolbar-title>
</v-toolbar>
<div class="text-xs-center" v-if="taxonomy_id == '' || request_done == false">
<v-progress-circular
indeterminate
color="taxonomy"
></v-progress-circular>
</div>
<div v-else-if="taxonomy_detail.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">
<v-divider
v-if="index > 0"
:key="index"
></v-divider>
<v-list-tile v-if="item.content" :key="item.title">
<div :class="item.color" style="width: 6px;height: 82%;margin-right: 10px; margin-left: -5px;"></div>
<v-list-tile-content :key="item.title">
<v-list-tile-title v-html="item.title"></v-list-tile-title>
<v-list-tile-sub-title v-html="item.content.name"></v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn :href="item.url" icon flat target="_blank" class="taxonomy--text">
<v-icon>open_in_new</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
</template>
</v-list>
</v-card>
</v-flex>
</template>
<script>
import axios from 'axios';
export default {
name: 'TaxonomyCard',
props: {
taxonomy_id: String,
taxonomyId: String,
},
watch: {
taxonomy_id(val, oldVal) {
taxonomyId(val, oldVal) {
this.getTaxonomyDetail();
},
},
......@@ -61,11 +18,11 @@ export default {
},
methods: {
getTaxonomyDetail() {
if (this.taxonomy_id == 'no_taxonomy') {
if (this.taxonomyId == 'no_taxonomy') {
this.request_done = true;
return;
}
axios.get(`/api/catalog/v1/taxonomy/${this.taxonomy_id}`, {
axios.get(`/api/catalog/v1/taxonomy/${this.taxonomyId}`, {
headers: {
Accept: 'application/json',
},
......@@ -128,6 +85,4 @@ export default {
});
},
},
};
</script>
};
\ No newline at end of file
<template src="./taxonomycard.html" lang="html"></template>
<script src="./taxonomycard.js" lang="js"></script>
\ No newline at end of file
......@@ -2,10 +2,17 @@
<v-flex>
<v-toolbar class="secondary darken-1 white--text" dense>
<v-icon class="white--text">fa-clipboard</v-icon>
<v-toolbar-title>Gene details: {{ gene_id }}</v-toolbar-title>
<v-toolbar-title>Gene details: {{ geneId }}</v-toolbar-title>
</v-toolbar>
<v-alert
v-if="notFound"
:value="true"
type="warning"
>
Gene "{{ geneId }}" not found in the database.
</v-alert>
<v-card>
<v-card v-else>
<v-container
fluid
grid-list-md
......@@ -21,7 +28,7 @@
</v-toolbar-title>
</v-toolbar>
<v-list>
<template v-for="(item, index) in gene_detail">
<template v-for="(item, index) in geneDetail">
<v-divider
v-if="index > 0"
:key="index"
......@@ -57,8 +64,8 @@
</v-card>
</v-flex>
<!-- KEGG Function -->
<KeggCard :kegg_id='kegg_id'></KeggCard>
<TaxonomyCard :taxonomy_id='taxonomy_id'></TaxonomyCard>
<KeggCard :keggId='keggId'></KeggCard>
<TaxonomyCard :taxonomyId='taxonomyId'></TaxonomyCard>
</v-layout>
</v-container>
</v-card>
......
import axios from 'axios';
import KeggCard from '@/components/KeggCard.vue';
import TaxonomyCard from '@/components/TaxonomyCard.vue';
import KeggCard from '@/components/keggcard/keggcard.vue';
import TaxonomyCard from '@/components/taxonomycard/taxonomycard.vue';
export default {
components: { KeggCard, TaxonomyCard },
name: 'gene-detail',
data() {
return {
gene_id: '',
gene_detail: [],
geneId: '',
geneDetail: [],
sequence: '',
kegg_id: '',
taxonomy_id: '',
keggId: '',
taxonomyId: '',
notFound: false,
};
},
mounted() {
this.gene_id = this.$route.params.id;
this.geneId = this.$route.params.id;
this.getGeneDetail();
},
methods: {
getGeneDetail() {
axios.get(`/api/catalog/v1/genes/${this.gene_id}`, {
axios.get(`/api/catalog/v1/genes/${this.geneId}`, {
headers: {
Accept: 'application/json',
},
})
.then((response) => {
this.gene_detail = [
this.geneDetail = [
{
title: 'ID',
content: response.data.gene_id,
content: response.data.geneId,
},
{
title: 'Name',
......@@ -44,20 +45,21 @@ export default {
content: response.data.source,
},
];
this.sequence = '>' + response.data.gene_id + '\n' + response.data.sequence;
this.sequence = '>' + response.data.geneId + '\n' + response.data.sequence;
if (response.data.functions.length > 0) {
this.kegg_id = response.data.functions[0].function_id;
this.keggId = response.data.functions[0].function_id;
} else {
this.kegg_id = 'no_kegg';
this.keggId = 'no_kegg';
}
if (response.data.taxonomy) {
this.taxonomy_id = response.data.taxonomy.tax_id;
this.taxonomyId = response.data.taxonomy.tax_id;
} else {
this.taxonomy_id = 'no_taxonomy';
this.taxonomyId = 'no_taxonomy';
}
})
.catch((error) => {
console.log(error);
this.notFound = true;
});
},
copyFasta(){
......
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