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

Add component for taxonomy in gene details

parent 330cd0e2
<template> <template>
<v-flex xs12 md6 lg4> <v-flex xs12 md6 lg4>
<v-card> <v-card>
<v-toolbar-title class="function white--text">KEGG Function</v-toolbar-title> <v-toolbar-title class="function white--text">
<div class="text-xs-center" v-if="kegg_detail.length == 0"> <v-icon class="primary--text">account_tree</v-icon>
<v-progress-circular KEGG Function
indeterminate </v-toolbar-title>
color="function" <div class="text-xs-center" v-if="kegg_detail.length == 0">
></v-progress-circular> <v-progress-circular
</div> indeterminate
<v-list v-else> color="function"
<template v-for="(item, index) in kegg_detail"> ></v-progress-circular>
<v-divider </div>
v-if="index > 0" <v-list v-else>
:key="index" <template v-for="(item, index) in kegg_detail">
></v-divider> <v-divider
<v-expansion-panel v-if="item.expand" :key="item.title"> v-if="index > 0"
<v-expansion-panel-content> :key="index"
<template v-slot:header> ></v-divider>
<div>{{item.title}}</div> <v-expansion-panel v-if="item.expand" :key="item.title">
</template> <v-expansion-panel-content>
<v-card> <template v-slot:header>
<v-list> <div>{{item.title}}</div>
<template v-for="(element, elindex) in item.content"> </template>
<v-divider <v-card>
v-if="elindex > 0" <v-list>
:key="elindex" <template v-for="(element, elindex) in item.content">
></v-divider> <v-divider
<v-list-tile :key="element.title"> v-if="elindex > 0"
<v-list-tile-content :key="element.content"> :key="elindex"
<v-list-tile-title v-if="element.title" v-html="element.title"></v-list-tile-title> ></v-divider>
<v-list-tile-title v-else v-html="elindex"></v-list-tile-title> <v-list-tile :key="element.title">
<v-list-tile-sub-title v-if="element.authors" v-html="element.authors"></v-list-tile-sub-title> <v-list-tile-content :key="element.content">
<v-list-tile-sub-title v-else v-html="element"></v-list-tile-sub-title> <v-list-tile-title v-if="element.title" v-html="element.title"></v-list-tile-title>
</v-list-tile-content> <v-list-tile-title v-else v-html="elindex"></v-list-tile-title>
</v-list-tile> <v-list-tile-sub-title v-if="element.authors" v-html="element.authors"></v-list-tile-sub-title>
</template> <v-list-tile-sub-title v-else v-html="element"></v-list-tile-sub-title>
</v-list> </v-list-tile-content>
</v-card> </v-list-tile>
</v-expansion-panel-content> </template>
</v-expansion-panel> </v-list>
<v-list-tile v-else :key="item.title"> </v-card>
<v-list-tile-content :key="item.title"> </v-expansion-panel-content>
<v-list-tile-title v-html="item.title"></v-list-tile-title> </v-expansion-panel>
<v-list-tile-sub-title v-html="item.content"></v-list-tile-sub-title> <v-list-tile v-else :key="item.title">
</v-list-tile-content> <v-list-tile-content :key="item.title">
</v-list-tile> <v-list-tile-title v-html="item.title"></v-list-tile-title>
</template> <v-list-tile-sub-title v-html="item.content"></v-list-tile-sub-title>
</v-list> </v-list-tile-content>
</v-list-tile>
</template>
</v-list>
</v-card> </v-card>
</v-flex> </v-flex>
</template> </template>
......
<template>
<v-flex xs12 md6 lg4>
<v-card>
<v-toolbar-title class="taxonomy white--text">
<v-icon class="primary--text">account_tree</v-icon>
Taxonomy
</v-toolbar-title>
<div class="text-xs-center" v-if="taxonomy_detail.length == 0">
<v-progress-circular
indeterminate
color="taxonomy"
></v-progress-circular>
</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">
<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"></v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</template>
</v-list>
</v-card>
</v-flex>
</template>
<script>
import axios from 'axios';
export default {
name: 'TaxonomyCard',
props: {
taxonomy_id: String,
},
watch: {
taxonomy_id: function (val, oldVal) {
this.getTaxonomyDetail();
}
},
data() {
return {
taxonomy_detail: [],
};
},
methods: {
getTaxonomyDetail() {
axios.get('/api/catalog/v1/taxonomy/' + this.taxonomy_id, {
headers: {
Accept: 'application/json',
},
})
.then((response) => {
this.taxonomy_detail = [
{
title: 'Superkingdom',
content: response.data.superkingdom,
},
{
title: 'Kingdom',
content: response.data.kingdom,
},
{
title: 'Phylum',
content: response.data.phylum,
},
{
title: 'Class',
content: response.data.class_rank,
},
{
title: 'Order',
content: response.data.order,
},
{
title: 'Family',
content: response.data.family,
},
{
title: 'Genus',
content: response.data.genus,
},
{
title: 'Species',
content: response.data.species,
},
];
})
.catch((error) => {
console.log(error);
});
}
}
}
</script>
...@@ -18,7 +18,10 @@ ...@@ -18,7 +18,10 @@
<!-- General information --> <!-- General information -->
<v-flex xs12 md6 lg4> <v-flex xs12 md6 lg4>
<v-card> <v-card>
<v-toolbar-title class="primary white--text">Gene information</v-toolbar-title> <v-toolbar-title class="primary white--text">
<v-icon class="white--text">format_list_bulleted</v-icon>
Gene information
</v-toolbar-title>
<v-list> <v-list>
<template v-for="(item, index) in gene_detail"> <template v-for="(item, index) in gene_detail">
<v-divider <v-divider
...@@ -37,6 +40,7 @@ ...@@ -37,6 +40,7 @@
</v-flex> </v-flex>
<!-- KEGG Function --> <!-- KEGG Function -->
<KeggCard :kegg_id='kegg_id'></KeggCard> <KeggCard :kegg_id='kegg_id'></KeggCard>
<TaxonomyCard :taxonomy_id='taxonomy_id'></TaxonomyCard>
</v-layout> </v-layout>
</v-container> </v-container>
</v-card> </v-card>
...@@ -47,15 +51,17 @@ ...@@ -47,15 +51,17 @@
<script> <script>
import axios from 'axios'; import axios from 'axios';
import KeggCard from '@/components/KeggCard.vue'; import KeggCard from '@/components/KeggCard.vue';
import TaxonomyCard from '@/components/TaxonomyCard.vue';
export default { export default {
components: { KeggCard }, components: { KeggCard, TaxonomyCard },
name: 'genes', name: 'genes',
data() { data() {
return { return {
gene_id: "", gene_id: "",
gene_detail: [], gene_detail: [],
kegg_id: "", kegg_id: "",
taxonomy_id: "",
}; };
}, },
mounted() { mounted() {
...@@ -85,6 +91,7 @@ export default { ...@@ -85,6 +91,7 @@ export default {
}, },
]; ];
this.kegg_id = response.data.functions[0]; this.kegg_id = response.data.functions[0];
this.taxonomy_id = response.data.taxonomy;
}) })
.catch((error) => { .catch((error) => {
console.log(error); console.log(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