Hello,
I am trying to update the virtual Dom in Dash, to keep it in sync.
I have a clientside callback
clientside_callback(
"""
(msg, id) => {
if (!msg) return dash_clientside.no_update;
console.log(msg);
addToSharedQueue({
type: msg.type,
content: msg.response,
role: msg.role,
date: msg.date,
message_id: msg.message_id
}, id);
return getChildrenArray(id);
}
""",
Output(ids.chat_messages(MATCH), "children", allow_duplicate=True),
Input("server_socket", f"data-{current_app.config['SERVER_RESPONSE_STREAM']}"),
State(ids.chat_messages(MATCH), "id"),
prevent_initial_call=True,
)
The addToSharedQueue will append a message to the chat_messages via javascript.
The issue is now, when I want to clear the container, it wont work. I narrowed it down, that the DOM and virtual DOM are likely out of sync at that this is the issue.
I tried to just return all the children, which I get via JavaScript, in the dash callback. But that throws an error:, I assume its the structure of the children.
dash_mantine_components.v0_14_5m1728409164.js:2 Error: undefined was not found.
at Object.resolve (dash_renderer.v2_18_1m1728409147.min.js:2:70333)
at r.value (dash_renderer.v2_18_1m1728409147.min.js:2:220348)
at r.value (dash_renderer.v2_18_1m1728409147.min.js:2:222603)
at Af (react-dom@18.v2_18_1m1728409147.2.0.min.js:133:101)
at si (react-dom@18.v2_18_1m1728409147.2.0.min.js:132:399)
at Rk (react-dom@18.v2_18_1m1728409147.2.0.min.js:252:71)
at Si (react-dom@18.v2_18_1m1728409147.2.0.min.js:195:185)
at Pk (react-dom@18.v2_18_1m1728409147.2.0.min.js:195:116)
at Nd (react-dom@18.v2_18_1m1728409147.2.0.min.js:194:492)
at Qf (react-dom@18.v2_18_1m1728409147.2.0.min.js:187:439)
What would be the best way to fix this? Thank you