WGLMakie zoom with export_static

[bjarthur]

when a WGLMakie App is served with Bonito, zooming in on a plot works, but when a standalone .html file is created with export_static, it doesn’t. presumably a Julia server is needed for this functionality.

i post because i’m curious what it would take to get this to work. is there a workaround like for DataInspector? or maybe there is some other JS code i could execute??

more generally, is there a roadmap for implementing more of WGLMakie in javascript and finalizing the API so that it is no longer experimental? doing so is a bit outside my expertise but i’d be happy to help with some guidance. Gadfly’s support for interactive standalone SVGs is a killer feature and the sole reason i sometimes use it instead of Makie.

using WGLMakie, Bonito

app = App() do session
    fig, ax, sc  = scatter(rand(10), rand(10))

    return DOM.div(fig)
end

export_static("mwe.html", app)      # zoom doesn't work  :(
Bonito.Server(app, "0.0.0.0", 80)   # zoom does work :)

[sdanisch]

Just answered this recently:

DataInspector + bonito

Hm not easily… Although, it’s not that difficult to implement a simple on scroll event, which modifies the camera matrix of the axis scene directly in Javascript: function attach_js_zoom(scene) return js""" // I need to improve the $(scene) operation, to do the below: function get_scene() { return new Promise(resolve => (function check() { $(scene).then(scene => scene ? resolve(scene) : setTimeout(check, 50)); })()); } …

[bjarthur]

so that makes three of us that really want to zoom and pan on a static plot. i do have a little bit of time to dabble if you can guide me even further. as is, zooming the entire scene like that is not useful. a couple questions:

1. how would you architect a solution to put that code inside WGLMakie so that it just worked out-of-the-box for everyone?
2. in a non-static (ie with a julia server) plot, one can programmatically zoom by calling limits!. can one call that function from within javascript? equivalently, i know you can pass an observable’s value from julia to javascript, but is there a way to set an observable’s value from within javascript? if so, that could provide a means to zoom.

[sdanisch]

@bjarthur

how would you architect a solution to put that code inside WGLMakie so that it just worked out-of-the-box for everyone?

I can worry about that, once we have something usable

can one call that function from within javascript

No, that’s all implemented in Julia, so not available in a pure javascript export.
Otherwise this would be a piece of cake

but is there a way to set an observable’s value from within javascript

Yes, there is, but with the Julia side of things missing, it won’t get you very far

[ConnectedSystems]

I’m also at the state where I would really like to see this functionality in WGLMakie.

I’ve joined to discussion here on it to see where I can help, although my JavaScript is a little rusty and my knowledge of Makie internals is limited.

[Roadmap] WGLMakie · MakieOrg Makie.jl · Discussion #4248