From 39ff68a0a5cacf222bb2e6f15b5f0206cb4cf87f Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Fri, 5 Apr 2024 20:19:07 +0200
Subject: [PATCH] add loading indicator
---
.../content/ArticleSystemDistributionPlot.vue | 119 ++++++++++--------
1 file changed, 67 insertions(+), 52 deletions(-)
diff --git a/components/content/ArticleSystemDistributionPlot.vue b/components/content/ArticleSystemDistributionPlot.vue
index 671d3a53..d90dafcb 100644
--- a/components/content/ArticleSystemDistributionPlot.vue
+++ b/components/content/ArticleSystemDistributionPlot.vue
@@ -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
--
GitLab