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

add statistics about annotation

parent 8bfe6c63
Pipeline #19071 passed with stages
in 2 minutes and 22 seconds
......@@ -4589,6 +4589,11 @@
"integrity": "sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=",
"dev": true
},
"d3-format": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.2.tgz",
"integrity": "sha512-gco1Ih54PgMsyIXgttLxEhNy/mXxq8+rLnCb5shQk+P5TsiySrwWU5gpB4zen626J4LIwBxHvDChyA8qDm57ww=="
},
"dashdash": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
......
......@@ -13,6 +13,7 @@
"axios": "^0.19.0",
"chart.js": "^2.8.0",
"core-js": "^2.6.5",
"d3-format": "^1.4.2",
"element-ui": "^2.10.0",
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
......
<template>
<v-flex xs6 sm4 md2 xl1>
<v-card :color="count.class" dark class="elevation-2">
<v-card-title primary-title>
<div v-if="count.text">
<div class="blue-grey--text text--lighten-5 subheading font-weight-thin mb-1">{{ count.title }}</div>
<div class="display-1 font-weight-medium">{{ count.text }}</div>
</div>
<div v-else class="text-xs-center">
<v-progress-circular
indeterminate
color="secondary"
></v-progress-circular>
</div>
</v-card-title>
</v-card>
</v-flex>
</template>
<script>
export default {
props: {
count: {
type: Object,
required: true,
},
},
};
</script>
<template>
<v-flex xs12 md6>
<v-flex xs12 md6 xl4>
<v-toolbar
:class="geneLengthData.class"
:class="histoData.class"
dark
v-if="geneLengthData.data"
v-if="histoData.data"
>
<v-icon class="white--text">{{ geneLengthData.icon }}</v-icon>
<v-toolbar-title>{{ geneLengthData.title }}</v-toolbar-title>
<v-icon class="white--text">{{ histoData.icon }}</v-icon>
<v-toolbar-title>{{ histoData.title }}</v-toolbar-title>
</v-toolbar>
<v-card class="pa-2">
<div class="card-body">
<div v-if="geneLengthData.data">
<canvas :id="geneLengthData.chart_id"></canvas>
<div v-if="histoData.data">
<canvas :id="histoData.chart_id"></canvas>
</div>
<div class="text-xs-center" v-else>
<v-progress-circular
......@@ -29,25 +29,25 @@ import Chart from 'chart.js';
export default {
props: {
geneLengthData: {
histoData: {
type: Object,
required: true,
},
},
updated() {
this.createChart(this.geneLengthData.chart_id);
this.createChart(this.histoData.chart_id);
},
methods: {
createChart(chartId) {
const ctx = document.getElementById(chartId);
const histoData = {
labels: this.geneLengthData.labels,
labels: this.histoData.labels,
datasets: [
{
label: this.geneLengthData.label,
data: this.geneLengthData.data,
borderColor: this.geneLengthData.bordelColor,
backgroundColor: this.geneLengthData.backgroundColor,
label: this.histoData.label,
data: this.histoData.data,
borderColor: this.histoData.bordelColor,
backgroundColor: this.histoData.backgroundColor,
},
],
};
......
......@@ -5,7 +5,7 @@
<v-btn dark icon>
<v-icon>list_alt</v-icon>
</v-btn>
<v-toolbar-title>Gene details: {{ gene_id }}</v-toolbar-title>
<v-toolbar-title>Catalog Statistics</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn dark icon>
<v-icon>search</v-icon>
......@@ -18,8 +18,13 @@
grid-list-md
>
<v-layout row wrap>
<histogram :geneLengthData="geneLengthData"></histogram>
<histogram :geneLengthData="geneLengthDataOther"></histogram>
<countcard :count="geneCountAll"></countcard>
<countcard :count="geneCountFunctions"></countcard>
<countcard :count="geneCountTaxo"></countcard>
<countcard :count="geneCountFull"></countcard>
</v-layout>
<v-layout row wrap>
<histogram :histoData="geneLengthData"></histogram>
</v-layout>
</v-container>
</v-card>
......@@ -31,24 +36,34 @@
<script>
import axios from 'axios';
import Histogram from '@/components/Histogram.vue';
import CountCard from '@/components/CountCard.vue';
export default {
name: 'home',
data() {
return {
geneLengthData: {},
geneLengthDataOther: {},
geneLengthWindowSize: 1000,
geneCountAll: {},
geneCountFunctions: {},
geneCountTaxo: {},
geneCountFull: {},
geneLengthWindowSize: 400,
stopAt: 5000,
};
},
mounted() {
this.getGeneLength(this.geneLengthWindowSize);
this.getGeneLength(this.geneLengthWindowSize, this.stopAt);
this.getGeneCountsAll();
this.getGeneCountsFunctions();
this.getGeneCountsTaxo();
this.getGeneCountsFull();
},
methods: {
getGeneLength(geneLengthWindowSize) {
getGeneLength(geneLengthWindowSize, stopAt) {
axios.get('/api/catalog/v1/genes/gene_length', {
params: {
'window_size': geneLengthWindowSize,
'stop_at': stopAt,
},
headers: {
Accept: 'application/json',
......@@ -66,23 +81,97 @@ export default {
class: "secondary",
icon: "bar_chart",
};
this.geneLengthDataOther = {
chart_id: "histo2",
data: response.data.results.counts,
labels: response.data.results.labels,
title: "Gene length distribution",
label: "Number of genes",
borderColor: '#aab183',
backgroundColor: '#faa152',
class: "genefunction",
icon: "graphic_eq",
})
.catch((error) => {
console.log(error);
});
},
getGeneCountsAll() {
axios.get('/api/catalog/v1/genes', {
headers: {
Accept: 'application/json',
},
})
.then((response) => {
this.geneCountAll = {
class: "secondary",
icon: "bar_chart",
text: response.data.count,
title: "Genes",
};
})
.catch((error) => {
console.log(error);
});
},
getGeneCountsFunctions() {
axios.get('/api/catalog/v1/genes', {
params: {
no_functions: false,
},
headers: {
Accept: 'application/json',
},
})
.then((response) => {
this.geneCountFunctions = {
class: "secondary",
icon: "bar_chart",
text: response.data.count,
title: "Functions annotation",
};
})
.catch((error) => {
console.log(error);
});
},
getGeneCountsTaxo() {
axios.get('/api/catalog/v1/genes', {
params: {
no_taxonomy: false,
},
headers: {
Accept: 'application/json',
},
})
.then((response) => {
this.geneCountTaxo = {
class: "secondary",
icon: "bar_chart",
text: response.data.count,
title: "Taxonomy Annotation",
};
})
.catch((error) => {
console.log(error);
});
},
getGeneCountsFull() {
axios.get('/api/catalog/v1/genes', {
params: {
no_functions: false,
no_taxonomy: false,
},
headers: {
Accept: 'application/json',
},
})
.then((response) => {
this.geneCountFull = {
class: "secondary",
icon: "bar_chart",
text: response.data.count,
title: "Full annotation",
};
})
.catch((error) => {
console.log(error);
});
},
},
components: {
histogram: Histogram,
countcard: CountCard,
},
components: { histogram: Histogram },
};
</script>
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