List of items determined by map locs does not update correctly (too big?)

Dash Python
1

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.

2

Hi @claramavila

There is not quite enough information here to help. Could you make a complete minimal example that replicates the error?