Dash App: обратный вызов выполняется несколько раз при возврате html.Div. - PullRequest
0 голосов
/ 29 мая 2019

У меня есть эти компоненты ввода и кнопки в моем приложении Dash:

html.Div(
     dcc.Input(
          id='id_selector',
          placeholder='',
          type='text',
          value=''
     )
),

html.Button(
      type = 'submit',
      id = 'submit-button',
      className = 'btn btn-info',
      children = [
            html.Span('Go!'),
      ]
)

и эти компоненты:

html.Div(id='output'),
html.Div(
     dcc.Graph(id='heatmap_id')
)

Затем я добавляю обратный вызов, как это:

app.callback(
    Output(component_id='output', component_property='children'),
    [Input('submit-button','n_clicks')],
    [State('id_selector', 'value')])

def update_output(n_clicks, input_ID):
    print(input_ID)

    return html.Div(
              "you have selected"+input_ID
           ,id='output')

Однако, когда я делаю это, обратный вызов выполняется несколько раз, и не только, если я нажимаю на кнопку.

Если я сделал это изменение:

app.callback(
        Output('heatmap_id', 'figure'),
        [Input('submit-button','n_clicks')],
        [State('id_selector', 'value')])

def update_output(n_clicks, input_ID):
    print(input_ID)

    {HERE I CREATE A THE FIG}

    fig = go.Figure(data=data, layout=layout)

    return fig

В этом случае все работает нормально, и обратные вызовы выполняются только при нажатии на кнопку.

Почему эта разница?

Причина, по которой я хочу использовать первый вариант (вернуть html.Div вместо рисунка), заключается в том, что при входе в приложение у меня появляется пустой график во втором случае, и я хотел бы иметьсначала пустое место.

1 Ответ

0 голосов
/ 29 мая 2019

Я решил это, Проблема в линии

return html.Div(
          "you have selected"+input_ID
       ,id='output')

Должно быть:

return html.Div(
          "you have selected"+input_ID
       )
...