Is it possible to update the dash_core_components' attributes with a dynamic dict instead of the existing dcc's attributes?

Dash Python
1

Hello, everyone!

I am trying to use the fantastic package dash to produce something that could help a lot in the daily work, and I’ve met a small problem:
I need to dynamically change the options of a Dropdown/Checklist with a dict input from other programs, but I am currently not capable of replacing the existing dcc component with the dynamic input, is there anyway that could help me out here?

Below is my original thought to make it through, which is not working when the update_the_dash function is called.
It would be considerably helpful if anyone could offer some suggestions. Thank you soooooo much =)

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

app = dash.Dash()

app.layout = html.Div([

	html.Div([
		html.Div([
			dcc.Dropdown(
				id = 'selected-strategy',
				options = [
					{'label': 'raw', 'value': 0 },
					{'label': 'adverse', 'value': 1 },
					{'label': 'zero', 'value' : 2}
				],
				multi=True,
				value = [0],
			),
		],
		style = {'width' : '69%', 'display':'inline-block'}),

		html.Div([
			dcc.RadioItems(
				id = 'selected-data-shown',
				options = [
					{'label': 'absolute return', 'value' : 0},
					{'label': 'excess return', 'value' : 1}
				],
				value = [0]
			)
		],
		style = {'width' : '29%', 'float': 'right', 'display': 'inline-block'})
	])

])



def update_the_dash(optionsDict):
	dcc.Checklist(
		id = 'input-the-choices',
		options = [{'label': keyLabel, 'value': optionsDict[keyLabel]} for keyLabel in optionsDict]
	)
	@app.callback(dash.dependencies.Output('selected-strategy', 'options'),
				  [dash.dependencies.Input('input-the-choices', 'options')])
	def set_selected_strategy(optionsDict):
		return optionsDict


	app.run_server(debug = True)

if __name__ == '__main__':

	print([dash.dependencies.Input('selected-strategy', 'options')])
	app.run_server(debug=True)
2

Thanks for reaching out! Have you seen the last example in the chapter on callbacks? Part 2. Basic Callbacks | Dash for Python Documentation | Plotly It has a simple example that demonstrates how to dynamically update the available options of a set of RadioItems (which could easily be replaced with Dropdown). The example updates the “city” dropdown based off whatever “country” was selected.
Does something like that help?

3

Thanks for the quick reply, the document does help!

4

Hi, I still have a small question, I solve the problem by generating a json file to pass the value to the dcc options, while I’m still wondering whether there is a way to directly change the dcc options attributes with a pandas dataframe in the memory which could be delivered by other programs?

Besides, I am curious whether there is a good way to control the visibility of dccs in the dash package? e.g. https://plot.ly/dash/state, in the first example of the link, when I choose ‘Canada’, the 'input-2‘ would be hidden, while when I choose ‘US’, the ‘input-2’ would be shown, something like that?

5

The best way to do this would be to have your other programs write the pandas dataframe to a csv file and then read that csv file in your dash app. Or, incorporate your other programs into your dash app itself.

The best way to do this would be to create a callback that updates the children property of a parent html.Div:

@app.callback('container', 'children'), [Input('dropdown', 'value')])
def update_container(value):
    if value == 'Canada':
        return dcc.Dropdown(....)
    elif value == 'US':
        return dcc.Dropdown(....) # a different dropdown
6

That’s very helpful, thank you soooooo much