Solara•9mo ago

Using existing plotly widget to update figures

With go.FigureWidget it is possible to update the data/properties of a figure without redrawing it. E.g. I can create a scatter plot with a lot of points:

N = 1000000
fig = go.FigureWidget(
    data=go.Scattergl(
        x = np.random.randn(N),
        y = np.random.randn(N),     
        mode='markers',
        selected=go.scattergl.Selected(marker = {"color":"red", "size":25}),
        selectedpoints=[5,10,25]
    )
)

N = 1000000
fig = go.FigureWidget(
    data=go.Scattergl(
        x = np.random.randn(N),
        y = np.random.randn(N),     
        mode='markers',
        selected=go.scattergl.Selected(marker = {"color":"red", "size":25}),
        selectedpoints=[5,10,25]
    )
)

and then update the highlighted points without redrawing it the whole thing:

scatter = fig.data[0]
scatter.selectedpoints = np.random.randint(0,N,size=50)

scatter = fig.data[0]
scatter.selectedpoints = np.random.randint(0,N,size=50)

The straight forward solara equivalent could look like this:

N = 1000000
selected = solara.reactive([5,10,25])

x = np.random.randn(N)
y = np.random.randn(N)

def rand_sel():
    selected.set(np.random.randint(0,N,size=50))

@solara.component
def Page():
    fig = go.FigureWidget(
        data=go.Scattergl(
            x = x,
            y = y,     
            mode='markers',
            selected=go.scattergl.Selected(marker = {"color":"red", "size":25}),
            selectedpoints=selected.value
        )
    )
    
    solara.FigurePlotly(fig)
    solara.Button('Random select', on_click=rand_sel)
    
Page()

N = 1000000
selected = solara.reactive([5,10,25])

x = np.random.randn(N)
y = np.random.randn(N)

def rand_sel():
    selected.set(np.random.randint(0,N,size=50))

@solara.component
def Page():
    fig = go.FigureWidget(
        data=go.Scattergl(
            x = x,
            y = y,     
            mode='markers',
            selected=go.scattergl.Selected(marker = {"color":"red", "size":25}),
            selectedpoints=selected.value
        )
    )
    
    solara.FigurePlotly(fig)
    solara.Button('Random select', on_click=rand_sel)
    
Page()

but this will generally run slower as the figure is redrawn IIUC. Is there a way to update the figure using the plotly widget within solara?

2 Replies

MaartenBreddels•9mo ago

See also https://discord.com/channels/1106593685241614489/1216185130297724999/1216185130297724999 But I don't think you should use the FigureWidget directly, otherwise you create a widget on each render (basically a memory leak). FigurePlotly will create the widget for you. If you really want to create the widget yourself, please consider https://github.com/widgetti/solara/pull/531 Feedback on these docs are also welcome. Let us know if this helps you.

Monty Python•9mo ago

maartenbreddels

<:pull_open:882464248721182842> [widgetti/solara] docs: document better how to use classical ipywidgets in components

We also give specific examples for ipyaggrid and ipydatagrid which are quite popular with solara. Based on discussion on discord and: https://github.com/widgetti/solara/issues/512 https://github.com/widgetti/solara/issues/511 TODO: - ◻️ examples in markdown don't always work well.

Created

Gaming

Programming

Using existing plotly widget to update figures