Black Lives Matter. Please consider donating to Black Girls Code today.

Callback forces reload

Hey guys,

I’m trying to make an app when pushed on the button submit, as seen below, a calculation of max 1-2 minutes is performed and a graph is shown.

However, the page reloads a few seconds after clicking on submit. In Spyder though, I can see that the calculations have finished and an output is generated. Any idea what the problem may be, since I don’t get any errors.

Below is the code for the callback. the id output shows a table of selected file names and result has to show a graph/animation + button. the if-statement checks whether the input is None, which is on startup of the app. Since the callback is fired upon startup.

Thanks in advance!

@app.callback(
    [Output('output', 'children'),
     Output('result', 'children')],
    [Input('submit_button','n_clicks')],
    [State('rir_and_speech', 'children')]
    )

def result(n_clicks, value):
    rirs = []
    speeches = []
    for i in value:
        rirs.append(i.get('props').get('children')[0].get('props').get('value'))
        speeches.append(i.get('props').get('children')[1].get('props').get('value'))
    
    
    
    statements= ['angle','speech-file']
    table = html.Table([
        html.Tr([
            html.Td([statements[j]+str(i+1)+': ', value[i].get('props').get('children')[j].get('props').get('value')]) for j in range(2)
        ])
    for i in range(len(value))], className="table_results")
    if rirs == [None] or speeches == [None]:
        return ["Nog Niets"],[]
    else:
        n_seq = len(rirs)
        mr = MeetingRoom()
        speech,answers =  mr.conversation_linear(rirs, speeches,  overlap= 0, sample = False)
        srcloc = SourceLocalization(recording_filename='./output/sim_audio.npy', 
                                    Hmatrix_filename='./output/H.npy', 
                                    secs=speech.shape[0]/16000,
                                    num_angles_phi=2,
                                    # num_angles_theta=360,
                                    verbose=True,
                                    # save_path='graphs/two/test/'
                                    )
        srcloc.calc_J()
        # srcloc.plot_histogram_theta_windowed(hist_type='weighted')
        peaks = srcloc.peak_detection()
        speakers, positions = srcloc.speaker_positions(n_seq, peaks)
        srcloc.post_process(speakers, positions)
           
        #Make a nx4 array that represent the speakers. if nan -> not spoken, else -> degree of the speaker
        speakers = np.transpose(np.where(srcloc.speakers == False, np.nan, srcloc.speakers)) * srcloc.positions
        
        animation = AnimationMeetingRoom(speakers)
        fig = animation.fig
        graph_meeting_room = dcc.Graph(id='fig',figure=fig, responsive=True)
        audio_meeting_room = html.Div([html.Button(id="play_mr"),
                                        html.Div(id="hidden_div_mr")])
        result = [graph_meeting_room, audio_meeting_room]
        return table, result