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
d0c1c962
Commit
d0c1c962
authored
Nov 08, 2019
by
Kenzo-Hugo Hillion
♻
Browse files
Refactor and improve KEGG panel
parent
80fc11b1
Pipeline
#17936
passed with stages
in 2 minutes and 14 seconds
Changes
4
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/KeggCard.vue
View file @
d0c1c962
<
template
>
<v-flex
xs12
md6
lg4
>
<v-card>
<v-toolbar-title
class=
"genefunction 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-toolbar
class=
"genefunction white--text"
dense
>
<v-icon
class=
"white--text"
>
dialpad
</v-icon>
<v-toolbar-title
class=
"genefunction white--text"
>
KEGG Function
</v-toolbar-title>
</v-toolbar>
<div
class=
"text-xs-center"
v-if=
"kegg_details.length == 0"
>
<v-progress-circular
indeterminate
color=
"genefunction"
></v-progress-circular>
</div>
<v-list
v-else
>
<template
v-for=
"(item, index) in kegg_detail"
>
<!-- Basic information about the KEGG KO-->
<template
v-for=
"(item, index) in kegg_details"
>
<v-divider
v-if=
"index > 0"
:key=
"index"
:key=
"index
+ '_details'
"
></v-divider>
<v-expansion-panel
v-if=
"item.expand"
:key=
"item.title"
>
<v-list-tile
:key=
"item.title"
>
<v-list-tile-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-action
v-if=
"item.url"
>
<v-tooltip
right
>
<template
v-slot:activator=
"
{ on }">
<v-btn
:href=
"item.url"
flat
icon
class=
"genefunction--text text--darken-1"
target=
"_blank"
v-on=
"on"
>
<v-icon>
open_in_new
</v-icon>
</v-btn>
</
template
>
<span>
Open in KEGG
</span>
</v-tooltip>
</v-list-tile-action>
</v-list-tile>
</template>
<!-- Expandable details (pathways and diseases) -->
<
template
v-for=
"(expanditem, expandindex) in kegg_expand_details"
>
<v-expansion-panel
v-if=
"expanditem.content.length > 0"
:key=
"expandindex"
>
<v-divider
:key=
"expanditem.title"
></v-divider>
<v-expansion-panel-content>
<template
v-slot:header
>
<div>
{{
item
.
title
}}
</div>
<div>
{{
expand
item
.
title
}}
</div>
</
template
>
<v-card>
<v-list>
<
template
v-for=
"(
element, el
index) in item.content"
>
<
template
v-for=
"(
item,
index) in
expand
item.content"
>
<v-divider
v-if=
"
el
index > 0"
:key=
"
el
index"
v-if=
"index > 0"
:key=
"index
+ '_expanded'
"
></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
:key=
"item.id"
class=
"tertiary"
>
<v-list-tile-content>
<v-list-tile-title
v-html=
"item.id"
></v-list-tile-title>
<v-list-tile-sub-title
v-html=
"item.name"
></v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-tooltip
right
>
<template
v-slot:activator=
"
{ on }">
<v-btn
:href=
"item.url"
flat
icon
class=
"genefunction--text text--darken-1"
target=
"_blank"
v-on=
"on"
>
<v-icon>
open_in_new
</v-icon>
</v-btn>
</
template
>
<span>
Open in KEGG
</span>
</v-tooltip>
</v-list-tile-action>
</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>
<!-- References -->
<v-expansion-panel
v-if=
"kegg_references.length > 0"
>
<v-divider/>
<v-expansion-panel-content>
<
template
v-slot:header
>
<div>
References
</div>
</
template
>
<v-card>
<v-list>
<
template
v-for=
"(item, index) in kegg_references"
>
<v-divider
v-if=
"index > 0"
:key=
"index + '_ref'"
></v-divider>
<v-list-tile
:key=
"item.id"
class=
"tertiary"
>
<v-list-tile-content>
<v-list-tile-title
v-html=
"item.title"
></v-list-tile-title>
<v-list-tile-sub-title
v-html=
"item.authors"
></v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-tooltip
right
>
<template
v-slot:activator=
"
{ on }">
<v-btn
:href=
"item.url"
flat
icon
class=
"genefunction--text text--darken-1"
target=
"_blank"
v-on=
"on"
>
<v-icon>
open_in_new
</v-icon>
</v-btn>
</
template
>
<span>
Open in pubmed
</span>
</v-tooltip>
</v-list-tile-action>
</v-list-tile>
</template>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-list>
</v-card>
</v-flex>
...
...
@@ -68,7 +133,9 @@ export default {
},
data
()
{
return
{
kegg_detail
:
[],
kegg_details
:
[],
kegg_expand_details
:
[],
kegg_references
:
[],
};
},
methods
:
{
...
...
@@ -79,35 +146,80 @@ export default {
},
})
.
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
.
buildKeggDetails
(
response
);
this
.
buildKeggExpandDetails
(
response
);
this
.
buildReferences
(
response
);
})
.
catch
((
error
)
=>
{
console
.
log
(
error
);
});
}
},
buildKeggDetails
(
response
)
{
this
.
kegg_details
=
[
{
title
:
'
ID
'
,
content
:
response
.
data
[
0
].
entry_id
,
url
:
'
https://www.genome.jp/dbget-bin/www_bget?ko:
'
+
response
.
data
[
0
].
entry_id
,
},
{
title
:
'
Name
'
,
content
:
response
.
data
[
0
].
name
,
},
{
title
:
'
Definition
'
,
content
:
response
.
data
[
0
].
definition
,
},
];
},
buildKeggExpandDetails
(
response
)
{
this
.
kegg_expand_details
=
[
this
.
buildPathways
(
response
),
this
.
buildDiseases
(
response
),
];
},
buildPathways
(
response
)
{
var
pathways
=
{
title
:
'
Pathways
'
,
content
:
[],
}
Object
.
entries
(
response
.
data
[
0
].
pathways
).
forEach
(([
key
,
value
])
=>
{
pathways
.
content
.
push
(
{
id
:
key
,
name
:
value
,
url
:
'
https://www.genome.jp/kegg-bin/show_pathway?
'
+
key
+
'
+
'
+
this
.
kegg_id
,
}
);
});
return
pathways
;
},
buildDiseases
(
response
)
{
var
diseases
=
{
title
:
'
Diseases
'
,
content
:
[],
}
Object
.
entries
(
response
.
data
[
0
].
diseases
).
forEach
(([
key
,
value
])
=>
{
diseases
.
content
.
push
(
{
id
:
key
,
name
:
value
,
url
:
'
https://www.genome.jp/dbget-bin/www_bget?ds:
'
+
key
,
}
);
});
return
diseases
;
},
buildReferences
(
response
)
{
for
(
var
i
=
0
;
i
<
response
.
data
[
0
].
references
.
length
;
i
++
)
{
this
.
kegg_references
.
push
(
{
title
:
response
.
data
[
0
].
references
[
i
].
title
,
authors
:
response
.
data
[
0
].
references
[
i
].
authors
[
0
]
+
'
et al.
'
+
response
.
data
[
0
].
references
[
i
].
journal
,
url
:
'
https://www.ncbi.nlm.nih.gov/pubmed/
'
+
response
.
data
[
0
].
references
[
i
].
pubmed
,
}
);
};
},
}
}
...
...
frontend/src/components/TaxonomyCard.vue
View file @
d0c1c962
<
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>
<v-toolbar
class=
"taxonomy white--text"
dense
>
<v-icon
class=
"white--text"
>
account_tree
</v-icon>
<v-toolbar-title
class=
"taxonomy white--text"
>
Taxonomy
</v-toolbar-title>
</v-toolbar>
<div
class=
"text-xs-center"
v-if=
"taxonomy_detail.length == 0"
>
<v-progress-circular
indeterminate
...
...
frontend/src/router.js
View file @
d0c1c962
...
...
@@ -29,7 +29,7 @@ export default new Router({
},
{
path
:
'
/gene-detail/:id
'
,
name
:
'
gene
'
,
name
:
'
gene
-detail
'
,
component
:
GeneDetail
,
},
{
...
...
frontend/src/views/GeneDetail.vue
View file @
d0c1c962
<
template
>
<div
class=
"gene"
>
<div
class=
"gene
-detail
"
>
<v-flex>
<v-toolbar
class=
"secondary white--text"
>
<v-toolbar
class=
"secondary white--text"
dense
>
<v-btn
dark
icon
>
<v-icon>
list_alt
</v-icon>
</v-btn>
<v-toolbar-title>
Gene details:
{{
gene_id
}}
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn
dark
icon
>
...
...
@@ -18,24 +21,26 @@
<!-- General information -->
<v-flex
xs12
md6
lg4
>
<v-card>
<v-toolbar-title
class=
"primary white--text"
>
<v-icon
class=
"white--text"
>
format_list_bulleted
</v-icon>
<v-toolbar
class=
"primary white--text"
dense
>
<v-icon
class=
"white--text"
>
format_list_bulleted
</v-icon>
<v-toolbar-title>
Gene information
</v-toolbar-title>
<v-list>
<template
v-for=
"(item, index) in gene_detail"
>
<v-divider
v-if=
"index > 0"
:key=
"index"
></v-divider>
<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-toolbar>
<v-list>
<template
v-for=
"(item, index) in gene_detail"
>
<v-divider
v-if=
"index > 0"
:key=
"index"
></v-divider>
<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>
</v-flex>
<!-- KEGG Function -->
...
...
@@ -55,7 +60,7 @@ import TaxonomyCard from '@/components/TaxonomyCard.vue';
export
default
{
components
:
{
KeggCard
,
TaxonomyCard
},
name
:
'
gene
s
'
,
name
:
'
gene
-detail
'
,
data
()
{
return
{
gene_id
:
""
,
...
...
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