Markdown Formula showing as Non-Rendered text when embedded in interact and shown in voila

[afonit]

Here is what the output looks like, on the left is the formula in jupyterlab, on the right is voila:

The code to reproduce:

from IPython.display import Markdown, display, Math
import ipywidgets as widgets
from ipywidgets import interact

definitions = {
    'A': 'first',
    'B': 'second',
    'C': 'third',
}

definition_1 = f"""
'A': {definitions['A']}
"""

data = {
    1: {
        'Name': 'Some specific name',
        'Description': 'Some detailed description',
        'Formula': """$\\frac{\\text{YTD }\color{orange}{\\text{Metric A}}}
                                        {\\text{YTD }\\color{lightblue}{\\text{Metric B}}}$""",
        'Interactive Plots': None,
        'Definitions': definition_1,
    },
    2: {
        'Name': 'Some specific name',
        'Description': 'Some detailed description',
        'Formula': """$\\frac{a}{b}$""",
        'Interactive Plots': None,
        'Definitions': definition_1,
    }
}

def explorer(item):
    choice = data[item]
    display(Markdown('# ' + choice['Name']))
    display(Markdown('##### Description:'))
    display(Markdown('> ' + choice['Description']))
    display(Markdown('##### Formula:'))
    display(Math(choice['Formula']))
interact(explorer, item=widgets.Dropdown(value=2, options=data.keys()));

Note:
If I just put that formula part into a cell by itself, it renders in voila fine, it is only when it is being shown through the interact in the example I gave above.

For example, a cell by itself:

display(Markdown("""$\\frac{a}{b}$"""))

renders fine in both jupyterlab and voila:

I have been trying a few different combinations (tried from IPython.display import Math and using that)- but I have yet to find a solution/work out why that formula won't render in voila when it is contained in that interact example I have posted above.

Looking for any ideas or troubleshooting steps

[afonit]

After this issue, and some others I have filed in relation to voila and markdown rendering - I think I now have a theory but I am not sure how to troubleshoot.

• The rendering always works fine in jupyterlab
• The rendering sometimes works in voila, but not 100% of the time.

Could this be a timing issue? Does jupyterlab allow more time for markdown to be rendered - but voila has some time limit on when markdown could be rendered?

I am not sure how to go about troubleshooting this, does anyone have ideas?

Here are some possibly related issues:
#796
#640
#824
#568
#516

Here Someone is asking for a pointer of where to look so they could possibly build out a PR to resolve the issue:
#469

[marckassay]

Seems like you narrowed it down to a timing issue. I haven't looked at those links yet, but have you considered leveraging async/await api as a possible solution? See here, #465

[afonit]

@marckassay ,
thanks for the feedback - it does seem to be that the a timing issue with when mathjax is rendered. There seems to be a relevant conversation going on here:
#531

[afonit]

I do have a workaround now,
if I use:

import ipywidgets as widgets
widgets.HTMLMath("""$$=\\frac{a}{b}$$""")

then the interactive examples render the markdown while using voila.

[afonit]

The first example now works with the latest releases.