dcc.Interval not updating automatically , graph only updates with page refresh (With working code and data)

I am trying to make a live updating dash app but the live update only shows when I manually press the refresh button on the web page until then the graph doesn’t update , I am trying to generate a progressively updating heat map from some data derived from sensor reading to show how it would look like if the data is read in real time.

Data source file to be used (1 MB in size)

import dash 
from dash.dependencies import Output, Input
import dash_core_components as dcc 
import dash_html_components as html 
import plotly 
import pandas as pd 
import random 
import plotly.graph_objs as go 




# The csv file for this dataset used here can be downloaded from:
#  https://easyupload.io/0ni29p (Hyperlinked in post as well)

cols = [  'shot' , 'chan' , 'peak_amplitude',  'onset_time_(ms)', 'bubble_period_(ms)']
cols_bubble_period  = [ 'shot' , 'chan' ,  'bubble_period_(ms)']
source_df = pd.read_csv('seq-4bubbleQC.txt').drop(['sequence', 'file'], axis=1)
source_df.columns = cols
source_df.loc[source_df['shot'] % 2 == 0, 'chan'] += 18

all_results =  pd.DataFrame(columns = cols)
i=0

def df_to_plotly(df):
    return {'z': df.values.tolist(),
            'x': df.columns.tolist(),
            'y': df.index.tolist()}


  
app = dash.Dash(__name__) 
  
app.layout = html.Div( 
    [ 
        dcc.Graph(id = 'live-graph', animate = True),
        html.Button('START_PLOT', id='plot_start',n_clicks=0),
        html.H2(id='hidden-div', style= {'display': 'none'} ),

        dcc.Interval( 
            id = 'graph-update', 
            interval = 5*1000, 
            n_intervals = 0
        ), 
    ] 
) 

@app.callback( 
    Output('hidden-div', 'children'), 
    [ Input('graph-update', 'n_intervals') ],
    [Input('plot_start', 'n_clicks')] 
) 

def update_frame(n_clicks, n_interval):
    global source_df 
    global i
    global all_results

    if n_clicks == 0:
        raise dash.exceptions.PreventUpdate()

    all_results = all_results.append((source_df[i: i+36]))
    i+=36
    #print(i)



@app.callback( 
    Output('live-graph', 'figure'), 
    [ Input('graph-update', 'n_intervals') ],
    [Input('plot_start', 'n_clicks')] 
) 
  
def update_graph_heat(n_clicks, n_interval): 

    global all_results
    

    all_results_1 = all_results.apply(pd.to_numeric)
    #all_results_1 = all_results_1.drop_duplicates()
    #all_results_1.to_csv('all_results.csv')
    df_s1 = all_results_1.loc[all_results_1['chan'] <=18]
    df_s1_bp = df_s1[cols_bubble_period]
    #print(df_s1_bp)
    #df_s1_bp.to_csv('test_data.csv')
    df_s1_pivoted = df_s1_bp.pivot(  'chan', 'shot', 'bubble_period_(ms)')
    
    data = go.Heatmap(df_to_plotly(df_s1_pivoted) ,  colorscale='rainbow', zmin=30.0, zmax=210.0)
    return {'data': [data], 
            'layout' : go.Layout(xaxis_nticks=20, yaxis_nticks=20)} 

     
  
    
  
if __name__ == '__main__': 
    app.run_server()

The graph only updates when a manual page refresh is done , how can I make the updated graph appear automatically?