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
93939b4a
Commit
93939b4a
authored
Nov 08, 2019
by
Kenzo-Hugo Hillion
♻
Browse files
Add component for taxonomy in gene details
parent
330cd0e2
Changes
3
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/KeggCard.vue
View file @
93939b4a
<
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>
...
...
frontend/src/components/TaxonomyCard.vue
0 → 100644
View file @
93939b4a
<
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
>
frontend/src/views/GeneDetail.vue
View file @
93939b4a
...
...
@@ -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
);
...
...
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