Hi!
I have a list of 51 cards, that I change based on which locations are selected on the map (putting the selected locations on top). This callback function should work, I’ve tested it in every way I could come up with: it always returns a list of 51 items (the total of map items) and puts the selected cards on top. The selection works as it should. The problem is that Dash displays the previously outputted list and appends the new selected / not selected ratio at the bottom of the list of cards instead of replacing it. The ideal output would be:
x number of selected location cards
----------------divider----------------------
(all - x) number of not selected cards
Initially all cards are displayed , which results in this after selecting some cards:
all cards
x number of selected location cards
----------------divider----------------------
(all - x) number of not selected cards
But! I’ve also tested only showing the selected cards, which would be good enough I guess, and it only starts doing this extending thing if more than ~7 locations have been selected on the map. In small quantities it does what it should. Which leads me to think the list of items is too long (every item on the list is a bootstrap html card with quite some children, might be that?), but I’ve not been able to find anyone with a similar problem.
The div the cards are inserted into is a simple:
html.Div([
html.Div(id="caselist", className='cardcontainer'),
], className='col-5 pt-0'),
and the callback function looks something like this in the ideal scenario:
@app.callback(
Output("caselist", "children"),
[
Input('dropd_yr', 'value'),
Input('checkl_mo', 'value'),
Input("map", "selectedData"),
Input("search_input", "value"),
], prevent_initial_call=True)
def list_graph(yr, mos, sd, si):
data = filter geodataframe with yr and mos
# commented out stuff with si
locs = get_locs(sd):
output_string = []
if locs != None
for datapoint in locs, output_string.append(card_html(datapoint))
output_string.append(divider)
for datapoint in not locs, output_string.append(card_html(datapoint))
else:
for datapoint in not locs, output_string.append(card_html(datapoint))
return output_string
It returns a list of html objects. I’ve tried both with and without prevent_initial_call, the same problem occurs.
Any help would be welcome, the only solution my colleagues and I can come up with right now is to limit the amount of locs selected allowed, which would really suck.