Trying to make the resampler work with dynamic graphs

[prokie]

So I made this minimal example but I can not figure out why I can't get the callbacks to work.

`

"""
Minimal dynamic dash app example.
"""

import numpy as np
import plotly.graph_objects as go
import trace_updater
from dash import Dash, Input, Output, State, dcc, html
from plotly_resampler import FigureResampler

x = np.arange(1_000_000)
noisy_sin = (3 + np.sin(x / 200) + np.random.randn(len(x)) / 10) * x / 1_000

app = Dash(__name__)

fig = FigureResampler(go.Figure(go.Scatter(x=x, y=noisy_sin)))


app.layout = html.Div(
    [
        html.Div(
            children=[
                html.Button("Add Chart", id="add-chart", n_clicks=0),
            ]
        ),
        html.Div(id="container", children=[]),
    ]
)


@app.callback(
    Output("container", "children"),
    Input("add-chart", "n_clicks"),
    State("container", "children"),
)
def display_graphs(n_clicks: int, div_children: list[html.Div]) -> list[html.Div]:
    """
    This function is called when the button is clicked. It adds a new graph to the div.
    """
    figure = fig
    figure.register_update_graph_callback(
        app=app,
        graph_id=f"graph-id-{n_clicks}",
        trace_updater_id=f"trace-updater-id-{n_clicks}",
    )

    new_child = html.Div(
        children=[
            dcc.Graph(id=f"graph-id-{n_clicks}", figure=fig),
            trace_updater.TraceUpdater(
                id=f"trace-updater-id-{n_clicks}", gdID=f"graph-id-{n_clicks}"
            ),
        ],
    )
    div_children.append(new_child)
    return div_children


if __name__ == "__main__":
    app.run_server(debug=True)

`

[jvdd]

Great to see you toying around with our package! 😃

Your code does not work because of a (large) limitation of dash; it is not possible to dynamically add callbacks in a dash app. In your example, you try to do this in the display_graphs function when you call the figure.register_update_graph_callback function.

To circumvent this, you should register the callbacks statically (and not dynamically in another callback function). A quick (but kinda dirty) fix for this is to create several dummy figures (i.e., FigureResampler() objects without any trace) and register the callbacks for these figures with unique ids.
You can still add the data to the figure dynamically via either the .add_trace method er the .replace method.

See this working version of your minimalistic example

"""
Minimal dynamic dash app example.
"""

import numpy as np
import plotly.graph_objects as go
import trace_updater
from dash import Dash, Input, Output, State, dcc, html
from plotly_resampler import FigureResampler

from typing import List

x = np.arange(1_000_000)
noisy_sin = (3 + np.sin(x / 200) + np.random.randn(len(x)) / 10) * x / 1_000

app = Dash(
    __name__, 
    suppress_callback_exceptions=True,  # surpress unused ID warnings
)

# Create empty figures
max_nb_figures = 10  # NOTE, 10 is arbitrarily chosen
figs = [
    FigureResampler()
    for _ in range(max_nb_figures)
]

# Add the resampling callback to these empty figures
for n_clicks, f in enumerate(figs):
    f.register_update_graph_callback(
        app=app,
        graph_id=f"graph-id-{n_clicks}",
        trace_updater_id=f"trace-updater-id-{n_clicks}",
    )


app.layout = html.Div(
    [
        html.Div(
            children=[
                html.Button("Add Chart", id="add-chart", n_clicks=0),
            ]
        ),
        html.Div(id="container", children=[]),
    ]
)


@app.callback(
    Output("container", "children"),
    Input("add-chart", "n_clicks"),
    State("container", "children"),
)
def display_graphs(n_clicks: int, div_children: List[html.Div]) -> List[html.Div]:
    """
    This function is called when the button is clicked. It adds a new graph to the div.
    """
    print(n_clicks)
    global figs
    # Select the n_clicks figure (with its already registered callbacks)
    figure = figs[n_clicks]
    # Add the data to the figure
    figure.add_trace(go.Scatter(x=x, y=noisy_sin))
    # NOTE, you could also use figure.replace(go.Figure(go.Scatter(x=x, y=noisy_sin)))

    new_child = html.Div(
        children=[
            dcc.Graph(id=f"graph-id-{n_clicks}", figure=figure),
            trace_updater.TraceUpdater(
                id=f"trace-updater-id-{n_clicks}", gdID=f"graph-id-{n_clicks}"
            ),
        ],
    )
    div_children.append(new_child)
    return div_children


if __name__ == "__main__":
    app.run_server(debug=True)

I hope this answer helps you!

(@jonasvdd can you think of another / cleaner solution?)

[prokie]

Okay, thanks for a quick response. But then it should be possible to use pattern matching callbacks? I will look into it and see if I can make that work.

[jonasvdd]

@prokie, I suppose it should! I will also look into this a little! Keep you posted! :)

[prokie]

It probably needs some work done on the TraceUpdater. I assume that register_update_graph_callback should work out of the box with something like this
figure.register_update_graph_callback( app=app, graph_id={"type": "graph", "index": ALL}, trace_updater_id={"type": "graph", "index": ALL}, )

But the TraceUpdater I don't really understand and it gives an error when you supply it a dict.
trace_updater.TraceUpdater( id={"type": "trace-updater", "index": n_clicks}, gdID={"type": "graph", "index": n_clicks}, ),

Error:
Invalid argument gdID passed into TraceUpdater with ID "{"index":0,"type":"trace-updater"}". Expected string. Was supplied type object. Value provided: { "type": "graph", "index": 0 }

[jonasvdd]

Working on it! Already have a p.o.c. which does what I think you intend, I think we will have a new release at the end of this week with a Dash example for this use-case.

I indeed had to make some changes to the TraceUpdater component! 😃

[jonasvdd]

WIP: see #35

[jvdd]

Is now supported in v0.3.0 🎉

[prokie]

One issue that I have found (using the example) is that if I actually try to deploy the server it won't work as intended since we store the FigureResampler objects globally in the dictionary graph_dict. Thus all users will share FigureResampler objects, however, the users want to work individually. I instead tried to store the objects using dcc.Store but that serializes the data to a dictionary. Do you know any solution that would work without storing the objects globally? @jonasvdd @jvdd

[prokie]

Maybe you can use dash-extensions and the function ServersideOutputTransform. This would allow storing objects without serializing them. Will look into this and come back.

[jonasvdd]

Hey @prokie,
Quick idea: is it possible to create a new UUID per user/session and know which user/session session makes a request? Because then, you can have a graph_dict which looks like:

{ 
   "<user_uuid_str>": {
          "<graph_uuid_str>": FigureResampler(...), 
          ... 
    },
    ...
}

I will give this later some more thought!

[prokie]

Yes that should work aswell.

[prokie]

@jonasvdd Tried using ServersideOutputTransform but the issue is the same. It pickles the FigureResampler object and when I pack it up it is no longer an object but a dictionary. I guess your quick idea is the way to go. It just seems a little "iffy" to store everything in a global variable.

[jonasvdd]

@prokie,
Mhmm interesting, I acknowledge that my proposed solution indeed is a bit "iffy".
Let me know whether you are able to get it working or find a better way to do so!