Why Pluto.jl run so much faster than GenieFramework.jl

General Usage
,
1

I have a gauge animation with Plotly in Pluto and GenieFramework.

But Pluto plots and tracks slider incredibly faster. Can someone help me with optimizations with Genie?

Or explain, why it is fundamentally impossible.

Genie animation:

Pluto animation:

Pluto code is here

Genie app.jl is here

app.jl code 
using GenieFramework, PlotlyBase
using StippleUI

@genietools


trace = indicator(
    mode="gauge+number+delta",
    value=tx[1],
    domain=attr(x=[0, 1], y=[0, 1]),
    title=attr(text="Ток якоря", font=attr(size=24)),
    gauge=attr(
        axis=attr(range=[0, 100], tickwidth=1, tickcolor="darkblue", dtick=10, tickfont=attr(size=18)),
        bar=attr(color="darkblue"),
        bgcolor="white",
        borderwidth=2,
        bordercolor="gray",
        steps=[
            attr(range=[0, 75], color="lightgreen"),
            attr(range=[75, 90], color="yellow"),
            attr(range=[90, 100], color="red")],
        threshold=attr(
            line=attr(color="pink", width=4),
            thickness=0.75,
            value=99
        )
    )
)
layout = PlotlyBase.Layout(paper_bgcolor="lavender", font=attr(color="darkblue", family="Arial"))



@app begin
    @in x = 0.0
    @out plot_data = [trace]
    @out plot_layout = layout
    @onchange x begin
        plot_data = [indicator(
            mode="gauge+number+delta",
            value=x,
            domain=attr(x=[0, 1], y=[0, 1]),
            title=attr(text="Ток якоря", font=attr(size=24)),
            gauge=attr(
                axis=attr(range=[0, 100], tickwidth=1, tickcolor="darkblue", dtick=10, tickfont=attr(size=18)),
                bar=attr(color="darkblue"),
                bgcolor="white",
                borderwidth=2,
                bordercolor="gray",
                steps=[
                    attr(range=[0, 75], color="lightgreen"),
                    attr(range=[75, 90], color="yellow"),
                    attr(range=[90, 100], color="red")],
                threshold=attr(
                    line=attr(color="pink", width=4),
                    thickness=0.75,
                    value=99
                )
            )
        )]
    end
end

function ui()
    [row(column(slider(1:1:100, :x), size=1)),
        row(plot(:plot_data, :plot_layout))]
end

@page("/", ui)
2

@garazha-ilya I highly recommend joining the Genie community on Discord and sharing your question on the help forum there. Here’s the link to join: Genie Community

1 Like
3

Not relevant comment:

In some countries, such as Russia, Discord is blocked :frowning: . I truly appreciate your concern and willingness to help, but I would prefer to receive an answer here, for obvious reasons.

3 Likes
4

I’m not sure why, but the slider only sends a value update when it stops moving. I’ve looked through the UI component docs (Quasar framework) and I don’t think there’s a way to change this behavior.

1 Like
5

Seems totally relevant to me. You shouldn’t have to jump through hoops and possibly evade the law to access help. Maybe someone can point people from the discord to here (if that hasn’t already been done)?

6

Thanks Kevin. @garazha-ilya joined our Discord and received support already.

2 Likes
7

Bonito may do what you need:

using PlotlyLight, Bonito
import PlotlyLight as PL
attr(; kw...) = values(kw)

const Plotly = Bonito.Asset(PL.plotly.url)

struct PPlot 
    div
    plot 
end

function Bonito.jsrender(session::Session, pplot::PPlot)
    # Pretty much copied from the PlotlyLight source to create the JS + div for creating the plot:
    plot = pplot.plot
    src = js"""
        Plotly.newPlot($(pplot.div), $(plot.data), $(plot.layout), $(plot.config))
    """
    return Bonito.jsrender(session, DOM.div(Plotly, pplot.div, src))
end

app = App() do s::Session
    slider = Bonito.StylableSlider(0:100)
    div = DOM.div(style="width: 600px;height: 300px;")
    p = plot(
        type="indicator",
        mode="gauge+number+delta",
        value=slider.value[],
        domain=attr(x=[0, 1], y=[0, 1]),
        title=attr(text="Ток якоря", font=attr(size=24)),
        gauge=attr(
            axis=attr(range=[0, 100], tickwidth=1, tickcolor="darkblue", dtick=10, tickfont=attr(size=18)),
            bar=attr(color="darkblue"),
            bgcolor="white",
            borderwidth=2,
            bordercolor="gray",
            steps=[
                attr(range=[0, 75], color="lightgreen"),
                attr(range=[75, 90], color="yellow"),
                attr(range=[90, 100], color="red")],
            threshold=attr(
                line=attr(color="pink", width=4),
                thickness=0.75,
                value=99
            )
        ),
        layout=(paper_bgcolor="lavender", font=attr(color="darkblue", family="Arial"))
    )
    pplot = PPlot(div, p)
    p = onjs(s, slider.value, js"""(x) => {
        Plotly.restyle($div, {value: x});
    }
    """)
    Card(DOM.div(slider, Centered(pplot)))
end

Maybe not as elegant since Plotly isn’t supported directly, but should be pretty efficient :slight_smile:
Would be nice to see your current genie solution and how it compares to the Bonito solution!

2 Likes
8

Thank you very much!
It’s not a Genie, but it works great! Thanks a lot for the code!