can download heatmap to png

components/content/RefseqDb.vue

@@ -400,11 +400,11 @@ async function downloadPng(component: ComponentPublicInstance | null, filename:
                                                     svg</v-list-item-title>
 
                                             </v-list-item>
-                                            <!-- <v-list-item value="png">
+                                            <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-item>
                                         </v-list>
                                     </v-menu>
                                 </v-toolbar>

composables/useRasterize.ts

 import { useDownloadBlob } from './useDownloadBlob';
 import { useSerialize } from './useSerialize';
+import { useSvgPlot } from './useSvgPlot';
 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 { svg } = useSvgPlot(toValueCompo)
+            const toValueSvg = toValue(svg)
+            if (toValueSvg !== null) {
+                let resolve, reject;
+                const promise: Promise<Blob> = new Promise((y, n) => (resolve = y, reject = n));
+                const image = new Image;
+                image.onerror = reject;
+
+                console.log(toValueSvg)
+                image.onload = () => {
+                    console.log("try to get boundingclientRect")
+                    const rect = toValueSvg.getBoundingClientRect();
+                    console.log(rect)
+                    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;
             }
-            const blob = toValue(serialize(component))
-            if (blob !== undefined) {
-                image.src = URL.createObjectURL(blob);
-            }
-            return promise;
         }
 
     }

composables/useSerialize.ts

+import { useSvgPlot } from './useSvgPlot';
 
 
 export function useSerialize() {
@@ -9,23 +10,27 @@ export function useSerialize() {
     function serialize(compo: MaybeRef<ComponentPublicInstance | null>) {
         const toValueCompo = toValue(compo)
         if (toValueCompo !== null) {
-            const svg = toValueCompo.$el.firstChild
-            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, "#");
+            const { svg } = useSvgPlot(toValueCompo)
+            const toValueSvg = toValue(svg)
+            if (toValueSvg !== null) {
+                const clonedSvg = toValueSvg.cloneNode(true);
+                const fragment = window.location.href + "#";
+                const walker = document.createTreeWalker(toValueSvg, 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" });
+                return blob
             }
-            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" });
-            return blob
+            else { return undefined }
         }
     }
     return { serialize }

composables/useSvgPlot.ts

+export function useSvgPlot(component: MaybeRef<ComponentPublicInstance>) {
+    const svg = ref<SVGElement | null>(null)
+    const toValueCompo = toValue(component)
+    const rootElem = toValueCompo.$el
+    svg.value = rootElem.querySelector("svg.plot")
+
+    return { svg }
+}
\ No newline at end of file