Do any open source Python wrappers exist for dash?

Dash Python
1

I notice that with Dash it’s quite easily to create apps where the number of lines and code required to build something grows pretty heavily and bloats the file up.

One solution I thought of this was creating a python wrapper for any dash component (such as a div or table or chart_ and turning it into a class by itself which inherits from the dash core component. e.g. turning dcc.div into

class Div(dcc.div):
     ...

with the styles preset but able to be overridden, and then importing into the app.py like:

from ../../.. import Div
...
app.layout=Div(id='div',....)

Does anyone have any thoughts on this idea? Has it been done before and can anybody point me to the code?

(n.b not sure if wrapper is the best way to refer to this but couldn’t think of another term…)

1 Like
2

I’ve done this quite often,but I don’t think it’s a matter of finding wrappers. It’s more a set of best practices. One of the trickiest things I’ve found is if you want to expose dependencies within your class to be used in a callback, especially if you need access to more than one component in your class. The new pattern matching callbacks make this a little easier, but you can not in python write your own “component” and have it behave exactly like a regular dash component.

3

Look into Dash Core Components | Dash for Python Documentation | Plotly, Dash HTML Components | Dash for Python Documentation | Plotly, and lastly the even more awesome https://dash-bootstrap-components.opensource.faculty.ai/. All native Python, all support heavy customization of Dash ecosystem. Each have examples and reference implementations to get you started.

4

Creating a Python wrapper for Dash components to encapsulate styles and provide customization options is a valid approach to reduce code repetition and improve code organization in Dash applications. While I’m not aware of a specific implementation that does exactly what you described, the concept aligns with the principles of object-oriented programming and can be a beneficial practice.

By subclassing the Dash core components and setting default styles or behaviors in your custom wrapper classes, you can create reusable components with preconfigured properties. This can help simplify the code required to define and customize the components throughout your application.

Here’s an example implementation of your Div wrapper class based on your description:

import dash_core_components as dcc

class Div(dcc.Div):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.style = {
            'padding': '10px',
            'border': '1px solid #ccc',
            'background-color': '#f5f5f5',
            # Additional default styles
        }

        # Override default styles with any provided styles
        if 'style' in kwargs:
            self.style.update(kwargs['style'])

With this wrapper class, you can instantiate the Div component with the default styles while still being able to override them when necessary. Here’s an example usage in your app.py:

from your_module import Div

app.layout = Div(
    id='div',
    children=[
        # Content of the div
    ],
    style={
        'padding': '20px',
        'border-color': 'red',
        # Override default styles
    }
)

This approach can help you create a more structured and modular codebase, reducing code duplication and improving reusability. You can extend this idea to other Dash components as well, based on your specific needs.

Remember to consider the potential trade-offs, such as the added complexity and maintenance overhead of managing custom wrappers. It’s also worth noting that while this approach can improve code organization and readability, it may not necessarily reduce the overall size of your application code.

I hope this explanation helps you implement your custom wrapper classes for Dash components!