Support for Makie plots

[PGimenez]

@hhaensel

I've tried to use Makie with Stipple and I've sort of succeeded. I've tried 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()

In order to trigger the rendering at port 9384, you have to type fig in the REPL and open it in a browser window. Otherwise this page will not show in the iframe.

The first method would be ideal, as there is no need to run additional servers. However, it stops working after a page reload- the plot disappears and this error shows in the REPL:

Additional message: error initializing scene
Stack trace:
    TypeError: Cannot read properties of null (reading 'getContext')
        at threejs_module (http://localhost:9384/assets/4a77482d19cea574aea58226e6657c189b101754-wglmakie.bundled.js:22144:26)
        at Module.create_scene (http://localhost:9384/assets/4a77482d19cea574aea58226e6657c189b101754-wglmakie.bundled.js:22207:22)
        at eval (eval at <anonymous> (http://localhost:9384/assets/e0d63817e429781cbc50d1d84d42ffff8aa7888a-JSServe.bundled.js:3563:27), <anonymous>:5:30)

I guess this is because it needs to have the session object as provided by JSServe

The iframe methods work fine, except that it does not support multiple users - the plots are synced between browsers. Here's a video showing how it works:

Screen.Recording.2023-11-30.at.15.56.22.mov

(here the first plot didn't move but it sometimes does)