diff --git a/components/ServerDbTable.vue b/components/ServerDbTable.vue index 14578f59596eabce0681816d2a3fd861ab0a59ac..57c3dd754d26a7cc625de7446627edbaf6dfd3e1 100644 --- a/components/ServerDbTable.vue +++ b/components/ServerDbTable.vue @@ -307,8 +307,6 @@ async function downloadData() { </script> <template> <v-card flat color="transparent"> - <v-card-text> - </v-card-text> <v-card-text> <slot name="numerical-filters" :search="throttleSearch"></slot> </v-card-text> diff --git a/components/content/RefseqDb.vue b/components/content/RefseqDb.vue index e5ef7c958dbc2e701135cb5ec788f50f770d44c7..4e1cf4ff9539776e95b3e02be2d6ff2d91b8fa64 100644 --- a/components/content/RefseqDb.vue +++ b/components/content/RefseqDb.vue @@ -13,7 +13,7 @@ import type { ComponentPublicInstance } from 'vue' const sortBy: Ref<SortItem[]> = ref([{ key: 'type', order: "asc" }]) const itemValue = ref("id"); -const { width } = useDisplay(); +const { width, mobile } = useDisplay(); const scaleTransform: Ref<string[]> = ref([]) @@ -41,6 +41,27 @@ const availableTaxo: Ref<string[]> = ref([ "Superkingdom" ]); +const taxonomy = ref<Record<number, { title: string, value: string }>>({ + 0: { title: "Species", value: "species" }, + 1: { title: "Genus", value: "genus" }, + 2: { title: "Family", value: "family" }, + 3: { title: "Order", value: "order" }, + 4: { title: "Phylum", value: "phylum" }, + 5: { title: "Superkingdom", value: "Superkingdom" }, + + +}) +const selectedTR = ref(5) +const sliderTaxonomy = computed(() => { + return Object.entries(toValue(taxonomy)).reduce((acc, [key, value]) => { + acc[key] = value.title + return acc + }, {}) +}) + +const selectedSliderTaxonomy = computed(() => { + return toValue(taxonomy)[toValue(selectedTR)].value +}) const scaleTypes = ref<string[]>(['linear', 'sqrt', 'log', 'symlog']) const selectedTaxoRank = ref("phylum"); @@ -177,10 +198,10 @@ const computedDistriSystemOptions = computed(() => { // Taxo distri const computedTaxonomyDistribution = computed(() => { - if (toValue(msResult)?.facetDistribution?.[selectedTaxoRank.value]) { - return Object.entries(toValue(msResult).facetDistribution[selectedTaxoRank.value]).map(([key, value]) => { + if (toValue(msResult)?.facetDistribution?.[selectedSliderTaxonomy.value]) { + return Object.entries(toValue(msResult).facetDistribution[selectedSliderTaxonomy.value]).map(([key, value]) => { return { - [selectedTaxoRank.value]: key, + [selectedSliderTaxonomy.value]: key, count: value } }).sort() @@ -192,7 +213,7 @@ const computedDistriTaxoOptions = computed(() => { return { ...defaultBarPlotOptions.value, marginBottom: 100, - x: { ...defaultBarPlotOptions.value.x, label: selectedTaxoRank.value }, + x: { ...defaultBarPlotOptions.value.x, label: selectedSliderTaxonomy.value }, y: { ...defaultBarPlotOptions.value.y, type: toValue(scaleType), label: "Count" }, width: computedWidth.value, marks: [ @@ -200,7 +221,7 @@ const computedDistriTaxoOptions = computed(() => { toValue(computedTaxonomyDistribution), { y: "count", - x: selectedTaxoRank.value, + x: selectedSliderTaxonomy.value, tip: true, // fill: "#6750a4", sort: { x: "-y" }, @@ -254,7 +275,7 @@ const binPlotDataOptions = computed(() => { }, // fy: { domain: groupSortDomain.value }, marks: [ - Plot.cell(toValueAllHits?.hits ?? [], Plot.group({ fill: "count" }, { x: "type", y: selectedTaxoRank.value, tip: true, inset: 0.5, sort: { y: "fill" } })), + Plot.cell(toValueAllHits?.hits ?? [], Plot.group({ fill: "count" }, { x: "type", y: selectedSliderTaxonomy.value, tip: true, inset: 0.5, sort: { y: "fill" } })), ] } : null @@ -297,8 +318,12 @@ async function downloadPng(component: ComponentPublicInstance | null, filename: </v-btn-toggle> <v-select v-model="scaleType" class="mx-2" density="compact" :items="scaleTypes" label="Scale Type" hide-details="auto"></v-select> - <v-select v-model="selectedTaxoRank" :items="availableTaxo" density="compact" - label="Select taxonomic rank" hide-details="auto" class="mx-2"></v-select> + + + <!-- <v-select v-model="selectedTaxoRank" :items="availableTaxo" density="compact" + label="Select taxonomic rank" hide-details="auto" class="mx-2"></v-select> --> + <v-slider v-model="selectedTR" label="Select taxonomic rank" :max="5" + :ticks="sliderTaxonomy" step="1" show-ticks="always"></v-slider> </v-toolbar> <v-row align="start"> @@ -380,10 +405,19 @@ async function downloadPng(component: ComponentPublicInstance | null, filename: <v-toolbar flat color="transparent" density="compact"> <v-select v-model="scaleType" class="mx-2" density="compact" :items="scaleTypes" label="Scale Type" hide-details="auto"></v-select> - <v-select v-model="selectedTaxoRank" :items="availableTaxo" density="compact" - label="Select taxonomic rank" hide-details="auto" class="mx-2"></v-select> - + <!-- <v-select v-model="selectedTaxoRank" :items="availableTaxo" density="compact" + label="Select taxonomic rank" hide-details="auto" class="mx-2"></v-select> --> </v-toolbar> + <v-row class="mt-4"> + <v-col cols="11"> + <v-slider v-model="selectedTR" label="Select taxonomic rank" :max="5" + :ticks="sliderTaxonomy" step="1" :show-ticks="mobile ? false : 'always'" + :thumb-label="mobile ? 'always' : false"> + <template v-slot:thumb-label="{ modelValue }"> + {{ taxonomy[modelValue].title }} + </template></v-slider> + </v-col> + </v-row> <v-card v-if="toValue(binPlotDataOptions) !== null" variant="flat"> <v-toolbar density="compact" color="transparent"> <v-spacer></v-spacer>