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

refactor and handle no data in components #135

parent 28ac30ab
Pipeline #32919 passed with stages
in 3 minutes and 41 seconds
Hide whitespace changes
Inline Side-by-side
frontend/src/components/CountCard.vue deleted 100644 → 0
View file @ 28ac30ab
<template>
<v-flex xs6 sm4 lg2>
<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>
frontend/src/components/countcard/countcard.html 0 → 100644
View file @ fb873d72
<v-flex xs6 sm4 lg2>
<v-card :color="color" dark class="elevation-2">
<v-card-title primary-title>
<div v-if="text">
<div class="blue-grey--text text--lighten-5 subheading font-weight-thin mb-1">{{ title }}</div>
<div class="display-1 font-weight-medium">{{ text }}</div>
</div>
<div v-else class="align-xs-center">
<v-progress-circular
indeterminate
color="secondary"
></v-progress-circular>
</div>
</v-card-title>
</v-card>
</v-flex>
\ No newline at end of file
frontend/src/components/countcard/countcard.js 0 → 100644
View file @ fb873d72
export default {
props: {
title: {
type: String,
required: true,
},
text: String,
color: {
type: String,
required: true,
},
},
};
\ No newline at end of file
frontend/src/components/countcard/countcard.vue 0 → 100644
View file @ fb873d72
<template src="./countcard.html" lang="html"></template>
<script src="./countcard.js" lang="hs"></script>
\ No newline at end of file
frontend/src/components/graphs/doughnut/doughnut.html 0 → 100644
View file @ fb873d72
<v-card class="pa-2">
<div class="card-body">
<div class="text-xs-center" v-if="!requestDone && noGraph">
<v-progress-circular
indeterminate
color="secondary"
></v-progress-circular>
</div>
<v-alert
v-else-if="requestDone && noGraph"
:value="requestDone && noGraph"
type="warning"
class="text-xs-center"
>
Could not retrieve data from the server.
</v-alert>
<div>
<canvas :id="chartId"></canvas>
</div>
<v-layout
class="mx-2"
justify-space-between
row
wrap
>
<v-flex md2>
<v-switch
color="secondary"
v-model="hideLegend"
label="Hide legend"
@change="updateChartOptions">
</v-switch>
</v-flex>
<v-flex sm6 md4 v-if="hideLegend === false">
<v-radio-group
row
v-model="legendPosition"
@change="updateChartOptions"
>
<template v-slot:label>
<div>Position:</div>
</template>
<v-radio
color="secondary"
v-for="n in ['top', 'right']"
:key="n"
:label="`${n}`"
:value="n"
></v-radio>
</v-radio-group>
</v-flex>
<v-flex sm12 md6>
<v-select
v-model="hideLabels"
:items="this.labels"
attach
chips
:label="hideLabelsLabel"
multiple
clearable
@change="updateChartData"
></v-select>
</v-flex>
</v-layout>
</div>
</v-card>
\ No newline at end of file
frontend/src/components/Doughnut.vue → frontend/src/components/graphs/doughnut/doughnut.js
View file @ fb873d72
<template>
<v-card class="pa-2">
<div class="card-body">
<div class="text-xs-center" v-if="noGraph">
<v-progress-circular
indeterminate
color="secondary"
></v-progress-circular>
</div>
<div>
<canvas :id="chartId"></canvas>
</div>
<v-layout
class="mx-2"
justify-space-between
row
wrap
>
<v-flex md2>
<v-switch
color="secondary"
v-model="hideLegend"
label="Hide legend"
@change="updateChartOptions">
</v-switch>
</v-flex>
<v-flex sm6 md4 v-if="hideLegend === false">
<v-radio-group
row
v-model="legendPosition"
@change="updateChartOptions"
>
<template v-slot:label>
<div>Position:</div>
</template>
<v-radio
color="secondary"
v-for="n in ['top', 'right']"
:key="n"
:label="`${n}`"
:value="n"
></v-radio>
</v-radio-group>
</v-flex>
<v-flex sm12 md6>
<v-select
v-model="hideLabels"
:items="this.labels"
attach
chips
:label="hideLabelsLabel"
multiple
clearable
@change="updateChartData"
></v-select>
</v-flex>
</v-layout>
</div>
</v-card>
</template>
<script>
import Chart from 'chart.js';
export default {
......@@ -69,6 +7,7 @@ export default {
required: true,
},
chartId: String,
requestDone: Boolean,
},
data() {
return {
......@@ -150,5 +89,4 @@ export default {
this.updateChart();
},
},
};
</script>
};
\ No newline at end of file
frontend/src/components/graphs/doughnut/doughnut.vue 0 → 100644
View file @ fb873d72
<template src="./doughnut.html" lang="html"></template>
<script src="./doughnut.js" lang="hs"></script>
\ No newline at end of file
frontend/src/components/graphs/histogram/histogram.html 0 → 100644
View file @ fb873d72
<v-card class="pa-2">
<div class="card-body">
<div class="text-xs-center" v-if="!requestDone && noGraph">
<v-progress-circular
indeterminate
color="secondary"
></v-progress-circular>
</div>
<v-alert
v-else-if="requestDone && noGraph"
:value="requestDone && noGraph"
type="warning"
class="text-xs-center"
>
Could not retrieve data from the server.
</v-alert>
<div>
<canvas :id="chartId"></canvas>
</div>
</div>
</v-card>
\ No newline at end of file
frontend/src/components/Histogram.vue → frontend/src/components/graphs/histogram/histogram.js
View file @ fb873d72
<template>
<v-card class="pa-2">
<div class="card-body">
<div class="text-xs-center" v-if="requestStatus === false">
<v-progress-circular
indeterminate
color="secondary"
></v-progress-circular>
</div>
<div class="text-xs-center" v-if="(noGraph)">
no data
</div>
<div>
<canvas :id="chartId"></canvas>
</div>
</div>
</v-card>
</template>
<script>
import Chart from 'chart.js';
export default {
......@@ -27,7 +7,7 @@ export default {
required: true,
},
chartId: String,
requestStatus: Boolean,
requestDone: Boolean,
},
data() {
return {
......@@ -83,5 +63,4 @@ export default {
this.updateChart();
},
},
};
</script>
};
\ No newline at end of file
frontend/src/components/graphs/histogram/histogram.vue 0 → 100644
View file @ fb873d72
<template src="./histogram.html" lang="html"></template>
<script src="./histogram.js" lang="hs"></script>
\ No newline at end of file
frontend/src/views/compare/compare.html
View file @ fb873d72
......@@ -39,7 +39,7 @@
></v-select>
</v-flex>
</v-toolbar>
<doughnut :doughnutData="firstTaxoCounts" chartId="first_taxo_annotation"></doughnut>
<doughnut :doughnutData="firstTaxoCounts" :requestDone="firstRequestDone" chartId="first_taxo_annotation"></doughnut>
</v-flex>
<!-- Second Doughnut -->
<v-flex md6>
......@@ -60,7 +60,7 @@
></v-select>
</v-flex>
</v-toolbar>
<doughnut :doughnutData="secondTaxoCounts" chartId="second_taxo_annotation"></doughnut>
<doughnut :doughnutData="secondTaxoCounts" :requestDone="secondRequestDone" chartId="second_taxo_annotation"></doughnut>
</v-flex>
</v-layout>
</v-container>
......
frontend/src/views/compare/compare.js
View file @ fb873d72
import axios from 'axios';
import Histogram from '@/components/Histogram.vue';
import CountCard from '@/components/CountCard.vue';
import Doughnut from '@/components/Doughnut.vue';
import Doughnut from '@/components/graphs/doughnut/doughnut.vue';
export default {
......@@ -17,6 +15,9 @@ export default {
// Gene counts
firstGeneCounts: null,
secondGeneCounts: null,
// Requests status
firstRequestDone: false,
secondRequestDone: false,
taxLevel: 'phylum',
};
},
......@@ -34,7 +35,7 @@ export default {
this.getAllStats();
},
methods: {
getTaxoCounts(endpoint, objName) {
getTaxoCounts(endpoint, objName, statusName) {
axios.get(endpoint.toLowerCase(), {
headers: {
Accept: 'application/json',
......@@ -50,15 +51,15 @@ export default {
})
.catch((error) => {
console.error(error);
});
}).then(() => this[statusName] = true);
},
getFirstTaxoCounts() {
var endpoint = `/api/catalog/v1/statistics/genestatistics-${this.firstGeneSource}-taxonomy-repartition-${this.taxLevel}`;
this.getTaxoCounts(endpoint, 'firstTaxoCounts');
this.getTaxoCounts(endpoint, 'firstTaxoCounts', 'firstRequestDone');
},
getSecondTaxoCounts() {
var endpoint = `/api/catalog/v1/statistics/genestatistics-${this.secondGeneSource}-taxonomy-repartition-${this.taxLevel}`;
this.getTaxoCounts(endpoint, 'secondTaxoCounts');
this.getTaxoCounts(endpoint, 'secondTaxoCounts', 'secondRequestDone');
},
getGeneCountsGeneric(stats_id, geneCountObj) {
axios.get('/api/catalog/v1/statistics/' + stats_id.toLowerCase(), {
......@@ -97,8 +98,6 @@ export default {
},
},
components: {
histogram: Histogram,
countcard: CountCard,
doughnut: Doughnut,
},
};
\ No newline at end of file
frontend/src/views/genes/genes.html
View file @ fb873d72
......@@ -19,7 +19,7 @@
></v-progress-linear>
</v-flex>
<v-spacer/>
</v-layout>
</v-layout>
</v-alert>
</template>
<v-layout row wrap>
......
frontend/src/views/stats/stats.html
View file @ fb873d72
......@@ -20,12 +20,9 @@
grid-list-md
>
<v-layout row wrap>
<countcard :count="geneCountAll"></countcard>
<countcard :count="geneCountFunctions"></countcard>
<countcard :count="geneCountEggnogs"></countcard>
<countcard :count="geneCountKeggs"></countcard>
<countcard :count="geneCountTaxo"></countcard>
<countcard :count="geneCountFull"></countcard>
<template v-for="(item, index) in geneCountsElements">
<countcard :title="item.title" :color="item.color" :text="item.text"></countcard>
</template>
</v-layout>
<v-layout row wrap class="mt-2">
<!-- Histogram -->
......@@ -68,7 +65,7 @@
></v-slider>
</v-flex>
</v-toolbar>
<histogram :histoData="geneLengthData" :requestStatus="geneLengthRequestDone" chartId="histo_gene_length"></histogram>
<histogram :histoData="geneLengthData" :requestDone="geneLengthRequestDone" chartId="histo_gene_length"></histogram>
</v-flex>
<!-- Doughnut -->
<v-flex md12 xl6>
......@@ -89,7 +86,7 @@
></v-select>
</v-flex>
</v-toolbar>
<doughnut :doughnutData="taxoCounts" chartId="taxo_annotation"></doughnut>
<doughnut :doughnutData="taxoCounts" :requestDone="taxoRequestDone" chartId="taxo_annotation"></doughnut>
</v-flex>
</v-layout>
</v-container>
......
frontend/src/views/stats/stats.js
View file @ fb873d72
import axios from 'axios';
import Histogram from '@/components/Histogram.vue';
import CountCard from '@/components/CountCard.vue';
import Doughnut from '@/components/Doughnut.vue';
import Histogram from '@/components/graphs/histogram/histogram.vue';
import CountCard from '@/components/countcard/countcard.vue';
import Doughnut from '@/components/graphs/doughnut/doughnut.vue';
export default {
......@@ -22,13 +22,14 @@ export default {
geneLengthWindowSize: 200,
stopAt: 4000,
// Gene counts data
geneCountAll: {},
geneCountFunctions: {},
geneCountKeggs: {},
geneCountEggnogs: {},
geneCountTaxo: {},
geneCountFull: {},
geneCountsAll: null,
geneCountsFunctions: null,
geneCountsKegg: null,
geneCountsEggnog: null,
geneCountsTax: null,
geneCountsFull: null,
// Taxonomy repartition
taxoRequestDone: false,
taxoCounts: {},
taxLevel: 'phylum',
};
......@@ -55,6 +56,40 @@ export default {
],
};
},
geneCountsElements() {
return [
{
title: "All",
color: "primary",
text: this.geneCountsAll,
},
{
title: "Functions",
color: "function darken-1",
text: this.geneCountsFunctions,
},
{
title: "KEGG",
color: "kegg",
text: this.geneCountsKegg,
},
{
title: "EggNOG",
color: "eggnog darken-1",
text: this.geneCountsEggnog,
},
{
title: "Taxonomy",
color: "taxonomy darken-1",
text: this.geneCountsTax,
},
{
title: "Full",
color: "tertiary",
text: this.geneCountsFull,
},
]
}
},
mounted() {
this.getAllStats();
......@@ -73,14 +108,12 @@ export default {
label: label,
backgroundColor: backgroundColor,
};
this.geneLengthRequestDone = true;
})
.catch((error) => {
this[geneLengthLabelObj] = [];
this[geneLengthObj] = {};
console.error(error);
this.geneLengthRequestDone = true;
});
}).then(() => this.geneLengthRequestDone = true);
},
getGeneLength() {
this.getGeneLengthGeneric(
......@@ -145,68 +178,54 @@ export default {
this.getGeneLengthWithTaxonomy();
this.getGeneLengthWithFunctionsAndTaxonomy();
},
getGeneCountsGeneric(stats_id, className, title, geneCountObj) {
getGeneCountsGeneric(stats_id, geneCountsObj) {
axios.get('/api/catalog/v1/statistics/' + stats_id.toLowerCase(), {
headers: {
Accept: 'application/json',
},
})
.then((response) => {
this[geneCountObj] = {
class: className,
text: response.data.body.count,
title: title,
};
this[geneCountsObj] = response.data.body.count.toString();
})
.catch((error) => {
this[geneCountsObj] = "no data";
console.error(error);
});
},
getGeneCountsAll() {
this.getGeneCountsGeneric(
`genestatistics-${this.geneSource}-count-all`,
'primary',
'All',
'geneCountAll');
'geneCountsAll'
);
},
getGeneCountsFunctions() {
this.getGeneCountsGeneric(
`genestatistics-${this.geneSource}-count-has-function`,
'function darken-1',
'Functions',
'geneCountFunctions',
'geneCountsFunctions',
);
},
getGeneCountsKeggs() {
this.getGeneCountsGeneric(
`genestatistics-${this.geneSource}-count-has-function-source-kegg`,
'kegg',
'KEGG',
'geneCountKeggs',
'geneCountsKegg',
);
},
getGeneCountsEggnogs() {
this.getGeneCountsGeneric(
`genestatistics-${this.geneSource}-count-has-function-source-eggnog`,
'eggnog darken-1',
'EggNOG',
'geneCountEggnogs',
'geneCountsEggnog',
);
},
getGeneCountsTaxo() {
this.getGeneCountsGeneric(
`genestatistics-${this.geneSource}-count-has-taxonomy`,
'taxonomy darken-1',
'Taxonomy',
'geneCountTaxo',
'geneCountsTax',
);
},
getGeneCountsFull() {
this.getGeneCountsGeneric(
`genestatistics-${this.geneSource}-count-has-function-has-taxonomy`,
'tertiary',
'Full',
'geneCountFull',
'geneCountsFull',
);
},
getGeneCounts() {
......@@ -237,7 +256,7 @@ export default {
})
.catch((error) => {
console.error(error);
});
}).then(() => this.taxoRequestDone = true);
},
getAllStats() {
this.getAllGeneLength();
......
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