Generalize `show` for `TwoColumn` etc to work with `svg`s

[greimel]

Hi @eford!

@jkrumbiegel provided the following code snippet on Slack

using Base64
using CairoMakie

struct TwoColumn{L, R}
    left::L
    right::R
end

function show_html_or_svg(io, x)
    if showable("text/html", x)
        show(io, MIME"text/html"(), x)
    elseif showable("image/svg+xml", x)
        print(io, """<img src="data:image/svg+xml;base64,""")
        print(io, base64encode(repr(MIME"image/svg+xml"(), x)))
        print(io, "\">")
    else
        show(io, x)
    end
    return
end

function Base.show(io::IO, M::MIME"text/html", tc::TwoColumn)
    write(io, """<div style="display: flex;"><div style="flex: 50%;">""")
    show_html_or_svg(io, tc.left)
    write(io, """</div><div style="flex: 50%;">""")
    show_html_or_svg(io, tc.right)
    write(io, """</div></div>""")
    return
end

TwoColumn("hi", lines(1:10))

I think it would be really nice to use this approach in this package, do you agree?

I'd be willing to prepare a PR if @jkrumbiegel and @eford approve (unless @jkrumbiegel wants to do it himself)

[eford]

I'm happy to see PRs for improvements.
I tried to give your snippet a try, but don't know what to import to get lines.

[greimel]

sorry, you need using CairoMakie. I adapted the snippet. Plots from this package currently don't have an html representation, but an svg representation.

[eford]

Adding CarioMakie resulted in it running. But now the RHS says: "Scene (800px, 600px): 0 Plots 1 Child Scene: └ Scene (800px, 600px)" I feel like that's likely not the intent.

On Sat, Oct 28, 2023 at 12:10 AM Fabian Greimel @.***> wrote:

sorry, you need using CairoMakie. I adapted the snippet. Plots from this package currently don't have an html representation, but an svg representation.

— Reply to this email directly, view it on GitHub https://github.com/JuliaPluto/PlutoTeachingTools.jl/issues/37#issuecomment-1783691323, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAKDFQV5Q2JT6ZWJYOZWEVDYBSAUVAVCNFSM6AAAAAA6TUGMJCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOBTGY4TCMZSGM . You are receiving this because you were mentioned.Message ID: @.***>

-- Eric Ford

[jkrumbiegel]

Might be that you also need a CairoMakie.activate!(type = "svg") so it activates that showable. But this is not really about CairoMakie I think, just about objects that may return svg but not html. And this probably needs a more general solution for more MIME types, I just provided some quick help on slack :)

[eford]

Ok, now I see a plot on the right. Yes, I'd be happy to see a PR. If it's not too much trouble, it would be nice if TwoColumnWideLeft{L, R}, TwoColumnWideRight{L, R}, and ThreeColumn{L, C, R} worked the same.

Thanks.

On Sat, Oct 28, 2023 at 12:41 AM Julius Krumbiegel @.***> wrote:

Might be that you also need a CairoMakie.activate!(type = "svg") so it activates that showable. But this is not really about CairoMakie I think, just about objects that may return svg but not html. And this probably needs a more general solution for more MIME types, I just provided some quick help on slack :)

— Reply to this email directly, view it on GitHub https://github.com/JuliaPluto/PlutoTeachingTools.jl/issues/37#issuecomment-1783698360, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAKDFQWHZRCMDFF2LMV5FX3YBSEGPAVCNFSM6AAAAAA6TUGMJCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOBTGY4TQMZWGA . You are receiving this because you were mentioned.Message ID: @.***>

-- Eric Ford

[fonsp]

Hey! Do you already know about PlutoUI.ExperimentalLayout? It allows you to create a TwoColumn function that works for anything, not just html and svg. It also makes it super fast!

[fonsp]

# ╔═╡ df7dd1e4-7739-11ee-2c0a-5779ff4a782b
function TwoColumns(a, b)
    PlutoUI.ExperimentalLayout.Div([
        PlutoUI.ExperimentalLayout.Div([a]; style=Dict("flex" => "0 0 50%"))
        PlutoUI.ExperimentalLayout.Div([b]; style=Dict("flex" => "0 0 50%"))
    ]; style=Dict("display" => "flex", "flex-direction" => "row"))
end

# ╔═╡ 2193c3aa-96c3-4621-a451-58289e879cdb
TwoColumns(
    md"# Hello!

    I am a computer",
    rand(10)
)

# ╔═╡ efd1aca8-5c8f-499d-9748-ccc297c7d167
import PlutoUI

[eford]

No, I wasn't aware of that. Thanks. Your TwoColumns looks like a nice solution to me. It looks simple enough that I could do it next time I update Pluto. Or, I'd be happy to merge a PR from Fabian if they'd like it sooner.

On Mon, Oct 30, 2023 at 11:38 AM Fons van der Plas @.***> wrote:

[image: image] https://user-images.githubusercontent.com/6933510/279112738-5aa7ed20-864e-4dc8-a080-6d5c4e351a42.png

╔═╡ df7dd1e4-7739-11ee-2c0a-5779ff4a782bfunction TwoColumns(a, b)

PlutoUI.ExperimentalLayout.Div([ PlutoUI.ExperimentalLayout.Div([a]; style=Dict("flex" => "0 0 50%")) PlutoUI.ExperimentalLayout.Div([b]; style=Dict("flex" => "0 0 50%")) ]; style=Dict("display" => "flex", "flex-direction" => "row"))end

╔═╡ 2193c3aa-96c3-4621-a451-58289e879cdbTwoColumns(

md"# Hello! I am a computer", rand(10) )

╔═╡ efd1aca8-5c8f-499d-9748-ccc297c7d167import PlutoUI

— Reply to this email directly, view it on GitHub https://github.com/JuliaPluto/PlutoTeachingTools.jl/issues/37#issuecomment-1785485675, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAKDFQVNQHWKAHXWYYOWNWTYB7CWDAVCNFSM6AAAAAA6TUGMJCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOBVGQ4DKNRXGU . You are receiving this because you were mentioned.Message ID: @.***>

-- Eric Ford

[eford]

Hi @fonsp, While merging another PR, I checked open issues and noticed this one.
Is PlutoUI.ExperimentalLayout still experimental? Or has it become something we expect to persist (perhaps with a different name)? Thanks,