Why displayed html file disappear by auto page refreshing?

I am tying to display pandas styled dataframe table. It do display exactly as I want, but it disappear immediately by auto page refreshing and then page goes back to original empty page.

Here is what I do:

  1. convert panda’s style dataframe into html file and save under asset folder
def create_regime_subindustries_df_heatmap_html(regime_df,regime_cols):
    
    groupby_cols = ['score'] + regime_cols
    sort_key = ['GICS Sector','GICS Sub-Industry']
    regime_df_styled=regime_df.groupby(sort_key)[groupby_cols].mean().sort_values(
        by= ['GICS Sector','score']).style.background_gradient(
        subset= groupby_cols,cmap= 'RdYlGn').format('{:.1g}')


    regime_df_subindustries_styled_html=regime_df_styled.to_html()
    
    html_filename_regime_subindustries_sorted_sector_styled='assets/subindustries_sorted_sector_styled.html'
    html_file=open(html_filename_regime_subindustries_sorted_sector_styled,'w')
    html_file.write(regime_df_subindustries_styled_html)
    
    return html_filename_regime_subindustries_sorted_sector_styled   
  1. define a tab to hold html.Div() where html will be loaded
def create_right_tt_sector_subindustries_tab(graph_kwargs):

    tt_subindustries_sorted_sector_html_div=html.Div(id='tt-subindustries-sorted-sector-plot-html-div')
    tt_subindustries_sorted_sector_html_div_loading=dcc.Loading( 
                                        id='loading-tt-subindustries-sorted-sector-plot-html-div',
                                        type='default',
                                        children=tt_subindustries_sorted_sector_html_div    # wrap contour in loading's children
                                        )
    
    markdown_text='Turtle Trader Sector'
    tt_sector_subindustries_markdown = dcc.Markdown(id="tt-sector-subindustries-markdown",children=markdown_text)
    
    tt_sector_subindustries_graph_tab = create_tab_right_2items([
                                         # tt_sector_subindustries_graph_loading,
                                         tt_subindustries_sorted_sector_html_div_loading,
                                         tt_sector_subindustries_markdown], 
                                         "Sub-Indusctries", "sub-indusctries")
    return tt_sector_subindustries_graph_tab
  1. in callback, read html filename and wrapp it using html.Iframe(src=filelocation) as output
@app.callback(
    [
        Output("tt-subindustries-sorted-sector-plot-html-div", "children"),
        Output("tt-sector-subindustries-markdown", "children"),
    ],
    [
        Input('plot-tt-sector-score','n_clicks')
    ],
                
    prevent_initial_call=True,   # disable output in the first load
)

def change_turtle_trader_plot(n_clicks):    
    
    html_filename_regime_subindustries_sorted_sector_styled=create_regime_subindustries_df_heatmap_html(regime_df,regime_cols)
    fig_subindustries_sorted_sector_heatmap_html_frame=html.Iframe(src=html_filename_regime_subindustries_sorted_sector_styled,
                                                                   style={"height": "1067px", "width": "100%"})

    tt_subindustries_markdown='Subindustries Heatmap Turtle Trader'    

        
    return (fig_subindustries_sorted_sector_heatmap_html_frame,tt_subindustries_markdown)

The table display exactly what I wanted at the begining, however, the page is automatically refreshing itself and the html disappear then page become empty. After displaying, I can see page showes updating? why page is refreshing itself? something to do with html file loading? I have no experience in html loading before.

please help! Thank you so much.

Hi,

Are you running in debug mode? It could be that the hot reloading functionality is detecting changes in the assets folder when you import the html file.

Any specific reason not to use a DataTable or html.Table and avoid saving it as an html file?

1 Like

Thank you so much. Yes you are absolute right. I am running in debug mode and it is hot reloading. After add
dev_tools_hot_reload = False, it is solved. However, it didn’t update if CSS change so I have refresh the page after updating CSS. I don’t know html.Table before you posted. I would love to swtich to html.Table. any example on how to use html.Table with background color for table? For example, How to convert df.style.background_gradient() into html.Table()? Thanks

html.Table is a “low-level” approach to create a table, as you need to write all the markup (html.Thead, html.Tr, html.Td, etc…) as a nested component. You can still control each cell background color with style, but you’d have to write this functionality yourself (I don’t have an example for that unfortunately).

dash_table.DataTable has more options in terms of styling with the conditional formatting. Here is one example that does what you need (I believe): Conditional Formatting | Dash for Python Documentation | Plotly

1 Like

Thank you so much!