Black Lives Matter. Please consider donating to Black Girls Code today.

Introducing dash_oop_components: write modular, composable, configurable dash code!

Hi everyone,

I decided to take some of the design ideas from my explainerdashboard package and put them in their own library. The result is dash_oop_components.

The goal is to make it easier to write clean, modular, configurable dash code, by wrapping your dash code in object-oriented wrapper classes. (hence the name dash_oop_components).

It includes:

  • DashFigureFactory : a wrapper for your data/plotting functionality.
  • DashComponent : a self-contained, modular, configurable unit that combines a dash layout with dash callbacks.
    • Makes use of a DashFigureFactory for plots or other data output
    • DashComponents are composable, meaning that you can nest them into new composite components.
  • DashApp : Build a dashboard out of DashComponent and run it.

All three wrappers:

  • Automatically store all params to attributes and to a ._stored_params dict
  • Allow you to store its’ config to a .yaml file, including import details, and can then
    be fully reloaded from a config file.

This allows you to:

  • Seperate the data/plotting logic from the dashboard interactions logic, by putting all the plotting functionality inside a DashFigureFactory and all the dashboard layout and callback logic into DashComponents .
  • Build self-contained, configurable, re-usable DashComponents
  • Compose dashboards that consists of multiple DashComponents that each may consists of multiple nested DashComponents , etc.
  • Store all the configuration needed to rebuild and run a particular dashboard to a single configuration .yaml file
  • Parametrize your dashboard so that you (or others) can make change to the dashboard without having to edit the code.

The goal has been to invisibly automate as much of the boilerplate as possible, so hopefully it will be a delight to use! Please check it out!

Install:

pip install dash_oop_components

Github:

https://github.com/oegedijk/dash_oop_components.

Example:

An example dashboard can be found at github.com/oegedijk/dash_oop_demo and has been deployed to https://dash-oop-demo.herokuapp.com/

3 Likes

This is very cool, thanks for packaging this up nicely!

Really nice!

Pretty excited to see how well this will work with pattern matching callbacks to access a DashComponents sub-components all at once.

Another cool thing is because you can keep track of all the subcomponents, you can also
keep track of the state of particular layout elements, store them in the querystring and then
reload that state from the querystring.

So basically what I did here https://github.com/oegedijk/dash_querystrings

But then more user friendly :slight_smile:

Got it to work, but need to clean up the code first.

Added querystring to the library!