How do I update the plotly config from nicegui?

[fdion]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

import plotly.express as px
  
df = px.data.tips()

fig = px.histogram(
    df, x="sex", y="total_bill", color="smoker", barmode="group"
)
fig.add_annotation(
    x="Female", y=1000, text="Text annotation", showarrow=True, arrowhead=1
)  
fig.show(config=dict(editable=True))

Description

How do I do something similar to fi.show(config=...) with the plot.update() approach in nicegui?

I am needing to alter the following parameters:

https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js#L47-L121

And as a bonus Q, how do I get the changes in editable mode back to nicegui?

NiceGUI Version

2.22.2

Python Version

3.11.13

Browser

Chrome

Operating System

macOS

Additional Context

No response

[falkoschindler]

Hi @fdion,

It looks like the API for configuring ui.plotly is rather limited at the moment. This is what I came up with:

df = px.data.tips()
fig = px.histogram(df, x='sex', y='total_bill', color='smoker', barmode='group')
fig.add_annotation(x='Female', y=1000, text='Text annotation', showarrow=True, arrowhead=1)
plot = ui.plotly(fig)
plot.props['options']['config'] = {'editable': True}

But I'm not sure how to get changes back to NiceGUI. How would you do that in plain JavaScript?

[fdion]

Thanks for the quick answer @falkoschindler

it works if I set it like that before plotting it, but once I plot it and change from editable to False (or vice versa), it stays editable, that I call plot.update() makes no difference. I'm assuming the props are not refreshed by .update()?

On the capturing the data back, it appears it would be tied to an on_relayout event. There is an example with dash and with Jupyter notebook figure viewer here: https://stackoverflow.com/questions/70742352/access-plotly-figure-relayout-data-in-notebook

But I don't really know what's implemented inside dash or FigureViewer to make this work with nicegui. I abandoned Dash many many years ago due to performance issues, and just the overall clunkiness, so this is something I have never done.

[falkoschindler]

Oh, now it's getting messy... The problem is that plot.update() re-generates props['options'] before sending the update to the client. So the config entry is lost immediately.

A quick workaround would be to avoid calling plot.update and to put the element directly into the client's outbox:

ui.button('Edit', on_click=lambda: (
    plot.props['options'].update({'config': {'editable': True}}),
    plot.client.outbox.enqueue_update(plot),
))
ui.button('Done', on_click=lambda: (
    plot.props['options'].update({'config': {'editable': False}}),
    plot.client.outbox.enqueue_update(plot),
))

[fdion]

Hey, that's great, that works.

So does enqueue_update(plot) works for anything that works with plot.update()?

As for getting the data back, I've found it was much simpler that I thought it would be:

def handle_relayout(e):
    # this is getting an event after each element is modified, eg, move the legend, get an event
    print(e)

plot.on('plotly_relayout', handle_relayout)

Now if I can figure out how to get click events coordinates only (plotly sends not only the coordinates of the point clicked, but the whole set of points on the plot back, not acceptable performance wise when you have thousands of points) and I'll be close to a complete solution.

I tried to use js_handler to map the event to return only the coordinate but that disables the editable mode and relayout. Still researching that part.

[falkoschindler]

So does enqueue_update(plot) works for anything that works with plot.update()?

The difference is that self._props['options'] isn't updated from the figure object. So if the figure changes, you'll need a proper plot.update().