Skip to content
Snippets Groups Projects
Commit f8e33c49 authored by Remi PLANEL's avatar Remi PLANEL
Browse files

switch btn

parent 9f09d591
No related branches found
No related tags found
No related merge requests found
Pipeline #127778 waiting for manual action
Stage: get-meili-key
Stage: pre-processing
Stage: build
Stage: delete-release
Stage: lint
Stage: deploy
Stage: post-deploy
Hide whitespace changes
Inline Side-by-side
components/content/ArticleSystemDistributionPlot.vue
+ 41
− 36
View file @ f8e33c49
...@@ -37,9 +37,9 @@ const msIndexName = ref<string>("refseqsanitized") ...@@ -37,9 +37,9 @@ const msIndexName = ref<string>("refseqsanitized")
const client = useMeiliSearchRef() const client = useMeiliSearchRef()
const genomeCountThreshold = ref<boolean>(true)
const genomeCountDomain = ref<[number | null, number | null]>([null, null]) 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) const resetCount = ref<Fn | null>(null)
...@@ -48,7 +48,7 @@ const genomePercentValue = ref<[number, number]>([0, 0]) ...@@ -48,7 +48,7 @@ const genomePercentValue = ref<[number, number]>([0, 0])
const resetPercent = ref<Fn | null>(null) 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 plotY = ref<string>("percent")
const plotFill = ref<string>("size") const plotFill = ref<string>("size")
...@@ -92,10 +92,10 @@ const computedDistribution = computed(() => { ...@@ -92,10 +92,10 @@ const computedDistribution = computed(() => {
const filteredDistribution = computed(() => { const filteredDistribution = computed(() => {
const toValDistribution = toValue(computedDistribution) const toValDistribution = toValue(computedDistribution)
const [minCount, maxCount] = toValue(genomeCountValue) const minCount = toValue(genomeCountValue)
const [minPercent, maxPercent] = toValue(genomePercentValue) const [minPercent, maxPercent] = toValue(genomePercentValue)
return toValDistribution.filter(d => { 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(() => { ...@@ -175,11 +175,8 @@ watchEffect(() => {
} else { } else {
genomeCountDomain.value = [null, null] 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) const { range: rangePercent, reset: rPercent } = useNumericalFilter("percent", 0, 100)
genomeCountValue.value = rangeCount.value
genomePercentValue.value = rangePercent.value genomePercentValue.value = rangePercent.value
resetCount.value = rCount
resetPercent.value = rPercent resetPercent.value = rPercent
}) })
...@@ -226,53 +223,61 @@ async function fetchRefSeqTaxo() { ...@@ -226,53 +223,61 @@ async function fetchRefSeqTaxo() {
The system was detected in {{ d3.format(",")(systemStatistics.speciesWithSystem) }} different species. The system was detected in {{ d3.format(",")(systemStatistics.speciesWithSystem) }} different species.
</v-card-text> </v-card-text>
<v-card-text> <v-row no-gutters>
<v-select v-model="selectedTaxoRank" :items="taxoRanks" density="compact" label="Select taxonomic rank" <v-col cols="12" md="4">
hide-details="auto" class="mx-2"></v-select> <v-select v-model="selectedTaxoRank" :items="taxoRanks" density="compact" label="Select taxonomic rank"
</v-card-text> hide-details="auto" class="mx-2"></v-select>
<v-card-text> </v-col>
<v-row> <v-col cols="12" md="4">
<v-col> <v-select v-model="plotY" :items="axisOptions" density="compact" label="Y using" <v-select v-model="plotY" :items="axisOptions" density="compact" label="Y axis based on"
hide-details="auto" class="mx-2"></v-select> hide-details="auto" class="mx-2"></v-select>
</v-col> </v-col>
<v-col><v-select v-model="plotFill" :items="axisOptions" density="compact" label="Fill using" <v-col cols="12" md="4">
hide-details="auto" class="mx-2"></v-select></v-col> <v-select v-model="plotFill" :items="axisOptions" density="compact" label="Color based on"
</v-row> hide-details="auto" class="mx-2"></v-select>
</v-col>
</v-row>
</v-card-text> <v-row class="d-flex" no-gutters>
<v-row class="d-flex"> <v-col cols="12" md="5">
<v-col>
<v-card flat> <v-card flat>
<v-card-item class="mb-4"> <v-card-item class="mb-4">
<v-card-title> Genome Count <v-card-title> Genome Percent
</v-card-title> </v-card-title>
</v-card-item> </v-card-item>
<v-card-text class="pr-0"> <v-card-text class="pr-0">
<v-range-slider v-model="genomeCountValue" step="1" thumb-label="always" <v-range-slider v-model="genomePercentValue" step="1" thumb-label="always"
:min="genomeCountDomain[0]" :max="genomeCountDomain[1]"> :min="genomePercentDomain[0]" :max="genomePercentDomain[1]">
<template #append> <template #append>
<v-btn variant="text" density="compact" icon="md:restart_alt" <v-btn variant="text" density="compact" icon="md:restart_alt"
@click="resetCount()"></v-btn> @click="resetPercent()"></v-btn>
</template></v-range-slider> </template></v-range-slider>
</v-card-text> </v-card-text>
</v-card> </v-card>
</v-col> </v-col>
<v-col> <v-col cols="12" md="7">
<v-card flat> <v-card flat>
<v-card-item class="mb-4"> <v-card-item>
<v-card-title> Genome Percent <v-card-title> Minimum genomes count to display
</v-card-title> </v-card-title>
</v-card-item> </v-card-item>
<v-card-text class="pr-0"> <v-card-text class="pr-0">
<v-range-slider v-model="genomePercentValue" step="1" thumb-label="always" <v-row>
:min="genomePercentDomain[0]" :max="genomePercentDomain[1]">
<template #append> <v-col>
<v-btn variant="text" density="compact" icon="md:restart_alt" <v-text-field density="compact" v-model="genomeCountValue" type="number"
@click="resetPercent()"></v-btn> :disabled="!genomeCountThreshold" :min="genomeCountDomain[0]"
</template></v-range-slider> :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-text>
</v-card> </v-card>
</v-col> </v-col>
</v-row> </v-row>
<PlotFigure ref="systemsDistributionPlot" :options="unref(distributionOptions)" defer></PlotFigure> <PlotFigure ref="systemsDistributionPlot" :options="unref(distributionOptions)" defer></PlotFigure>
</v-card> </v-card>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment