Resolve "Wizzard to create db filters"

Closes #323 (closed)

components/content/RefseqDb.vue

@@ -10,6 +10,7 @@ const facetStore = useFacetsStore()
 const sortBy: Ref<{ key: string, order: string }[]> = ref([{ key: 'type', order: "asc" }])
 const itemValue = ref("id");
 const { width } = useDisplay();
+const distriTool: Ref<string[]> = ref([])
 
 const facets = ref([
     "type",
@@ -45,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 {
@@ -60,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,
@@ -77,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 [] }
 
@@ -103,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 [] }
 
@@ -131,30 +147,42 @@ function capitalize([first, ...rest]) {
     return first.toUpperCase() + rest.join('').toLowerCase();
 }
 
+
 </script>
 
 <template>
-    <v-row>
-        <v-col cols="6">
-            <v-card flat class="my-3">
-                <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="6">
-            <v-card flat :loading="pending">
-                <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>
-                    <PlotFigure defer :options="unref(computedDistriTaxoOptions)"></PlotFigure>
-                </v-card-text>
-            </v-card>
-        </v-col>
-    </v-row>
+    <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="fullWidth ? 12 : 6">
+                <v-card flat class="my-3">
+                    <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="fullWidth ? 12 : 6">
+                <v-card flat>
+                    <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>
+                        <PlotFigure defer :options="unref(computedDistriTaxoOptions)"></PlotFigure>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+        </v-row>
+    </v-card>
+
     <ServerDbTable title="RefSeq" db="refseq" :sortBy="sortBy" :headers="computedHeaders" :item-value="itemValue"
         :facets="facets">
     </ServerDbTable>