3.0 RC3 changes. #3175
3.0 RC3 changes. #3175
Conversation
T4rk1n
requested review from
alexcjohnson,
ndrezn,
gvwilson and
emilykl
as code owners
|
Should the ExternalWrapper also account for pattern-matching ids? Or is this something the dev should account for? |
Yes, should be working now 🙂 |
| ExternalComponent( | ||
| id="ext", | ||
| input_id="external", | ||
| text="external", | ||
| extra_component={ | ||
| "type": "Div", | ||
| "namespace": "dash_html_components", | ||
| "props": { | ||
| "id": "extra", | ||
| "children": [ | ||
| html.Div("extra children", id={"type": "extra", "index": 1}) | ||
| ], | ||
| }, | ||
| }, | ||
| ), | ||
| html.Div(html.Div(id={"type": "output", "index": 1}), id="out"), |
There was a problem hiding this comment.
Couldnt this be rewritten as:
extra_component = html.Div(html.Div('extra_children', id={'index':1, 'type': 'extra'}),id='extra')
Or was this to test the different ways this could be listed?
There was a problem hiding this comment.
Yes, it can they get serialized on the backend, there is the two ways tested here with the children as a div.
| addComponentToLayout({ | ||
| component: { | ||
| type: componentType, | ||
| namespace: componentNamespace, | ||
| props: {} | ||
| props: props | ||
| }, |
There was a problem hiding this comment.
Why does this unpack in a different way than the standard dash components?
For ease of use, would it be easier to just pass a regular dash component {type, namespace, props} directly here?
There was a problem hiding this comment.
I prefixed those type and namespace with component in the ExternalWrapper props to be able to use type in the ...props since that is a common prop name.
There was a problem hiding this comment.
But, doesnt Dash deal with this by putting those into props and passing the whole object to it? Its not normal to break apart the props in the way that the ExternalWrapper is accepting it.
eg. Just the way it is above. Its creating the props object by the leftover props by default.
There was a problem hiding this comment.
Hey guys! Sorry for the off topic question to your conversation - but would it be possible use the ExternalWrapper in a clientside callback too?
There was a problem hiding this comment.
Hey guys! Sorry for the off topic question to your conversation - but would it be possible use the ExternalWrapper in a clientside callback too?
Yes it is, but this would only be used if you were adding the component to something else. If you are returning a component to a children prop, you just need to pass the namespace, type and props.
The ExternalWrapper is for components needing to be displayed by the dash renderer that are not within the children prop or in the tree at all but want to trigger callbacks or satisfy the other things that dash components rely on.
There was a problem hiding this comment.
Okay nice, thats the exact behaviour i was looking for - a set_props functionality on the client side. I want to use dash-extensions Server Sent event to stream components to the frontend. The SSE component would get a component id and its layout (to json converted Dash component) and a client side callback should add the components based on the component id in the message.
Thank you for the response, very helpful!
There was a problem hiding this comment.
Ohh forget it haha just found out that there is set_props on the client side. Thanks
There was a problem hiding this comment.
set_props on the clientside was first. ;)
There was a problem hiding this comment.
Touchè ! hahaha No idea why I didn't know it
| def test_hook010_hook_custom_data(hook_cleanup, dash_duo): | ||
| @hooks.custom_data("custom") | ||
| def custom_data(_): | ||
| return "custom-data" | ||
|
|
||
| app = Dash() | ||
| app.layout = [html.Button("insert", id="btn"), html.Div(id="output")] | ||
|
|
||
| @app.callback( | ||
| Output("output", "children"), | ||
| Input("btn", "n_clicks"), | ||
| prevent_initial_call=True, | ||
| ) | ||
| def cb(_): | ||
| return ctx.custom_data.custom | ||
|
|
||
| dash_duo.start_server(app) | ||
| dash_duo.wait_for_element("#btn").click() | ||
| dash_duo.wait_for_text_to_equal("#output", "custom-data") |
|
woo hoo! |
run_serverandlong_callback