KeyError: 'children' when appending to element children

Dash Python
1

I am receiving the error “KeyError: ‘children’” when trying to append to the children of an element.
In the following code snippet, ‘timeline’ is a row containing an array of dbc.Stacks. Each dbc.Stack is initialized with a badge.

w = str(((upper - lower) / 5) * 100) + '%'
m = str(((lower % 5) / 5) * 100) + '%'
rm = str(((5 - (upper % 5)) / 5) * 100) + '%'
for j in range(0, len(timeline)):
    if j == lowerCol:
        timeline[j]['children'].append(dbc.Badge(id={'type': 'TLMark', 'tier': i, 'index': j}, children="|",
                              color=color, n_clicks=0,
                              style={**styleBase, **{'width': w, 'height': '1.3rem', 'margin-left': lm,
                                        'margin-right': rm, 'color': color}}))
        tooltips.append(dbc.Tooltip(placement='top', children='Mark' + str(i), trigger='hover',
                                    target={'type': 'TLMark', 'tier': i, 'index': j}))
    else:
        timeline[j]['children'].append(dbc.Badge('|', color='rgb(40,40,40)', style=blankStyleBase))

At the last line, i receive the error. However from the debug info, ‘children’ is absolutely a subset of timeline[j]. see photo

image
image1385×648 68.1 KB

Can anyone explain to me why this is happening? also, how can I add to the stack’s children?

Here is the full error from the console if that helps:

[2024-05-22 20:43:23,927] ERROR in app: Exception on /_dash-update-component [POST]
Traceback (most recent call last):
  File "C:\Users\dwilliams\Desktop\i-itsec-2022\FortiFly.TRAIN\Retroplotter\venv\lib\site-packages\flask\app.py", line 2529, in wsgi_app
    response = self.full_dispatch_request()
  File "C:\Users\dwilliams\Desktop\i-itsec-2022\FortiFly.TRAIN\Retroplotter\venv\lib\site-packages\flask\app.py", line 1825, in full_dispatch_request
    rv = self.handle_user_exception(e)
  File "C:\Users\dwilliams\Desktop\i-itsec-2022\FortiFly.TRAIN\Retroplotter\venv\lib\site-packages\flask\app.py", line 1823, in full_dispatch_request
    rv = self.dispatch_request()
  File "C:\Users\dwilliams\Desktop\i-itsec-2022\FortiFly.TRAIN\Retroplotter\venv\lib\site-packages\flask\app.py", line 1799, in dispatch_request
    return self.ensure_sync(self.view_functions[rule.endpoint])(**view_args)
  File "C:\Users\dwilliams\Desktop\i-itsec-2022\FortiFly.TRAIN\Retroplotter\venv\lib\site-packages\dash\dash.py", line 1373, in dispatch
    ctx.run(
  File "C:\Users\dwilliams\Desktop\i-itsec-2022\FortiFly.TRAIN\Retroplotter\venv\lib\site-packages\dash\_callback.py", line 465, in add_context
    output_value = _invoke_callback(func, *func_args, **func_kwargs)
  File "C:\Users\dwilliams\Desktop\i-itsec-2022\FortiFly.TRAIN\Retroplotter\venv\lib\site-packages\dash\_callback.py", line 40, in _invoke_callback
    return func(*args, **kwargs)  # %% callback invoked %%
  File "C:\Users\dwilliams\Desktop\i-itsec-2022\FortiFly.TRAIN\Retroplotter\main.py", line 1593, in MakeTimeline
    timeline[j]['children'].append(dbc.Badge('|', color='rgb(40,40,40)', style=blankStyleBase))
  File "C:\Users\dwilliams\Desktop\i-itsec-2022\FortiFly.TRAIN\Retroplotter\venv\lib\site-packages\dash\development\base_component.py", line 314, in __getitem__
    return self._get_set_or_delete(id, "get")
  File "C:\Users\dwilliams\Desktop\i-itsec-2022\FortiFly.TRAIN\Retroplotter\venv\lib\site-packages\dash\development\base_component.py", line 299, in _get_set_or_delete
    raise KeyError(id)
KeyError: 'children'
2

Hello @DwilliamsTM,

Why are you trying to append directly to the component and not using something like Patch() with partial updates?

3

The function gets called when the information becomes available. Thats when the stack gets initialized with the first badge. then, IF a secondary file is also present, the other badges need to get added. in psuedo:

callback initiated
     prep the minimal version
     <if secondary info is present>
          append additional elements
    return

All that to say, a secondary callback would require a secondary trigger that i dont have. I dont think theres a way to use the patch updates without sending them as a return statement

4

I managed to circumvent this problem using dot notations. i.e.:

timeline[j].children.append(