yaml display using IPython.display.Markdown works JupyterLab but not Voila

[jgunstone]

likely related too:
#873
#166

Description

display markdown yaml works in JupyterLab but not in Voila

Reproduce

from IPython.display import Markdown, clear_output
from ipywidgets import ToggleButton, Output
import json
import yaml

STR_JSON="""{"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}}"""


def _on_change(change):
    with out:
        clear_output()
        if as_yaml.value:
            s = yaml.dump(parsed, indent=2)
            display(Markdown("YAML displays in JupyterLab but not in Voila")) 
            display(Markdown("\n```yaml\n" + s + "\n```")) 
        else:
            s = json.dumps(parsed, indent=2)
            display(Markdown("\n```Python\n" + s + "\n```"))
            
parsed = json.loads(STR_JSON)            
out = Output()
as_yaml = ToggleButton(description='as_yaml?')
as_yaml.observe(_on_change, names='value')
as_yaml.value=True

display(as_yaml)
display(out)

Expected behavior

Expect what happens in JuptyerLab

Context

• voila version = 0.3.5
• Operating System and version: Ubuntu2004
• Browser and version: Chrome

If using JupyterLab

Installed Labextensions

(ipyautoui) jovyan@PORT4028:/mnt/c/engDev/git_mf/ipyautoui$ jupyter labextension list
JupyterLab v3.2.1
/home/jovyan/miniconda3/envs/ipyautoui/share/jupyter/labextensions
        bqplot v0.5.33 enabled OK (python, bqplot)
        jupyter-vuetify v1.8.2 enabled OK
        ipydatagrid v1.1.8 enabled OK
        jupyterlab-plotly v5.1.0 enabled OK
        nbdime-jupyterlab v2.1.1 enabled OK
        ipysheet v0.5.0 enabled OK (python, ipysheet)
        jupyter-vue v1.7.0 enabled OK
        jupyterlab-jupytext v1.3.4 enabled OK (python, jupytext)
        jupyterlab-unfold v0.2.2 enabled OK (python, jupyterlab-unfold)
        @jupyter-widgets/jupyterlab-manager v3.0.0 enabled OK (python, jupyterlab_widgets)
        @voila-dashboards/jupyterlab-preview v2.1.0 enabled OK (python, voila)
        @jupyterlab/git v0.37.1 enabled OK (python, jupyterlab-git)
Other labextensions (built into JupyterLab)

app dir: /home/jovyan/miniconda3/envs/ipyautoui/share/jupyter/lab

[martinRenou]

You cannot display new outputs in Voila, you'll need to embed your Markdown in an output widget for this to work, see similar issue #1145

[jgunstone]

i'm not sure that was the issue...

i tried the below, i.e. loading all the markdown into Output widgets initially, which still didn't work:

(i may have misunderstood your point here?)

from IPython.display import Markdown, clear_output
from ipywidgets import ToggleButton, Output
import json
import yaml

STR_JSON="""{"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}}"""

PARSED = json.loads(STR_JSON)  
OUT1 = Output()

with OUT1:
    s = yaml.dump(PARSED, indent=2)
    display(Markdown("YAML displays in JupyterLab but not in Voila")) 
    display(Markdown("\n```yaml\n" + s + "\n```")) 

    
OUT2 = Output()
with OUT2:
    s = json.dumps(PARSED, indent=2)
    display(Markdown("\n```Python\n" + s + "\n```"))

def _on_change(change):
    with out:
        clear_output()
        if as_yaml.value:
            display(OUT1)
        else:
            display(OUT2)
            
            
out = Output()
as_yaml = ToggleButton(description='as_yaml?')
as_yaml.observe(_on_change, names='value')
as_yaml.value=True

display(as_yaml)
display(out)

in the end I just used the rich console rather the IPython display system, which worked in both JupyterLab and Voila:

from IPython.display import  clear_output #Markdown,
from ipywidgets import ToggleButton, Output
import json
import yaml

from rich.console import Console, COLOR_SYSTEMS
from rich.markdown import Markdown


STR_JSON="""{"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}}"""

PARSED = json.loads(STR_JSON)  
OUT1 = Output()

with OUT1:
    s = yaml.dump(PARSED, indent=2)
    display(Markdown("YAML displays in JupyterLab and Voila using the rich console")) 
    console = Console(style="white")
    console.print(Markdown("\n```yaml\n" + s + "\n```"))
    

    
OUT2 = Output()
with OUT2:
    s = json.dumps(PARSED, indent=2)
    display(Markdown("\n```Python\n" + s + "\n```"))

def _on_change(change):
    with out:
        clear_output()
        if as_yaml.value:
            display(OUT1)
        else:
            display(OUT2)
            
            
out = Output()
as_yaml = ToggleButton(description='as_yaml?')
as_yaml.observe(_on_change, names='value')
as_yaml.value=True

display(as_yaml)
display(out)

[martinRenou]

Sorry I read a bit fast your initial issue. There might be something else here that I missed. I'll have a deeper look.

[jgunstone]

this is the javascript console

[martinRenou]

Would you be able to try with Voila v0.5.0a4? That may just work 🤞🏽

[jgunstone]

hey -
I just double checked this in v0.5.0a5

if now renders, but doesn't apply any of the text styling (to yaml or json)

i.e.

[martinRenou]

This should be fixed by #1353