Bug in interactive slider example in WGLMakie docs?

General Usage
, ,
1

The following code snippet combines the sections for “Record a state map” and “Export” to create an interactive plot on an html-page. The problem is that the slider starts at 0 and never returns. It seems to jump up to 2 and if you go back to 1 the slice indicator does not return to its starting position. Furthermore the slices at indices 1 and 2 are the same, which they should not be.

using WGLMakie
using FileIO
using Observables
using Bonito

WGLMakie.activate!()

open("index.html", "w") do io
    println(io, """
    <html>
        <head>
        </head>
        <body>
    """)
    Page(exportable=true, offline=true)
    # Then, you can just inline plots or whatever you want :)
    # Of course it would make more sense to put this into a single app
    app = App() do session::Session
        n = 10
        index_slider = Slider(1:n)
        volume = rand(n, n, n)
        slice = map(index_slider) do idx
            return volume[:, :, idx]
        end
        fig = Figure()
        ax, cplot = contour(fig[1, 1], volume)
        rectplot = linesegments!(ax, Rect(-1, -1, 12, 12), linewidth=2, color=:red)
        on(index_slider) do idx
            translate!(rectplot, 0,0, idx)
        end
        heatmap(fig[1, 2], slice)
        slider = DOM.div("z-index: ", index_slider, index_slider.value)
        return Bonito.record_states(session, DOM.div(slider, fig))
    end
    show(io, MIME"text/html"(), app)
    # or anything else from Bonito, or that can be displayed as html:
    println(io, """
        </body>
    </html>
    """)
end

In a different custom example with many more indices and several plots being updated depending on the slider the images often start to diverge.

Any help is greatly appreciated :slight_smile:

Best

Ivan