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

add slider

parent 9425e0a6
No related branches found
No related tags found
No related merge requests found
Pipeline #127720 waiting for manual action
...@@ -34,17 +34,23 @@ const taxoRanks: Ref<string[]> = ref([ ...@@ -34,17 +34,23 @@ const taxoRanks: Ref<string[]> = ref([
const { page } = useContent(); const { page } = useContent();
// get the structures // get the structures
const msIndexName = ref<string>("refseqsanitized") 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(() => { onMounted(() => {
fetchSystemHits() fetchSystemHits()
fetchRefSeqTaxo() fetchRefSeqTaxo()
}) })
const computedWidth = computed(() => { const computedWidth = computed(() => {
const screenWidth = toValue(width) > 1280 ? 1280 : toValue(width) const screenWidth = toValue(width) > 1280 ? 1280 : toValue(width)
return Math.max(screenWidth, 550); return Math.max(screenWidth, 550);
...@@ -52,6 +58,8 @@ const computedWidth = computed(() => { ...@@ -52,6 +58,8 @@ const computedWidth = computed(() => {
const computedDistribution = computed(() => { const computedDistribution = computed(() => {
const toValSelectedTaxoRank = toValue(selectedTaxoRank) const toValSelectedTaxoRank = toValue(selectedTaxoRank)
const toValSystemHits = toValue(systemHits) const toValSystemHits = toValue(systemHits)
...@@ -73,6 +81,15 @@ const computedDistribution = computed(() => { ...@@ -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(() => { // const totalGenome = computed(() => {
// refseqTaxo?.estimatedTotalHits // refseqTaxo?.estimatedTotalHits
// }) // })
...@@ -115,7 +132,7 @@ const distributionOptions = computed(() => { ...@@ -115,7 +132,7 @@ const distributionOptions = computed(() => {
width: computedWidth.value - marginRight - marginLeft, width: computedWidth.value - marginRight - marginLeft,
marks: [ marks: [
Plot.barY( Plot.barY(
toValue(computedDistribution), toValue(filteredDistribution),
{ {
y: "size", y: "size",
x: "taxo", x: "taxo",
...@@ -134,37 +151,52 @@ const systemName = computed(() => { ...@@ -134,37 +151,52 @@ const systemName = computed(() => {
return toValPage?.system ?? toValPage?.title ?? undefined 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 PART
// ================================================= // =================================================
async function fetchSystemHits() { async function fetchSystemHits() {
const { data, error } = await useAsyncMeiliSearch({ try {
index: toValue(msIndexName), const data = await client.index(toValue(msIndexName)).search("", {
query: "",
params: {
facets: ["*"], facets: ["*"],
filter: [`type = '${toValue(systemName)}'`], filter: [`type = '${toValue(systemName)}'`],
limit: 500000, limit: 500000,
} })
}) systemHits.value = data
systemHits.value = data.value
if (error.value) { } catch (error) {
throw createError(`Cannot get hits on refseq for system: ${toValue(systemName)} `) throw createError(`Cannot get hits on refseq for system: ${toValue(systemName)} `)
} }
} }
async function fetchRefSeqTaxo() { async function fetchRefSeqTaxo() {
const { data, error } = await useAsyncMeiliSearch({ try {
index: "refseqtaxo", const data = await client.index("refseqtaxo").search("", {
query: "",
params: {
facets: ["*"], facets: ["*"],
filter: [], filter: [],
limit: 1, limit: 1,
} })
}) refseqTaxo.value = data
refseqTaxo.value = data.value } catch (error) {
if (error.value) {
throw createError(`Cannot get refseq taxo: ${toValue(systemName)} `) throw createError(`Cannot get refseq taxo: ${toValue(systemName)} `)
} }
} }
...@@ -179,11 +211,16 @@ async function fetchRefSeqTaxo() { ...@@ -179,11 +211,16 @@ async function fetchRefSeqTaxo() {
d3.format(".2f")(systemStatistics.percentGenome) }} %). d3.format(".2f")(systemStatistics.percentGenome) }} %).
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-card-text>
<v-select v-model="selectedTaxoRank" :items="taxoRanks" density="compact" label="Select taxonomic rank" <v-select v-model="selectedTaxoRank" :items="taxoRanks" density="compact" label="Select taxonomic rank"
hide-details="auto" class="mx-2"></v-select> hide-details="auto" class="mx-2"></v-select>
</v-card-text> </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> <PlotFigure ref="systemsDistributionPlot" :options="unref(distributionOptions)" defer></PlotFigure>
</v-card> </v-card>
</template> </template>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment