change axis scale instead of raw value

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">

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>