Streamlit Aggrid tree data does not display correct after filter change

Custom Components streamlit-aggrid
1

Hi all,
@PablocFonseca
This is my first post so I hope everything is correct.
I have a problem with displaying tree data in streamlit-aggrid.
When the code executes the first time, everything is displayed correctly. (see Screenshot)

image
image2157×910 146 KB

But if I change one of the filters (Product or Year), a new query is made from the database in the background. This changes the number of rows in the underlying dataframe, so a new hierarchy should actually be displayed.
However, the aggrid table is then structured incorrectly: Rows from the old dataframe remain, which should no longer be part of the table.
According to the console, Aggrid has a problem with “duplicate group keys for row data”. I display the new dataframe directly below, there are no duplicates. (see screenshot)

image
image2155×1015 325 KB

Do you have any idea why this could be?
Thank you very much!

Here is the code:

def grid_builder(grid_key: datetime, df, cols_editable: list[str] = None) → AgGrid:
# without grid_key changing, the items from the db will not persist after initial render.
cellStyle = JsCode(
r"“”
function(cellClassParams) {
if (cellClassParams.data.Type == ‘Numeric’) {
return {‘background-color’: ‘#152238’}
}
return {};
}
“”")
gb = GridOptionsBuilder.from_dataframe(cells_editor)
grid_key = str(grid_key)

if cols_editable != None:
    for col in cols_editable:
        gb.configure_column(field=col, editable=True)
                            #, cellStyle=cellStyle)
gb.configure_column(field="Product", hide=True)
gb.configure_column(field="path")
                    #, hide=True)
gb.configure_column(field="Type", hide=True)

gridOptions = gb.build()

gridOptions["defaultColDef"]={
    "flex": 1,
    }
gridOptions["autoGroupColumnDef"]= {
    "headerName": 'Product Hierarchy',
    "minWidth": 300,
    "cellRendererParams": {
    "suppressCount": False,
    },
    }   
gridOptions["treeData"]=True
gridOptions["animateRows"]=True
gridOptions["groupDefaultExpanded"]= -1
gridOptions["getDataPath"]=JsCode(""" function(data){
    return data.path.split("/");
}""")

edited_df = AgGrid(
            cells_editor,
            gridOptions=gridOptions,
            #height=800,
            allow_unsafe_jscode=True,
            fit_columns_on_grid_load=True,
            #enable_enterprise_modules=True,
            #filter=True,
            #data_return_mode=DataReturnMode.AS_INPUT,
            update_mode=GridUpdateMode.SELECTION_CHANGED,
            theme="streamlit",
            key=grid_key,
            reload_data = True,
            tree_data=True
        )


return edited_df

    #Create Selectboxes
    key_figure_selector = st.sidebar.selectbox("Select a Key figure", key_figure)
    years_selector = st.sidebar.selectbox("Select a year", year)
    product_selector = st.sidebar.selectbox("Select a product", product)    
    region_selector = st.sidebar.selectbox("Select a region", region)
    order_type_selector = st.sidebar.selectbox("Select a order type", order_type)
    retailer_type_selector = st.sidebar.selectbox("Select a retailer type", retailer_type)

    #Create dataframe
    cells_editor = get_view(product_sel=product_selector, time_sel=years_selector, region_sel=region_selector, order_sel=order_type_selector, retail_sel=retailer_type_selector, key_figure_sel=key_figure_selector)

    list_col = list(cells_editor.columns)       
    sliced_list = list_col[2:6]
    #print(sliced_list)
    # Create AgGrid
    edited_df = grid_builder(grid_key=st.session_state['grid_key'],
                        df=cells_editor,
                        cols_editable=sliced_list)
1 Like
2

Hello @Tim_G,

I face the same issue. According to this discussion, it seems to be a bug. As I understand it, reload_data=True should reload the grid with new data and avoid duplicate keys.

However, I found a trick to force the grid to reload: change the key for each new data load. For example, you can do something like this: key=f"my_grid_{my_option}". If you don’t need key you can also remove it and the key will be generate automatically so will change for each update.

I hope this helps! If you find a better way to solve this problem, please let me know!