I am working on a graph that takes multiple user inputs to create a grouped bar chart that compares school testing performance based on different variables (grade, ethnicity, etc.). Because there are thousands of schools in the set, I am organizing them by school district. So I have a dropdown menu with all of the school districts. When a district is selected, a checklist is then populated with the schools in the district. Whichever schools are selected from that list are displayed on the graph.
I want to allow the user to select as many schools as they like, which is no problem if they are simply selecting checkboxes from a single school district. However, if they switch the dropdown to a different district, an entirely new set of school checkboxes appears. Any school checkbox that was checked from the first dropdown remains on the graph. This is intended behavior.
However, there is no way to uncheck that original school checkbox without re-selecting the school district from the dropdown and then unchecking the box. This is cumbersome. What I would like to do is ‘mirror’ all of the checked schools in another list somewhere on the page. See below:
You can see that Item #2 is selected in the dropdown, which causes “Sub Item #2a” and “Sub Item #2b” checkboxes to be displayed below. Sub Item #2a is checked. Prior to this, the user had selected Item #1 in the dropdown and checked the “Sub Item #1b” checkbox. It remains checked even though it is no longer displayed directly under the dropdown. It is the behavior on the right that I want to create. A list of all checkbox items that have been selected which are themselves checkboxes so that they can be easily unchecked (at which point they disappear from the list). This would allow a user to select many sub items from many different items and to remove them easily.
I’ve tried all sorts of things without success. My current code is the closest, but it only displays the “selected” checkbox option without displaying (or being able to affect) the state of the checkbox.
html.P('Select Schools', className = 'fix_label', style = {'color': 'steelblue'}),
dcc.Checklist(id = 'school-checklist-select',
value=[],
labelStyle={'display': 'block'},
),
html.P('Selected Schools:', className = 'fix_label', style = {'color': 'steelblue'}),
dcc.Checklist(id = 'school-checklist-display',
value=[],
labelStyle={'display': 'block'},
),
@app.callback(
Output('school-checklist-select', 'options'),
Input('corporation-dropdown', 'value')
)
def set_school_options(selected_corporation):
schools = csv.loc[csv['Corp ID'] == selected_corporation]
schools_dict = dict(zip(schools['School Name'], schools['School ID']))
options = []
for name, id in schools_dict.items():
options.append({'label': name, 'value': id})
return options
@app.callback(
Output('school-checklist-display', 'options'),
Input('school-checklist-select', 'value')
)
def set_school_display(school_display):
print ('display school')
print(school_display)
for school in school_display:
school_data = csv.loc[csv['School ID'] == school]
schools_dict = dict(zip(school_data['School Name'], school_data['School ID']))
options = []
for name, id in schools_dict.items():
options.append({'label': name, 'value': id})
return options
I’ve tried to work through the various advanced callback examples, but I still can’t quite figure out how to mirror/display both the name and state and allow the user to interact with either the ‘selected’ checkbox or the ‘displayed’ checkbox.
Any assistance would be appreciated!
