diff --git a/frontend/src/views/GeneDetail.vue b/frontend/src/views/GeneDetail.vue index e9cb545c5fc624e71914f6b8c2c08a4b16300b72..5c598fefe959d4b8ac25d8b48d18c513c564a191 100644 --- a/frontend/src/views/GeneDetail.vue +++ b/frontend/src/views/GeneDetail.vue @@ -4,7 +4,7 @@ <v-toolbar class="secondary white--text"> <v-toolbar-title>Gene details: {{ gene_id }}</v-toolbar-title> <v-spacer></v-spacer> - <v-btn icon> + <v-btn dark icon> <v-icon>search</v-icon> </v-btn> </v-toolbar> @@ -21,14 +21,15 @@ <v-list> <template v-for="(item, index) in gene_detail"> <v-divider - v-if="item.divider" + v-if="index > 0" :key="index" - :inset="item.inset" ></v-divider> - <v-list-tile-content :key="item.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 :key="item.title"> + <v-list-tile-content :key="item.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> </template> </v-list> </v-card> @@ -39,14 +40,40 @@ <v-list> <template v-for="(item, index) in kegg_detail"> <v-divider - v-if="item.divider" + v-if="index > 0" :key="index" - :inset="item.inset" ></v-divider> - <v-list-tile-content :key="item.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-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> @@ -91,12 +118,10 @@ export default { { title: 'Name', content: response.data.gene_name, - divider: true, }, { title: 'Length', content: response.data.length, - divider: true, }, ]; var kegg_id = response.data.functions[0]; @@ -115,12 +140,20 @@ export default { { title: 'Name', content: response.data[0].name, - divider: true, }, { title: 'Definition', content: response.data[0].definition, - divider: true, + }, + { + title: 'Pathways', + content: response.data[0].pathways, + expand: true, + }, + { + title: 'References', + content: response.data[0].references, + expand: true, }, ]; })