Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Metagenomics
metagenedb
Commits
21ade9c9
Commit
21ade9c9
authored
Nov 07, 2019
by
Kenzo-Hugo Hillion
♻
Browse files
Add gene information as cards
parent
2c67f95f
Changes
2
Hide whitespace changes
Inline
Side-by-side
frontend/src/views/GeneDetail.vue
View file @
21ade9c9
<
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
);
...
...
frontend/src/views/Genes.vue
View file @
21ade9c9
<
template
>
<div
class=
"genes"
>
<v-container
fluid
>
<v-layout
row
wrap
>
<v-flex
xs12
>
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment