dcc.Markdown and its devils circle

Im using dcc.Markdown in the context of an app for talking with a chatbot (as many people do).
The problem occurs with many browsers (Chrome, Safari, Firefox).
Im asking the bot to give me nice and complex formulas and I get nicely rendered results in my Chatbot Window. In the inspector I can see, that MathJax did the rendering on the browser side (javascript).
When I have more than one TextArea (because of my dialogue) it seems that rendering formulas starts re-rendering formulas starts re-rendering formulas … and so on => the devils circle.
The inspector of the browser shows continuous re-rendering without touching the browser at all.
As result CPU consumption goes up and after some seconds the App crashes.
The problem occurs completely on the browser side.
I do not add any Javascript Code (e.g. custom.js).
It happens always after approx 20 to 30 formulas in 2-3 TextAreas.
My Code in callbacks.py:
response_html = html.Div(
dcc.Markdown(
“thinking …”,
mathjax=True,
dangerously_allow_html=True, # HTML sicher erlauben
link_target=“_blank”, # Links öffnen in neuem Tab
id={“type”: “markdown-content”, “index”: response_id}, # ID für Update
),
id={“type”: “markdown”, “index”: response_id},
style={
“width”: “100%”,
“borderRadius”: “8px”,
“padding”: “10px”,
“backgroundColor”: “#d9e0f3”, # Color for Chat Output
“border”: “1px solid #ccc”,
“flexShrink”: “0”,
“margin-bottom”: “25px”,
},
)
chat_children.insert(0, response_html)

I have already tried hundreds of variants to avoid this re-rendering … no success.
I think the error is in the react code for dcc.Markdown.
It couldl be helpful to freeze rendering of older text areas or so.

Anyway, I hope someone has an idea :wink:

Cheers, Welf

Hi @welf and welcome to the Dash community :slightly_smiling_face:

Have you tried partial property updates?

Hi AnnMarie,
thank you, yes Im new here and curious … and thanks for your quick answer.
Thank you also for the Link to Dash Patch.
But this does not fit to my problem I think, because I do not need a partial property update.
Im setting the content of dcc.Markdown 1 time only (the answer of the ChatBot).
Then comes my next question “Give me 10 more formulas” and the next answer from the Bot: “here 10 more cool formulas …”
Then I have 2 TextAreas (html.Div) and I do not touch them anymore … but magically they start triggering the re-render process itself, after a while my App is crashing then.
The funny thing: this is so basic, that I can not imagine how anyone could use dcc.Markdown. So I was assuming, that the mistake is somewhere on my side. So I removed all code from my side, all javascript code etc … but the problem ist still there.
In the Inspector of the browser I can see, that the MathJax is continuously triggered and working. But there is no interaction with the browser ;-(

Hi @welf

It’s hard to tell what’s going wrong. Can you make a complete minimal example I can run to replicate the issue? It can just include some sample chat data rather than connecting to the chatbot.

Jep, I see :wink:
I will try to eliminate the problem out of my App into a small demo reproducing the error.
Actually my small app with similar dynamics is running fine, without any error.
So anything in my GUI probably will make the difference …
When I can reproduce it with a smaller example I will come back.
Thank you in advance, cheers, Welf

1 Like