How do I update a plotly figure not on active tab ?

[Elvynzs]

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 numpy as np
import plotly.express as px
import plotly.graph_objects as go
from nicegui import ui


def generate_figure(p1: float, p2: float) -> go.Figure:
    return px.line(x=np.arange(1000), y=np.arange(1000) * p1 + p2)


# Initial placeholder figure
fig = go.Figure()


def update_figure():
    new_fig = generate_figure(p1.value, p2.value)
    plot.figure = new_fig
    plot.update()


with ui.tabs() as tabs:
    tab1 = ui.tab("Configure")
    tab2 = ui.tab("Result")

with ui.tab_panels(tabs, value=tab1):
    with ui.tab_panel(tab2):
        plot = ui.plotly(fig).classes("w-full h-96")

    with ui.tab_panel(tab1):
        p1 = ui.slider(min=0, max=100, value=1, step=1)
        p2 = ui.slider(min=0, max=100, value=0, step=1)
        ui.button("Update Figure", on_click=update_figure)


ui.run()

Description

Hello everyone.

I am new to nicegui and I would like to use it for a "simple" use case : I want to have two tabs, the first one would be used for configuration purposes, and the second one would show me a generated plotly figure that depends on the configuration.

Initially I did everything on a single tab, and everything worked fine. But now that I want to use two tabs (to avoid overloading a single tab with too many items), I have encountered a problem : I cannot figure how to update a plotly figure on the second tab, while staying on the first tab.

I have provided a minimal code that shows a very simple situation. Here the figure is generated properly the first time, but after when I change the parameters, it doesn't update the second tab until I reload the page (or add a manual update button on the second tab).

I have searched the web for some answers, but I did not find any working solution. Is there a way to do what I want ?

NiceGUI Version

2.22.2

Python Version

3.11.2

Browser

Chrome, Firefox

Operating System

Windows

Additional Context

No response

[falkoschindler]

Hi @Elvynzs, that's an interesting problem! It seems related to issue #3033, but is not exactly the same.

Here is an even shorter reproduction:

import plotly.express as px
import plotly.graph_objects as go
from nicegui import ui

with ui.tabs() as tabs:
    tab1 = ui.tab('Configure')
    tab2 = ui.tab('Result')

with ui.tab_panels(tabs, value=tab1):
    with ui.tab_panel(tab1):
        ui.checkbox('Up', on_change=lambda e: plot.update_figure(px.line(x=[1, 2], y=[0, 1] if e.value else [1, 0])))
    with ui.tab_panel(tab2):
        plot = ui.plotly(go.Figure())

Watch the JavaScript console:

• Before visiting the "Result" tab for the first time, toggling the checkbox causes "TypeError: Cannot read properties of undefined (reading 'update')"
• Afterwards toggling the checkbox causes "Error: No DOM element with id 'c11' exists on the page."

The first observation sounds like #3033. But the second one is extra strange because now the plot should be in the DOM. The keep_alive parameter for ui.tab_panels is True by default and should keep the plot in the DOM.

[falkoschindler]

I just found a fix in 458b0da: We need to pass the HTML to Plotly, not only its ID. This way Plotly can update the element even while it is not in the DOM. It will be released shortly in version 2.23.2.