diff --git a/components/CollapsibleChips.vue b/components/CollapsibleChips.vue index b211ba1afa2c4815ed00629cf5ebdd09793591bf..1ea5ef641757b2d5404d7524d5d4ade3acde6d89 100644 --- a/components/CollapsibleChips.vue +++ b/components/CollapsibleChips.vue @@ -26,7 +26,7 @@ const show = ref(false); <span v-if="show" class="d-flex flex-wrap align-center justify-start"> <template v-if="items.length > itemsToDisplay"> - <template v-for="item in items" :key="acc"> + <template v-for="item in items" :key="item.title"> <v-chip :href="item?.href" :target="item?.href === undefined ? item?.href : '_blank'" color="info" class="mr-1 my-1 align-self-center" size="small"> {{ item.title }} @@ -36,7 +36,7 @@ const show = ref(false); <v-btn v-if="itemsToDisplay < items.length" variant="text" :icon="'mdi-chevron-up'" @click="show = !show"></v-btn> </span> <span v-else class="d-flex flex-wrap align-center justify-start"> - <template v-for="(item, index) in items" :key="acc"> + <template v-for="(item, index) in items" :key="item.title"> <v-chip v-if="index < itemsToDisplay || itemsToDisplay < 0" :href="item?.href" :target="item?.href === undefined ? item?.href : '_blank'" color="info" class="mr-1 my-1 align-self-center" size="small"> diff --git a/components/content/RefseqDb.vue b/components/content/RefseqDb.vue index 42de2450bf2de45f55c979fc3f2da87af6a57a74..99aa1ebdeede76a3163ced2e9f673f414dbec3d9 100644 --- a/components/content/RefseqDb.vue +++ b/components/content/RefseqDb.vue @@ -10,10 +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 distriTool: Ref<string[]> = ref([]) + const facets = ref([ "type", "Superkingdom", @@ -48,7 +46,12 @@ const headers = ref([ key: "accession_in_sys" } ]) - +const logTransform = computed(() => { + return distriTool.value.includes('log') +}) +const fullWidth = computed(() => { + return distriTool.value.includes('fullwidth') +}) const computedHeaders = computed(() => { return [...headers.value, ...availableTaxo.value.map(taxo => { return { @@ -63,14 +66,17 @@ const computedWidth = computed(() => { }); const plotHeight = computed(() => { - return computedWidth.value / 4; + return computedWidth.value / 3; + // return 500 }); const defaultBarPlotOptions = computed(() => { + const y = logTransform.value ? { nice: true, grid: true, type: 'symlog' } : { nice: true, grid: true, type: "linear" } + // const y = { nice: true, grid: true } return { x: { label: null, tickRotate: 70 }, - y: { nice: true, grid: true }, + y, color: { legend: true }, width: computedWidth.value, height: plotHeight.value, @@ -80,7 +86,11 @@ 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: logTransform.value ? Math.log10(value) : value } + return { + type: key, + // count: logTransform.value ? Math.log(value) : value + count: value + } }).sort() } else { return [] } @@ -106,7 +116,10 @@ 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: logTransform.value ? Math.log10(value) : value } + return { + [selectedTaxoRank.value]: key, + count: value + } }).sort() } else { return [] } @@ -134,22 +147,23 @@ function capitalize([first, ...rest]) { return first.toUpperCase() + rest.join('').toLowerCase(); } + </script> <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-title>Distributions</v-toolbar-title> + <v-btn-toggle v-model="distriTool" multiple density="compact" rounded="false" variant="text" color="primary" + class="mx-2"> + <v-btn icon="md:fullscreen" value="fullwidth"></v-btn> + <v-btn icon="mdi-math-log" value="log"></v-btn> + </v-btn-toggle> </v-toolbar> <v-row align="start" class="mb-2"> <v-col :cols="fullWidth ? 12 : 6"> <v-card flat class="my-3"> - <v-card-title> Systems Distribution </v-card-title> + <v-card-title>Systems </v-card-title> <v-card-text> <PlotFigure :options="unref(computedDistriSystemOptions)" defer></PlotFigure> @@ -158,7 +172,7 @@ function capitalize([first, ...rest]) { </v-col> <v-col :cols="fullWidth ? 12 : 6"> <v-card flat> - <v-card-title> Taxonomic Distribution </v-card-title> + <v-card-title>Taxonomic</v-card-title> <v-card-text> <v-select v-model="selectedTaxoRank" :items="availableTaxo" density="compact" label="Select taxonomic rank"></v-select>