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
Hide whitespace changes
Inline Side-by-side
components/content/RefseqDb.vue
+ 81
− 14
View file @ 32801606
......@@ -5,6 +5,10 @@ import { useDisplay } from "vuetify";
import type { SortItem } from "@/components/ServerDbTable.vue"
import { ServerDbTable } from "#components"
import { useSerialize } from "@/composables/useSerialize";
import { useRasterize } from "@/composables/useRasterize";
import { useDownloadBlob } from '@/composables/useDownloadBlob';
import type { ComponentPublicInstance } from 'vue'
const sortBy: Ref<SortItem[]> = ref([{ key: 'type', order: "asc" }])
......@@ -14,6 +18,8 @@ const scaleTransform: Ref<string[]> = ref([])
const { serialize } = useSerialize()
const { rasterize } = useRasterize()
const { download } = useDownloadBlob()
const facets = ref([
"replicon",
......@@ -259,8 +265,19 @@ 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)
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>
<template>
......@@ -289,9 +306,27 @@ function downloadSvg(component: ComponentPublicInstance | null, filename: string
<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-menu>
<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>
<PlotFigure ref="systemsDistributionPlot"
......@@ -302,10 +337,26 @@ function downloadSvg(component: ComponentPublicInstance | null, filename: string
<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-menu>
<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(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>
<PlotFigure ref="taxonomicDistributionPlot" defer
:options="unref(computedDistriTaxoOptions)"></PlotFigure>
......@@ -333,15 +384,31 @@ function downloadSvg(component: ComponentPublicInstance | null, filename: string
label="Select taxonomic rank" hide-details="auto" class="mx-2"></v-select>
</v-toolbar>
<v-card variant="flat">
<v-card v-if="toValue(binPlotDataOptions) !== null" 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-menu>
<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(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>
<PlotFigure ref="heatmapPlot" v-if="toValue(binPlotDataOptions) !== null"
:options="unref(binPlotDataOptions)" defer>
<PlotFigure ref="heatmapPlot" :options="unref(binPlotDataOptions)" defer>
</PlotFigure>
</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() {
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()
const blob = ref<Blob>()
function serialize(compo: MaybeRef<ComponentPublicInstance | null>, filename: MaybeRef<string>) {
console.log(compo)
function serialize(compo: MaybeRef<ComponentPublicInstance | null>) {
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);
......@@ -29,7 +25,7 @@ export function useSerialize() {
const serializer = new window.XMLSerializer;
const string = serializer.serializeToString(clonedSvg);
blob.value = new Blob([string], { type: "image/svg+xml" });
download(blob, filename)
return blob
}
}
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