Search code examples
plotlyplotly-dashplotly-python

Plotly: Submit button before Call back for the Checklist?

I am developing Dash Data Visualization app where I have to select parameters given in the checklist as shown in figure. As I select/de-select the options from checklist one by one, back ground call back gets executed for every input.

For example, in image you can see the default value, I have selected all the 12 variables. But let's say when I only need to select 5 variables, and I try to de-select other 7 variables, background callback gets executed every time I de-select, in this case 7 times, which takes lot of time to execute, where ideally I would want it to be executed only once. Is there any changes I can make to the below code, like adding submit button, where the background code will be executed only when I want it, not when I select or de-select the checklist items?

dcc.Checklist(id='parameter-checklist',
    options=checklist_dict,
    value=available_indicators[:]
)

enter image description here

Updating the code as stated in one of the comments:

Let's say I have to print the text selected as option from checklist in text box which has id 'text-is'. But it should only to be printed when some submit click is pressed, not every time I change the input of checklist.

import dash
import dash_core_components as dcc


available_indicators = ['Vorrollieren_Drehzah_Spindell',
 'Vorrollieren_Kraft_Spindell',
 'Vorrollieren_Kraft_Vorschub',
 'Vorrollieren_Weg']
checklist_dict = [{'label': 'Vorrollieren_Kraft_Spindell',
  'value': 'Vorrollieren_Kraft_Spindell'},
 {'label': 'Vorrollieren_Kraft_Vorschub',
  'value': 'Vorrollieren_Kraft_Vorschub'},
 {'label': 'Vorrollieren_Weg', 'value': 'Vorrollieren_Weg'}]


app.layout = html.Div(         
        [html.H3(children='Data Visualization For AK_Powertrain'),


dcc.Checklist(id='parameter-checklist',
    options=checklist_dict,
    value=available_indicators[:]
),  
)

@app.callback(
    [dash.dependencies.Output('text-id', 'value')
     ],
    [dash.dependencies.Input('parameter-checklist', 'value')
     ])
def update_graph_cluster( parameter_checklist):


    return parameter_checklist
Solution

  • OK, after bit of a research I found answer to this question.

    We just have to use button in 'if' statement and then we can include checklist operation if button is pressed.

    Code could look like below:

    @app.callback(
    [ dash.dependencies.Input('parameter-checklist', 'value'),
     dash.dependencies.Input('btn-nclicks-1', 'n_clicks')])
def do_computation(parameter_checklist, btn1):

    changed_id = [p['prop_id'] for p in dash.callback_context.triggered][0]

    if 'btn-nclicks-1' in changed_id:

        print('button is pressed') 
        #do checklist operation