Old axis labels showing up in new Figure with SVG in CairoMakie

[palday]

When plotting successive figures to SVG with CairoMakie, the previous figures linger and contaminate the new figure. This is visible in a recent docs preview in MixedModelsMakie. The first plot renders correctly, but the second and third plots have clear problems with overprinting in the y-axis labels. Likewise, the final plot, which is completely distinct clearly has some overplotted axis labels from the first three plots.

This problem does not occur with PNG output.

cc @dmbates

[SimonDanisch]

We switched the default to PNG because of this:
https://discourse.julialang.org/t/cairomakie-and-fontconfig/55931/4
JuliaPlots/CairoMakie.jl#147

As far I can tell, there isn't much we can do on the Makie side of things...

[jkrumbiegel]

The problem is that Documenter's tagged version puts svgs directly into the page. This causes them to interact which each other because glyph ids are shared among them. The fix is to use svgs in <img> tags, as they don't interact anymore this way. (or to salt the ids of the svg to be unique, I think matplotlib does that to avoid the same issue). You can look at your "messed up" documentation examples in a new tab and they will be fine.

I fixed this issue on Documenter#master, which is what our docs currently build with until a new version is tagged.

[palday]

Is there a way to get different glyph ids? Pass a UUID or the like when constructing the SVG object?

[jkrumbiegel]

here you can see it, these generic glyph ids repeat

[jkrumbiegel]

Is there a way to get different glyph ids? Pass a UUID or the like when constructing the SVG object?

I guess we could look for id="glyph and add a uuid there, yes

[jkrumbiegel]

the other issue with directly embedded svgs is that they don't resize, so I find the img way in Documenter#master preferable, even without the glyphs

[palday]

I'm thinking more as a stop-gap until Documenter has a new release (besides just using PNG)

[jkrumbiegel]

maybe we should do this anyway if it messes up other tools as well, like jupyter notebooks

[knuesel]

Oh it does mess Jupyter notebooks :) I was going to file an issue about this after doing some research. I'll write my results here:

• The behavior is correct as far as browsers are concerned: SVGs are allowed to interact according to the spec.
• This causes much pain with notebooks and other projects. See for example:
  • Glyph symbol ids create corrupted labels in Jupyter notebook igraph/python-igraph#222
  • Collision of multiple cairo generated SVGs jupyter/jupyter#298
  • strange svg rendering when glyph names are shared jupyter/notebook#333
  • SVGs displayed in different cells interacting with each other? JuliaLang/IJulia.jl#662
• Many projects have implemented workarounds:
  • rewriting IDs: TikzPictures.jl, Luxor.jl, RCall.jl but also for example seqlogo, Drawdown and matplotlib.
  • base64-encoding the SVG in img data: IHaskell.
  • home-made iframe wrapper: stata_kernel.
  • using official solution for Jupyter (isolated metadata in kernel protocol): igraph.

For Jupyter the isolated metadata fixes this by wrapping the SVG in an iframe. It can be implemented by specializing the IJulia.metadata method but apparently that must be made for every type that can go through display or related methods (e.g. IJulia.display_dict):

# For plots shown as return value
IJulia.metadata(::AbstractPlotting.Figure) = Dict("isolated" => true)

# For plots shown by calling `display` explicitely
IJulia.metadata(::AbstractPlotting.Scene) = Dict("isolated" => true)

# For AlgebraOfGraphics plots shown by return value
IJulia.metadata(::AlgebraOfGraphics.FigureGrid) = Dict("isolated" => true)

So there are at least the following options:

• Use Jupyter isolated metadata: this only fixes it for Jupyter, and it requires a dependence on IJulia and must(?) be done for each figure type.
• Provide an API to optionally wrap the SVG in an HTML iframe.
• Make the IDs unique. There was a patch submitted to Cairo for this but the developers think it's best done downstream when several SVGs are put together: https://gitlab.freedesktop.org/cairo/cairo/-/issues/304

[jkrumbiegel]

I think I'll follow the matplotlib approach and replace the ids with salted versions, created with the shortened hash of the full svg. This means that the same file will have the same salt when reproducing figures.

[jkrumbiegel]

fixed by JuliaPlots/CairoMakie.jl#163