Resolve "Wizzard to create db filters"

Closes #323 (closed)

components/content/RefseqDb.vue

@@ -10,8 +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 distriTaxoFullscreen = ref(false)
-const distriSystemFullscreen = ref(false)
+const distriTool: Ref<string[]> = ref([])
+
 const facets = ref([
     "type",
     "Superkingdom",
@@ -46,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 {
@@ -61,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,
@@ -78,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: value }
+            return {
+                type: key,
+                // count: logTransform.value ? Math.log(value) : value 
+                count: value
+            }
         }).sort()
     } else { return [] }
 
@@ -104,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: value }
+            return {
+                [selectedTaxoRank.value]: key,
+                count: value
+            }
         }).sort()
     } else { return [] }
 
@@ -132,27 +147,32 @@ function capitalize([first, ...rest]) {
     return first.toUpperCase() + rest.join('').toLowerCase();
 }
 
+
 </script>
 
 <template>
     <v-card flat class="mb-2">
+        <v-toolbar density="compact">
+            <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="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 </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</v-card-title>
                     <v-card-text>
                         <v-select v-model="selectedTaxoRank" :items="availableTaxo" density="compact"
                             label="Select taxonomic rank"></v-select>