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

Add component for taxonomy in gene details

parent 330cd0e2
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);
......
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