How to put value parameter same as option parameter in Dash Python

Question

I try to make a map visualization with bunch of filter using Dash. My Dash component in this case is using DMC or Dash Mantine Component. I tried to build something like ‘chaining callback’ which the the first multiselect will be affecting second multiselect option. Here is what I’ve got

and then if you change the ‘Block Name’ input, it will affect the availability option in ‘Operator Name’ which second multiselect component

Now the problem is, how do I put default value in "operator name" input, so everytime I reload the page, the "operator name" will input the available option. Something like this when I reload the page

It set the default value. How do I do that in Dash Mantine Component?
Here’s my code so far

html.Div(
    className='accordion-content',
    children=[

html.H5('Block Name', style={'marginTop':20}),
dmc.MultiSelect(
    placeholder="Select Block Name",
    id="multiselect-block",
    value=all_blocks['Block_Name'].to_list(),
    data=all_blocks['Block_Name'].to_list(),
    style={'marginTop':10},
    clearable=True,
    searchable=True,
    nothingFound= 'No Options Found'
    ),

html.H5('Operator Name', style={'marginTop':20}),
dmc.MultiSelect(
    placeholder="Select Operator Name",
    id="multiselect-operator",
    value=[], #here is the problem, I dont know how to set the value here
    data=[],
    style={'marginTop':10},
    clearable=True,
    searchable=True,
    nothingFound= 'No Options Found'
    )

@app.callback(
    Output('multiselect-operator', 'data'),
    Input('multiselect-block', 'value')
)

def set_operator_option(chosen_block):
    if chosen_block is None:
        df_operator=[]
    else:
        df_operator = all_blocks[all_blocks['Block_Name'].isin(chosen_block)]
    return pd.unique(df_operator['Operator'].to_list())

Asked By: naranara

||

Source

Answer 1

I think first of all you should add Operator value and then return new value based on callback. Something like below:

import dash_mantine_components as dmc
from dash import Dash, Input, Output, html, dcc
import dash_bootstrap_components as dbc
import pandas as pd


df = pd.DataFrame(
    {
        'process': ['A', 'A', 'B', 'B', 'C', 'C'],
        'code': [f'CODE{i}' for i in range(1, 7)],
        'data': [1 for _ in range(6)]
    }
)

app = Dash(__name__)

app.layout = html.Div(
    className='accordion-content',
    children=[

html.H5('Block Name', style={'marginTop':20}),
dmc.MultiSelect(
    placeholder="Select Block Name",
    id="multiselect-block",
    value=df['process'].unique(),
    data=df['process'].unique(),
    style={'marginTop':10},
    clearable=True,
    searchable=True,
    nothingFound= 'No Options Found'
    ),

html.H5('Operator Name', style={'marginTop':20}),
dmc.MultiSelect(
    placeholder="Select Operator Name",
    id="multiselect-operator",
    value=df['code'].unique(), #here is the problem, I dont know how to set the value here
    data=df['code'].unique(),
    style={'marginTop':10},
    clearable=True,
    searchable=True,
    nothingFound= 'No Options Found'
    )
    ])

@app.callback(
    Output('multiselect-operator', 'data'),
    Input('multiselect-block', 'value')
)

def set_operator_option(chosen_block):
    if chosen_block is None:
        df2=df.copy
    else:
        df2 = df[df['process'].isin(chosen_block)]
    return pd.unique(df2['code'].to_list())

if __name__ == '__main__':
    app.run(debug=False, port = 1514)

First load:
After removing first selection:

Answered By: hoa tran

How to put value parameter same as option parameter in Dash Python

Question:

Answers: