Hello!!!
I’m trying to create an interface using pattern-matching componetns for data visualization: a button creates a card where a graph object is present a multi-dropbox can be created to select data to be plotted inside the graph.
Unfortunately, I’m unable to connect this “second layer” dynamic dropdown to the “first” layer dynamic card.
I’ve created a minimal (not) working example of what I would like to create by means of input an html plan text to be changed.
But now I’m facing two problems:
- I can create only a limited number of “second layers” input for each “first layer” container"
- MOST IMPORTANT, I have no idea how to connect the output of the input to the “first layer” container.
#Dash useful libraries
from dash import Dash, dcc, html, Input, Output, State, dash_table, callback_context,MATCH
import dash_bootstrap_components as dbc
import jupyterlab_dash
from jupyter_dash import JupyterDash
#app = Dash(__name__)
app = Dash()#[dbc.themes.SLATE])
#run the server locally without the aid of the internet connection
# Serve files locally
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True
app = Dash()
#run the server locally without the aid of the internet connection
# Serve files locally
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True
#make first layer
def create_first_layer(n_clicks):
first_layer = dbc.Row(
[
dbc.Col(
[
html.H1("Layer 1 # {}".format(n_clicks))
],
),
dbc.Col(
[
html.H1("No input forwarded", id={"type": "first_layer_container", "index": n_clicks})
],
),
dbc.Col(
dbc.Button( "Add second layer", id={"type": "first_layer_add_input", "index": n_clicks},n_clicks=0),
),
dbc.Col(
children = [], id={"type": "first_layer_dynamic_container", "index": n_clicks},
),
],
)
return first_layer
# make second layer:
def create_second_layer(n_clicks,first_layer_number):
# return (dcc.Input(id={"type": "first_layer_add_input", "index": str(first_layer_number["index"]) + "." + str(n_clicks)}, type="text", placeholder=""))
return (dcc.Input(id={"type": "first_layer_add_input_text", "index": n_clicks}, type="text", placeholder=""))
# Layout
header_row = dbc.Row(
[
dbc.Col(
[
html.H1("Nested Pattern Matching Callbacks")
],
width = 6,
),
dbc.Col(
dbc.Button( "Add first layer", id="add_input",n_clicks=0),
width = 6,
),
],
)
app.layout = dbc.Container(
[
header_row,
html.Div(id="pattern-match-container", children=[]),
],
)
#First Layer Callback
@app.callback(
[
Output("pattern-match-container","children")
]
,
[
Input("add_input", "n_clicks"),
State("pattern-match-container", "children"),
],
prevent_initial_call=True
)
def add_first_layer(n_clicks,container):
new_first_layer = create_first_layer(n_clicks)
container.append(new_first_layer)
return [container]
#Second Layer Callback
@app.callback(
[
Output({"type": "first_layer_dynamic_container", "index": MATCH},"children")
]
,
[
Input({"type": "first_layer_add_input", "index": MATCH},"n_clicks"),
State({"type": "first_layer_dynamic_container", "index": MATCH},"children"),
State({"type": "first_layer_dynamic_container", "index": MATCH},"id"),
],
prevent_initial_call=True
)
def add_second_layer(n_clicks,container,first_layer_number):
print("INSIDE ADD SECOND LAYER")
print("n_clicks: {}".format( n_clicks))
print(first_layer_number)
new_second_layer = create_second_layer(n_clicks,first_layer_number)
container.append(new_second_layer)
print(container)
return [container]
#change first layer input
#concatenate input text
@app.callback(
[
Output({"type": "first_layer_container", "index": MATCH},"children")
]
,
[
Input({"type": "first_layer_add_input_text", "index": MATCH}, "value"),
State({"type": "first_layer_container", "index": MATCH},"children")
],
prevent_initial_call=True
)
def update_text(value,current_text):
print(value)
print(type(value))
print(type(current_text))
print(current_text)
return ["|".join([current_text[0],value])]
#Run Dash
if __name__ == '__main__':
#app.run_server(debug=True,jupyter_mode="external", port = 8056)
app.run_server(debug=True,jupyter_mode="external",port = 8055)
Any help would be much appreciated!!