diff --git a/components/content/RefseqDb.vue b/components/content/RefseqDb.vue index 5ba5db4687417460f3ef9b897256774a2602140f..42de2450bf2de45f55c979fc3f2da87af6a57a74 100644 --- a/components/content/RefseqDb.vue +++ b/components/content/RefseqDb.vue @@ -10,6 +10,8 @@ const facetStore = useFacetsStore() const sortBy: Ref<{ key: string, order: string }[]> = ref([{ key: 'type', order: "asc" }]) const itemValue = ref("id"); const { width } = useDisplay(); +const fullWidth = ref(false) +const logTransform = ref(false) const distriTaxoFullscreen = ref(false) const distriSystemFullscreen = ref(false) const facets = ref([ @@ -78,7 +80,7 @@ const defaultBarPlotOptions = computed(() => { const computedSystemDistribution = computed(() => { if (facetStore.facets?.facetDistribution?.type) { return Object.entries(facetStore.facets.facetDistribution.type).map(([key, value]) => { - return { type: key, count: value } + return { type: key, count: logTransform.value ? Math.log10(value) : value } }).sort() } else { return [] } @@ -104,7 +106,7 @@ const computedDistriSystemOptions = computed(() => { const computedTaxonomyDistribution = computed(() => { if (facetStore.facets?.facetDistribution?.[selectedTaxoRank.value]) { return Object.entries(facetStore.facets.facetDistribution[selectedTaxoRank.value]).map(([key, value]) => { - return { [selectedTaxoRank.value]: key, count: value } + return { [selectedTaxoRank.value]: key, count: logTransform.value ? Math.log10(value) : value } }).sort() } else { return [] } @@ -136,23 +138,27 @@ function capitalize([first, ...rest]) { <template> <v-card flat class="mb-2"> + <v-toolbar density="compact"> + <!-- <v-spacer></v-spacer> --> + <v-toolbar-items> + <v-btn variant="plain" :icon="fullWidth ? 'md:fullscreen_exit' : 'md:fullscreen'" + @click="fullWidth = !fullWidth"></v-btn> + <v-switch v-model="logTransform" color="primary" hide-details="auto" inline label="Log transform" density="compact"></v-switch> + </v-toolbar-items> + </v-toolbar> <v-row align="start" class="mb-2"> - <v-col :cols="distriSystemFullscreen ? 12 : 6" :class="distriTaxoFullscreen ? 'd-none' : null"> + <v-col :cols="fullWidth ? 12 : 6"> <v-card flat class="my-3"> - <v-card-title> Systems Distribution <v-btn variant="plain" - :icon="distriSystemFullscreen ? 'md:fullscreen_exit' : 'md:fullscreen'" - @click="distriSystemFullscreen = !distriSystemFullscreen"></v-btn></v-card-title> + <v-card-title> Systems Distribution </v-card-title> <v-card-text> <PlotFigure :options="unref(computedDistriSystemOptions)" defer></PlotFigure> </v-card-text> </v-card> </v-col> - <v-col :cols="distriTaxoFullscreen ? 12 : 6" :class="distriSystemFullscreen ? 'd-none' : null"> + <v-col :cols="fullWidth ? 12 : 6"> <v-card flat> - <v-card-title> Taxonomic Distribution <v-btn variant="plain" - :icon="distriTaxoFullscreen ? 'md:fullscreen_exit' : 'md:fullscreen'" - @click="distriTaxoFullscreen = !distriTaxoFullscreen"></v-btn></v-card-title> + <v-card-title> Taxonomic Distribution </v-card-title> <v-card-text> <v-select v-model="selectedTaxoRank" :items="availableTaxo" density="compact" label="Select taxonomic rank"></v-select>