Use Plotly.react instead of Plotly.newPlot

[platinops]

This is just a refactor, triggered by the discussion in #2505.

It's better to use Plotly.react than Plotly.newPlot as stated in the Plotly docs:

Plotly.react has the same signature as Plotly.newPlot above, and can be used in its place to create a plot, but when called again on the same <div> will update it far more efficiently than Plotly.newPlot), which would destroy and recreate the plot. Plotly.react is as fast as Plotly.restyle/Plotly.relayout documented below.

Test code to verify events are still OK, also after changing the plot config:

from random import random

from nicegui import ui

def get_trace_data() -> dict:
    return {
        "x":[1, 2, 3],
        "y": [random(), random(), random()],
    }

data = [get_trace_data() for _ in range(1)]
config = {"displayModeBar": True}
fig = {
    "data":data,
    "config":config,
}
plot = ui.plotly(fig)
plot = plot.classes('w-full h-96').on('plotly_click', ui.notify)

def add_trace():
    fig["data"] = [*fig["data"], get_trace_data()]
    plot.update()

def toggle_mode_bar():
    fig["config"]["displayModeBar"] = not fig["config"]["displayModeBar"]
    plot.update()

ui.button('Add trace', on_click=add_trace)
ui.button('Toggle mode bar', on_click=toggle_mode_bar)

ui.run(host="0.0.0.0", port=5000)

[bmaranville]

I wondered about this. It would simplify the code a bit.

[falkoschindler]

Awesome! Thanks, @platinops!
This simplifies things quite a bit. 🙂