From f8e33c49d7af52caba064c9547c6aa5bea316dac Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Thu, 4 Apr 2024 17:46:54 +0200
Subject: [PATCH] switch btn
---
.../content/ArticleSystemDistributionPlot.vue | 77 ++++++++++---------
1 file changed, 41 insertions(+), 36 deletions(-)
diff --git a/components/content/ArticleSystemDistributionPlot.vue b/components/content/ArticleSystemDistributionPlot.vue
index f8538104..5bfe0832 100644
--- a/components/content/ArticleSystemDistributionPlot.vue
+++ b/components/content/ArticleSystemDistributionPlot.vue
@@ -37,9 +37,9 @@ const msIndexName = ref<string>("refseqsanitized")
const client = useMeiliSearchRef()
-
+const genomeCountThreshold = ref<boolean>(true)
const genomeCountDomain = ref<[number | null, number | null]>([null, null])
-const genomeCountValue = ref<[number, number]>([0, 0])
+const genomeCountValue = ref<number>(10)
const resetCount = ref<Fn | null>(null)
@@ -48,7 +48,7 @@ const genomePercentValue = ref<[number, number]>([0, 0])
const resetPercent = ref<Fn | null>(null)
-const axisOptions = ref<string[]>(["percent", "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")
@@ -92,10 +92,10 @@ const computedDistribution = computed(() => {
const filteredDistribution = computed(() => {
const toValDistribution = toValue(computedDistribution)
- const [minCount, maxCount] = toValue(genomeCountValue)
+ const minCount = toValue(genomeCountValue)
const [minPercent, maxPercent] = toValue(genomePercentValue)
return toValDistribution.filter(d => {
- return d.size >= minCount && d.size <= maxCount && d.percent >= minPercent && d.percent <= maxPercent
+ return (genomeCountThreshold.value ? d.size >= minCount : true) && d.percent >= minPercent && d.percent <= maxPercent
})
})
@@ -175,11 +175,8 @@ watchEffect(() => {
} else {
genomeCountDomain.value = [null, null]
}
- const { range: rangeCount, reset: rCount } = useNumericalFilter("count", genomeCountDomain.value[0], genomeCountDomain.value[1])
const { range: rangePercent, reset: rPercent } = useNumericalFilter("percent", 0, 100)
- genomeCountValue.value = rangeCount.value
genomePercentValue.value = rangePercent.value
- resetCount.value = rCount
resetPercent.value = rPercent
})
@@ -226,53 +223,61 @@ async function fetchRefSeqTaxo() {
The system was detected in {{ d3.format(",")(systemStatistics.speciesWithSystem) }} different species.
</v-card-text>
- <v-card-text>
- <v-select v-model="selectedTaxoRank" :items="taxoRanks" density="compact" label="Select taxonomic rank"
- hide-details="auto" class="mx-2"></v-select>
- </v-card-text>
- <v-card-text>
- <v-row>
- <v-col> <v-select v-model="plotY" :items="axisOptions" density="compact" label="Y using"
- hide-details="auto" class="mx-2"></v-select>
- </v-col>
- <v-col><v-select v-model="plotFill" :items="axisOptions" density="compact" label="Fill using"
- hide-details="auto" class="mx-2"></v-select></v-col>
- </v-row>
+ <v-row no-gutters>
+ <v-col cols="12" md="4">
+ <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>
+ <v-col cols="12" md="4">
+ <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-card-text>
- <v-row class="d-flex">
- <v-col>
+ <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 Count
+ <v-card-title> Genome Percent
</v-card-title>
</v-card-item>
<v-card-text class="pr-0">
- <v-range-slider v-model="genomeCountValue" step="1" thumb-label="always"
- :min="genomeCountDomain[0]" :max="genomeCountDomain[1]">
+ <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="resetCount()"></v-btn>
+ @click="resetPercent()"></v-btn>
</template></v-range-slider>
</v-card-text>
</v-card>
</v-col>
- <v-col>
+ <v-col cols="12" md="7">
<v-card flat>
- <v-card-item class="mb-4">
- <v-card-title> Genome Percent
+ <v-card-item>
+ <v-card-title> Minimum genomes count to display
</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-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-card>
--
GitLab