Alpha in SVGJS

[CiaranOMara]

The theme is not displayed correctly in the left-hand plot. There should be some transparency.

http://gadflyjl.org/stable/gallery/geometries/#[Geom.rect](@ref),-[Geom.rectbin](@ref)-1

[CiaranOMara]

The fill-opacity tag is not present in the left-hand plot.

[Mattriks]

Note that this happens when hstack is used (plot pa renders correctly by itself), and with the SVGJS backend.

But the better way to do this now should be:

pa = plot(D, x=:x, y=:y, Geom.rectbin, Theme(alphas=[0.5])) # and/or
pa = plot(D, x=:x, y=:y, alpha=[0.5], Geom.rectbin)

so the alpha aesthetic needs to be enabled for Geom.rectbin, #1263 (comment). Once enabled, this will work with hstack.

[CiaranOMara]

I've since tried a MWE. Unfortunately, it has worked...

using Colors, Gadfly

set_default_plot_size(21cm, 8cm)

p1 = plot(x=1:9, y=1:9, Geom.blank, layer(xmin=[2], ymin=[2], xmax=[8], ymax=[8], Geom.rect, Theme(default_color=RGBA(0.5,0.5,0.5,0.5))));
p2 = plot(x=1:9, y=1:9, Geom.blank, layer(xmin=[2], ymin=[2], xmax=[8], ymax=[8], Geom.rect, Theme(default_color=RGBA(0.5,0.5,0.5,0.5))));

p = hstack(p1,p2)

p |> SVG("foo.svg")
p |> SVGJS("foo.html")

import Cairo
import Fontconfig

p |> PNG("foo.png")

[Mattriks]

But now p1 and p2 each have 2 layers , so you've changed the Compose tree and the inheritance.

[CiaranOMara]

Some more information to determine where in the tree that there is an issue. Also, it seems that only SVGJS is affected.

p1 = plot(layer(xmin=[2], ymin=[2], xmax=[3], ymax=[3], Geom.rect, Theme(default_color=RGBA(0.5,0.5,0.5,0.5))));
p2 = plot(layer(xmin=[2], ymin=[2], xmax=[3], ymax=[3], Geom.rect, Theme(default_color=RGBA(0.5,0.5,0.5,0.5))));

p1 = plot(layer(xmin=[2,4], ymin=[2,4], xmax=[3,8], ymax=[3,8], Geom.rect, Theme(default_color=RGBA(0.5,0.5,0.5,0.5)))); 
p2 = plot(layer(xmin=[2,4], ymin=[2,4], xmax=[3,8], ymax=[3,8], Geom.rect, Theme(default_color=RGBA(0.5,0.5,0.5,0.5))));

p1 = plot(layer(xmin=[2], ymin=[2], xmax=[3], ymax=[3], Geom.rect, Theme(default_color=RGBA(0.5,0.5,0.5,0.5)))); 
p2 = plot(layer(xmin=[2,4], ymin=[2,4], xmax=[3,8], ymax=[3,8], Geom.rect, Theme(default_color=RGBA(0.5,0.5,0.5,0.5))));

[CiaranOMara]

@Mattriks, can one reasonably use Compose's introspect function on these plots? If so, all MWE plots in this thread have the same tree.

[CiaranOMara]

Maybe the introspect plot is clipped or has overlapping elements.

[Mattriks]

Actually this issue is the same problem as in #1242. It was "fixed" for Geom.ribbon because the alpha aesthetic was enabled for ribbon. So the issue can be:

i) "fixed" in Gadfly, e.g. enable alpha for Geom.rect, or
ii) maybe fixed in Compose.

I'm guessing there's an unidentified inheritance issue in the SVG backend, which is appearing in SVGJS for unknown reasons.

[CiaranOMara]

It'd be nice to track this down and fix it in Compose so that Colorant can be used willy-nilly.

[Mattriks]

On the introspect function, Gadfly's plot tree has a Compose.Table node, so to view it:

set_default_graphic_size(8inch, 4inch)
p = plot(x=[0,10], y=[0,1], Geom.blank)
tbl = render(p).container_children.head.container_children.head
# compose(context(), tbl[1,3]) # see what renders
introspect(tbl[1,3][1])

Note the plot tree includes 3 guides for SVGJS, which are easy to pick out because they contain text.

[CiaranOMara]

When checking out the Compose.table, I found that render() expects Plot. Naturally, I had a look at the affected plot without hstack. The plot by its self was fine. I maybe the issued is in stack.jl.

[Mattriks]

PR #1439 will close this issue in Gadfly. If there is a related problem in Compose, than an example should be illustrated using Compose only (and an issue opened there).