Callbacks not being executed using DashProxy when embedding dash app

[jmpaya]

Hi,

We are developing a dash application that needs to be embedded on another web application using the dash-embedded-component from Dash Enterprise.

Also, we are using DashProxy to enable us to use some built-in transforms of this library. We have realised that the callbacks work properly when accessing the app directly through Dash Enterprise, but not when it is embedded into another website.

It looks like there is some incompatibility between DashProxy and Dash Embedded Component. Using the simple example below, the callback is not being called, but changing DashProxy for Dash makes it work. Would you mind helping us with this?

from dash import Dash, html, Input, Output
from dash_extensions.enrich import DashProxy
from dash_embedded import Embeddable

app = DashProxy(__name__, plugins=[Embeddable(origins=[r'^.+dash.tests(:\d+)?'])])
server = app.server  # expose server variable for Procfile

app.layout = html.Div([
    "Press button to execute callback",
    html.Button("Click me!", id="button"),
    html.Div(id="my-div")
])

@app.callback(Output('my-div', 'children'),
              [Input('button', 'n_clicks')])
def update_graph(n_clicks):
    return f"You have clicked the button {n_clicks} times"

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

dash==2.7.1
gunicorn==20.0.4
dash-extensions==0.1.8
dash-embedded==2.0.0

Screenshot of the application and its network calls when callback is working (you can see that an extra request is made):

Screenshot of the application when callback is not working:

[emilhe]

It's probably related to the app initialization being different when using the Embeddable plugin, causing the callback transformation to not being invoked correctly. Unfortunately, I don't have access to Dash Enterprise, so I am not able to help.