I am not sure how to describe the problem.
I have a complex application (unfortunately I cant share the code) - where after I have the option where the user can select a column for removal. So in the callback, when the user selects the column and press remove button - the column gets removed, and the rowdata value also gets updated.
But after that event the ag grid table just continues to flicker.
On the browser console - I see this error
Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn’t have a dependency array, or one of the dependencies changes on every render. Error Component Stack
I was hoping to reproduce the error in a smaller side application I created - and as I expected the problem is not there
import dash_ag_grid as dag
from dash import Dash, html, Output, Input, callback, State, no_update
import dash_mantine_components as dmc
import pandas as pd
app = Dash(__name__, url_base_pathname="/")
data = [
{
"localTime": "5:00am",
"a": 0.231,
"b": 0.523,
"c": 0.423,
"d": 0.527,
},
{
"localTime": "5:15am",
"a": 0.423,
"b": 0.452,
"c": 0.523,
"d": 0.543,
},
{
"localTime": "5:30am",
"a": 0.537,
"b": 0.246,
"c": 0.426,
"d": 0.421,
},
{
"localTime": "5:45am",
"a": 0.893,
"b": 0.083,
"c": 0.532,
"d": 0.983,
},
{
"localTime": "6:00am",
"a": 0.231,
"b": 0.523,
"c": 0.423,
"d": 0.527,
},
{
"localTime": "6:15am",
"a": 0.423,
"b": 0.452,
"c": 0.523,
"d": 0.543,
},
{
"localTime": "6:30am",
"a": 0.537,
"b": 0.246,
"c": 0.426,
"d": 0.421,
},
{
"localTime": "6:45am",
"a": 0.893,
"b": 0.083,
"c": 0.532,
"d": 0.983,
},
{
"localTime": "7:00am",
"a": 0.231,
"b": 0.523,
"c": 0.423,
"d": 0.527,
},
{
"localTime": "7:15am",
"a": 0.423,
"b": 0.452,
"c": 0.523,
"d": 0.543,
},
{
"localTime": "7:30am",
"a": 0.537,
"b": 0.246,
"c": 0.426,
"d": 0.421,
},
{
"localTime": "7:45am",
"a": 0.893,
"b": 0.083,
"c": 0.532,
"d": 0.983,
},
{
"localTime": "8:00am",
"a": 0.231,
"b": 0.523,
"c": 0.423,
"d": 0.527,
},
{
"localTime": "8:15am",
"a": 0.423,
"b": 0.452,
"c": 0.523,
"d": 0.543,
},
{
"localTime": "8:30am",
"a": 0.537,
"b": 0.246,
"c": 0.426,
"d": 0.421,
},
{
"localTime": "8:45am",
"a": 0.893,
"b": 0.083,
"c": 0.532,
"d": 0.983,
},
{
"localTime": "8:00am",
"a": 0.231,
"b": 0.523,
"c": 0.423,
"d": 0.527,
},
{
"localTime": "8:15am",
"a": 0.423,
"b": 0.452,
"c": 0.523,
"d": 0.543,
},
{
"localTime": "8:30am",
"a": 0.537,
"b": 0.246,
"c": 0.426,
"d": 0.421,
},
{
"localTime": "8:45am",
"a": 0.893,
"b": 0.083,
"c": 0.532,
"d": 0.983,
},
]
columnDefs = [
{"field": "localTime"},
{"field": "a"},
{"field": "b"},
{"field": "c"},
{"field": "d"},
]
app.layout = dmc.MantineProvider(
html.Div(
[
dag.AgGrid(
id="grid",
rowData=data,
columnDefs=columnDefs,
defaultColDef={
"resizable": True,
"sortable": True,
"filter": True,
"flex": 1,
},
dashGridOptions={"suppressRowTransform": True},
),
dmc.Select(
value=None,
data=[x["field"] for x in columnDefs],
id="column_populate",
clearable=True,
),
dmc.Button("Remove Column", id="my-button", color="blue"),
],
)
)
@callback(
[Output("grid", "columnDefs"), Output("grid", "rowData")],
Input("my-button", "n_clicks"),
State("column_populate", "value"),
State("grid", "columnDefs"),
State("grid", "rowData"),
)
def remove_column(n_clicks, column_name, input_columnDefs, row_data):
if n_clicks is None or column_name is None:
return no_update
data = pd.DataFrame.from_records(row_data)
data = data.drop(columns=list({column_name, "id"}.intersection(data.columns)))
data.index.name = "id"
print(data)
return [
col for col in input_columnDefs if col["field"] != column_name
], data.to_dict("records")
if __name__ == "__main__":
app.run(debug=True)
So I know there is somewhere in my code something is happening and I am hoping to get some guidance on how to debug this. I had print commands everywhere to see whether the callback is getting triggered somewhere (in my actual application) - but does not see like those callbacks are getting triggered. Any guidance on appropriate debugging mechanism?
(Again the code attached behaves the correct way - I added this sample to show the functionality I am trying to have in my actual code)
I also tried to check the callback graph - but it does not render
