Resolve "Being able to download the distributions in refseqDB as a svg/png/csv"

Closes #341 (closed)

components/content/RefseqDb.vue

@@ -4,7 +4,8 @@ import PlotFigure from "~/components/PlotFigure";
 import { useDisplay } from "vuetify";
 import type { SortItem } from "@/components/ServerDbTable.vue"
 import { ServerDbTable } from "#components"
-
+import { useSerialize } from "@/composables/useSerialize";
+import type { ComponentPublicInstance } from 'vue'
 
 const sortBy: Ref<SortItem[]> = ref([{ key: 'type', order: "asc" }])
 const itemValue = ref("id");
@@ -12,6 +13,7 @@ const { width } = useDisplay();
 const scaleTransform: Ref<string[]> = ref([])
 
 
+const { serialize } = useSerialize()
 
 const facets = ref([
     "replicon",
@@ -32,6 +34,8 @@ const availableTaxo: Ref<string[]> = ref([
     "phylum",
     "Superkingdom"
 ]);
+
+const scaleTypes = ref<string[]>(['linear', 'sqrt', 'log', 'symlog'])
 const selectedTaxoRank = ref("phylum");
 
 const headers = ref([
@@ -121,22 +125,25 @@ const dataTableServerProps = computed(() => {
 const defaultBarPlotOptions = computed(() => {
 
     return {
-        x: { label: null, tickRotate: 45, ticks: 10 },
-        y: { grid: true, type: scaleType.value },
-        color: { legend: true },
-        width: computedWidth.value,
+        x: { label: null, tickRotate: 45 },
+        y: { grid: true, clamp: true },
+
         // height: plotHeight.value + 100,
     }
 })
 
+
+// system distri
+
 const computedSystemDistribution = computed(() => {
     if (toValue(msResult)?.facetDistribution?.type) {
-        return Object.entries(toValue(msResult).facetDistribution.type).map(([key, value]) => {
-            return {
-                type: key,
-                count: value
-            }
-        }).sort()
+        return Object.entries(toValue(msResult).facetDistribution.type)
+            .map(([key, value]) => {
+                return {
+                    type: key,
+                    count: value
+                }
+            }).sort()
     } else { return [] }
 
 })
@@ -144,13 +151,15 @@ const computedDistriSystemOptions = computed(() => {
     return {
         ...defaultBarPlotOptions.value,
         marginBottom: 100,
+        y: { ...defaultBarPlotOptions.value.y, type: toValue(scaleType), label: "Count" },
+        x: { ...defaultBarPlotOptions.value.x, label: "Systems" },
+        width: computedWidth.value,
         marks: [
             // Plot.frame(),
             Plot.barY(
                 toValue(computedSystemDistribution),
                 {
                     y: "count", x: 'type', tip: true,
-                    // fill: "#6750a4",
                     sort: { x: "-y" },
                 },
 
@@ -158,6 +167,9 @@ const computedDistriSystemOptions = computed(() => {
         ],
     };
 });
+
+
+// Taxo distri
 const computedTaxonomyDistribution = computed(() => {
     if (toValue(msResult)?.facetDistribution?.[selectedTaxoRank.value]) {
         return Object.entries(toValue(msResult).facetDistribution[selectedTaxoRank.value]).map(([key, value]) => {
@@ -174,6 +186,9 @@ const computedDistriTaxoOptions = computed(() => {
     return {
         ...defaultBarPlotOptions.value,
         marginBottom: 100,
+        x: { ...defaultBarPlotOptions.value.x, label: selectedTaxoRank.value },
+        y: { ...defaultBarPlotOptions.value.y, type: toValue(scaleType), label: "Count" },
+        width: computedWidth.value,
         marks: [
             Plot.barY(
                 toValue(computedTaxonomyDistribution),
@@ -212,8 +227,8 @@ const binPlotOptions = ref({
     marginBottom: 200,
     padding: 0,
     grid: true,
-    x: { tickRotate: 90, tip: true, },
-
+    x: { tickRotate: 90, tip: true, label: "Systems" },
+    // y: { tickFormat: 's' },
     color: { scheme: "turbo", legend: true },
 })
 
@@ -225,7 +240,11 @@ const binPlotDataOptions = computed(() => {
 
         color: {
             ...binPlotOptions.value.color,
-            type: scaleType.value
+            type: scaleType.value,
+            tickFormat: '~s',
+            ticks: scaleType.value === 'symlog' ? 3 : 5,
+            // width: 350
+
         },
         // fy: { domain: groupSortDomain.value },
         marks: [
@@ -236,6 +255,12 @@ const binPlotDataOptions = computed(() => {
 
 })
 const scaleType = ref("linear")
+const systemsDistributionPlot = ref<ComponentPublicInstance | null>(null)
+const taxonomicDistributionPlot = ref<ComponentPublicInstance | null>(null)
+const heatmapPlot = ref<ComponentPublicInstance | null>(null)
+function downloadSvg(component: ComponentPublicInstance | null, filename: string) {
+    serialize(toValue(component), filename)
+}
 </script>
 
 <template>
@@ -253,21 +278,38 @@ const scaleType = ref("linear")
                                     <v-btn icon="md:grid_view" value="grid"></v-btn>
                                     <v-btn icon="md:view_agenda" value="fullwidth"></v-btn>
                                 </v-btn-toggle>
-                                <v-select v-model="scaleType" class="mx-2" density="compact"
-                                    :items="['linear', 'sqrt', 'symlog']" label="Scale Type" hide-details="auto"></v-select>
+                                <v-select v-model="scaleType" class="mx-2" density="compact" :items="scaleTypes"
+                                    label="Scale Type" hide-details="auto"></v-select>
                                 <v-select v-model="selectedTaxoRank" :items="availableTaxo" density="compact"
                                     label="Select taxonomic rank" hide-details="auto" class="mx-2"></v-select>
 
                             </v-toolbar>
                             <v-row align="start">
                                 <v-col :cols="fullWidth ? 12 : 6">
-                                    <PlotFigure :options="unref(computedDistriSystemOptions)" defer></PlotFigure>
-
+                                    <v-card variant="flat">
+                                        <v-toolbar density="compact" color="transparent">
+                                            <v-spacer></v-spacer>
+                                            <v-btn variant="text" size="x-small"
+                                                @click="downloadSvg(systemsDistributionPlot, 'systems-distribution.svg')">export
+                                                to svg</v-btn>
+                                        </v-toolbar>
+
+                                        <PlotFigure ref="systemsDistributionPlot"
+                                            :options="unref(computedDistriSystemOptions)" defer></PlotFigure>
+                                    </v-card>
                                 </v-col>
                                 <v-col :cols="fullWidth ? 12 : 6">
-
-                                    <PlotFigure defer :options="unref(computedDistriTaxoOptions)"></PlotFigure>
-
+                                    <v-card variant="flat">
+                                        <v-toolbar density="compact" color="transparent">
+                                            <v-spacer></v-spacer>
+                                            <v-btn variant="text" size="x-small"
+                                                @click="downloadSvg(taxonomicDistributionPlot, 'taxonomic-distribution.svg')">export
+                                                to
+                                                svg</v-btn>
+                                        </v-toolbar>
+                                        <PlotFigure ref="taxonomicDistributionPlot" defer
+                                            :options="unref(computedDistriTaxoOptions)"></PlotFigure>
+                                    </v-card>
                                 </v-col>
                             </v-row>
                         </v-card>
@@ -285,19 +327,26 @@ const scaleType = ref("linear")
                     <v-expansion-panel-text>
                         <v-card v-if="pendingAllHits === false" flat color="transparent">
                             <v-toolbar flat color="transparent" density="compact">
-                                <v-select v-model="scaleType" class="mx-2" density="compact"
-                                    :items="['linear', 'sqrt', 'symlog']" label="Scale Type" hide-details="auto"></v-select>
+                                <v-select v-model="scaleType" class="mx-2" density="compact" :items="scaleTypes"
+                                    label="Scale Type" hide-details="auto"></v-select>
                                 <v-select v-model="selectedTaxoRank" :items="availableTaxo" density="compact"
                                     label="Select taxonomic rank" hide-details="auto" class="mx-2"></v-select>
 
                             </v-toolbar>
-                            <PlotFigure v-if="toValue(binPlotDataOptions) !== null" :options="unref(binPlotDataOptions)"
-                                defer>
-                            </PlotFigure>
+                            <v-card variant="flat">
+                                <v-toolbar density="compact" color="transparent">
+                                    <v-spacer></v-spacer>
+                                    <v-btn variant="text" size="x-small"
+                                        @click="downloadSvg(heatmapPlot, 'heatmap-systems-taxonomic.svg')">export to
+                                        svg</v-btn>
+                                </v-toolbar>
+                                <PlotFigure ref="heatmapPlot" v-if="toValue(binPlotDataOptions) !== null"
+                                    :options="unref(binPlotDataOptions)" defer>
+                                </PlotFigure>
+                            </v-card>
                         </v-card>
                         <v-card v-else flat color="transparent">
-                            <v-skeleton-loader type="card" :loading="pendingAllHits"
-                                height="400"></v-skeleton-loader>
+                            <v-skeleton-loader type="card" :loading="pendingAllHits" height="400"></v-skeleton-loader>
                         </v-card>
                     </v-expansion-panel-text>
                 </v-expansion-panel>