Jupyter notebook --> Html using nbconvert, not showing the tables in the HTML after a while

Dash Python
1

I write some codes with plotly and Dash in a Jupiter notebook, and then use nbconvert to convert the notebook to a HTML file. Some figures and tables were plotted with plotly only, and some more interactive tables and figures were plotted with Dash.

When I open the html file with any browser (chrome and firefox), it works fine and is able to show all figures.

However, after a while (for how long I don’t know, maybe a few hours), I try to open it again and it is not able to show the figures plotted with Dash, The figures plotted with plotly only (no Dash) were still able to show.

The following are my simplified codes:

from dash import Dash, html, dcc, Input, Output
import pandas as pd
import plotly.express as px
import plotly.graph_objects as go
import plotly.offline as pyo
import os
from jupyter_dash import JupyterDash
from dash import dash_table
pyo.init_notebook_mode(connected=False)
import plotly.io as pio
pio.renderers.default = "notebook"

file = 'test.csv'
data = pd.read_csv(file)

app = JupyterDash()
app.layout = html.Div(
    [
        dash_table.DataTable(
            id='table-multicol-sorting',
            columns=[{"name": i, "id": i} for i in sorted(data.columns)],
            data=data.to_dict('records'),
            page_size=25,
            sort_action='native',
        ),
    ]
)

app.scripts.config.serve_locally = True
app.css.config.serve_locally = True

if __name__ == '__main__':
    app.run_server(debug=False, port=3456, mode='inline')

When I ran nbconvert, I used the following command (I did install nb_offline_convert)

jupyter nbconvert --to html-offline --OfflineHTMLExporter.mathjax_option=TeX-MML-AM_CHTML,Safe test_dash.ipynb

The table in the HTML file shows after I generate the HTML file, but after a while (probably a few hours or a day) when I open the HTML file again, the table does not show. The error says “127.0.0.1 refused to connect”. It is very weird. It seems it is looking for a server.

So, I did another test. The HTML file was copied to another computer right after it was generated, and it could show the table without any problem.

If I turn off my internet, the table won’t show. After I turn on my internet, the table shows again, after I refresh the browser (I tested within one hour after the HTML was generated).

I also used Dash(), instead of JupyterDash(). It is still the same.

I can not image why it is so. Any help would be greatly appreciated.

2

Hey gese,

Unfortunately it is little bit hard to reproduce your problem…

However, two solutions that comes to my mind initially are;

  1. Trying to replace your default renderer (pio.renderers.default = “notebook” to “plotly_mimetype+notebook”)
  2. Exxporting your Jupyter notebook as html directly from the Jupyter notebook interface:
    file → download as-> HTML

I hope these would help you to solve your problem.

Cheers!

3

Berbere,

Thank you so much for your suggestions.

I have tried both. Neither worked. It seems there is no way to make Dash based webpage a standalone HTML file.

I am thinking of switching from Dash to ipywidgets. I am not sure if this would work. Any suggestions?

4

It seems ipywidgets components can not be converted to HTML file.

I wonder if there is any good tool available that can convert jupyter notebook to HTML, while keeping the interactive features in the standalone HTML (able to view and run even without the internet)?

Any help would be appreciated!

5

Hey gese,

it seems possible to me if I did not understand your problem wrongly. What was the error/problem when you tried to export your Jupyter notebook file as HTML?

I tried to reproduce your problem with the exact same settings on your example and seems to work for me.

I guess, I also need to indicate that I managed to preview it offline on Safari browser. Have no clue about how it would perform on other browsers.

Here is my example with your settings that I run on a Jupyter notebook:

from dash import Dash, html, dcc, Input, Output
import pandas as pd
import plotly.express as px
import plotly.offline as pyo
from jupyter_dash import JupyterDash
from dash import dash_table
import plotly.io as pio

pio.renderers.default = "notebook"
pyo.init_notebook_mode(connected=False)

# Incorporate data
file = 'https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv'
df = pd.read_csv(file)

# Initialize the app
app = JupyterDash()

# App layout
app.layout = html.Div([
    html.Div(children='My First App with Data, Graph, and Controls'),
    html.Hr(),
    dcc.RadioItems(options=['pop', 'lifeExp', 'gdpPercap'], value='lifeExp', id='controls-and-radio-item'),
    dash_table.DataTable(data=df.to_dict('records'), page_size=6),
    dcc.Graph(figure={}, id='controls-and-graph')
])

# Add controls to build the interaction
@callback(
    Output(component_id='controls-and-graph', component_property='figure'),
    Input(component_id='controls-and-radio-item', component_property='value')
)

def update_graph(col_chosen):
    fig = px.histogram(df, x='continent', y=col_chosen, histfunc='avg')
    return fig

# Run the app
if __name__ == '__main__':
    app.run_server(debug=False, port=3456, mode='inline')
6

Berbere,

Thank you so much for your example! I tried your codes, and there was a tiny bug, it should be @app.callback, instead of @callback. But this is an easy fix.

I ran your codes in VS code. It was able to show the figure in jupyter notebook. I was able to export the notebook to HTML. And, if I open the HTML file, it was able to show the figure. No problem.

But, if I close my VS code, which means the Dash server is down, then the figure is not able to show on the HTML file. That is the challenge I have, which I figured after I tested many times.

I also tested with ipywidgets. The figure with ipywidgets was not able to export to HTML properly. Another dead end :frowning:

7

Ahh, I guess you are right. I tested it without internet connection, forgetting that dash is running locally at the background :sweat_smile: . At least we managed to figure out why graphs got disappeared on your once working html file. Probably by time you stopped running dash locally :slight_smile:

By the way I am still curious about your question. I would be very happy to hear if you end up finding a solution at some point.

1 Like