# 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:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![aTrotier](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/atrotier/32/32165_2.png) [@aTrotier](https://discourse.julialang.org/u/aTrotier)\
**Post date:** [February 24, 2025, 3:32pm UTC](https://discourse.julialang.org/t/datainspector-bonito/126249/1 "2025-02-24T15:32:28Z")

</div>

How can I get an interactive html that show the label of scatter using DataInspector ? @sdanisch

```julia

## interactive plot works
function makie_plot_2()
fig=Figure()
ax=Axis(fig[1,1],title = "test")
scatter!(ax,rand(10),rand(10),inspector_label =(self,a,b) -> "point $a")
DataInspector(current_axis())
fig
end
makie_plot_2()

#####
using Bonito
app = App() do
    PCard(p) = Card(p, padding="0px", margin="0px")
    return Grid(
        PCard(makie_plot_2());
        columns="repeat(auto-fit, minmax(300px, 1fr))", justify_items="center")
end

export_static("test.html", app)

```

Thanks !

---

<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 24, 2025, 3:41pm UTC](https://discourse.julialang.org/t/datainspector-bonito/126249/2 "2025-02-24T15:41:14Z")

</div>

You need the javascript based tooltips for an offline export:

> **[WGLMakie | Makie](https://docs.makie.org/stable/explanations/backends/wglmakie#Offline-Tooltip)**
>
> Create impressive data visualizations with Makie, the plotting ecosystem for the Julia language. Build aesthetic plots with beautiful customizable themes, control every last detail of publication quality vector graphics, assemble complex layouts and...

They’re sadly more of a prototype, but quite a bit can be done with them.

---

<div class="post-metadata">

**Author:** ![aTrotier](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/atrotier/32/32165_2.png) [@aTrotier](https://discourse.julialang.org/u/aTrotier)\
**Post date:** [February 25, 2025, 8:26am UTC](https://discourse.julialang.org/t/datainspector-bonito/126249/3 "2025-02-25T08:26:34Z")

</div>

Exactly what I needed !

By the way is it possible to keep some kind of zoom interactivity because I have 2 scatter points really close and it could be hard to click on one of them to get the tooltips ?

---

<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.