Add "Export to SVG" button to plots

[dmfalke]

Closes #780

This PR adds a button to export plots as an SVG file. Plots made with plotly.js are using Plotly.toImage. Plots made with visx are using a custom function to export the SVG directly.

When exporting visx plots, the backgound is transparent. All of the elements are there, so it's possible to open the exported svg file in an editor and give it a white background. I think it would be better to make it white by default, but I'm not sure how to do that. Maybe @asizemore has some ideas?

The button is using coreui styling, and is positioned to the bottom-right of the plot:

It would be great to get some testing done with this. Specifically, does this meet the requirements for being able to modify the plot for other uses? Should we allow the user to choose other formats (png, jpeg, etc)? It might make sense to get this on qa soon, so that Dan Beiting, et al, can play with it.

[asizemore]

I've just tested so far, but the things ive tested (box, volcano, network) work great! I've been opening them in illustrator and they look really nice. The volcano opens with a black box over it, which is odd but once i deleted it the whole plot was there. This doesn't bother me, personally, because i'm used to weird objects showing up in svgs when i download them from places. In the same vein, it doesn't bother me at all that the background is not white. In fact the first thing i (again, just me personally) do when i would download an svg like this is to immediately delete the background. When these are going into figures or presentations, the background rectangle just gets in the way.

The one question i had was it looks like the bipartite network has the Export button within the plot div. Was that intentional? All the others, even the visx volcano, are just below the bottom of the plot panel.

[asizemore]

I'll check out the code tomorrow!

[dmfalke]

I've just tested so far, but the things ive tested (box, volcano, network) work great! I've been opening them in illustrator and they look really nice. The volcano opens with a black box over it, which is odd but once i deleted it the whole plot was there. This doesn't bother me, personally, because i'm used to weird objects showing up in svgs when i download them from places. In the same vein, it doesn't bother me at all that the background is not white. In fact the first thing i (again, just me personally) do when i would download an svg like this is to immediately delete the background. When these are going into figures or presentations, the background rectangle just gets in the way.

Thanks, this is very useful feedback! :smile:

The one question i had was it looks like the bipartite network has the Export button within the plot div. Was that intentional? All the others, even the visx volcano, are just below the bottom of the plot panel.

This was an oversight. I will fix it up.

[dmfalke]

This was an oversight. I will fix it up.

Upon further investigation, the styling for bpnet viz looks a little different than volcano viz. I'll try to fix it up in a bit.

[asizemore]

I forgot to say, another thing i like about the button and its placement is that it makes expanding download options easy. For example if we also had a button for download png, and one for download data, etc., it's obvious where those all go.

[dmfalke]

I forgot to say, another thing i like about the button and its placement is that it makes expanding download options easy. For example if we also had a button for download png, and one for download data, etc., it's obvious where those all go.

I was envisioning a dropdown with a "Download" or "Export" label. Thoughts?

[asizemore]

I was envisioning a dropdown with a "Download" or "Export" label. Thoughts?

That works for me!

[dmfalke]

I pushed a change to allow the user to choose their export format:

[asizemore]

Looking good! Testing now:

• boxplot: works great!
• bipartite network: I wonder if the height and width are getting us in trouble here. The png that's exported just shows a portion of the network. Also oddly the export button shows up way on the right. The svg export works great!
• volcano: looks great. The black box still appears in the svg but it's removable and all the plot still exists so i think it's fine. I googled a bit about it and it sounds like there's likely a transparency thing with that specific viz that exporting to svg doesnt like. It's possible it's also a browser thing but i got the same result with brave, safari, and firefox. So who knows!
• mosaic: perfect!

Some screenshots:

I think at this point just the button placement and png output for the bipartite network are the only things that are worth updating if you don't mind! I'm still not worried about the black box on the volcano plot, since the underlying plot is still there.

I'm sorry for the slowness in review!

[dmfalke]

Thanks for the review!

Regarding button placement for bipartite, this is what I see:

I still don't know how to get a bipartite graph, so I didn't look at the output images. Maybe you can share an analysis that has a good bipartite viz?

[asizemore]

I should have also mentioned, to get the Generate Results button to show up, just modify any of those Prefilter Inputs. We introduced a bug in those prefilter inputs and i haven't had a chance to fix it yet

[dmfalke]

Oh, I misread what you said about the button placement for bipartite. I thought you said "way up on the right", but now I see it says "way on the right". I will try to fix!

[dmfalke]

I have made the following changes, which I hope address the immediate issues:

• Added a warning message for PNG
• Included error handling for the export button
• Modified some layout issues with the export button, including ensuring facet plots look okay

---

Screenshots

Facet plots

Error

[dmfalke]

I made an issue to look into PNG issues: https://github.com/VEuPathDB/web-monorepo/issues/818

[dmfalke]

I wonder if the issue with scatter is that we're using webgl to render the points.

I'm not sure what changes would have impacted the layout for bipartite. I'll take a quick look.

Also, I forgot that I was going to look at changing dimensions for bipartite.

I will spend a little bit of time trying to address these issues. I'll post an update by this afternoon.

[dmfalke]

Okay, I pushed fixed for the issues you mentioned:

• bipartite image cropping
• bipartite viz legends not above plot
• scatter points in svg (for plots w/ < 1000 points)

Let me know what you think :crossed_fingers:

[asizemore]

Thanks @dmfalke !

Scatterplots: check! Points are just an image for plots with more than 1000 points, and they are svg objects when plots have < 1000 points.

Bipartite network button placement: check! Looks good!

Bipartite network png: check! Also looks great!

lgtm! 🎸

[dmfalke]

Thanks! Let's rock and roll 🎸 🤘