let user configure distribution plot

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