Skip to content
Snippets Groups Projects
Commit 5742fc68 authored by Kenzo-Hugo Hillion's avatar Kenzo-Hugo Hillion :recycle:
Browse files

Merge branch '84-improve-taxonomy-details' into 'dev'

Improve taxonomy representation for an entry

Closes #84

See merge request !34
parents d15281f4 4c486ace
No related branches found
No related tags found
2 merge requests!59Prod,!34Improve taxonomy representation for an entry
Pipeline #21107 passed with stages
in 2 minutes and 49 seconds
......@@ -23,7 +23,7 @@
:key="index"
></v-divider>
<v-list-tile v-if="item.content" :key="item.title">
<div class="function" style="width: 6px;height: 82%;margin-right: 10px; margin-left: -5px;"></div>
<div :class="item.color" style="width: 6px;height: 82%;margin-right: 10px; margin-left: -5px;"></div>
<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.name"></v-list-tile-sub-title>
......@@ -74,34 +74,42 @@ export default {
{
title: 'Superkingdom',
content: response.data.superkingdom,
color: 'superkingdom',
},
{
title: 'Kingdom',
content: response.data.kingdom,
color: 'kingdom',
},
{
title: 'Phylum',
content: response.data.phylum,
color: 'phylum',
},
{
title: 'Class',
content: response.data.class_rank,
color: 'class',
},
{
title: 'Order',
content: response.data.order,
color: 'order',
},
{
title: 'Family',
content: response.data.family,
color: 'family',
},
{
title: 'Genus',
content: response.data.genus,
color: 'genus',
},
{
title: 'Species',
content: response.data.species,
color: 'species',
},
];
})
......
......@@ -23,6 +23,15 @@ Vue.use(Vuetify, {
eggnog: '#028090',
taxonomy: '#564138',
nodata: '#f7ebec',
// Taxonomy colors
superkingdom: '#28536b',
kingdom: "#c2948a",
phylum: "#7ea8be",
class: "#e2d4b7",
order: "#a0c1b9",
family: "#bcbdc0",
genus: "#734b5e",
species: "#8499b1",
},
});
......
......@@ -34,21 +34,34 @@
<v-icon class="white--text">far fa-chart-bar</v-icon>
<v-toolbar-title>Gene length distribution</v-toolbar-title>
<v-spacer></v-spacer>
<v-flex xs2 md1>
<v-select
:items="this.windowSizeChoice"
color="primary lighten-3"
<v-flex xs4 md2 class="mt-3">
<v-slider
v-model="geneLengthWindowSize"
@change="getAllGeneLength"
></v-select>
thumb-label
color="secondary lighten-2"
thumb-color="secondary lighten-1"
step="100"
min="100"
max=200
always-dirty
label="Window size (bp):"
></v-slider>
</v-flex>
<v-flex xs2 md1>
<v-select
:items="this.stopAtChoice"
color="primary lighten-3"
<v-flex xs4 md2 xl1 class="mt-3 ml-4">
<v-slider
v-model="stopAt"
@change="getAllGeneLength"
></v-select>
thumb-label
color="secondary lighten-2"
thumb-color="secondary lighten-1"
step="1000"
min="1000"
max=5000
ticks
always-dirty
label="Stop at (bp):"
></v-slider>
</v-flex>
</v-toolbar>
<histogram :histoData="geneLengthData" chartId="histo_gene_length"></histogram>
......@@ -116,20 +129,6 @@ export default {
};
},
computed: {
stopAtChoice() {
let listStopAt = [];
for (let i=1000; i<=5000; i+=1000) {
listStopAt.push(i);
};
return listStopAt;
},
windowSizeChoice() {
let windowSize = [];
for (let i=100; i<=200; i+=100) {
windowSize.push(i);
};
return windowSize;
},
selectLevel() {
return ['kingdom', 'superkingdom', 'phylum', 'class', 'order', 'family', 'genus'];
},
......
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