I am creating a component in Dash with rows. After a user clicks on a submit button, a figure with multiple lines (each row a line) should get created.
This rows component could have been a table component, but since my component contains buttons in one of the columns, I created it manually with divs. The reason is that the Dash DataTable does not allow "HTML" components.
The Important Thing: The first two rows contain default values. Also, there is a button that can create a new empty row, allowing the user to add new information. The user may add an arbitrary number of rows, by clicking the button multiple times.
All the new or edited information has to get saved somewhere (state) so that when the user clicks on the submit button, the figure appears.
I am still unsure if this logic is possible with Dash/Plotly. Any ideas?
P.S. I have already tried with three rows, but then I have to hardcode the Inputs and Outputs in the callback. This is no plausible solution.
Here is some sample not working code. Also, some functions would be stored as separate files as they depict some components:
from dash import Dash, html, dcc, Input, Output
app = Dash(__name__, title="Dash App")
def input_container(index: int) -> dcc.Input:
return dcc.Input(id={'type': 'my-input', 'index': index}, value='initial value')
# mutable state
state = [input_container(1)]
def inputs_container(state) -> html.Div:
return html.Div(id='inputs-container', children=state)
def add_input_button(app, state) -> html.Button:
@app.callback(Output('inputs-container', 'children'), Input('add-input', 'n_clicks'), prevent_initial_call=True)
def add_input(n_clicks):
return state.append(input_container(len(state) + 1))
return html.Button('Add Input', id='add-input')
def submit_button(app, state) -> html.Button:
@app.callback(Output('graph', 'figure'), Input('submit-input', 'n_clicks'))
def submit_input(n_clicks):
return '' # create some figure from the state values
return html.Button('Submit Input', id='submit-input')
app.layout = html.Div([
inputs_container(state),
add_input_button(app, state),
submit_button(app, state),
dcc.Graph(id='graph'),
])
if __name__ == '__main__':
app.run_server(debug=True)