diff --git a/frontend/src/components/KeggCard.vue b/frontend/src/components/KeggCard.vue
index 6b9748110777712cd82b3ff1610401ec5bef5419..4288304b05cd509bf5e2850f836d518d954d75d4 100644
--- a/frontend/src/components/KeggCard.vue
+++ b/frontend/src/components/KeggCard.vue
@@ -1,52 +1,55 @@
<template>
<v-flex xs12 md6 lg4>
<v-card>
- <v-toolbar-title class="function white--text">KEGG Function</v-toolbar-title>
- <div class="text-xs-center" v-if="kegg_detail.length == 0">
- <v-progress-circular
- indeterminate
- color="function"
- ></v-progress-circular>
- </div>
- <v-list v-else>
- <template v-for="(item, index) in kegg_detail">
- <v-divider
- v-if="index > 0"
- :key="index"
- ></v-divider>
- <v-expansion-panel v-if="item.expand" :key="item.title">
- <v-expansion-panel-content>
- <template v-slot:header>
- <div>{{item.title}}</div>
- </template>
- <v-card>
- <v-list>
- <template v-for="(element, elindex) in item.content">
- <v-divider
- v-if="elindex > 0"
- :key="elindex"
- ></v-divider>
- <v-list-tile :key="element.title">
- <v-list-tile-content :key="element.content">
- <v-list-tile-title v-if="element.title" v-html="element.title"></v-list-tile-title>
- <v-list-tile-title v-else v-html="elindex"></v-list-tile-title>
- <v-list-tile-sub-title v-if="element.authors" v-html="element.authors"></v-list-tile-sub-title>
- <v-list-tile-sub-title v-else v-html="element"></v-list-tile-sub-title>
- </v-list-tile-content>
- </v-list-tile>
- </template>
- </v-list>
- </v-card>
- </v-expansion-panel-content>
- </v-expansion-panel>
- <v-list-tile v-else :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-toolbar-title class="function white--text">
+ <v-icon class="primary--text">account_tree</v-icon>
+ KEGG Function
+ </v-toolbar-title>
+ <div class="text-xs-center" v-if="kegg_detail.length == 0">
+ <v-progress-circular
+ indeterminate
+ color="function"
+ ></v-progress-circular>
+ </div>
+ <v-list v-else>
+ <template v-for="(item, index) in kegg_detail">
+ <v-divider
+ v-if="index > 0"
+ :key="index"
+ ></v-divider>
+ <v-expansion-panel v-if="item.expand" :key="item.title">
+ <v-expansion-panel-content>
+ <template v-slot:header>
+ <div>{{item.title}}</div>
+ </template>
+ <v-card>
+ <v-list>
+ <template v-for="(element, elindex) in item.content">
+ <v-divider
+ v-if="elindex > 0"
+ :key="elindex"
+ ></v-divider>
+ <v-list-tile :key="element.title">
+ <v-list-tile-content :key="element.content">
+ <v-list-tile-title v-if="element.title" v-html="element.title"></v-list-tile-title>
+ <v-list-tile-title v-else v-html="elindex"></v-list-tile-title>
+ <v-list-tile-sub-title v-if="element.authors" v-html="element.authors"></v-list-tile-sub-title>
+ <v-list-tile-sub-title v-else v-html="element"></v-list-tile-sub-title>
+ </v-list-tile-content>
+ </v-list-tile>
+ </template>
+ </v-list>
+ </v-card>
+ </v-expansion-panel-content>
+ </v-expansion-panel>
+ <v-list-tile v-else :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>
diff --git a/frontend/src/components/TaxonomyCard.vue b/frontend/src/components/TaxonomyCard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0f489afc6d28575fe4900004b35d40f7d7e6646b
--- /dev/null
+++ b/frontend/src/components/TaxonomyCard.vue
@@ -0,0 +1,99 @@
+<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>
diff --git a/frontend/src/views/GeneDetail.vue b/frontend/src/views/GeneDetail.vue
index 565fa0e14791fdb1923d8a9a772c529498f5a230..67b16b62fe52bd0e60e48a1f8717558bd7d8754d 100644
--- a/frontend/src/views/GeneDetail.vue
+++ b/frontend/src/views/GeneDetail.vue
@@ -18,7 +18,10 @@
<!-- General information -->
<v-flex xs12 md6 lg4>
<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>
<template v-for="(item, index) in gene_detail">
<v-divider
@@ -37,6 +40,7 @@
</v-flex>
<!-- KEGG Function -->
<KeggCard :kegg_id='kegg_id'></KeggCard>
+ <TaxonomyCard :taxonomy_id='taxonomy_id'></TaxonomyCard>
</v-layout>
</v-container>
</v-card>
@@ -47,15 +51,17 @@
<script>
import axios from 'axios';
import KeggCard from '@/components/KeggCard.vue';
+import TaxonomyCard from '@/components/TaxonomyCard.vue';
export default {
- components: { KeggCard },
+ components: { KeggCard, TaxonomyCard },
name: 'genes',
data() {
return {
gene_id: "",
gene_detail: [],
kegg_id: "",
+ taxonomy_id: "",
};
},
mounted() {
@@ -85,6 +91,7 @@ export default {
},
];
this.kegg_id = response.data.functions[0];
+ this.taxonomy_id = response.data.taxonomy;
})
.catch((error) => {
console.log(error);