Integration with Genie/Stipple

[essenciary]

Hi Makie team!
I'd like to tackle out-of-the-box integration of Makie plots into Genie/Stipple apps. We're using HTTP.jl together with WebSockets and Ajax for exchanging data payloads between the Julia backend and the client frontend. Can you please point me to docs/relevant bits of code on how to achieve the integration? Thanks!

[AbhimanyuAryan]

👀

[SimonDanisch]

Hi,
I've already answered this to @hhaensel in an email:

I'm working on a refactor of JSServe which should make this quite easy.
If you look at the IJulia integration, you can see that it doesn't require a lot of code to setup a different connection:
https://github.com/SimonDanisch/JSServe.jl/blob/73d92ca1855330e0dff8f604ddfe0ff170ed2a0e/src/connection/ijulia.jl
The PR is close to being feature complete, but it has been tough to free up time to bring it over the finish line...

[hhaensel]

Thanks @SimonDanisch and @essenciary for opening this here.
I already had a first look, but I couldn't figure out how to integrate this. I was a bit overloaded the last days...
I am wondering whether we should use JSServe or Genie's communication channel.

[00krishna]

Yeah I would love to see this. This would help overcome some of the challenges with application portability using GTK. Plus the stipple controls look so nice. Definitely upvoting this.

[TheCedarPrince]

Bumping this -- what is the status here out of curiosity?

[PGimenez]

I've opened a new issue on the Stipple repo about this (link) as I would like to use BioMakie with Stipple.

So far I've had some success with these three methods:

1. Generating the plot's JS code and adding that to the UI in a div.
2. Using WGLMakie to render the plot at localhost:9384/browser-display and including this page with an iframe
3. Serving the plot with JSServe and including it with an iframe

Here's the code:

using JSServe, WGLMakie
using GenieFramework

n = 10
volume = rand(n, n, n)
fig = Figure()
ax, cplot = contour(fig[1, 1], volume)
rectplot = linesegments!(ax, Rect(-1, -1, 12, 12), linewidth=2, color=:red)
idx = 3
translate!(rectplot, 0, 0, idx)
plotcontent = DOM.div(fig)

app = App() do session::Session
    plotcontent
end
server = JSServe.Server(app, "127.0.0.1", 8081)
JSServe.HTTPServer.start(server)

@app begin
    @in z = 1
    @onchange z begin
        translate!(rectplot, 0, 0, z)
    end
end

ui() = [
    slider(1:10, :z),
    Html.div(style="display:flex", [
        Html.div(style="width:33%",  plotcontent),
        iframe(src="http://localhost:8081", width="33%", height="500px"), 
        iframe(src="http://localhost:9384/browser-display", width="33%", height="500px")])
]

@page("/", ui)

up()

The first method stops working after a page reload, see the linked issue for more details. The other two methods work fine.

[hhaensel]

@SimonDanisch I'd love to revive this topic.
Makie is becoming more and more the standard package for Plotting and we'd be happy to integrate it into our GenieFramework.

As Genie has its own server I wonder how Bonito is supposed to work with it together.
Could we possibly decouple the plot rendering from Bonito and write our own version of three_display() that is then called during the setup of a vue-element?
I would imagine that we develop a Package StippleMakie that includes all necessary assets that are normally served by Bonito. So they only need to be included once.

[asinghvi17]

Would it not be easier to take the iframe approach @hhaensel? Then, only two things you might have to do are:

• Integrating the WGLMakie display using an iframe
• Enabling interop between Genie observables and Makie observables

I'm not sure what the plotting model for Genie looks like now, but I imagine that the plot is re-generated every time a slider value changes. This would be pretty suboptimal for Makie, because the whole point is that you don't have to re-create the plot every time a value changes, but can update only the values you want to and have the changes reflect. That would probably be a bit of a pain point there...

Maybe you could also take advantage of the SpecAPI and its diffing capability for this?

[hhaensel]

Integrating the WGLMakie display using an iframe
The problem with an iframe is that you need a second port. In quite some company solutions you don't have a second port easily available.
I imagine that the plot is re-generated every time a slider value changes.
We're relying on plotly's and vue.js's update mechanism. So the Plotly plot is generated once during mounting of the plot component and the data, layout and config can be updated separately. The component decides whether complete relayouting or only data update is needed.

Maybe we find some time during JuliaCon to work on this?

[hstrey]

any updates?

[hhaensel]

During JuliaCon hackathon I got some inspiring help by @SimonDanisch and have setup StippleMakie.
It's not yet registered as it doesn't work with a single Internet address yet.
But on a local PC it does already work.