From 117ae95fbd739a446a0c78d443b09fcdf5ab45d7 Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Thu, 4 Apr 2024 13:50:14 +0200
Subject: [PATCH] let user configure distribution plot
---
.../content/ArticleSystemDistributionPlot.vue | 88 +++++++++++++++----
1 file changed, 71 insertions(+), 17 deletions(-)
diff --git a/components/content/ArticleSystemDistributionPlot.vue b/components/content/ArticleSystemDistributionPlot.vue
index 2104a548..13f8ed2d 100644
--- a/components/content/ArticleSystemDistributionPlot.vue
+++ b/components/content/ArticleSystemDistributionPlot.vue
@@ -37,8 +37,21 @@ const msIndexName = ref<string>("refseqsanitized")
const client = useMeiliSearchRef()
+
const genomeCountDomain = ref<[number | null, number | null]>([null, null])
const genomeCountValue = ref<[number, number]>([0, 0])
+const resetCount = ref<Fn | null>(null)
+
+
+const genomePercentDomain = ref<[number, number]>([0, 100])
+const genomePercentValue = ref<[number, number]>([0, 0])
+const resetPercent = ref<Fn | null>(null)
+
+
+const axisOptions = ref<string[]>(["percent", "size"])
+const plotY = ref<string>("percent")
+const plotFill = ref<string>("size")
+
// onBeforeMount(() => {
// fetchSystemHits()
// fetchRefSeqTaxo()
@@ -56,10 +69,6 @@ const computedWidth = computed(() => {
return Math.max(screenWidth, 550);
});
-
-
-
-
const computedDistribution = computed(() => {
const toValSelectedTaxoRank = toValue(selectedTaxoRank)
const toValSystemHits = toValue(systemHits)
@@ -84,9 +93,10 @@ const computedDistribution = computed(() => {
const filteredDistribution = computed(() => {
const toValDistribution = toValue(computedDistribution)
- const [min, max] = toValue(genomeCountValue)
+ const [minCount, maxCount] = toValue(genomeCountValue)
+ const [minPercent, maxPercent] = toValue(genomePercentValue)
return toValDistribution.filter(d => {
- return d.size >= min && d.size <= max
+ return d.size >= minCount && d.size <= maxCount && d.percent >= minPercent && d.percent <= maxPercent
})
})
@@ -119,24 +129,24 @@ const distributionOptions = computed(() => {
const { marginLeft, marginRight } = toValue(margin)
return {
...toValue(margin),
- y: { label: `Number of genomes encoding ${toValue(page)?.title ?? 'the system'}` },
+ y: { label: `% of genomes encoding ${toValue(page)?.title ?? 'the system'}` },
x: { label: selectedTaxoRank.value, tickRotate: 45 },
color: {
scheme: "plasma",
legend: true,
reverse: true,
- domain: [0, 100],
+ // domain: [0, 100],
marginLeft: 10,
- label: `% of genomes encoding ${toValue(page)?.title ?? 'the system'}`,
+ label: `Nb of genomes encoding ${toValue(page)?.title ?? 'the system'}`,
},
width: computedWidth.value - marginRight - marginLeft,
marks: [
Plot.barY(
toValue(filteredDistribution),
{
- y: "size",
+ y: toValue(plotY),
x: "taxo",
- fill: "percent",
+ fill: toValue(plotFill),
tip: true,
sort: { x: "-y" },
},
@@ -156,8 +166,9 @@ watchEffect(() => {
if (toValDistribution?.length > 0) {
genomeCountDomain.value = toValDistribution.reduce((acc, curr) => {
const [min, max] = acc
- if (min === null || curr.size < min) acc[0] = curr.size
- if (max === null || curr.size > max) acc[1] = curr.size
+ const currVal = curr.size
+ if (min === null || currVal < min) acc[0] = currVal
+ if (max === null || currVal > max) acc[1] = currVal
return acc
}, [null, null])
@@ -165,8 +176,12 @@ watchEffect(() => {
} else {
genomeCountDomain.value = [null, null]
}
- const { range, reset } = useNumericalFilter("distribution", genomeCountDomain.value[0] || 0, genomeCountDomain.value[1] || 0)
- genomeCountValue.value = range.value
+ 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
})
@@ -217,10 +232,49 @@ async function fetchRefSeqTaxo() {
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-range-slider v-model="genomeCountValue" step="1" thumb-label="always" :min="genomeCountDomain[0]"
- :max="genomeCountDomain[1]"></v-range-slider>
</v-card-text>
+ <v-row class="d-flex">
+ <v-col>
+ <v-card flat>
+ <v-card-item class="mb-4">
+ <v-card-title> Genome Count
+ </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]">
+ <template #append>
+ <v-btn variant="text" density="compact" icon="md:restart_alt"
+ @click="resetCount()"></v-btn>
+ </template></v-range-slider>
+ </v-card-text>
+ </v-card>
+ </v-col>
+ <v-col>
+ <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-row>
<PlotFigure ref="systemsDistributionPlot" :options="unref(distributionOptions)" defer></PlotFigure>
</v-card>
</template>
\ No newline at end of file
--
GitLab