Does Dash Patch works with html components?

Dash Python
1

I have a history log coded using a Dash html.Pre with multiple html.Span components, each span is for a history entry. This list is huge and I’m trying to find a way to only partially update (append or prepend) this log when the time is moving forward. Tried Patch but didn’t work.

Does Patch work with normal html components like html.Pre?

2

Hello @uzimaster,

Yes, it should work with any dash component.

3

That’s great! Could you tell me how to use Patch to update an html.Pre’s children property, which is a list of html.Span? I use a callback to output to its children property, but nothing get updated if I use Patch. My code looks like this:

app.layout = html.Div(
	...
	html.Pre(["History log"], id="history-log")
	...
)

@callback(
	Output('history-log', 'children'),
...
)
def on_update_history(...):
	...
	new_entries = [...]
	patched_history_log = Patch()
	patched_history_log.append(new_entries)
	return patched_history_log

...
4

I didn’t think that pre was a list of spans, I always thought it was just text which maintained the formatting and spacing that it is given.

That being said, the list most likely the reason it is not working the way you intend to.

Do you have the code for how you initially populate the info?

If you want to add children, I’d recommend maybe using a div and filling html.Pre as children into it.

5

Please post a MWE demonstrating the issue. That’ll make it easier for people to help :blush:

Looking at your code snippet, I see one potential issue. You seem to be adding a list to a list, in which case you should use an ‘extend’ rather than an ‘append’ operation.

2 Likes
6

Yes, you’re right. I mistakenly added a list to a list. After fixing this, my log updates perfectly.

Thank you very much!

2 Likes