📣 Introducing Dash Labs (Dash 2.0 preview)

[jmmease]

Dash 2.0 is now available! Dash 2.0 Prerelease Candidate Available!
(Edit September 3 2021)

---

Hi Everyone!

Today, I’m happy to introduce a new project we’ve been working on to extend what’s possible with Dash, and to make it easier than ever to get started making an app.

The project is called Dash Labs. Before taking a tour of some of the new features we’re working on, I want to make clear that nothing here is set in stone yet. We would love for you all to play with it (installation instructions below), and give us your feedback.

For context, our plan is to take the successful ideas from this project, stabilize them, and incorporate them into Dash 2 later this year.

Design Goals

Dash Labs began with several interdependent design goals:

• Provide a more concise syntax for generating simple Dash apps that follow a variety of nice looking, predefined templates.
• Make it even simpler to turn Python scripts by data scientists into apps for business end users.
• Ensure that there is a smooth continuum between concision, and the flexibility and power of “full Dash”. The concise syntax should not be a dead-end, requiring a user to rewrite the app in order to reach a certain level of sophistication.
• Make it possible for third-party developers to make and distribute their own custom templates.
• Improve the ability of users to encapsulate and reuse custom interactive component workflows, and make it possible for third-party developers to distribute these as component plugins.
• Ensure deployment and hyperscalability of Dash apps on Dash Enterprise is seamless.

Installation and GitHub repo

To try out what we have so far, install the dash-labs package using pip

$ pip install dash-labs==0.2.0

The GitHub repo for Dash Labs is at GitHub - plotly/dash-labs.

Documentation and Feature Overview

The documentation for Dash Labs currently consists of a series of markdown documents in the docs/ directory of the repo.

Here’s a quick tour of the documentation sections.

01-Overview.md

This section includes a quick discussion of the motivations behind Dash Labs, more thorough installation instructions, and a description of how to activate the Dash Labs functionality using the FlexibleCallback Dash plugin.

02-CallbackEnhancements.md

This section describes several core enhancements to @app.callback that are provided by Dash Labs. Callback enhancements include:

• Support for callback functions that accept named keyword arguments instead of positional arguments.
• Support for grouping multiple input or output property values into dictionaries and tuples.
• Support for providing a component instance instead of a component id when defining a callback.

We believe these enhancements will all be useful on their own, but they are also foundational to the Template and Component Plugin features described below.

03-TemplateLayoutSystem.md

The new template layout system makes it possible to create an app by adding components to a template. Templates can be used on their own, but they really shine when combined with the new @app.callback functionality.

Together, they enable a workflow that is reminiscent of the classic ipywidgets @interact decorator.

Here’s a full example:

import dash_labs as dl
import dash
import numpy as np
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import plotly.express as px

app = dash.Dash(__name__, plugins=[dl.plugins.FlexibleCallbacks()])
tpl = dl.templates.dbc.DbcSidebar(app, title="Sample App")

@app.callback(
    args=dict(
        fun=tpl.dropdown_input(["sin", "cos", "exp"], label="Function"),
        figure_title=tpl.textbox_input("Initial Title", label="Figure Title"),
        phase=tpl.slider_input(1, 10, label="Phase"),
        amplitude=tpl.slider_input(1, 10, value=3, label="Amplitude"),
    ),
    template=tpl,
)
def greet(fun, figure_title, phase, amplitude):
    xs = np.linspace(-10, 10, 100)
    return dcc.Graph(
        figure=px.line(x=xs, y=getattr(np, fun)(xs + phase) * amplitude).update_layout(
            title_text=figure_title
        )
    )

app.layout = dbc.Container(fluid=True, children=tpl.children)

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

04-PredefinedTemplates.md

Dash Labs includes a bunch of examples of the kind of custom templates that are possible now. Most of them are built on dash-bootstrap-components or dash-design-kit

Both the Dash Bootstrap and Dash Design Kit templates support styling plotly figures to match the overall app theme.

Here are a few examples

Dash Bootstrap Templates

Dash Design Kit Templates

If you’re interested, please take a look at the design of these templates, and try your hand at creating your own!

05-ComponentPlugingPattern.md

This section includes a proposed architecture that can be used to encapsulate component construction and callback logic into a self contained class instance. We’re calling these Component Plugins.

One concrete example that we’re pretty excited about is the DataTablePlugin. This component plugin makes it possible to create and use a Dash DataTable instance that performs serverside sorting, paging, and filtering without specifying any of the callback logic manually. (See Python-Driven Filtering, Paging, Sorting | Dash for Python Documentation | Plotly for an overview of the callback logic that’s currently required to enable these features).

In addition to the DataTablePlugin, there are a couple other examples discussed in the documentation. We think this design pattern opens up a lot of exciting opportunities to encapsulate and share advanced Dash workflows, so we’re really interested in your feedback on the approach.

Dash Enterprise

10% of the Fortune 500 uses Dash Enterprise to bring Python analytics to their business users. We’ve worked closely with these customers to ensure Dash Labs (and eventually Dash 2.0) will delivery ever increasing value:

• Job queues will be introduced in future iterations of Dash Labs, allowing seamleses execution of long-runnning Python tasks triggered by Dash callbacks. Dash apps with job queues can then be deployed to Dash Enterprise’s multi-node Kubernetes cluster, ensuring that they scale to 10s, 100s, or 1000s of business end users.
• Dash Labs Templates integrate seamlessly with Design Kit for pixel-perfect, mobile-ready, on-brand Dash app aethstetic.
• The AI App Catologue will begin shipping with Dash Labs examples, allowing creating of ML & AI Dash apps for business end users in even fewer lines of code.

Call for feedback

As I mentioned, we would really appreciate any feedback you have on the functionality of Dash Labs. Here are few things to think about:

• If you’re a relatively new Dash user, do you think it would have been easier to get started using the template system?
• If you’re an experienced Dash user, do you think it would be helpful to be able to build your own templates and/or component plugins to share with other Dash users? Do the proposed designs of these systems make sense?

Feel free to share general thoughts in this thread, or to open GitHub issues if you run into bugs or would like to discuss particular features in more detail.

Thanks!

Finally, I just want to take the opportunity to thank everyone reading this for being a valuable member of the Dash community. We’re continually inspired by the things you all make with Dash, and we’re thankful for how you’ve made this such a welcoming community.

With your help, we’re committed to continually pushing Dash forward!

Edits

• 2021-05-14: Updated example to version the version 0.2.0 API

[AnnMarieW]

Wow - This is so cool!

If you want to take the templates for a test drive, check out this Theme Explorer site:
HelloDash

You can see the 6 different open source templates and how they look with different Bootstrap themes.

I’m unfamiliar with the “classic ipywidgets @interact decorator”, so I found that new callback syntax a little confusing at first - but I see the advantages. I’m looking forward to using that more. However, to get started, I found it much easier to use the first three examples in chapter 3 The template layout system. I think it’s much easier to relate to if you are familiar with the current version of Dash.

These templates are going to save a lot of coding time and are a great way to make really nice looking apps!

---

---

[curveball]

Very cool! I’m looking forward to more community templates. Is there a plan on how to share/discover templates?

Also, I didn’t know about plugins or Dash 2. Can I find more information about this somewhere?

[jmmease]

Hi @curveball.

Community templates can be packages as regular python packages and published to PyPI. We don’t have any specific plans yet for how to help people share and discover them, but for now the “Show & Tell” tag would be a great place to share and discuss them!

This post and the documentation linked above represent our current thinking of what we’d like to be in Dash 2, so there isn’t really any additional info out there yet.

Thanks for taking look!
-Jon

[adamschroeder]

Thank you for developing this. I’m sure it was months of hard work.

I think the CallbackEnhancements is a powerful development, as it enriches the Callback toolbox, making it easier and quicker to write the callback, with fewer limitations tied to Input/Output location and IDs.

As for the new TemplateLayoutSystem, I don’t think I would use it, for several reasons:

1. I have more control over the layout by using dbc.Row and dbc.Col instead of a pre-made template.
2. It might be fairly quick and easy to use a pre-made template and create a simple dashboard with a few components, but once there is a need for additional Dash Core components or a desire to customize the layout, it becomes increasingly challenging.
3. Adding components to a layout template with before, after, and the role arguments is less intuitive for me than putting them inside an app layout with dbc.row and dbc.col and letting the callback manage those roles.

Using the Template Layout might allow one to create an app with less code, but learning how to use the TemplateLayoutSystem was more difficult (for me) than learning Dash 1 app.layout - html.Div([...]).

In addition, I don’t think the TemplateLayoutSystem is conveniently scalable, compared to other Plotly products. Take for example, Plotly Express. PX is incredibly powerful because it offers Plotly users a framework to build many powerful graphs, with little code, bypassing the steep learning curve of Graph Object. And, when the user needs more graph customization and is ready to take advantage of all that Plotly has to offer, they can access Graph Object through fig.update_traces() or fig.update_layout(), etc.

This is not the case with the new Template Layout System. For one, I’m not completely sure the learning curve is less steep than the one for dash bootstrap for managing the app’s layout. Second, the user might build a very quick app with the template and its component constructs. But as soon as the user needs more control over the layout or component features offered by Dash, I think they are likely to drop the template layout system in favor of Dash Bootstrap as well as drop the component constructs in favor of Dash Core Components (at least, that’s what happened to me).

Once again, I appreciate all the work that has been put into this, and I think TemplateLayoutSystem is promising. Thank you.

p.s. if indeed the templateLayoutSystem could be a building block for larger and more complex apps, then, I would recommend further developing the documentation to make that clearer. When ready, I can create more tutorials on Youtube to help explain this as well.

[jmmease]

Hi @adamschroeder,

Thanks a lot for taking the time to try things out and writing up this great feedback. Glad to hear that the callback enhancements make sense to you.

The goal of this set of additions is to create something analogous to Plotly Express for Dash. Making it faster to get started with common use cases, but still providing a path to full customization. So it’s helpful to hear that it doesn’t quite hit the mark for you.

From your point of view as both a user and teacher of Dash, do you see a need for a more concise workflow for creating these kinds of simple apps? Or does the Dash 1 + Dash Bootstrap workflow already strike a good balance in your opinion?

Similarly, do you see a need in the Dash ecosystem to better encapsulate components and Python logic (like the serverside logic for DataTable)? Or does this not seem like a pressing need?

Obviously, the current template system and component plugin pattern aren’t the only strategies we could use to improve these areas. But it would be helpful to understand whether they seem to you like challenges worth tackling in the first place.

Thanks!

-Jon

[DaveG]

Posting this for a friend … Wanted to capture his raw feedback. “The templates look promising but feel a bit complicated/ components are hidden. Digging the new input/ output structure.”

[klalli]

Thanks, Dave! Here a the screenshot of the app I was able to turn over pretty quickly from the DbcSidebar example. What I’m not as clear on is:

• How would I actually start re-working the layout of one of the template examples? E.g., I like the multi-tab example, but would need to change the content for each tab.
• If a component constructor isn’t implemented yet in a template, this seems above my head to try and implement. Can I still drop in dcc components somehow, if I’m using the template framework?
• In general, what’s the right way to think about using templates modularly? E.g., this is the first of a number of basic calculators I’ll need to make and want individual visualization on. Long-term, these will be stitched together in various fashions depending on the use case. So… a way to manage complexity of multi-tab apps and modular layouts sounds great if the learning curve isn’t too steep!

Having fun playing around with the HelloDash explorer and think this will help with the “learn by doing” approach I’ve had fun with so far. Cheers,

Kevin

[adamschroeder]

Hi All,
I created this video tutorial to help explain some of the concepts within Dash Labs and to encourage more feedback on the topic so we can create a powerful Dash 2.0 that fits the needs of the community.

Link to video.

Do you understand the TemplateLayout system after watching the video?

• 1 = NO
• 2 = Getting there
• 3 = YES

---

Do you understand the Callback Enhacements after watching the video?

• 1 = No
• 2 = Getting there
• 3 = YES

---

If you’re a relatively new Dash user, do you think it would have been easier to get started using this new template system?

• 1 = No
• 2 = Maybe
• 3 = YES
• 4 = Not sure

---

If you’re an experienced Dash user, do you think it would be helpful to be able to build your own templates and/or component plugins to share with other Dash users?

• 1 = No
• 2 = Maybe
• 3 = YES
• 4 = Not sure

---

A. TemplateLayout system: feedback and suggestions?
I would suggest to add a couple more built-in templates that we can choose from.

Feedback from Nana Okyere: “I think it is harder to scale if you use a predefined templates. The enhanced callbacks are a welcome additions. I like the flexibility.”

B. Callback Enhancements: feedback and suggestions?
I loved the callback enhancements but when I first read over them I was a little bit confused with the “role” attribute. It could be assigned other strings beside “input” and “output” but what are those strings? Are they only the references to DBCSidebarTabs? What else can be assigned to role?

Feedback from Nana Okyere: “The enhanced callbacks are a welcome additions. I like the flexibility.”

[Eduardo]

Hi.

I’m not a programmer, last year I started learning Dash because it allows to build interesting web pages just knowing a little bit of Python.

Following the Dash documentation it was very easy to understand the logic of the layout and the callbacks. In a few months I was building interesting things.

I really think that Dash is an amazing tool also because it allows to scale from simple components to a very detailed integrated web pages, adding css and also it is possible to add javascript code if needed.

Now with all this experience I started to try Dash Labs, I saw the interesting video that Adam made and then I read (not deeply) the documentation presented here.

My first conclusion is that learning to use Dash Labs is much more complicated that learning Dash, also having some experience using Dash. I can’t imagine someone that do not have any previous experience.

I do not well understand the new layout, how to bild complicated web applications and control each part of the page and components sizes.

In my modest knowledge I can do anything with Dash and I do not understand what benefits I will have using Dash Labs. I can imagine that this could be usefull for experienced programers to add new components but in a first quick look I can’t see why.

Perhaps the way that the Dash Labs is introduced is confused (at least for me) and there is some adventage that now I can’t see, but for now I hope Dash 2.0 do not force to go to Dash Labs because I’m very confortable with the current version.

[adamschroeder]

Hi @jmmease,
I don’t see a need in the Dash ecosystem to better encapsulate components and Python logic. But this question would be better answered by Dash super-users. They might really appreciate the component plug-ins. I teach beginner to intermediate Dash on Youtube, which is why I don’t see a need yet.

As for your first question, I think the Dash 1 + Dash Bootstrap workflow strikes a good balance for creating apps. Nonetheless, I really liked the ease and quickness of creating an app with the template layouts system. The main concern I had there is how to reach a path with full customization. Say for example that I reach a point where I want to control the location on the page of my Input components. How would I do that with the template layout system? If I have to go back to using Dash 1 + DBC, then the template layout system - for me - is no longer a building block for bigger, more complex apps.

Right now, I seem to understand how to control the layout location of the Output components with the template layout system, but I"m not sure how to control the Inputs location if that’s something I’d like to do.

[hhoeflin]

I only have limited experience in this space, but I think one gap is the wrapping of react-components that have functional properties. If these could be exposed and targeted via custom javascript functions (possibly written in python and translated via transcrypt) this could be a really powerful way to get a lot more great react-components easily wrapped for dash. the dash-extensions package has gone some steps in this direction, would be great to see first class support.

[hhoeflin]

on the component properties, I wonder how callbacks would be embedded in the components (e.g. when I create a new component out of 2 other components and they need callback logic to connect them. Furthermore, the current components at least at first glance seem to be restricted, not giving me easy access to sub-components when needed.

I really like the template concept - but I think the templaces should be extended by including the callbacks in them. For me, the current pattern of defining callbacks with decorators is a big drawback as it makes building re-usable components hard - it assumes the “app” component is available. Instead, the template should carry the callbacks, and only when the template is connected to the “app”, the callbacks should be registered as well. (e.g. a little like blueprints in flask).

[jmmease]

Thanks a lot for the feedback everyone! I’m out of office this week, but when I’m back I’ll try to make some more examples that address some of the main questions here about templates. Like how to customize them, and how to use them as smaller parts of larger apps.
Thanks!
-Jon

[atharvakatre]

I agree with what @Eduardo said, the traditional layout building with rows and columns provided much more flexibility on the front-end.
Not sure how much flexibility the new TemplateLayout system will provide, but from @adamschroeder video it seems to be helpful and time saving for developing small apps.
The new callbacks is a great addition imo, grouping the inputs in a tuple is way better than the previous method of defining each input on a separate line.

[cepel]

Thank you for the new enhancements! The idea of making possible to create and publish custom templates is my favourite.

Even I think the Dash 1.X is very easy to understand, I believe that companies tend to use Dash for its flexibility instead easy implementation. However, there are many students and individuals develop Dash applications for prototyping or PoC’s, and (an optional) simpler syntax will be helpful for them.

From my perspective, automatically ID assignment in Callbacks has a great potential for implementing the visualizations, at least in the first versions of the application.

I don’t think that I will use the new PredefinedTemplates too, because I always leave the door open for future enhancements of my applications, and Dash 1.X seems more flexible.

I appreciate your effort of making possible to develop powerful applications for everyone. I hope the syntax will be simpler in the future versions of Dash Labs. Because the learning curve seems same for me.

[adamschroeder]

Adding Feedback from another member, Eugene T.
It’s heartening to know that there’re updating to improve dashboard layout, it was always such a chore to nest html.Divs / dbc.Rows / dbc.Columns etc.

[hhoeflin]

I agree with you about these concerns. For the issue is the distinction between templates and components at all. They are highly related (in the sense that a template is a component that takes children components) and so could be composable in their own right if the power of components was increased (e.g. to include callbacks). The a sidebar-template would just be a component that could be nested in other components (e.g. in a template with a header on the site).