Как отображать текстовое значение по умолчанию при каждом щелчке в элементе div, пока элемент не будет заполнен? - PullRequest
Новая
       35

Как отображать текстовое значение по умолчанию при каждом щелчке в элементе div, пока элемент не будет заполнен?

0 голосов
/ 16 октября 2018

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

import dash
from dash.dependencies import Output, Event, Input
import dash_core_components as dcc
import dash_html_components as html

app.layout = html.Div([
    dcc.Dropdown(
        id='dataset-dropdown',
        options=[
            {'label': 'Option A', 'value': 'A'},
            {'label': 'Option B', 'value': 'B'},
            {'label': 'Option C', 'value': 'C'}
        ],
        placeholder="Select an option",
    ),

    html.Div(id='output-container'),
])



def function_to_draw(input):
    # make the figure
    return plotly_fig_object



@app.callback(
    dash.dependencies.Output('output-container', 'children'),
    [dash.dependencies.Input('dataset-dropdown', 'value')])
def update_output(value):
    if value=='A':
        plotly_fig = function_to_draw('A')
        return plotly_fig
    elif value=='B':
        plotly_fig = function_to_draw('B')
        return plotly_fig
    elif value=='C':
        plotly_fig = function_to_draw('C')
        return plotly_fig

    return dcc.Graph(
        id='plot_graph',
        figure={
            'data': plotly_fig
        }
    )



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

Теперь для выполнения этих внутренних вычислений требуется некоторое время (5-10 секунд).Итак, я хочу, чтобы при каждом нажатии значения в раскрывающемся меню оно показывало что-то вроде «Расчет ...» или «Загрузка ...» в течение этих 5-10 секунд, пока не отобразится рисунок.

Как мне это сделать?

Я попытался добавить div "placeholder" для хранения "Loading ..." и добавил функцию обратного вызова для его отображенияпо щелчку: 

import dash
from dash.dependencies import Output, Event, Input
import dash_core_components as dcc
import dash_html_components as html

app.layout = html.Div([
    dcc.Dropdown(
        id='dataset-dropdown',
        options=[
            {'label': 'Option A', 'value': 'A'},
            {'label': 'Option B', 'value': 'B'},
            {'label': 'Option C', 'value': 'C'}
        ],
        placeholder="Select an option",
    ),

    html.Div(id='output-container'),

    html.P(id="placeholder",children=["placeholder"]),
    dcc.Interval(
        id='clear-div',
        interval=1*1000
    ),

])




@app.callback(
    Output('placeholder', 'children'),
    [Input(component_id='dataset-dropdown', component_property='value')],
    events=[Event('clear-div', 'interval')]
)
def reset_div(input_data):
    return "Calculating..."




@app.callback(
    dash.dependencies.Output('output-container', 'children'),
    [dash.dependencies.Input('dataset-dropdown', 'value')],
    events=[Event('dataset-dropdown', 'click')])
def update_output(value):
    if value=='A':
        return "You selected A"
    elif value=='B':
        plotly_fig = function_to_draw('B')
        return plotly_fig
    elif value=='C':
        plotly_fig = function_to_draw('C')
        return plotly_fig

    return dcc.Graph(
        id='plot_graph',
        figure={
            'data': plotly_fig
        }
    )



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

Но он не работает должным образом - он показывает только «Загрузка» в исходном выпадающем списке.После этого выходной div не очищается, чтобы отобразить «Загрузка ...» в последующих выпадающих списках;существующая цифра в выходном div сохраняется.

...