add slider

components/content/ArticleSystemDistributionPlot.vue

@@ -34,17 +34,23 @@ const taxoRanks: Ref<string[]> = ref([
 const { page } = useContent();
 // get the structures
 const msIndexName = ref<string>("refseqsanitized")
+const client = useMeiliSearchRef()
+
+
+const genomeCountDomain = ref<[number | null, number | null]>([null, null])
+const genomeCountValue = ref<[number, number]>([0, 0])
+// onBeforeMount(() => {
+//     fetchSystemHits()
+//     fetchRefSeqTaxo()
+// })
 
-onBeforeMount(() => {
-    fetchSystemHits()
-    fetchRefSeqTaxo()
-})
 onMounted(() => {
     fetchSystemHits()
     fetchRefSeqTaxo()
 })
 
 
+
 const computedWidth = computed(() => {
     const screenWidth = toValue(width) > 1280 ? 1280 : toValue(width)
     return Math.max(screenWidth, 550);
@@ -52,6 +58,8 @@ const computedWidth = computed(() => {
 
 
 
+
+
 const computedDistribution = computed(() => {
     const toValSelectedTaxoRank = toValue(selectedTaxoRank)
     const toValSystemHits = toValue(systemHits)
@@ -73,6 +81,15 @@ const computedDistribution = computed(() => {
 
 })
 
+
+const filteredDistribution = computed(() => {
+    const toValDistribution = toValue(computedDistribution)
+    const [min, max] = toValue(genomeCountValue)
+    return toValDistribution.filter(d => {
+        return d.size >= min && d.size <= max
+    })
+})
+
 // const totalGenome = computed(() => {
 //     refseqTaxo?.estimatedTotalHits
 // })
@@ -115,7 +132,7 @@ const distributionOptions = computed(() => {
         width: computedWidth.value - marginRight - marginLeft,
         marks: [
             Plot.barY(
-                toValue(computedDistribution),
+                toValue(filteredDistribution),
                 {
                     y: "size",
                     x: "taxo",
@@ -134,37 +151,52 @@ const systemName = computed(() => {
     return toValPage?.system ?? toValPage?.title ?? undefined
 })
 
+watchEffect(() => {
+    const toValDistribution = toValue(computedDistribution)
+    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
+            return acc
+        }, [null, null])
+
+
+    } else {
+        genomeCountDomain.value = [null, null]
+    }
+    const { range, reset } = useNumericalFilter("distribution", genomeCountDomain.value[0] || 0, genomeCountDomain.value[1] || 0)
+    genomeCountValue.value = range.value
+
+})
+
+
 // =================================================
 // ASYNC PART 
 // =================================================
 async function fetchSystemHits() {
-    const { data, error } = await useAsyncMeiliSearch({
-        index: toValue(msIndexName),
-        query: "",
-        params: {
+    try {
+        const data = await client.index(toValue(msIndexName)).search("", {
             facets: ["*"],
             filter: [`type = '${toValue(systemName)}'`],
             limit: 500000,
-        }
-    })
-    systemHits.value = data.value
-    if (error.value) {
+        })
+        systemHits.value = data
+
+    } catch (error) {
         throw createError(`Cannot get hits on refseq for system: ${toValue(systemName)} `)
     }
 }
 
 async function fetchRefSeqTaxo() {
-    const { data, error } = await useAsyncMeiliSearch({
-        index: "refseqtaxo",
-        query: "",
-        params: {
+    try {
+        const data = await client.index("refseqtaxo").search("", {
             facets: ["*"],
             filter: [],
             limit: 1,
-        }
-    })
-    refseqTaxo.value = data.value
-    if (error.value) {
+        })
+        refseqTaxo.value = data
+    } catch (error) {
         throw createError(`Cannot get refseq taxo: ${toValue(systemName)} `)
     }
 }
@@ -179,11 +211,16 @@ async function fetchRefSeqTaxo() {
                 d3.format(".2f")(systemStatistics.percentGenome) }} %).
             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-range-slider v-model="genomeCountValue" step="5" thumb-label="always" :min="genomeCountDomain[0]"
+                :max="genomeCountDomain[1]"></v-range-slider>
+        </v-card-text>
         <PlotFigure ref="systemsDistributionPlot" :options="unref(distributionOptions)" defer></PlotFigure>
     </v-card>
 </template>
\ No newline at end of file