Exporting visualization for javascript #1084

Ahmad-Abdou · 2024-07-12T09:25:33Z

Ahmad-Abdou
Jul 12, 2024

I am struggling with exporting my views.
My code is implemented by using Javascript, and I couldn't find a way to export the views either as SVG or as any other type.
I tried different implementations and the latest one has the following process:
A file is downloaded.
If you open the file you will only see a blank page, however, If you check the console you can see that the generated views exist but nothing is displayed.

This is my latest implementation;

document.getElementById('export-svg-button').addEventListener('click', () => {
const container = document.getElementById('plot-container-1');

    if (!container) {
        console.error('Plot container element not found');
        return;
    }

    const svgElements = container.getElementsByTagName('svg');

    if (svgElements.length === 0) {
        console.error('No SVG elements found in the plot container');
        return;
    }

    const svgContent = svgElements[0].outerHTML;

    // Embed the SVG content into a full HTML document
    const htmlContent = `
        <!DOCTYPE html>
        <html>
            <head>
                <title>Exported Plot</title>
                <script type="importmap">
                    {
                        "imports": {
                            "react": "https://esm.sh/react@18",
                            "react-dom": "https://esm.sh/react-dom@18",
                            "pixi": "https://esm.sh/pixi.js@6",
                            "higlass": "https://esm.sh/higlass@1.13?external=react,react-dom,pixi",
                            "gosling.js": "https://esm.sh/gosling.js@0.11.0?external=react,react-dom,pixi,higlass"
                        }
                    }
                </script>
            </head>
            <body>
                ${svgContent}
                <h1>Exported Plot Container</h1>
            </body>
        </html>
    `;

    // Create a Blob from the HTML data
    const htmlBlob = new Blob([htmlContent], { type: 'text/html' });
    const htmlUrl = URL.createObjectURL(htmlBlob);

    // Create a link element and trigger the download
    const a = document.createElement('a');
    a.href = htmlUrl;
    a.download = 'plot-container.html';
    a.click();

    // Revoke the object URL after the download
    URL.revokeObjectURL(htmlUrl);
});

}

Answered by sehilyi

Jul 22, 2024

Hi @Ahmad-Abdou, thank you for leaving a question here!

Gosling supports JS API to export a PNG file (http://gosling-lang.org/docs/js-api#exportpng).

For example, you can use it like

<script type="module">
        import { embed } from 'gosling.js';
        const gosApi = embed(document.getElementById('gosling-container'), mySpec);
        gosApi.exportPng(true); // `true` for the transparent background
</script>

View full answer

sehilyi · 2024-07-22T13:40:51Z

sehilyi
Jul 22, 2024
Maintainer

Hi @Ahmad-Abdou, thank you for leaving a question here!

Gosling supports JS API to export a PNG file (http://gosling-lang.org/docs/js-api#exportpng).

For example, you can use it like

<script type="module">
        import { embed } from 'gosling.js';
        const gosApi = embed(document.getElementById('gosling-container'), mySpec);
        gosApi.exportPng(true); // `true` for the transparent background
</script>

1 reply

Ahmad-Abdou Jul 22, 2024
Author

Actually, I managed to do it similarly, although I had to include imports in the header like this

<title>Exported Plot</title>
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@18",
"react-dom": "https://esm.sh/react-dom@18",
"pixi": "https://esm.sh/pixi.js@6",
"higlass": "https://esm.sh/higlass@^1.13.4?external=react,react-dom,pixi",
"gosling.js": "https://esm.sh/gosling.js@0.17.0?external=react,react-dom,pixi,higlass"
}
}
</script>

${svgContent}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Exporting visualization for javascript #1084

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Exporting visualization for javascript #1084

Ahmad-Abdou Jul 12, 2024

Replies: 1 comment · 1 reply

sehilyi Jul 22, 2024 Maintainer

Ahmad-Abdou Jul 22, 2024 Author

Ahmad-Abdou
Jul 12, 2024

Replies: 1 comment 1 reply

sehilyi
Jul 22, 2024
Maintainer

Ahmad-Abdou Jul 22, 2024
Author