min max numerical filter independant

components/content/ArticleSystemDistributionPlot.vue

@@ -52,6 +52,10 @@ const axisOptions = ref<string[]>(["percent", "size"])
 const plotY = ref<string>("percent")
 const plotFill = ref<string>("size")
 
+const plotLabelPercent = ref<string>(`% of genomes encoding ${toValue(page)?.title ?? 'the system'}`)
+const plotLabelCount = ref<string>(`Nb of genomes encoding ${toValue(page)?.title ?? 'the system'}`)
+
+
 // onBeforeMount(() => {
 //     fetchSystemHits()
 //     fetchRefSeqTaxo()
@@ -129,7 +133,7 @@ const distributionOptions = computed(() => {
     const { marginLeft, marginRight } = toValue(margin)
     return {
         ...toValue(margin),
-        y: { label: `% of genomes encoding ${toValue(page)?.title ?? 'the system'}` },
+        y: { label: toValue(plotY) === 'percent' ? toValue(plotLabelPercent) : toValue(plotLabelCount) },
         x: { label: selectedTaxoRank.value, tickRotate: 45 },
         color: {
             scheme: "plasma",
@@ -137,7 +141,7 @@ const distributionOptions = computed(() => {
             reverse: true,
             // domain: [0, 100],
             marginLeft: 10,
-            label: `Nb of genomes encoding ${toValue(page)?.title ?? 'the system'}`,
+            label:  toValue(plotFill) === 'percent' ? toValue(plotLabelPercent) : toValue(plotLabelCount),
         },
         width: computedWidth.value - marginRight - marginLeft,
         marks: [

composables/useNumericalfilter.ts

@@ -5,20 +5,24 @@ export function useNumericalFilter(
 ) {
 
 
+
+    const minRef = toRef(min)
+    const maxRef = toRef(max)
+
     const range: Ref<[number, number]> = ref([toValue(min), toValue(max)])
     const stringifyFilter: Ref<string | undefined> = ref(undefined)
 
 
 
     watchEffect(() => {
-        if (range.value[0] === toValue(min) && range.value[1] === toValue(max)) {
+        if (range.value[0] === toValue(minRef) && range.value[1] === toValue(maxRef)) {
             stringifyFilter.value = undefined
         } else {
             stringifyFilter.value = `'${toValue(id)}' ${range.value[0]} TO ${range.value[1]}`
         }
     })
     function reset() {
-        range.value = [toValue(min), toValue(max)]
+        range.value = [toValue(minRef), toValue(maxRef)]
     }
     // watch(() => range, () => {
     //     console.log("watch reange")