diff --git a/frontend/src/components/KeggCard.vue b/frontend/src/components/KeggCard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6b9748110777712cd82b3ff1610401ec5bef5419
--- /dev/null
+++ b/frontend/src/components/KeggCard.vue
@@ -0,0 +1,111 @@
+<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-card>
+ </v-flex>
+</template>
+
+<script>
+import axios from 'axios';
+export default {
+ name: 'KeggCard',
+ props: {
+ kegg_id: String,
+ },
+ watch: {
+ kegg_id: function (val, oldVal) {
+ this.getKeggDetail();
+ }
+ },
+ data() {
+ return {
+ kegg_detail: [],
+ };
+ },
+ methods: {
+ getKeggDetail() {
+ axios.get('http://togows.org/entry/kegg-orthology/' + this.kegg_id + '.json', {
+ headers: {
+ Accept: 'application/json',
+ },
+ })
+ .then((response) => {
+ this.kegg_detail = [
+ {
+ title: 'ID',
+ content: response.data[0].entry_id,
+ },
+ {
+ title: 'Name',
+ content: response.data[0].name,
+ },
+ {
+ title: 'Definition',
+ content: response.data[0].definition,
+ },
+ {
+ title: 'Pathways',
+ content: response.data[0].pathways,
+ expand: true,
+ },
+ {
+ title: 'References',
+ content: response.data[0].references,
+ expand: true,
+ },
+ ];
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ }
+ }
+}
+
+</script>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 30babbdcaf86fb6f2ec994dd95dfbce36414d8c7..f8da182a6f87ecc413cb94c14618e17de8b29342 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -12,6 +12,9 @@ Vue.use(Vuetify, {
theme: {
primary: '#263238',
secondary: '#508991',
+ tertiary: '#f5edf0',
+ function: '#65b891',
+ taxonomy: '#886f68',
},
});
diff --git a/frontend/src/views/GeneDetail.vue b/frontend/src/views/GeneDetail.vue
index 5c598fefe959d4b8ac25d8b48d18c513c564a191..565fa0e14791fdb1923d8a9a772c529498f5a230 100644
--- a/frontend/src/views/GeneDetail.vue
+++ b/frontend/src/views/GeneDetail.vue
@@ -15,9 +15,10 @@
grid-list-md
>
<v-layout row wrap>
+ <!-- General information -->
<v-flex xs12 md6 lg4>
<v-card>
- <v-toolbar-title class="secondary white--text">Gene information</v-toolbar-title>
+ <v-toolbar-title class="primary white--text">Gene information</v-toolbar-title>
<v-list>
<template v-for="(item, index) in gene_detail">
<v-divider
@@ -34,50 +35,8 @@
</v-list>
</v-card>
</v-flex>
- <v-flex xs12 md6 lg4>
- <v-card>
- <v-toolbar-title class="secondary white--text">KEGG Function</v-toolbar-title>
- <v-list>
- <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>
+ <!-- KEGG Function -->
+ <KeggCard :kegg_id='kegg_id'></KeggCard>
</v-layout>
</v-container>
</v-card>
@@ -87,15 +46,16 @@
<script>
import axios from 'axios';
+import KeggCard from '@/components/KeggCard.vue';
export default {
+ components: { KeggCard },
name: 'genes',
data() {
return {
gene_id: "",
gene_detail: [],
kegg_id: "",
- kegg_detail: [],
};
},
mounted() {
@@ -124,38 +84,7 @@ export default {
content: response.data.length,
},
];
- var kegg_id = response.data.functions[0];
- return axios.get('http://togows.org/entry/kegg-orthology/' + kegg_id + '.json', {
- headers: {
- Accept: 'application/json',
- },
- })
- })
- .then((response) => {
- this.kegg_detail = [
- {
- title: 'ID',
- content: response.data[0].entry_id,
- },
- {
- title: 'Name',
- content: response.data[0].name,
- },
- {
- title: 'Definition',
- content: response.data[0].definition,
- },
- {
- title: 'Pathways',
- content: response.data[0].pathways,
- expand: true,
- },
- {
- title: 'References',
- content: response.data[0].references,
- expand: true,
- },
- ];
+ this.kegg_id = response.data.functions[0];
})
.catch((error) => {
console.log(error);