Skip to main content
Version: Next

10: Div signal

Functionally equivalent to Example 08: a button-triggered signal that updates a paragraph. The script ships as-is in the repo; conceptually it demonstrates that a signal can target any Dash component, not just stores.

The script​

from dash import html
from dash_extensions.enrich import Output, Trigger
from weaverlet.base import SignalOutput, SignalTrigger, WeaverletComponent, WeaverletApp, Identifier
from weaverlet.components import SignalComponent


class SignalTriggerComponent(WeaverletComponent):

    trigger_button_id = Identifier()
    label_p_id = Identifier()

    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.signal_component = SignalComponent()

    def get_layout(self):
        return html.Div(
            [
                self.signal_component(),  # child component
                html.Button('Click to trigger signal',
                            id=self.trigger_button_id),
                html.P(id=self.label_p_id)
            ]
        )

    def register_callbacks(self, app):

        @app.callback(
            SignalOutput(self.signal_component),
            Trigger(self.trigger_button_id, 'n_clicks')
        )
        def button_click():
            return {}

        @app.callback(
            Output(self.label_p_id, 'children'),
            SignalTrigger(self.signal_component)
        )
        def label_update():
            return 'Signal triggered!'


signal_trigger_component = SignalTriggerComponent()

wapp = WeaverletApp(root_component=signal_trigger_component)
wapp.app.run()

Expected output​

  • Clicking the button updates the paragraph to "Signal triggered!"

Notes​

  • Weaverlet ships a separate DivSignalComponent (a dcc.Store-backed signal whose underlying element is an html.Div instead of a dcc.Store). Use it when you need a signal to also occupy real estate in the layout. E.g. a placeholder div whose children is set by a signal callback.
  • The script as written uses the plain SignalComponent, so the demo is effectively identical to Example 08. Adapt it to use DivSignalComponent when you want a visible-element variant.
  • wapp.app.run() here omits the port= arg. Defaults to 8050.

Try it locally​

pip install weaverlet
python div_signal_trigger_app.py

See also​