AIO_Components in Flask App with multiple dash apps inside

Dash Python
,
1

Hello

I am writing a bigger app in flask where I have embedded plotly dash apps.
I try to use AIO components inside, but only first instance of the AIO_component is working properly (has working callbacks).

Couldn’t find similar problem, therefore write it here. PLS HELP
dash==2.12.1
flask==2.2.5

How I instanciate the dash Apps inside flask:

server = Flask(__name__)
server.config["SECRET_KEY"] = DASH_HASH
server.config['SESSION_TYPE'] = 'filesystem'
Session(server)

design = Design(server=server, url_path = '/Design/', userName = '#userName', session=session, pageName='Design')

What is this design function?

def Design(server, url_path, userName, session, pageName):
    
    external_stylesheets = [
        dbc.themes.BOOTSTRAP,
    ]
  
    app = dash.Dash(
        server=server,
        url_base_pathname=url_path,
        suppress_callback_exceptions=True,
        external_stylesheets=external_stylesheets,
        title=pageName
    )
    protect_dash_endpoint(server=server, dash_base_path=url_path)

    app.layout = html.Div(children=[
        Example_AIO_compoment
    ])

    @Additional Callbacks in the dash app

    return server

For now I have 2 dash “pages” design and detail.
Once I use Example_AIO_compoment in design, it no longer works in detail.

Do you guys have any idea why?

Greetings, sory if this post is bad
Kamil

Edit:
I did not post packages etc, because in general app is working, design and detail are almost identical (tested on indentical - no luck), but one works the other not.
I don’t get any error frontend nor backend

Examples with MarkdownWithColorAIO:
Design:
image
AIO_components working properly, instanciated the same way

Details:
image
AIO_components callbacks not working at all, instanciated the same way

I analyzed the Dash class link to the class and have no idea why is this happeing.

2

Hi, never tried anything like this, but cant the problem be that you have duplicate IDs?

Reg,J.

3

AIO components have uuid as id by default, also tried passing custom ids. Did not help

4

Alright, I search for alternative solutions and it seems like pages is the way to go. Experimented with github repo and managed to make custom authorization with registered pages. Just need to make sure that the routes dont overlap and it all is working as should. This solution is even better as there is inicial http request so I no longer need to write inicial callbacks. Still 2 more thing to test out inheritance of flask cache and session variables. Thanks anyway for the help