# DataInspector + bonito

**URL:** <https://discourse.julialang.org/t/datainspector-bonito/126249>\
**Category:** General Usage\
**Tags:** question, bonito\
**Created:** [February 24, 2025, 3:32pm UTC](https://discourse.julialang.org/t/datainspector-bonito/126249 "2025-02-24T15:32:27Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![sdanisch](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sdanisch/32/1406_2.png) [@sdanisch](https://discourse.julialang.org/u/sdanisch)\
**Post date:** [February 25, 2025, 11:15am UTC](https://discourse.julialang.org/t/datainspector-bonito/126249/4 "2025-02-25T11:15:06Z")

</div>

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:

```julia
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));
            })());
        }
        get_scene().then(scene => {
            const camera = scene.wgl_camera;
            const view_uniform = camera.view; // Three.js Uniform
            const factor = 1.1; // Zoom sensitivity
            window.addEventListener("wheel", event => {
                event.preventDefault();
                const zoom = event.deltaY < 0 ? factor : 1 / factor;
                // Clone the current view matrix to avoid mutating the original reference
                const new_view = view_uniform.value.clone();
                new_view.elements[0] *= zoom;
                new_view.elements[5] *= zoom;
                new_view.elements[10] *= zoom;

                view_uniform.value = new_view; // Assign the new matrix
                camera.calculate_matrices()
            }, { passive: false });
        });
    """
end

begin 
    app = App() do session 
        f, ax, pl = scatter(1:4)
        evaljs(session, attach_js_zoom(ax.scene))
        evaljs(session, attach_js_zoom(ax.blockscene))
        DOM.div(f)
    end
    Bonito.export_static("test-cam.html", app)
end

```

Note, that this zooms the whole thing, since it’s kind of difficult to update the gridlines and ticks accordingly.  
It would not be impossible, though, by updating the plot objects in [JS directly](https://docs.makie.org/stable/explanations/backends/wglmakie#Execute-Javascript-directly).

Anyways, the above needs quite a bit more work, since it doesn’t consider the mouseposition as the center of zooming - and you likely want panning as well 😉  
If you have a bit of time to dabble in this, I’m happy to help! I’ve been wanting to have this for quite some time, but never found the time to get serious about it, but I’d have some time to help you along.

---

_[View the full topic](https://discourse.julialang.org/t/datainspector-bonito/126249)._