Structure complex multipage app and separate callbacks and components

Dash Python
1

Hey everyone,

I have tried to restructure a large page (home.py 2500 lines) into multiple folders. It was roughly based on the community example to structure large apps. The difference is, that I also separated the components and callbacks in different folders.
Here is the structure (the home.py still exists in the pages folder but is not used in my main.py to import the layout):

xxx_database\
    components\
        inputgroups.py
    pages\
        home\
            callbacks\
                xxx_card\
                    add_xxx.py
                    add_component.py
                    clear_xxx_entry.py
                    measurements_table.py
                    populate_filter_options.py
                    process_parameter.py
                    refresh_xxx_df.py
                    toggle_mixture_table.py
                    __init__.py
                yyy_card\
                    fill_yyy_card.py
                    __init__.py
                zzz_card\
                    add_zzz.py
                    populate_xxxs.py
                    query_kg_xxx.py
                    __init__.py
                switch_tab_content.py
                __init__.py
            components\
                xxx_card\
                    xxx_card.py
                    composition_table.py
                    ids.py
                    xxx_selection.py
                    measurements_table.py
                    __init__.py
                yyy_card\
                    yyy_card.py
                    ids.py
                    __init__.py
                yyy_lookup_card\
                    yyy_lookup_card.py
                    ids.py
                    __init__.py
                zzz_card\
                    ids.py
                    zzz_card.py
                    __init__.py
                zzz_lookup_card\
                    ids.py
                    zzz_lookup_card.py
                    __init__.py
                process_parameter_accordion\
                    ids.py
                    mixer_process_parameter.py
                    processing_equipment.py
                    process_parameter_accordion.py
                    rc_process_buttons.py
                    rc_process_parameter_inputs.py
                    __init__.py
                __init__.py
            service\
                knowledge_graph\
                    knowledge_graph_queries.py
                    __init__.py
                __init__.py
            ids.py
            layout.py
            tabs.py
            __init__.py
        archive.py
        dataview.py
        filterexport.py
        home.py
        similarity.py
        snapshot.py
        __init__.py
    service\
        build_xxx_table.py
        get_collections.py
        xxxs_df.py
        __init__.py
    config.py
    data_schemas.py
    helper.py
    ids.py
    knowledge_graph.py
    main.py
    predict.py
    versioning.py
    __init__.py

I think I am missing the point of where my callbacks connect to my new nested layout and components.

Currently I in my new home folder I have the layout.py:

from dash import html
import dash_bootstrap_components as dbc

from .tabs import tabs_layout

def serve_home_layout():
    layout = html.Div(
        [
            dbc.Row(
                [
                    dbc.Col(
                        [
                            tabs_layout()
                        ]
                    ),
                ]
            ),
        ]
    )
    return layout

tabs.py looks like this:

import dash_bootstrap_components as dbc

from dash import html
from .ids import (
    ID_TAB_CARD,
    ID_TAB_CONTENT_DIV,
    ID_xxx_TAB,
    ID_zzz_TAB,
    ID_yyy_TAB
)


def tabs_layout(): 
    component = dbc.Card(
        [
            dbc.CardHeader(
                dbc.Tabs(
                    [
                        dbc.Tab(label='xxx', tab_id=ID_xxx_TAB),
                        dbc.Tab(label='yyy', tab_id=ID_yyy_TAB),
                        dbc.Tab(label='zzz', tab_id=ID_zzz_TAB),
                    ],
                    id=ID_TAB_CARD,
                    active_tab=ID_xxx_TAB,
                ),
            ),
            html.Div(id=ID_TAB_CONTENT_DIV),
        ]
    )
    return component

In my callbacks folder I have a callback in a file called switch_tab_content.py that listens on the active tab and returns the content:

from dash import Input, Output
from yyy_database import predict
from yyy_database.pages.home.components.xxx_card.xxx_card import xxx_card
from yyy_database.pages.home.components.yyy_card.yyy_card import yyy_card
from yyy_database.pages.home.components.zzz_card.zzz_card import zzz_card
from yyy_database.pages.home.ids import (
    ID_zzz_TAB,
    ID_TAB_CARD,
    ID_yyy_TAB,
    ID_TAB_CONTENT_DIV
)

@predict.app.callback(
    Output(ID_TAB_CONTENT_DIV, 'children'),
    [Input(ID_TAB_CARD, 'active_tab')],
)
def switch_tab_content(at):
    if at == ID_zzz_TAB:
        return zzz_card()
    elif at == ID_yyy_TAB:
        return yyy_card()
    return xxx_card()

Finally in my root main.py I ask for the layout if depending on the path. On the top I import the serve_home_layout() function from the home folder layout.py:

from material_database.pages.home.layout import serve_home_layout
.
.
.

 page_name = wrapperxy.app.strip_relative_path(pathname)
    if not page_name:
        return serve_home_layout(), False, del_btn_style['hidden']
    elif page_name == 'askdf':
.
.
.

Doing it like this only the three tabs are rendered but no content.

I think I have to imoprt the callback somewhere but are not sure where.
Is this strucutre in generall possible, or should I at least group callbacks and components in one file?