Commit 21ade9c9 authored by Kenzo-Hugo Hillion's avatar Kenzo-Hugo Hillion
Browse files

Add gene information as cards

parent 2c67f95f
<template>
<div class="gene">
{{ gene_id }} {{ gene_detail }} {{ kegg_detail }}
<v-flex>
<v-toolbar class="secondary white--text">
<v-toolbar-title>Gene details: {{ gene_id }}</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>search</v-icon>
</v-btn>
</v-toolbar>
<v-card>
<v-container
fluid
grid-list-md
>
<v-layout row wrap>
<v-flex xs12 md6 lg4>
<v-card>
<v-toolbar-title class="secondary white--text">Gene information</v-toolbar-title>
<v-list>
<template v-for="(item, index) in gene_detail">
<v-divider
v-if="item.divider"
: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>
</template>
</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="item.divider"
: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>
</template>
</v-list>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-flex>
</div>
</template>
......@@ -12,9 +66,9 @@ export default {
data() {
return {
gene_id: "",
gene_detail: {},
gene_detail: [],
kegg_id: "",
kegg_detail: {},
kegg_detail: [],
};
},
mounted() {
......@@ -29,7 +83,22 @@ export default {
},
})
.then((response) => {
this.gene_detail = response.data;
this.gene_detail = [
{
title: 'ID',
content: response.data.gene_id,
},
{
title: 'Name',
content: response.data.gene_name,
divider: true,
},
{
title: 'Length',
content: response.data.length,
divider: true,
},
];
var kegg_id = response.data.functions[0];
return axios.get('http://togows.org/entry/kegg-orthology/' + kegg_id + '.json', {
headers: {
......@@ -38,7 +107,22 @@ export default {
})
})
.then((response) => {
this.kegg_detail = response.data[0]
this.kegg_detail = [
{
title: 'ID',
content: response.data[0].entry_id,
},
{
title: 'Name',
content: response.data[0].name,
divider: true,
},
{
title: 'Definition',
content: response.data[0].definition,
divider: true,
},
];
})
.catch((error) => {
console.log(error);
......
<template>
<div class="genes">
<v-container fluid>
<v-layout row wrap>
<v-flex xs12>
......
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