When building applications with Plotly Dash, it’s not that easy to adhere to Modular Web Design. One common challenge is managing component IDs. Typically, developers define an ID in one place and reference it in another, leading to scattered logic that can be difficult to maintain. Inspired by Dash’s All-in-One Components, I set out to create a more modular approach. This led to the development of dash-basecomponent, a Python package that simplifies component structuring while promoting modular web design.

Motivation

Dash applications often require defining callbacks that link components using IDs. However, managing these IDs manually can quickly become cumbersome, especially in larger projects with nested components. My goal with dash-basecomponent was to:

• Reduce the need for manually tracking component IDs.
• Encapsulate the definition of a component and its ID in the same place.
• Provide a reusable and scalable way to structure Dash applications.

Introducing dash-basecomponent

I developed dash-basecomponent as an abstraction that automates ID generation and makes it easier to reference child components. The key idea is that each component instance carries its own ID, and child components can be referenced dynamically.

The full implementation is available on GitHub and is open-source under the MIT license. You can install it via PyPI:

1

pip3 install dash-basecomponent

Prerequisites:

Before installing dash-basecomponent, ensure you have Plotly Dash installed:

1

pip3 install dash

Implementation of BaseComponent

Below is the implementation of the BaseComponent class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

import uuid, inspect, os
from dash import Output, Input, State, MATCH, ALL, ALLSMALLER

class BaseComponent:
    __id_counter = 0

    def child_id(self, child_name):
        return BaseComponent.__child_id(child_name, parent=self)

    @staticmethod
    def ChildOutput(child_name, attribute, **kwargs):
        return Output(BaseComponent.__child_id(child_name), attribute, **kwargs)

    @staticmethod
    def ChildInput(child_name, attribute, all=False, match=False, allsmaller=False, **kwargs):
        assert sum([all, match, allsmaller]) <= 1, "Only one of all, match, or allsmaller can be True"
        parent = ALL if all else MATCH if match else ALLSMALLER if allsmaller else None
        return Input(BaseComponent.__child_id(child_name, parent=parent), attribute, **kwargs)

    @staticmethod
    def ChildState(child_name, attribute, all=False, match=False, allsmaller=False, **kwargs):
        assert sum([all, match, allsmaller]) <= 1, "Only one of all, match, or allsmaller can be True"
        parent = ALL if all else MATCH if match else ALLSMALLER if allsmaller else None
        return State(BaseComponent.__child_id(child_name, parent=parent), attribute, **kwargs)
    
    def Output(self, attribute, **kwargs):
        return Output(self.id, attribute, **kwargs)

    def Input(self, attribute, **kwargs):
        return Input(self.id, attribute, **kwargs)
    
    def State(self, attribute, **kwargs):
        return State(self.id, attribute, **kwargs)

    @classmethod
    def __new__(cls, *args, **kwargs):
        instance = super().__new__(cls)
        instance.__called_from = BaseComponent.__called_from()
        instance.id = kwargs.get('id', str(BaseComponent.__id_counter))
        BaseComponent.__id_counter += 1
        return instance
    
    @staticmethod
    def __called_from():
        stack = inspect.stack()
        this_file = stack[0].filename
        i = 1
        while i < len(stack) - 1 and stack[i].filename == this_file:
            i += 1
        return os.path.abspath(stack[i].filename).replace('.', '_')
    
    @staticmethod
    def __child_id(child_name, parent=None):
        called_from = BaseComponent.__called_from()
        parent_id = parent if parent in [MATCH, ALL, ALLSMALLER] else (str(parent.id) if parent else MATCH)
        return {'path': str(called_from), 'child': str(child_name), 'id': parent_id}

How It Works

• Automatic ID Assignment: BaseComponent automatically assigns an ID when instantiated, reducing the need for manual tracking. This is assigned in the new function and uses a counter to preserve the order of auto-generated ids when running multiple instances of your app with a load balancer.
• Unique Identifiers: The child_id method generates unique identifiers for child components.
• Interaction Methods: The ChildOutput, ChildInput, and ChildState methods interact with child components’ attributes through callbacks. These are defined in the class, an example is shown below in “Example Usage” section.
• Component Interaction: The Output, Input, and State methods allow interaction with the component’s attributes through callbacks. These callbacks must be defined within the __init__ function.
• Unique Component Paths: The __called_from method ensures that component paths are unique within different scripts, so you can use any IDs for child components without any conflict with other components.
• Pattern Matching Callbacks: The MATCH, ALL, and ALLSMALLER keywords enable pattern-matching callbacks, allowing you to target specific components or groups of components dynamically.
  • MATCH: Targets the component that triggered the callback.
  • ALL: Targets all components that match the pattern.
  • ALLSMALLER: Targets all components with IDs numerically smaller than the one that triggered the callback.

Error Handling:

If a child component ID is referenced in a callback but does not exist, Dash will raise a PreventUpdate exception. You should ensure that child components are correctly defined within the parent component’s __init__ method.

Advantages over Dash’s All-in-One Components:

dash-basecomponent provides a more granular and flexible approach to component modularity compared to Dash’s All-in-One Components. While All-in-One Components are excellent for encapsulating complex UI elements, dash-basecomponent allows for easier management of nested components and dynamic interactions, especially in larger applications. It also allows you to more easily create reusable component libraries, without needing to use javascript.

Potential Component Library Use Cases:

This package is very useful for creating libraries of reusable components like:

• Form input components with consistent styling and validation.
• Data visualization components with interactive controls.
• Navigation components with dynamic menus and breadcrumbs.
• UI components with advanced layouts, like card components.

Example Usage

To demonstrate the power of dash-basecomponent, I created a simple counter application:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

from dash import Dash, html, callback
from dash_basecomponent import BaseComponent as bc

class Counter(html.Div, bc):
    def __init__(self, **kwargs):
        super().__init__([
            html.Button("Increment", id=self.child_id("button")),
            html.Span("0", id=self.child_id("count"), style={"marginLeft": "10px"}),
        ], **kwargs)
    
    @callback(
        bc.ChildOutput("count", "children"),
        bc.ChildInput("button", "n_clicks"),
        prevent_initial_call=True
    )
    def increment_count(n_clicks):
        return str(n_clicks)

app = Dash(__name__)
app.layout = Counter()

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

This example demonstrates:

• A modular counter component.
• Automated ID generation for the button and counter display.
• A self-contained callback for updating the count.

Conclusion

With dash-basecomponent, building modular Dash applications becomes much more manageable. By integrating component definitions and IDs within the same structure, the development process becomes more intuitive and maintainable. I hope this package helps other developers streamline their Dash workflows and build more scalable applications.

Feel free to explore the GitHub repository and contribute! 🚀 Or build other component libraries using this without any need to know JavaScript.