Black Lives Matter. Please consider donating to Black Girls Code today.

Dash table updating heatmap

Hello,

I am relatively new to dash and I am designing an app having two callbacks. This app is supposed to pull data from a database about inventories, then a heatmap is plotted below showing some statistics of the inventory.

The user can select the name of an inventory but this one is already filled by default.
First callback looks at the name of this inventory and fetch the data, do some data cleaning and output the result in a dash table.
This part works fine. I also want to leave the user the option of filtering the data via the native filter action within the table displayed.
Things got messy when I added the second callback that takes the dash table data as input and plot a heatmap from it. When debugging my code, the application does no longer enter in the first callback and enter in the second one while the inventory table is empty. This is not a problem in itself but then the app stops there and I really don’t understand why the first callback is not called anymore, it is possible to call it manually by removing the default value and entering it again but I would have expected for the app to work with the default value, especially given that it worked this way before adding the heatmap.

Below is the code:

html.Div([
                html.H4('Inventory'),
                dcc.Dropdown(id='app-dropdown-inventory',
                         options=[{'label': l, 'value': v} for (v, l) in INVENTORIES_DICT],
                         value='inventory_default',
                ),
                html.Div([dash_table.DataTable(
                    id='inventory-table',
                    data=[{}],
                    columns=[
                        {"name": i, "id": i} for i in INVENTORY_COLUMNS
                    ],
                    page_action='native',
                    filter_action='native',
                    sort_action='native',
                    editable=True,
                    selected_rows=[],
                )])
            ], className='row'),
            html.Div([
                html.H2('Heatmap'),
                dcc.Graph(
                    # dummy heatmap
                    id='heatmap',
                    figure={
                        'data': [go.Heatmap(
                            z=[[1, -1], [0.5, -0.5]],
                            x=[0, 1],
                            y=[0, 1],
                        )],
                    })
                ])

@app.dash_app.callback(
    Output('inventory-table', 'data'),
    [
        Input('app-dropdown-inventory', 'value'),
    ]
)
@app.dash_app.log_error
def update_portfolio_table(inventory_name):
    # external function called to get inventory, tested separately and works fine
    df = get_inventory(inventory_name)
    return df.to_dict('row')


@app.dash_app.callback(
    Output('heatmap', 'figure'),
    [
        Input('inventory-table', 'data'),
    ]
)
@app.dash_app.log_error
def update_heatmap(portfolio):
# I have just written a dummy heatmap down there to test the code 
    return {
                        'data': [go.Heatmap(
                            z=[[1, -1], [0.5, -0.5]],
                            x=[0, 1],
                            y=[0, 1],
                        )],
                    }

Hi @anmlthg welcome to the forum! Could you please post a completely standalone app with dummy data (which reproduces the issue, of course) so that we can help debugging? One thing which helps at initialization is to test whether an Input variable is None, and then return dash.no_update. But the second callback should still be called when the table is modified. Could you also upload a screenshot of the callbacks graph (in the developers tool, run the app with debug=True to get them) ?