Resolve "Wizzard to create db filters"

Closes #323 (closed)

components/content/RefseqDb.vue

+<script setup lang="ts">
+import { useFacetsStore } from '~~/stores/facets'
+import * as Plot from "@observablehq/plot";
+import PlotFigure from "~/components/PlotFigure";
+import { useDisplay } from "vuetify";
+
+
+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",
+    "Superkingdom",
+    "phylum",
+    "order",
+    "family",
+    "genus",
+    "species",
+])
+const availableTaxo: Ref<string[]> = ref([
+    "species",
+    "genus",
+    "family",
+    "order",
+    "phylum",
+    "Superkingdom"
+]);
+const selectedTaxoRank = ref("phylum");
+
+const headers = ref([
+    { title: "Replicon", key: "replicon" },
+    {
+        title: "Type",
+        key: "type",
+    },
+    {
+        title: "Subtype",
+        key: "subtype",
+    },
+    {
+        title: "Accessions",
+        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 {
+            title: capitalize(taxo),
+            key: taxo
+        }
+    })]
+})
+
+const computedWidth = computed(() => {
+    return Math.max(width.value, 550);
+});
+
+const plotHeight = computed(() => {
+    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,
+        color: { legend: true },
+        width: computedWidth.value,
+        height: plotHeight.value,
+    }
+})
+
+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.log(value) : value 
+                count: value
+            }
+        }).sort()
+    } else { return [] }
+
+})
+const computedDistriSystemOptions = computed(() => {
+    return {
+        ...defaultBarPlotOptions.value,
+        marginBottom: 120,
+        marks: [
+            // Plot.frame(),
+            Plot.barY(
+                toValue(computedSystemDistribution),
+                {
+                    y: "count", x: 'type', tip: true,
+                    fill: "#6750a4",
+                    sort: { x: "-y" },
+                },
+
+            ),
+        ],
+    };
+});
+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
+            }
+        }).sort()
+    } else { return [] }
+
+})
+
+const computedDistriTaxoOptions = computed(() => {
+    return {
+        ...defaultBarPlotOptions.value,
+        marginBottom: 200,
+        marks: [
+            Plot.barY(
+                toValue(computedTaxonomyDistribution),
+                {
+                    y: "count",
+                    x: selectedTaxoRank.value,
+                    tip: true,
+                    fill: "#6750a4",
+                    sort: { x: "-y" },
+                }
+            ),
+        ],
+    };
+});
+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="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>
+</template>
\ No newline at end of file