Skip to content
GitLab
Commit d0c1c962 authored by Kenzo-Hugo Hillion's avatar Kenzo-Hugo Hillion ♻
Browse files

Refactor and improve KEGG panel

parent 80fc11b1
Pipeline #17936 passed with stages
in 2 minutes and 14 seconds
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>{{ expanditem.title }}</div>
</template>
<v-card>
<v-list>
<template v-for="(element, elindex) in item.content">
<template v-for="(item, index) in expanditem.content">
<v-divider
v-if="elindex > 0"
:key="elindex"
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: 'genes',
name: 'gene-detail',
data() {
return {
gene_id: "",
......
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