đź“Ł Composite Components Draft Proposal - Pt 2

Dash Python
8

I gave a good go at the composite components and I like it :slight_smile:

Two suggestions coming from my messing around with it:

  • I feel like in some cases we will need more levels of nesting in the creation of the component. E.g. in my case I wanted to create a pagination component which has a number of page buttons that will change the page (see below) and the only way I got this to work was to be able to add more keys to the id dictionary
  • It would be great to have something that can be picked up by Intellisense for the ids dictionary, it would pick up typos and allow autocomplete which would greatly simplify dev work.

Here’s the stuff I did with composite component which includes

  • Card component
  • Edit component
  • Delete component
  • Pagination component

brakeace_composite_id

And here’s the tweak I made to create_id_class (basically you can pass a tuple for the instance):

def create_id_class(composite_component_name, subcomponent_names):
    class ids:
        pass

    def create_id_function(name):
        def create_id(instance):
            if isinstance(instance, tuple):
                return {
                    "instance": instance[0],
                    **{f"instance{i + 1}": val for i, val in enumerate(instance[1:])},
                    "component": composite_component_name,
                    "subcomponent": name
                }
            return {
                "instance": instance,
                "component": composite_component_name,
                "subcomponent": name
            }

        return create_id

    for name in subcomponent_names:
        setattr(ids, name, create_id_function(name))

    return ids

Which allowed me to do a callback like this:

    @app.callback(
        [Output(ids.page_store(MATCH), "data"), Output(ids.wrapper(MATCH), "children")],
        [Input(ids.page((MATCH, ALL)), "n_clicks")],
        [State(ids.wrapper(MATCH), "data-n_items")],
    )
    def update_page(...):
4 Likes