app.jl

using Dash
using DashBootstrapComponents
using JSON3
using Plots; plotly()


function create_graph()
    customdata = [JSON3.write(Dict(:x => rand())) for _=1:3]
    plt = scatter([1,2,3], [1,2,3], hover=["a", "b", "c"], extra_kwargs=Dict(:series=>Dict(:customdata=>customdata)))
    figure = (data=[fix_nan!(p) for p in Plots.plotly_series(plt)], layout=Plots.plotly_layout(plt))
    return figure
end

# Dash uses JSON3 which does not allow NaN
function fix_nan!(d::Dict)
    for (k, v) in d
        if typeof(v) <: AbstractFloat && isnan(v)
            d[k] = nothing
        elseif typeof(v) <: Dict
            fix_nan!(d[k])
        end
    end
    return d
end


app = dash()

app.layout = html_div() do
    html_h1("Hello Dash"),
    dcc_graph(id="graph", figure=create_graph()),
    html_pre(id = "click-info", children = "click.")
end


callback!(
    app,
    Output("click-info", "children"),
    Input("graph", "clickData"),
) do click_data
    if isnothing(click_data)
        throw(PreventUpdate)
    end

    return string(click_data[:points][1][:customdata])
end

run_server(app, "0.0.0.0", 8080)