vector-graphics (resolution indepedent) output

[bernstei]

The map view has both png and svg output, but both appear to be pixelated. Is that an issue with my SVG reading code, or is it real, and if so, would it be possible to save "real" SVG, i.e. actually using vector graphics for all the map's visual elements (axes, symbols, legend)

[ceriottm]

This is down to plotly. I'm pretty sure that for 3D output there's no way to get proper vector output, but it might be possible for 2D maps by switching the rendering engine (temporarily?) from webgl to some other option. Feel free to investigate if it's important for your workflow, indeed it'd be nice to have proper vector output.

[bernstei]

It would be very nice. I guess if I use my big monitor I can at least make it bigger before I screenshot or export to png. Do you have any pointers of where to look to change the rendering engine (where in chemiscope, and any useful information on things like webgl?)?

Actually, one workaround would be to get plotly to output a bitmap but at higher resolution than the actual display. I'll see if that's possible and easier than a change of engine.

[Luthaf]

Chemiscope is creating the traces using scattergl:

chemiscope/src/map/map.ts

Line 523 in 0bb0f8d

const type = this._is3D() ? 'scatter3d' : 'scattergl';

, which maps to the WebGL implementation in plotly. Plotly also has a type: "scatter" mode, which renders to an SVG, and let the browser render this SVG to the screen: https://plotly.com/javascript/reference/scatter/#scatter

We are using the scattergl instead of scatter mode because scatter starts to break down and be extremely slow with more than ~10k points.

An other solution here could be to determine the maximal safe size for scatter, and then switch to scattergl for anything with more points.

[bernstei]

You mention "scatter" vs" "scattergl", but I don't entirely understand how this interacts with dimensions. I do have a 3D map. Does that mean that I'm stuck with a png?

[bernstei]

I found https://plotly.github.io/plotly.py-docs/generated/plotly.io.write_image.html, which would work if I could pass scale, but I'm not sure where the analogous thing happens in chemiscope. Do you know if there's an analogous function call someplace?

[bernstei]

Ugh, yes - I found

chemiscope/src/map/map.ts

Line 134 in 0bb0f8d

Plotly.downloadImage(gd, {

where I can get a much higher resolution image if I up the size from 600 to 2400. However, the glyph size is scaled in pixels, or something, because I also have to increase the size of the symbols to make them look decent, and the legend is still tiny (but I could add that back in manually). Vaguely an acceptable workaround, but definitely far from perfect. I wish that function has a scale argument, like the python version apparently does, but I don't see anything like that.

[Luthaf]

I found https://plotly.github.io/plotly.py-docs/generated/plotly.io.write_image.html, which would work if I could pass scale, but I'm not sure where the analogous thing happens in chemiscope. Do you know if there's an analogous function call someplace?

I don't know. Since we are not using the Python version of Plotly but the JavaScript one, we would have to check what this Python function is doing with the core JS library & replicate that in our call to Plotly.downloadImage.

[bernstei]

FWIW, scale doesn't seem to do the right thing. The resolution of things like the legend are better, but not the map itself. See attached zoomed in screenshots. Both of these are at the same zoom level.