Store User Selection from Checkboxes without losing data

Dash Python
1

I have a pandas dataframe called “df”. This “df” has several columns so I created a dictionary to group columns based on their index and give them a label as seen in the code below.

# Categorize features
# Define the index ranges for each category
category_index_ranges = {
    'E': (9, 17),  # Columns from index 9 to 17 (inclusive)
    'S': (18, 26),  # Columns from index 18 to 26 (inclusive)
    'G': (27, 35),  # Columns from index 27 to 35 (inclusive)
    'Q': (36, 38),  # Columns from index 36 to 38 (inclusive)
    'C': (39, 39),  # Column 39
}

# Create a dictionary to map column names to category
column_to_category = {}
for category, (start, end) in category_index_ranges.items():
    for i in range(start, end + 1):
        column_to_category[df.columns[i]] = category

Then in the dash app, I used dash mantine component (dmc.SegmentedControl) to create controls for each of those 5 groups. And then after that I have created a dmc.Checkbox that will populate each segment with the respective columns as grouped previously as seen in code below:

            dmc.SegmentedControl(
                id="criteria-selection",
                value="E",
                data=[
                    {"value": "E", "label": "E"},
                    {"value": "S", "label": "S"},
                    {"value": "G", "label": "G"},
                    {"value": "Q", "label": "Q"},
                    {"value": "C", "label": "C"},
                ],
            ),
            html.Div(id="checkboxes-container"),

@app.callback(
    Output("checkboxes-container", "children"),
    Input("criteria-selection", "value")
)
def update_checkboxes(selected_category):
    checkboxes = []

    for column, category in column_to_category.items():
        if category == selected_category:
            checkboxes.append(
                dmc.Checkbox(
                    label=column,
                    checked=False,
                    value=False,
                    id={'type': 'checkbox', 'index': column}
                )
            )

    return checkboxes

Now the issue is that when the user makes a selection in category E then moves to make selection in category S, all the checks from segment E disappear.

My main aim is to store the user’s choices and put them in a seperate dataframe that i will eventually use to create other visuals. Any direction please? I have explored dcc.Store but cannot seem to make it work

2

Hey, what did not work for you when using dcc.Stores? :slight_smile:
You have to store the values of the checkboxes when the user changes category and also use the previous stored values to fill the new checkboxes.
So the callback should include:

@app.callback(
    Output("checkboxes-container", "children"),
Output("store", 'data'),
    Input("criteria-selection", "value"),
State("store", 'data'),
prevent_initial_call = True
)