Skip to content
Snippets Groups Projects
Commit 32801606 authored by Remi PLANEL's avatar Remi PLANEL
Browse files

Can export to png except for plot with legend

parent f4fb99e7
No related branches found
No related tags found
1 merge request!169Resolve "Being able to download the distributions in refseqDB as a svg/png/csv"
Pipeline #119721 passed
Stage: delete-release
Stage: build-df-cli
Stage: lint
Stage: deploy-meilisearch
Stage: update-meilisearch-indexes
Stage: get-meili-key
Stage: build
Stage: deploy
This commit is part of merge request !169. Comments created here will be created in the context of that merge request.
Hide whitespace changes
Inline Side-by-side
components/content/RefseqDb.vue
+ 81
− 14
View file @ 32801606
...@@ -5,6 +5,10 @@ import { useDisplay } from "vuetify"; ...@@ -5,6 +5,10 @@ import { useDisplay } from "vuetify";
import type { SortItem } from "@/components/ServerDbTable.vue" import type { SortItem } from "@/components/ServerDbTable.vue"
import { ServerDbTable } from "#components" import { ServerDbTable } from "#components"
import { useSerialize } from "@/composables/useSerialize"; import { useSerialize } from "@/composables/useSerialize";
import { useRasterize } from "@/composables/useRasterize";
import { useDownloadBlob } from '@/composables/useDownloadBlob';
import type { ComponentPublicInstance } from 'vue' import type { ComponentPublicInstance } from 'vue'
const sortBy: Ref<SortItem[]> = ref([{ key: 'type', order: "asc" }]) const sortBy: Ref<SortItem[]> = ref([{ key: 'type', order: "asc" }])
...@@ -14,6 +18,8 @@ const scaleTransform: Ref<string[]> = ref([]) ...@@ -14,6 +18,8 @@ const scaleTransform: Ref<string[]> = ref([])
const { serialize } = useSerialize() const { serialize } = useSerialize()
const { rasterize } = useRasterize()
const { download } = useDownloadBlob()
const facets = ref([ const facets = ref([
"replicon", "replicon",
...@@ -259,8 +265,19 @@ const systemsDistributionPlot = ref<ComponentPublicInstance | null>(null) ...@@ -259,8 +265,19 @@ const systemsDistributionPlot = ref<ComponentPublicInstance | null>(null)
const taxonomicDistributionPlot = ref<ComponentPublicInstance | null>(null) const taxonomicDistributionPlot = ref<ComponentPublicInstance | null>(null)
const heatmapPlot = ref<ComponentPublicInstance | null>(null) const heatmapPlot = ref<ComponentPublicInstance | null>(null)
function downloadSvg(component: ComponentPublicInstance | null, filename: string) { function downloadSvg(component: ComponentPublicInstance | null, filename: string) {
serialize(toValue(component), filename) const blob = toValue(serialize(toValue(component)))
if (blob !== undefined) {
download(blob, filename)
}
} }
async function downloadPng(component: ComponentPublicInstance | null, filename: string) {
const blob = await rasterize(toValue(component), filename)?.then((blob) => {
download(blob, filename)
})
}
</script> </script>
<template> <template>
...@@ -289,9 +306,27 @@ function downloadSvg(component: ComponentPublicInstance | null, filename: string ...@@ -289,9 +306,27 @@ function downloadSvg(component: ComponentPublicInstance | null, filename: string
<v-card variant="flat"> <v-card variant="flat">
<v-toolbar density="compact" color="transparent"> <v-toolbar density="compact" color="transparent">
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn variant="text" size="x-small"
@click="downloadSvg(systemsDistributionPlot, 'systems-distribution.svg')">export <v-menu>
to svg</v-btn> <template v-slot:activator="{ props }">
<v-btn color="primary" prepend-icon="md:download" v-bind="props">
export
</v-btn>
</template>
<v-list>
<v-list-item value="svg">
<v-list-item-title
@click="downloadSvg(systemsDistributionPlot, 'df-systems-distribution.svg')">to
svg</v-list-item-title>
</v-list-item>
<v-list-item value="png">
<v-list-item-title
@click="downloadPng(systemsDistributionPlot, 'df-systems-distribution.png')">to
png</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-toolbar> </v-toolbar>
<PlotFigure ref="systemsDistributionPlot" <PlotFigure ref="systemsDistributionPlot"
...@@ -302,10 +337,26 @@ function downloadSvg(component: ComponentPublicInstance | null, filename: string ...@@ -302,10 +337,26 @@ function downloadSvg(component: ComponentPublicInstance | null, filename: string
<v-card variant="flat"> <v-card variant="flat">
<v-toolbar density="compact" color="transparent"> <v-toolbar density="compact" color="transparent">
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn variant="text" size="x-small" <v-menu>
@click="downloadSvg(taxonomicDistributionPlot, 'taxonomic-distribution.svg')">export <template v-slot:activator="{ props }">
to <v-btn color="primary" prepend-icon="md:download" v-bind="props">
svg</v-btn> export
</v-btn>
</template>
<v-list>
<v-list-item value="svg">
<v-list-item-title
@click="downloadSvg(taxonomicDistributionPlot, 'df-taxonomic-distribution.svg')">to
svg</v-list-item-title>
</v-list-item>
<v-list-item value="png">
<v-list-item-title
@click="downloadPng(taxonomicDistributionPlot, 'df-taxonomic-distribution.png')">to
png</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-toolbar> </v-toolbar>
<PlotFigure ref="taxonomicDistributionPlot" defer <PlotFigure ref="taxonomicDistributionPlot" defer
:options="unref(computedDistriTaxoOptions)"></PlotFigure> :options="unref(computedDistriTaxoOptions)"></PlotFigure>
...@@ -333,15 +384,31 @@ function downloadSvg(component: ComponentPublicInstance | null, filename: string ...@@ -333,15 +384,31 @@ function downloadSvg(component: ComponentPublicInstance | null, filename: string
label="Select taxonomic rank" hide-details="auto" class="mx-2"></v-select> label="Select taxonomic rank" hide-details="auto" class="mx-2"></v-select>
</v-toolbar> </v-toolbar>
<v-card variant="flat"> <v-card v-if="toValue(binPlotDataOptions) !== null" variant="flat">
<v-toolbar density="compact" color="transparent"> <v-toolbar density="compact" color="transparent">
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn variant="text" size="x-small" <v-menu>
@click="downloadSvg(heatmapPlot, 'heatmap-systems-taxonomic.svg')">export to <template v-slot:activator="{ props }">
svg</v-btn> <v-btn color="primary" prepend-icon="md:download" v-bind="props">
export
</v-btn>
</template>
<v-list>
<v-list-item value="svg">
<v-list-item-title
@click="downloadSvg(heatmapPlot, 'df-heatmap-systems-taxonomy.svg')">to
svg</v-list-item-title>
</v-list-item>
<!-- <v-list-item value="png">
<v-list-item-title
@click="downloadPng(heatmapPlot, 'df-heatmap-systems-taxonomy.png')">to
png</v-list-item-title>
</v-list-item> -->
</v-list>
</v-menu>
</v-toolbar> </v-toolbar>
<PlotFigure ref="heatmapPlot" v-if="toValue(binPlotDataOptions) !== null" <PlotFigure ref="heatmapPlot" :options="unref(binPlotDataOptions)" defer>
:options="unref(binPlotDataOptions)" defer>
</PlotFigure> </PlotFigure>
</v-card> </v-card>
</v-card> </v-card>
......
composables/useRasterize.ts 0 → 100644
+ 40
− 0
View file @ 32801606
import { useDownloadBlob } from './useDownloadBlob';
import { useSerialize } from './useSerialize';
const { serialize } = useSerialize()
export function useRasterize() {
function rasterize(component: MaybeRef<ComponentPublicInstance | null>, filename: MaybeRef<string>) {
const toValueCompo = toValue(component)
if (toValueCompo !== null) {
let resolve, reject;
const promise: Promise<Blob> = new Promise((y, n) => (resolve = y, reject = n));
const image = new Image;
image.onerror = reject;
const svg = toValueCompo.$el.firstChild
console.log(svg)
image.onload = () => {
const rect = svg.getBoundingClientRect();
const canvas = document.createElement("canvas");
canvas.width = rect.width
canvas.height = rect.height
const ctx = canvas.getContext("2d")
if (ctx !== null) {
ctx.drawImage(image, 0, 0, rect.width, rect.height);
ctx.canvas.toBlob(resolve);
}
}
const blob = toValue(serialize(component))
if (blob !== undefined) {
image.src = URL.createObjectURL(blob);
}
return promise;
}
}
return { rasterize }
}
\ No newline at end of file
composables/useSerialize.ts
+ 3
− 7
View file @ 32801606
import { useDownloadBlob } from './useDownloadBlob';
const { download } = useDownloadBlob()
export function useSerialize() { export function useSerialize() {
const xmlns = ref("http://www.w3.org/2000/xmlns/"); const xmlns = ref("http://www.w3.org/2000/xmlns/");
const xlinkns = ref("http://www.w3.org/1999/xlink"); const xlinkns = ref("http://www.w3.org/1999/xlink");
const svgns = ref("http://www.w3.org/2000/svg"); const svgns = ref("http://www.w3.org/2000/svg");
const blob = ref() const blob = ref<Blob>()
function serialize(compo: MaybeRef<ComponentPublicInstance | null>, filename: MaybeRef<string>) { function serialize(compo: MaybeRef<ComponentPublicInstance | null>) {
console.log(compo)
const toValueCompo = toValue(compo) const toValueCompo = toValue(compo)
if (toValueCompo !== null) { if (toValueCompo !== null) {
const svg = toValueCompo.$el.firstChild const svg = toValueCompo.$el.firstChild
console.log(svg)
const clonedSvg = svg.cloneNode(true); const clonedSvg = svg.cloneNode(true);
const fragment = window.location.href + "#"; const fragment = window.location.href + "#";
const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT); const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT);
...@@ -29,7 +25,7 @@ export function useSerialize() { ...@@ -29,7 +25,7 @@ export function useSerialize() {
const serializer = new window.XMLSerializer; const serializer = new window.XMLSerializer;
const string = serializer.serializeToString(clonedSvg); const string = serializer.serializeToString(clonedSvg);
blob.value = new Blob([string], { type: "image/svg+xml" }); blob.value = new Blob([string], { type: "image/svg+xml" });
download(blob, filename) return blob
} }
} }
return { serialize } return { serialize }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment