Skip to content
Snippets Groups Projects
Commit 39ff68a0 authored by Remi PLANEL's avatar Remi PLANEL
Browse files

add loading indicator

parent 40a6e02c
No related branches found
No related tags found
No related merge requests found
Pipeline #127899 waiting for manual action
Stage: get-meili-key
Stage: pre-processing
Stage: build
Stage: delete-release
Stage: lint
Stage: deploy
Stage: post-deploy
Hide whitespace changes
Inline Side-by-side
components/content/ArticleSystemDistributionPlot.vue
+ 67
− 52
View file @ 39ff68a0
......@@ -35,7 +35,7 @@ const { page } = useContent();
// get the structures
const msIndexName = ref<string>("refseqsanitized")
const client = useMeiliSearchRef()
const pending = ref<boolean>(false)
const genomeCountThreshold = ref<boolean>(true)
const genomeCountDomain = ref<[number | null, number | null]>([null, null])
......@@ -48,7 +48,7 @@ const genomePercentValue = ref<[number, number]>([0, 0])
const resetPercent = ref<Fn | null>(null)
const axisOptions = ref<string[]>([{ title: "Percentage genomes", value: "percent"}, {title: "Number genomes", value: "size"}])
const axisOptions = ref<string[]>([{ title: "Percentage genomes", value: "percent" }, { title: "Number genomes", value: "size" }])
const plotY = ref<string>("percent")
const plotFill = ref<string>("size")
......@@ -187,6 +187,7 @@ watchEffect(() => {
// =================================================
async function fetchSystemHits() {
try {
pending.value = true
const data = await client.index(toValue(msIndexName)).search("", {
facets: ["*"],
filter: [`type = '${toValue(systemName)}'`],
......@@ -196,6 +197,13 @@ async function fetchSystemHits() {
} catch (error) {
throw createError(`Cannot get hits on refseq for system: ${toValue(systemName)} `)
} finally {
setTimeout(() => {
console.log("Delayed for 1 second.");
pending.value = false
}, "3000");
}
}
......@@ -223,12 +231,14 @@ async function fetchRefSeqTaxo() {
The system was detected in {{ d3.format(",")(systemStatistics.speciesWithSystem) }} different species.
</v-card-text>
<v-row no-gutters>
<v-col>
<v-select v-model="selectedTaxoRank" :items="taxoRanks" density="compact" label="Select taxonomic rank"
hide-details="auto" class="mx-2"></v-select>
</v-col>
<!-- <v-col cols="12" md="4">
<v-card flat :loading="pending">
<v-row no-gutters>
<v-col>
<v-select v-model="selectedTaxoRank" :items="taxoRanks" density="compact"
label="Select taxonomic rank" hide-details="auto" class="mx-2"></v-select>
</v-col>
<!-- <v-col cols="12" md="4">
<v-select v-model="plotY" :items="axisOptions" density="compact" label="Y axis based on"
hide-details="auto" class="mx-2"></v-select>
</v-col>
......@@ -236,49 +246,54 @@ async function fetchRefSeqTaxo() {
<v-select v-model="plotFill" :items="axisOptions" density="compact" label="Color based on"
hide-details="auto" class="mx-2"></v-select>
</v-col> -->
</v-row>
<v-row class="d-flex" no-gutters>
<v-col cols="12" md="5">
<v-card flat>
<v-card-item class="mb-4">
<v-card-title> Genome Percent
</v-card-title>
</v-card-item>
<v-card-text class="pr-0">
<v-range-slider v-model="genomePercentValue" step="1" thumb-label="always"
:min="genomePercentDomain[0]" :max="genomePercentDomain[1]">
<template #append>
<v-btn variant="text" density="compact" icon="md:restart_alt"
@click="resetPercent()"></v-btn>
</template></v-range-slider>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" md="7">
<v-card flat>
<v-card-item>
<v-card-title> Minimum genomes count to display
</v-card-title>
</v-card-item>
<v-card-text class="pr-0">
<v-row>
<v-col>
<v-text-field density="compact" v-model="genomeCountValue" type="number"
:disabled="!genomeCountThreshold" :min="genomeCountDomain[0]"
:max="genomeCountDomain[1]" hide-details></v-text-field>
</v-col>
<v-col cols="3">
<v-switch v-model="genomeCountThreshold" color="primary"
:label="genomeCountThreshold ? 'activated' : 'disabled'" hide-details></v-switch>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
</v-row>
<PlotFigure ref="systemsDistributionPlot" :options="unref(distributionOptions)" defer></PlotFigure>
</v-row>
<v-row class="d-flex" no-gutters>
<v-col cols="12" md="5">
<v-card flat>
<v-card-item class="mb-4">
<v-card-title> Genome Percent
</v-card-title>
</v-card-item>
<v-card-text class="pr-0">
<v-range-slider v-model="genomePercentValue" step="1" thumb-label="always"
:min="genomePercentDomain[0]" :max="genomePercentDomain[1]">
<template #append>
<v-btn variant="text" density="compact" icon="md:restart_alt"
@click="resetPercent()"></v-btn>
</template></v-range-slider>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" md="7">
<v-card flat>
<v-card-item>
<v-card-title> Minimum genomes count to display
</v-card-title>
</v-card-item>
<v-card-text class="pr-0">
<v-row>
<v-col>
<v-text-field density="compact" v-model="genomeCountValue" type="number"
:disabled="!genomeCountThreshold" :min="genomeCountDomain[0]"
:max="genomeCountDomain[1]" hide-details></v-text-field>
</v-col>
<v-col cols="3">
<v-switch v-model="genomeCountThreshold" color="primary"
:label="genomeCountThreshold ? 'activated' : 'disabled'"
hide-details></v-switch>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
</v-row>
<PlotFigure v-if="!pending" ref="systemsDistributionPlot" :options="unref(distributionOptions)" defer>
</PlotFigure>
<v-card v-else>
{{ pending }}...
</v-card>
</v-card>
</v-card>
</template>
\ No newline at end of file
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