Location>code7788 >text

What's New in Dash 2.18

Popularity:463 ℃/2024-09-05 15:14:23

The sample code for this article has been uploaded to myGithubWarehouse:/CNFeffery/dash-master

Gitee synchronization repository address:/cnfeffery/dash-master

Hello, I'm Mr. Faye. A few hours ago.Dashreleased its2.18.0version, execute the following command for the latest versionDashof the installation:

pip install dash -U

2.18A number of important new features have been added to the release, allowing us to develop theDashApplying the features with more ease, let's get the highlights of it together below 😉:

1 New global/local callback function error handling mechanism

through (a gap)2.18version onwards.DashA new global/local error handling mechanism for callback functions has been added, which allows us to handle errors thrown in the callback function's computation logic more uniformly and conveniently through custom error handling functions.

1.1 Global error handling

be directed againstglobal error handling (GEO), we can write custom functions whoseFirst input parameterreceives each thrown error, and then assigns this function to the()hit the nail on the headon_errorparameter is sufficient.

As a simple example (corresponding to the source code of this article)), in the following code we define the functionhandle_global_error()The system is based on its internalDashThe server side of theset_props(), which will be the same as the one corresponding to each error that occurs in theSources of error triggerserror messagein order tofaccenterGlobal TipThe form is displayed in the web page:

import dash
from dash import html, set_props
import feffery_antd_components as fac
from import Input, Output
from feffery_dash_utils.style_utils import style

def handle_global_error(e):
    # Utilizing the server sideset_props()Throw error messages centrally
    set_props(
        "error-message",
        {
            "children": (
                content="trigid {},error message {}".format(.triggered_id, e),
                type="error",
            )
        },
    )

app = (__name__, on_error=handle_global_error)

The application page content code is as follows, where we define two sets of buttons and corresponding output targets:

 = (
    [
        # Error message uniform update target
        (),
        (
            [
                (
                    [
                        ("Global Error Example 1", ), (
                        (),
                    ]
                ),
                (
                    [
                        ("Global Error Example 2", ), (
                        (),
                    ]
                ),
            ], ,
            direction="vertical",
            style=style(width="100%"), ), ], direction="vertical", style=style(width="100%"), )
        ),
    ), ]
    style=style(padding=100), ]
)

In the callback function section, we have two different "input-output" relationships, one for the number of clicks accumulated on the button and the other for the number of clicks accumulated on the button.nClicksbecause ofeven numberwhen a different error is thrown:

@(
    Output("trigger-global-error-output1", "children"),
    Input("trigger-global-error1", "nClicks"),
    prevent_initial_call=True,
)
def global_error_demo1(nClicks):
    """Sample Callback Functions1"""
    if nClicks % 2 == 0:
        # Trigger Sample Error
        1 / 0

    return f"nClicks: {nClicks}"


@(
    Output("trigger-global-error-output2", "children"),
    Input("trigger-global-error2", "nClicks"),
    prevent_initial_call=True,
)
def global_error_demo2(nClicks):
    """Sample Callback Functions2"""
    if nClicks % 2 == 0:
        # Trigger Sample Error
        raise Exception("This is a customization error")

    return f"nClicks: {nClicks}"

The application operation is demonstrated below, and you can see that all errors are caught by the global error handling function and handled centrally 😉:

1.2 Localized error handling

In contrast to the above describedglobal error handling (GEO)is written differently, when we want the customized error handling functioncustomizedactsomecallback function, you can add a new callback function to the()Assigning a custom function to the same name in theon_errorparameter, we adapt it to the previous example (corresponding to the source code of this article)), additional error handling functions are definedhandle_local_errorand assigned to the corresponding callback function'son_errorparameter, the corresponding code snippet is as follows:

def handle_local_error(e).
    # Use server-side set_props() to throw error messages centrally
    set_props(
        "error-message".
        {
            "children": (
                content="🧐Exception occurred, Exception Message {}".format(e),
                type="error", .
            )
        },
    )


@(
    Output("trigger-global-error-output2", "children"),
    Input("trigger-global-error2", "nClicks"),
    on_error=handle_local_error,
    prevent_initial_call=True, )
)
def global_error_demo2(nClicks).
    """Example Callback Function 2""""
    if nClicks % 2 == 0.
        # Trigger the example error
        raise Exception("This is a custom error.")

    return f "nClicks: {nClicks}"

The effect of applying the operation is as follows, you can see that by settingon_error=handle_local_errorWe have successfully changed the callback functionglobal_error_demo2of the error handling process:

Everyone can be in the dailyDashProper use of this mechanism during app development makes our apps more robust in functionality 😎~

2 Browser-side callback context supplement outputs_list

The new version isBrowser-side callbacksContext objects that can be called in a functionwindow.dash_clientside.callback_contextAdded.outputs_listattribute, which can be obtained in some special scenarios in the calculation logic to assist in the calculation.

As a simple example, below we constructed the group of 10switchgearrespond in singinginput boxThe check of each switch controls the disable state of the corresponding input box, and at the same time, theat mostDisable 3 groups, the operation demonstration effect is as follows:

See the source code in the address at the beginning of the article for the callback logic.with the help of the context of theoutputs_list, enabling more targeted and efficient callback updates.

In addition to this, it is also targeted atDynamic Callback FunctionsAdded new features such as dynamic dependency library loading and fixed several minor issues, for a full description of the update please go to/plotly/dash/releases/tag/v2.18.0


This is what this article is all about, forDashIf you are interested in application development, please feel free to add the micro-signalCNFefferyIf you want to join us, please note "dash learning" to join our technical exchange group, and we will grow together.