Register plotly event handlers only once, at mount

[bmaranville]

All the event handlers in plotly were being registered on every update, which was causing a lot of issues. Event handlers should only be registered once. This PR moves the registration of the event handlers to a one-time operation in the mounted() function.

Fixes #2504, I think

[platinops]

I think this also fixes #2435, thanks for the PR!

[bmaranville]

This may not be quite right... it looks like when calling Plotly.newPlot() the listeners are dropped. A simply fix might be to move the set_handlers() function call from mounted() to right after Plotly.newPlot(), inside the update method. I'm trying that out right now.

[falkoschindler]

Thanks for this pull request, @bmaranville!

I looks like it fixes a really st*pid mistake. 😄 Of course, we shouldn't re-assign event handlers on every update!

But why do you think there's something wrong? Do you have an example? It tested with the following code and it seems to work nicely:

fig = go.Figure()
plot = ui.plotly(fig).classes('w-full h-96').on('plotly_click', ui.notify)

def add_trace():
    fig.add_trace(go.Scatter(x=[1, 2, 3], y=[random(), random(), random()]))
    plot.update()

ui.button('Add trace', on_click=add_trace)

[bmaranville]

What I forgot is that changing the config causes newPlot to be triggered on update(), after which the events are no longer firing. I actually ran in to this during testing of my app and was confused again.
So moving this.set_handlers(); right after Plotly.newPlot(...) seems to do the right thing - it registers the event listeners once per newPlot (lifetime of the plot) instead of once per lifetime of the component.

EDIT: I also found that the event listeners were unregistered by toggling the visibility of the ui.plotly element (using bind_visibility_from) - I don't know enough about how the visibility attributes work to know why that is happening.

[falkoschindler]

Well, I still can't reproduce newPlot dropping event registrations (see my above-mentioned test code).

But I can confirm that toggling the visibility stops events from firing. 😕

[bmaranville]

I don't think your code above triggers another newPlot after the first one - I think the only way to do that is to use the dict form of figure and then alter fig['config'] between plot updates. (the guard logic around newPlot only passes if the config changes, not from adding traces or changing layout.) Here is code that reproduces the problem:

from nicegui import ui
from numpy.random import random
import plotly.graph_objects as go

fig = { "data": [], "config": {} }
plot = ui.plotly(fig).classes('w-full h-96').on('plotly_click', ui.notify)

def add_trace():
    fig['data'].append(go.Scatter(x=[1, 2, 3], y=[random(), random(), random()]).to_plotly_json())
    plot.update()

def add_drawrect():
    fig['config']['modeBarButtonsToAdd'] = ['drawrect']
    plot.update()

ui.button('Add trace', on_click=add_trace)
ui.button('Enable drawrect', on_click=add_drawrect)

ui.run()

[falkoschindler]

Oh right, thanks! That makes sense.
I think we should merge this fix, even though there's still a problem with toggling the visibility. That's probably a separate issue and hasn't been introduced with this PR.

[falkoschindler]

I created issue #2519 to investigate the problem with toggled visibility.