switch btn

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>