Commit b13594ad authored by Kenzo-Hugo Hillion's avatar Kenzo-Hugo Hillion
Browse files

refactor display of simple items

parent edb4828e
Pipeline #32087 passed with stages
in 3 minutes and 14 seconds
......@@ -15,22 +15,9 @@
<div v-else-if="eggnogDetails.length == 0" class="text-xs-center">
<div class="nodata body-2 text-uppercase pa-3">No annotation for this entry</div>
</div>
<v-list v-else>
<!-- Basic information about the EggNOG KO-->
<template v-for="(item, index) in eggnogDetails">
<v-divider
v-if="index > 0"
:key="index + '_details'"
></v-divider>
<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>
</template>
</v-list>
<!-- Simple information -->
<SimpleListing v-else :listData="eggnogDetails"/>
<!-- Expanded information -->
<SimpleExpand :expandData="eggnogExpandDetails"/>
</v-card>
</v-flex>
\ No newline at end of file
import axios from 'axios';
import SimpleExpand from '@/components/listing/simpleexpand/simpleexpand.vue';
import SimpleListing from '@/components/listing/simplelisting/simplelisting.vue';
export default {
components: {
SimpleExpand,
SimpleExpand, SimpleListing,
},
name: 'EggNogCard',
props: {
......
......@@ -15,34 +15,9 @@
<div v-else-if="keggDetails.length == 0" class="text-xs-center">
<div class="nodata body-2 text-uppercase pa-3">No annotation for this entry</div>
</div>
<v-list v-else>
<!-- Basic information about the KEGG KO-->
<template v-for="(item, index) in keggDetails">
<v-divider
v-if="index > 0"
:key="index + '_details'"
></v-divider>
<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="kegg--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, diseases, references...) -->
<SimpleExpand :expandData="keggExpandDetails"/>
</v-list>
<!-- Simple information -->
<SimpleListing v-else :listData="keggDetails"/>
<!-- Expandable details (pathways, diseases, references...) -->
<SimpleExpand :expandData="keggExpandDetails"/>
</v-card>
</v-flex>
\ No newline at end of file
import axios from 'axios';
import SimpleExpand from '@/components/listing/simpleexpand/simpleexpand.vue';
import SimpleListing from '@/components/listing/simplelisting/simplelisting.vue';
export default {
components: {
SimpleExpand,
SimpleExpand, SimpleListing,
},
name: 'KeggCard',
props: {
......@@ -49,6 +51,7 @@ export default {
title: 'ID',
content: response.data.entry_id,
url: `https://www.genome.jp/dbget-bin/www_bget?ko:${response.data.entry_id}`,
url_label: 'Open in KEGG'
},
{
title: 'Name(s)',
......
......@@ -14,10 +14,7 @@
<v-card>
<v-list>
<template v-for="(item, index) in expanditem.content">
<v-divider
v-if="index > 0"
:key="index + '_expanded'"
></v-divider>
<v-divider></v-divider>
<v-list-tile :key="item.id" class="dropdown">
<v-list-tile-content>
<v-tooltip top>
......@@ -38,13 +35,13 @@
<template v-slot:activator="{ on }">
<v-tooltip top v-if='item.fetch'>
<template v-slot:activator="{ on }">
<v-btn flat small icon class="kegg--text text--darken-1 mr-1" target="_blank" v-on="on">
<v-btn flat small icon class="primary--text mr-1" target="_blank" v-on="on">
<v-icon>far fa-plus-square</v-icon>
</v-btn>
</template>
<span>Retrieve information here (future feature)</span>
</v-tooltip>
<v-btn :href="item.url" flat icon class="kegg--text text--darken-1" target="_blank" v-on="on">
<v-btn :href="item.url" flat icon class="primary--text" target="_blank" v-on="on">
<v-icon>open_in_new</v-icon>
</v-btn>
</template>
......
<div name="simplelisting">
<template v-for="(expanditem, expandindex) in expandData">
<v-expansion-panel v-if="expanditem.content.length > 0" :key="expandindex">
<v-list>
<template v-for="(item, index) in listData">
<v-divider
:key="expanditem.title"
v-if="index > 0"
:key="index"
></v-divider>
<v-expansion-panel-content>
<template v-slot:header>
<div>
<span class="title">{{ expanditem.title }}</span>
</div>
</template>
<v-card>
<v-list>
<template v-for="(item, index) in expanditem.content">
<v-divider
v-if="index > 0"
:key="index + '_expanded'"
></v-divider>
<v-list-tile :key="item.id" class="dropdown">
<v-list-tile-content>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-list-tile-title v-on="on" v-html="item.id"></v-list-tile-title>
</template>
<span>{{ item.id }}</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-list-tile-sub-title v-on="on" v-html="item.name"></v-list-tile-sub-title>
</template>
<span>{{ item.name }}</span>
</v-tooltip>
</v-list-tile-content>
<v-list-tile-action>
<v-tooltip right>
<template v-slot:activator="{ on }">
<v-btn :href="item.url" flat icon class="kegg--text text--darken-1" target="_blank" v-on="on">
<v-icon>open_in_new</v-icon>
</v-btn>
</template>
<span>{{ item.url_label }}</span>
</v-tooltip>
</v-list-tile-action>
</v-list-tile>
<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-action v-if="item.url">
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-btn :href="item.url" flat icon class="primary--text" target="_blank" v-on="on">
<v-icon>open_in_new</v-icon>
</v-btn>
</template>
</v-list>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</template>
<span>{{ item.url_label }}</span>
</v-tooltip>
</v-list-tile-action>
</v-list-tile>
</template>
</v-list>
</div>
\ No newline at end of file
export default {
name: 'SimpleListing',
props: {
expandData: Array,
listData: Array,
},
};
\ No newline at end of file
......@@ -28,7 +28,7 @@
<v-list-tile-sub-title v-html="item.content.name"></v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn :href="item.url" icon flat target="_blank" class="taxonomy--text">
<v-btn :href="item.url" icon flat target="_blank" class="primary--text">
<v-icon>open_in_new</v-icon>
</v-btn>
</v-list-tile-action>
......
......@@ -27,45 +27,35 @@
Gene information
</v-toolbar-title>
</v-toolbar>
<v-list>
<template v-for="(item, index) in geneDetail">
<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-expansion-panel v-if="sequence">
<v-expansion-panel-content>
<template v-slot:header>
<div>
<v-icon small color="primary">fas fa-file-alt</v-icon>
<span class="subheading ml-3">FASTA sequence</span>
</div>
</template>
<!-- Simple information -->
<SimpleListing :listData="geneDetail"/>
<v-divider></v-divider>
<!-- FASTA sequence -->
<v-expansion-panel v-if="sequence">
<v-expansion-panel-content>
<template v-slot:header>
<div>
<v-textarea
readonly
background-color="dropdown"
hide-details
:value="sequence"
id="fastaseq"
></v-textarea>
<v-layout wrap align-center>
<v-spacer></v-spacer>
<v-btn @click="copyFasta" class="ma-2 secondary lighten-1">Copy FASTA
<v-icon right dark>far fa-copy</v-icon>
</v-btn>
</v-layout>
<v-icon small color="primary">fas fa-file-alt</v-icon>
<span class="subheading ml-3">FASTA sequence</span>
</div>
</v-expansion-panel-content>
</v-expansion-panel>
</v-list>
</template>
<div>
<v-textarea
readonly
background-color="dropdown"
hide-details
:value="sequence"
id="fastaseq"
></v-textarea>
<v-layout wrap align-center>
<v-spacer></v-spacer>
<v-btn @click="copyFasta" class="ma-2 secondary lighten-1">Copy FASTA
<v-icon right dark>far fa-copy</v-icon>
</v-btn>
</v-layout>
</div>
</v-expansion-panel-content>
</v-expansion-panel>
</v-card>
</v-flex>
<!-- KEGG Function -->
......
......@@ -2,9 +2,10 @@ import axios from 'axios';
import EggNogCard from '@/components/eggnogcard/eggnogcard.vue';
import KeggCard from '@/components/keggcard/keggcard.vue';
import TaxonomyCard from '@/components/taxonomycard/taxonomycard.vue';
import SimpleListing from '@/components/listing/simplelisting/simplelisting.vue';
export default {
components: { KeggCard, TaxonomyCard, EggNogCard },
components: { KeggCard, TaxonomyCard, EggNogCard, SimpleListing },
name: 'gene-detail',
data() {
return {
......@@ -17,6 +18,22 @@ export default {
notFound: false,
};
},
computed: {
sourceUrls() {
return {
'igc': 'https://db.cngb.org/microbiome/genecatalog/genecatalog_human/',
'virgo': 'https://virgo.igs.umaryland.edu/',
'undef': '',
}
},
labelUrls() {
return {
'igc': 'Visit IGC website',
'virgo': 'Visit Virgo website',
'undef': '',
}
},
},
mounted() {
this.geneId = this.$route.params.id;
this.getGeneDetail();
......@@ -45,6 +62,8 @@ export default {
{
title: 'Source',
content: response.data.source,
url: this.sourceUrls[response.data.source],
url_label: this.labelUrls[response.data.source],
},
];
if (response.data.sequence) {
......
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