nbconvert: Widgets not displaying properly in HTML

I am trying to get widget.output() to display a table so that I can use HBox and VBox on the widget. Currently this code actually does display 2 tables side by side in the notebook:

import pandas as pd
from IPython.display import display
from ipywidgets import HBox, VBox
import ipywidgets as widgets

f = widgets.Output()
with f:
    display(pd.read_csv('Book1.csv'))

display(HBox([f,f]))

screen shot 2018-12-04 at 2 50 24 pm

However, the problem arises when I try to nbconvert the notebook to html which gives me this screen shot 2018-12-04 at 2 51 40 pm

Anyone know what the issue here might be?

The command I am using to convert is: jupyter nbconvert --execute file.ipynb

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 1
Comments: 27 (12 by maintainers)

Most upvoted comments

hello, any updates here? I’ve experienced the same issue as well …

minhhoang1023 on Mar 21, 2022

Ok I’ll need to dig into why that’s happening for altair outputs specifically, might take me a couple days to find time to dig into it though as my free time is pretty limited.

MSeal on Sep 8, 2020

This is now solved in nbclient, which means nbconvert 6.0 alpha has the fix.

MSeal on Jun 11, 2020

Sorry for the delay in getting to this.

So the root problem is that nbconvert never had the ability to parse application/vnd.jupyter.widget-view+json message types, which Output() use for display purposes. Only the widget javascript appears to have that encoded anywhere.

From reading the messages sent from the kernel it appears the widgets are using the comm_id content type to capture outputs associated with a widget output (and skipping rendering to the cell), then using a method -> update call setting the msg_id to an empty string to indicate capture is done.

'content': {'comm_id': 'be6d5eaa0c0345c9bb8cb7c902bc451b',
             'data': {'buffer_paths': [],
                      'method': 'update',
                      'state': {'msg_id': '9412f859-595a00f31a798b3423c847ec'}}},

then

{'buffers': [],
 'content': {'data': {'text/html': ...

then

{'buffers': [],
 'content': {'comm_id': 'be6d5eaa0c0345c9bb8cb7c902bc451b',
             'data': {'buffer_paths': [],
                      'method': 'update',
                      'state': {'msg_id': ''}}},

saving the wdiget outputs so that

content': {'data': {'application/vnd.jupyter.widget-view+json': {'model_id': 'be6d5eaa0c0345c9bb8cb7c902bc451b',
                                                                   'version_major': 2,
                                                                   'version_minor': 0},
                      'text/plain': 'Output()'},

will re-render said output.

MSeal on Jan 26, 2020

I’ll have to look into what the Output widget is doing. It’s possibly it’s relying on there being a javascript engine, or is reusing display ids but I’ll need to spend a little time diagnosing to know for sure.

MSeal on Jan 16, 2020

I am also having this problem. NBConvert 6.5.3

norweeg on Dec 22, 2022

Hello, any update ? I am using the same code as erickfis but to display 2 pandas df. Displays perfectly on the notebook but when converting I get 2 columns displaying the HTML code of the tables. using nbconvert 7.2.6

prtome on Dec 13, 2022

Hello, I have the same issue while using matplot lab. The widget displays in ipython notebook, but while rendering with nbconvert into html, i dont see them there.

from IPython.display import HTML
import ipywidgets as widgets
%matplotlib inline
from IPython.display import display
from IPython.core.interactiveshell import InteractiveShell
InteractiveShell.ast_node_interactivity = "all"
import warnings
warnings.filterwarnings('ignore')
# plot known markers in tab
celltypes = list(marker_genes.keys())
sub_tab=[widgets.Output() for i in range(len(celltypes))]
tab = widgets.Tab(sub_tab)
rcParams['figure.figsize'] = 3, 3
for i in range (len(celltypes)):
    celltype = celltypes[i]
    tot = len(marker_genes[celltype])
    cols = 4
    rows = tot // cols
    rows += tot % cols
    tab.set_title(i, celltype)
    with sub_tab[i]:
        print('\033[1m' + celltype)
        sc.pl.umap(adata_pp, color = marker_genes[celltype], cmap='icefire', ncols=6, size=1,
                   legend_fontsize = 8, legend_fontweight = 1)
display(tab)

It is displays in notebook. Screen Shot 2021-07-27 at 5 45 56 PM While using

os.system('jupyter nbconvert --to html FindingMarker_1.4.ipynb');

I dont see any graphs in html report. It has been quite a task to figure out what’s happening.

preetida on Jul 27, 2021

Yes, this issue was resolved in https://github.com/jupyter/nbclient/issues/24 and nbclient >= 0.4.0 has the fix. NBconvert 6.0 (which should be releasing tomorrow) defaults to using nbclient and the issue overall should disappear. You can try it out on the 6.0.0rc0 release today if you like.

MSeal on Sep 7, 2020