Announcing Dash Enterprise 5.2: Jupyter Notebook compatibility, AI integration, and enhanced developer experience.
May 12, 2023 - 15 min read
Partial Property Updates: Extending Full-Stack Development with Python
Simplicity often comes at the expense of customizability. With Dash, we want there to be an entry point that’s easy to learn and easy to understand. But we also want to deliver solutions that have escape hatches — functionality that allows you to customize behavior on a deeper level progressively. Escape hatches let you start with a simple use case and then fine-tune what you’ve built over time to make it more performant and user-friendly.
Partial Property Updates is a great example of this principle. Partial Property Updates make it easier to change individual aspects of a property of the UI without sending the entire property’s data back and forth across the network. This improves the performance of an application by reducing network payloads and by providing a programming pattern to remove unnecessary computations.
What’s Unique About Partial Property Updates
The Partial Properties Update feature improves the performance of a particular set of common UI interactions, like highlighting part of a chart in a different color to make data stand out, altering what’s shown on the x- or y-axis of a graph, or appending data to a table as new real-time data comes in.
Dash bridges the gap between data analytics and modern web app UIs. Partial Properties Updates enables developers to take their apps to the next level of efficiency and user-friendliness.
A Brief History of Full-Stack Development Frameworks
Building a modern web app requires knowing multiple programming languages or coordinating a team of people who can tackle the different parts of the app. This creates barriers to velocity.
The Next Evolution of Full-Stack Capabilities
Patch is Among Many Escape Hatches
Since Dash was released in 2017, we've released feature after feature that "raises the ceiling" in what's possible within a pure Python data app framework. Other notable features beyond Patch and Partial Properties include:
- Pattern Matching Callbacks - Enabling dynamically created inputs and outputs on a page
- Background Callbacks - Running long-running callbacks in a background job queue
- Caching - Caching callbacks in a shared memory store
- Loading States - Enabling custom loading states while updates are taking place
- Multi-Page Applications and Custom Query Parameters
- Persistence - Saving the values for certain input controls in local storage, session storage, or memory so they can be preset when the user returns to the application
Why Partial Property Updates Matter for Developers and Organizations
At Plotly, we see significant opportunities for organizations that put full-stack data app development into the hands of individual data analysts and data scientists. Building an internal data app in a traditional software stack often requires an expensive team of developers with different specializations (front end, back end, API, DevOps, etc.). Dash allows you to significantly simplify the team requirements for app projects — for example, enabling a single data scientist or data analyst to execute on an app idea for an ad hoc use case.
Using Partial Property Updates in Dash eliminates the gap between what’s possible to build in a traditional full-stack software environment and what’s easy to build in Python with Dash. When more individuals with varying skill sets are empowered to build the data apps their businesses need, they can drive outcomes much quicker than if those development efforts were spread across slow moving teams. Innovation can happen faster and so can data-driven decision-making processes.
from dash import Dash, dcc, html, Input, Output, Patchimport plotly.express as pxapp = Dash(__name__)# Getting our datadf = px.data.gapminder()df = df.loc[df.year == 2002].reset_index()# Creating our figurefig = px.scatter(x=df.lifeExp, y=df.gdpPercap, hover_name=df.country)fig.update_traces(marker=dict(color="blue"))app.layout = html.Div([html.H4("Updating Point Colors"),dcc.Dropdown(id="dropdown", options=df.country.unique(), multi=True),dcc.Graph(id="graph-update-example", figure=fig),])@app.callback(Output("graph-update-example", "figure"), Input("dropdown", "value"), prevent_initial_call=True)def update_markers(countries):country_count = list(df[df.country.isin(countries)].index)patched_figure = Patch()updated_markers = ["red" if i in country_count else "blue" for i in range(len(df) + 1)]patched_figure['data']['marker']['color'] = updated_markersreturn patched_figureapp.run_server(debug=True)
The above example illustrates how to use assignment with the Patch() object. When we define the assignment change — in this case, altering the color of specific points — we tell Dash that we want that part of the chart to be the value in updated_markers. Once the callback returns the Patch() object, Dash assigns the value in updated_markers to ['data']['marker']['color'] in the chart.
If you’re already familiar with Python, the actions you can create with Patch() are similar to common actions you’d build into the backend. In addition to using assignment with the Patch() object, you can also define the following changes:
- Append: Works the same as appending lists in Python. It’s useful for adding to a component's children and adding data to axes on a visualization.
- Prepend: Allows you to add a new value at the beginning of a list. You can use this to add historical data to a chart before more recent data, for example.
- Extend: This also works the same as extending a list in Python and can be used to provide an iterable whose values will be added to the end of the list. You could use it to add rows from a dataframe to a Datatable's data — for example, as a user requests more data to be added to a table.
- Insert: Enables you to add to a list at a specific index.
- Reverse: Makes it possible to reverse data in a list, enabling your users to flip between prioritizing different data in a visualization for better analysis.
- Clear: Lets you remove all items from a list. This comes in handy when users want to show or remove elements of a visualization to increase or decrease the complexity of the data they’re looking at.
- Update: Allows you to merge another dictionary into a property attribute that is a dictionary, enabling you to easily update multiple properties like the style of a Plotly figure.
- Delete: Allows you to provide the option to delete parts of a property's data that matches a specific index. This enables users to delete rows from a table.
- Remove: Similar to Delete(), you can remove parts of a property's data that matches a given value.
Patch() also supports math operations to increment, decrement, multiply, and divide values. Additionally, you can combine Patch() methods and use multiple Patch() objects within a callback. The latter gives you the chance to make adjustments to multiple figures at once.
With Patch() you can address a wide variety of use cases with creative solutions you can tailor as you go. We’re excited for you to try out Partial Property Updates for yourself. Check out our Partial Property Updates documentation for more details about getting started or tune into the on-demand webinar! We also recommend you check out the Plotly forum post on Partial Property Updates to see more examples . We’d love to see how you’re using this new feature, so be sure to join us in the Plotly Community to share what you’re working on.