why displayed html file disappear by auto page refreshing?

Viewed 35

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.

Here is original styled pandas dataframe which I want to show in dashboard.

enter image description here

I am

0 Answers
Related