Dash all-in-one component (AIO) - why is the nested `Ids` class exposed as `ids`

Dash Python
4

Sure, first lets breakdown some definitions:

  • AIO developer: developer designing the component, creating inputs, callbacks within the component, etc.
  • AIO user: developer creating interactions with the component, needs access to the component ids for triggers and updates.

Now, lets take a look at one designed by @AnnMarieW:

If you look in the code, for the ThemeChanger example you can see that there is a callback like this:

@app.callback(
    Output("graph", "figure"), Input(ThemeChangerAIO.ids.radio("theme"), "value"),
)
def update_graph_theme(theme):
    return px.bar(
        df, x="Fruit", y="Amount", color="City", barmode="group", template=template_from_url(theme)
    )

Now, this above callback could have been written like this:

Input({
            "component": "ThemeChangerAIO",
            "subcomponent": "radio",
            "aio_id": "theme",
        }, "value")

This would have the same effect, but much easier to write as ThemeChangerAIO.ids.radio("theme").

Inside the component itself, these ids are used as inputs and outputs for callbacks as well.

It is also possible, that since you know the ids of the underlying components, the AIO user could design interactions or alterations that the AIO developer didnt have in mind when designing the component.

Hope this helps.