search

lab-cosmo / chemiscope

An interactive structure/property explorer for materials and molecules
http://chemiscope.org
BSD 3-Clause "New" or "Revised" License
133 stars 33 forks source link

vector-graphics (resolution indepedent) output #390

Open bernstei opened 5 days ago

bernstei commented 5 days ago

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 commented 4 days ago

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 commented 4 days ago

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 commented 4 days ago

Chemiscope is creating the traces using scattergl: https://github.com/lab-cosmo/chemiscope/blob/0bb0f8d93140048883938fcded2489b9a89b8fdf/src/map/map.ts#L523, 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 commented 4 days ago

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 commented 4 days ago

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 commented 4 days ago

Ugh, yes - I found https://github.com/lab-cosmo/chemiscope/blob/0bb0f8d93140048883938fcded2489b9a89b8fdf/src/map/map.ts#L134 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 commented 1 day ago

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.