'Plotly dash creating columns based on user selection

I am working on a selection menu where the user can select the number of experiments they want to compare/see. Depending on this number I would like to adapt the number of columns that appear, being one for each experiment. In the image below an example of the menu with one experiment can be seen. However, I would like these dropdowns to duplicate if the user selects two experiments having them in side-to-side columns.

Here is an example of one column and one experiment: example with one column and one experiment

The code I have so far is the following:

# Load Data
df = px.data.tips()

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"] 

# Build App
app = JupyterDash(__name__,  external_stylesheets=external_stylesheets)

app.layout = html.Div([
    # first row - selecting the number of experiments
     html.Div([
        html.I("Select the number of experiments you want to compare (min - 2 and max - 10):"),
        html.Br(),
        
        # input box for the number of experiments
        dcc.Input(id="num_exp" , type='number', min = 2, max = 10, placeholder="No of experiments"),
        html.Div(id="output")
        ], style = {'width': '100%'}
    ),
    
    # second row - where the experiments are organized in columns
    html.Div([
        html.Label([
            html.I("X axis "),
            dcc.Dropdown(
                id = 'dd_axis', 
                clearable = False,
                placeholder = 'Select property x-axis',
                options=[
                    {'label': i, 'value': i}
                    for i in properties
                ], 
                style={
                    'width': '100%'
                })
        ]),
        html.Label([
            html.I("Y Axis "),
            dcc.Dropdown(
                id = 'dd_yaxis',
                clearable = False,
                placeholder = 'Select property y-axis',
                options=[ ], 
                disabled = False)
        ])        
    ], style = {'display': 'inline-block', 'vertical-align': 'top', 'margin-left': '3vw', 'margin-top': '3vw', 'width': '50%'})
])

@app.callback(
 Output("output", "children"),
    # number of experiments input 
    Input("num_exp", "value"),
)

def update_output(test_type):
    in_testtype = test_type
    return u'{} experiments'.format(test_type)

def cb_render(*vals):
    return " | ".join((str(val) for val in vals if val))

Can you help me adding more dropdown menus to the side and dividing the second row in columns based in the user selection?

Thank you!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source