btn to download plots

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>

composables/useCsvDownload.ts

 import Papa from 'papaparse';
 // import { saveAs } from "file-saver";
+import { useDownloadBlob } from './useDownloadBlob';
+const { download } = useDownloadBlob()
 
 export function useCsvDownload(
   rawData: MaybeRef<Record<string, any>>,
@@ -29,12 +31,7 @@ export function useCsvDownload(
     })
     const csvContent = Papa.unparse(toValue(data), { columns: toValue(columns) });
     blob.value = new Blob([csvContent], { type: "text/csv" });
-    var a = document.createElement("a");
-    a.href = URL.createObjectURL(blob.value);
-    a.download = filename.value;
-    a.click();
-    URL.revokeObjectURL(a.href);
-
+    download(blob, filename)
   }
   return { data, filename }
 }

composables/useDownloadBlob.ts

+export function useDownloadBlob() {
+    function download(blob: MaybeRef<Blob>, filename: MaybeRef<string>) {
+        const toValueBlob = toValue(blob)
+        const toValueFilename = toValue(filename)
+        var a = document.createElement("a");
+        a.href = URL.createObjectURL(toValueBlob);
+        a.download = toValueFilename;
+        a.click();
+        URL.revokeObjectURL(a.href);
+    }
+
+    return { download }
+
+}
\ No newline at end of file

composables/useSerialize.ts

+import { useDownloadBlob } from './useDownloadBlob';
+const { download } = useDownloadBlob()
+
+
+export function useSerialize() {
+    const xmlns = ref("http://www.w3.org/2000/xmlns/");
+    const xlinkns = ref("http://www.w3.org/1999/xlink");
+    const svgns = ref("http://www.w3.org/2000/svg");
+    const blob = ref()
+
+    function serialize(compo: MaybeRef<ComponentPublicInstance | null>, filename: MaybeRef<string>) {
+        console.log(compo)
+        const toValueCompo = toValue(compo)
+        if (toValueCompo !== null) {
+            const svg = toValueCompo.$el.firstChild
+            console.log(svg)
+            const clonedSvg = svg.cloneNode(true);
+            const fragment = window.location.href + "#";
+            const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT);
+            while (walker.nextNode()) {
+                for (const attr of walker.currentNode.attributes) {
+                    if (attr.value.includes(fragment)) {
+                        attr.value = attr.value.replace(fragment, "#");
+                    }
+                }
+            }
+            clonedSvg.setAttributeNS(xmlns.value, "xmlns", svgns.value);
+            clonedSvg.setAttributeNS(xmlns.value, "xmlns:xlink", xlinkns.value);
+            const serializer = new window.XMLSerializer;
+            const string = serializer.serializeToString(clonedSvg);
+            blob.value = new Blob([string], { type: "image/svg+xml" });
+            download(blob, filename)
+        }
+    }
+    return { serialize }
+}
\ No newline at end of file