We Keep Coding

Returning a completely new layout to same page in Dash

I am trying to set up a dash app which has 2 layers:
1st page has a couple of input forms, and based on these inputs - app_layout
2nd page - which has a different set of intputs (layout_more_inputs) which pop up depending on what 1st page input is.
I am trying to return layout_more_inputs from a callback but it doesn't work.
app.layout = html.Div([
html.H3('welcome to app'),html.Br(),
dcc.Input(id='input-00-state', type='text', value='QQQ'),
dcc.Input(id='input-01-state', type='text', value='MOVE'),
html.Button(id='submit-button-state', n_clicks=0, children='Go!'),
html.Div(id='output-state'),
dcc.Graph(id='graph-with-slider'),
])
layout_more_inputs = html.Div([
dcc.Input(id='input-10-state', type='number', value='0.11'),
dcc.Input(id='input-11-state', type='number', value=0.12),
html.Button(id='submit-button-state2', n_clicks=0, children='Go Go!'),
])
#front page - 0
#app.callback(
Output('container', 'children'),
Input('submit-button-state', 'n_clicks'),
State('input-00-state', 'value'),
State('input-01-state', 'value'),
)
def ask_for_more_inputs(n_clicks,asset_str,event_str):
print("input summary:")
print(n_clicks,asset_str,event_str)
return layout_more_inputs #<<--DOES NOT WORK
#front page - 1
#app.callback(
Output('graph-with-slider', 'figure'),
Output('output-state', 'children'),
Input('submit-button-state2', 'n_clicks'),
State('input-10-state', 'value'),
State('input-11-state', 'value'),
)
def more_inputs(n_clicks,input0,input1):
d = {'x': [input0, input1], 'y': [input0, input1]}
df = pd.DataFrame(data=d)
filtered_df = df
fig = px.scatter(filtered_df, x="x", y="y")
fig.update_layout(transition_duration=500)
return fig, u'''Button pressed {} times, 1 is "{}", and 2 is "{}"'''.format(n_clicks,state1,state2)
if __name__ == '__main__':
app.run_server(debug=True)

I'm not 100% on what exactly is is you're attempting to deliver, but one options would be to use Dash's dcc.Tabs property.
I've started & laid the groundwork, sort of, for you:
import sys
import dash
from dash import html
from dash import dcc
from dash import no_update
from dash.dependencies import Input, Output, State
# app = dash.Dash(__name__)
app = JupyterDash()
layout = html.Div([
html.H3('welcome to app'),
html.Br(),
dcc.Input(id='input-00-state', type='text', value='QQQ'),
dcc.Input(id='input-01-state', type='text', value='MOVE'),
html.Button(id='submit-button-state', n_clicks=0, children='Go!'),
html.Div(id='output-state'),
dcc.Graph(id='graph-with-slider'),
])
layout_more_inputs = html.Div([
dcc.Input(id='input-10-state', type='number', value=0.11),
dcc.Input(id='input-11-state', type='number', value=0.12),
html.Button(id='submit-button-state2', n_clicks=0, children='Go Go!'),
])
tabs = [
dcc.Tab(label="Front Page - 0", children=layout),
dcc.Tab(label="Front Page - 1", children=layout_more_inputs)
]
multitab_layout = [dcc.Tabs(id="tabs", children=tabs)]
app.layout = html.Div(
[html.Div(id="multitab_layout", children=multitab_layout)])
# front page - 0
#app.callback(
Output('container', 'children'),
Input('submit-button-state', 'n_clicks'),
[State('input-00-state', 'value'),
State('input-01-state', 'value')]
)
def ask_for_more_inputs(n_clicks, asset_str, event_str):
print("input summary:")
print(n_clicks, asset_str, event_str)
return layout_more_inputs # <<--DOES NOT WORK
# front page - 1
#app.callback([
Output('graph-with-slider', 'figure'),
Output('output-state', 'children')
], Input('submit-button-state', 'n_clicks'),
Input('submit-button-state2', 'n_clicks'), [
State('input-00-state', 'value'),
State('input-01-state', 'value'),
State('input-10-state', 'value'),
State('input-11-state', 'value')
])
def more_inputs(n_clicks, n_cliks2, input0, input1, state0, state1, state10,
state11):
d = {'x': [input0, input1], 'y': [input0, input1]}
df = pd.DataFrame(data=d)
filtered_df = df
fig = px.scatter(filtered_df, x="x", y="y")
fig.update_layout(transition_duration=500)
return fig, u'''Button pressed {} times, 1 is "{}", and 2 is "{}"'''.format(
n_clicks, state1, state2)
if __name__ == '__main__':
app.run_server(debug=True)
using your provided code; but not entirely sure where exactly you'd want it to go from here. In terms of UI/EX behavior etc. Perhaps this may be enough of a clue to get you going as you need to...

Changing the label in Dash bootstrap dcc.tab based on callback children

I am using dash core components to create a dash app that includes tabs that return tables based on callbacks. I'm trying to see if it's possible to change the label on the tab itself based on the callback, though it seems like the label will only accept a string, and not a callback with and id and children.
Right now the label of the tab simply says 'Car Type' (this is just a snippet of the code):
dbc.Row([
dbc.Col(dcc.Dropdown(id='car-types', multi=False,,
options=[{'label':x, 'value':x}
for x in sorted(car_list)]),
#width={'size': 5, "offset": 1, 'order': 1}
),
html.Div([
dcc.Tabs([
dcc.Tab(label='Car Type', children=
dbc.Col([
html.Div(id="table1"
)]
)
)
#app.callback(
[Output('table1', 'children'),
Output('car_label', 'children')],
[Input('car-types', 'value')],
[State('car_manuf', 'value')],
def update_table1(a,b):
code for table,
a = code for car_label string
return html.Div([dt.DataTable(),
), a
But what if I wanted it to say "Car Type SUV" or "Car Type Sedan" based on what the output 'car_label' says, how can I change the label of the tab to say that?
I tried something like:
html.Div([
dcc.Tabs([
dcc.Tab(label='Car Type ' + (children=[],id='car_label'), children=
dbc.Col([
html.Div(id="table1"
)]
)
But obviously that won't work. Any suggestions?

Maybe something like this with a dropdown and string formatting.
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
dcc.Tabs(id='tabs-example', value='tab-1', children=[
dcc.Tab(label='', id='first-tab', value='tab-1'),
dcc.Tab(label='', id='second-tab', value='tab-2'),
]),
dcc.Dropdown(id='car-types', multi=False, value='honda',
options=[{'label':'honda', 'value':'honda'},
{'label':'toyota', 'value':'toyota'}]
),
dcc.Dropdown(id='car-types2', multi=False, value='tesla',
options=[{'label': 'jeep', 'value': 'jeep'},
{'label': 'tesla', 'value': 'tesla'}]
),
html.Div(id='tabs-example-content')
])
#app.callback(Output('tabs-example-content', 'children'),
Input('tabs-example', 'value'))
def render_content(tab):
if tab == 'tab-1':
return html.Div([
html.H3('Tab content 1...')
])
elif tab == 'tab-2':
return html.Div([
html.H3('Tab content 2...')
])
#app.callback(
Output('first-tab', 'label'),
Input('car-types', 'value')
)
def update_label(name):
return f"Car Type: {name}"
#app.callback(
Output('second-tab', 'label'),
Input('car-types2', 'value')
)
def update_label(name2):
return f"Car Type: {name2}"
if __name__ == '__main__':
app.run_server(debug=True)

Dash Bootstrap components not changing linked url

I am working on a Dash app and want to include a button/hyperlink to a local html file, however I need to be able to change the html file depending on what search term is input. Below is what I currently have, but I keep getting an error saying the dbc.Button doesn't support 'n-clicks'. I also had an issue with the link immediately being opened when the script was ran. I've never used the Dash Bootstrap components before so I'm not really sure what I need to do to fix this issue.
This is just a snippet of the code so that it wasn't too long
app.layout = html.Div([
html.H1('Gene-NE'),
html.H5('Created by Lauren Kirsch and Dr. Chiquito Crasto'),
html.Label('Search Box'),
dcc.Input(id="search_gene",
type="text",
value='',
placeholder="Type a human gene name",
debounce=True,
minLength=0, maxLength=50,
autoComplete='on',
size='40'),
html.Div([
dcc.Graph(id='mygraph')]),
dcc.RadioItems(
id="vertical_display_toggle",
options=[
{'label': 'Show vertical date bars', 'value': 'show'},
{'label': 'Hide vertical bars', 'value': 'hide'}],
value='hide', # first loading value selected
labelStyle={'display': 'inline-block'}, inputStyle={"margin-left": "8px", "margin-right": "5px"}),
dcc.RadioItems(
id="synonym_display_toggle",
options=[
{'label': 'Show synonyms', 'value': 'show'},
{'label': 'Hide synonyms', 'value': 'hide'}],
value='hide', # first loading value selected
labelStyle={'display': 'inline-block'}, inputStyle={"margin-left": "8px", "margin-right": "5px"}),
html.Div([
dbc.Button("Click Here", id="id-button", className="mr-2"),
html.A(dbc.Nav(dbc.NavItem(dbc.NavLink('Click for PubMedIDs', id='outlink', href='/', target="_blank",
className="nav-link"))))
]),
html.Br(),
html.H6('Texas Tech University Center for Biotechnology and Genomics')])
df = pd.read_csv('list_out.txt', sep='\t', dtype=str)
df = df.transpose().reset_index().rename(columns={'index': 'Date'})
new_header = df.iloc[0]
df = df[1:]
df.columns = new_header
df = df.iloc[0:600]
df = df.set_index('Date')
df = df.iloc[:, ~df.columns.duplicated()]
lookup_df = pd.read_csv('Gene_Lookup.csv', dtype=str)
link = lookup_df.set_index('Approved_Symbol').Linked_Genes.str.split('|').to_dict()
link_date = lookup_df.set_index('Approved_Symbol').Date_Name_Changed.to_dict()
#app.callback(
[Output('mygraph', 'figure'),
Output('outlink', 'children')],
[Input('search_gene', 'value'),
Input('vertical_display_toggle', 'value'),
Input('synonym_display_toggle', 'value'),
Input('id-button', 'n-clicks')])
def update_output(search_gene, vertical_display_user_slct, synonym_display_user_slct, clicks):
if search_gene:
search_gene = search_gene.upper()
syns = link[search_gene]
trace1 = go.Scatter(x=df.index, y=df[search_gene], line_shape='linear', line=dict(color='white'), name=search_gene)
fig = go.Figure()
fig.add_trace(trace1)
if clicks != 0:
return 'f"/assets/{search_gene}.html"'

The main problem is that you've specified n-clicks as input and it needs to be n_clicks instead.
So for clarity, the callback should look more like this:
#app.callback(
[Output("mygraph", "figure"), Output("outlink", "children")],
[
Input("search_gene", "value"),
Input("vertical_display_toggle", "value"),
Input("synonym_display_toggle", "value"),
Input("id-button", "n_clicks"),
],
)
def update_output(
search_gene, vertical_display_user_slct, synonym_display_user_slct, clicks
):
# ...
As far as the link problem goes, I'm not able to reproduce this with what you've shared, but in your callback you have this check:
if clicks != 0:
return 'f"/assets/{search_gene}.html"'
clicks can also be None so make sure this gets handled correctly. Instead you could do something this:
if clicks:
return 'f"/assets/{search_gene}.html"'
This will handle None as well.

Incorporating uploaded data into a callback in Dash

First I made a simple app with fixed data:
import base64
import datetime
import io
import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import dash_table
import plotly.graph_objs as go
import pandas as pd
external_stylesheets = ['css stylesheet test.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
df = pd.read_csv('myfile.csv')
text = 'Col1'
vals = df.groupby([text]).size()
available_indicators = ['Col1', 'Col2', 'Col3', 'Col4', 'Col5', 'Col6', 'Col7']
status_vals = df['Status'].unique()
app.layout = html.Div([
html.Div([
html.H1("Welcome to the Dashboard"),
html.P("Learning Dash is fun!")
], ),
dcc.Graph(id='donut-with-slider'),
dcc.Dropdown(
id='Category',
options=[{'label': i, 'value': i} for i in available_indicators],
value='Col1'),
dcc.Dropdown(
id='Status',
options=[{'label': i, 'value': i} for i in status_vals],
value='Filled'),
dcc.Slider(
id='year-slider',
min=df['Year'].min(),
max=df['Year'].max(),
value=df['Year'].max(),
marks={str(Year): str(Year) for Year in df['Year'].unique()},
step=None
),
])
#app.callback(
Output('donut-with-slider', 'figure'),
Input('year-slider', 'value'),
Input('Category', 'value'),
Input('Status', 'value'))
def update_figure(selected_year, Category, Status):
df2 = df[df.Year == selected_year]
df3 = df2[df2.Status == Status]
text = Category
vals = df3.groupby([text]).size()
fig = go.Figure(data=[go.Pie(labels=vals.index.values, values=vals, hole=0.3)])
fig.update_layout(transition_duration=500)
return fig
if __name__ == '__main__':
app.run_server(debug=True)
And all is well. What I'm struggling to do is adapt this so that data can be uploaded using dcc.Upload, and then incorporated into the donut-with-slider plot so it remains interactive. Importantly there is also a lot of pandas legwork that has to go into cleaning up the uploaded data. This is what I have so far that is not working (updated to try to send to json, but still getting same list error):
#ideally I wouldn't need to start this way, with the last
#saved data, because uploaded files might have new
#values, but I can't think of how else to do this
df = pd.read_csv('Most_Recent_Version.csv')
text = 'Col1'
vals = df.groupby([text]).size()
available_indicators = ['Col1', 'Col2', 'Col3', 'Col4', 'Col5', 'Col6', 'Col7']
status_vals = df['Status'].unique()
app.layout = html.Div([
dcc.Upload(
id='upload-data',
children=html.Div([
'Drag and Drop or ',
html.A('Select Files')
]),
style={
'width': '100%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
'margin': '10px'
},
multiple=True
),
html.Div([
html.H1("Welcome to the Dashboard"),
html.P("Learning Dash is so interesting!!")
], ),
dcc.Graph(id='donut-with-slider'),
dcc.Dropdown(
id='Category',
options=[{'label': i, 'value': i} for i in available_indicators],
value='Col1'),
dcc.Dropdown(
id='Status',
options=[{'label': i, 'value': i} for i in status_vals],
value='Filled'),
dcc.Slider(
id='year-slider',
min=df['Year'].min(),
max=df['Year'].max(),
value=df['Year'].max(),
marks={str(Year): str(Year) for Year in df['Year'].unique()},
step=None),
html.Div(id='output-data-upload'),
])
#app.callback(
Output('intermediate-value', 'children'),
[Input('upload-data', 'filename'), Input('upload-data', 'contents')])
def parse_contents(contents, filename):
if contents is not None:
content_type, content_string = contents.split(',')
decoded = base64.b64decode(content_string)
try:
if 'csv' in filename:
#if they upload a csv, the file is already clean
df = pd.read_excel(io.BytesIO(decoded), header=0)
elif 'xls' in filename:
df = pd.read_excel(io.BytesIO(decoded), sheet_name=tabs, header=1, usecols='B:AC')
#lines and lines of pandas cleanup
#save new Most_Recent_Version.csv
cleaned.to_csv('Most_Recent_Version.csv', index=None)
return cleaned.to_json(date_format='iso', orient='split')
except Exception as e:
print(e)
return html.Div([
'There was an error processing this file.'
])
else:
return dash.no_update
#app.callback(
Output('donut-with-slider', 'figure'),
[Input('upload-data', 'contents'),
Input('upload-data', 'filename')],
Input('Category', 'value'),
Input('Status', 'value'),
Input('year-slider', 'value'))
def update_figure(contents, filename, Category, Status, selected_year):
if json_updated_data is not None:
dff = pd.read_json(json_updated_data, orient='split')
df2 = dff[dff.Year == selected_year]
df3 = df2[df2.Status == Status]
text = Category
vals = df3.groupby([text]).size()
fig = go.Figure(data=[go.Pie(labels=vals.index.values, values=vals, hole=0.3)])
fig.update_layout(transition_duration=500)
return fig
if __name__ == '__main__':
app.run_server(debug=True)
In addition to callback where I commented about the list type, the error it's throwing lies with content_type, content_string = contents.split(',') in parse_data(): AttributeError: 'list' object has no attribute 'split'
Maybe some of this is connected, why is everything constantly getting converted to a list? What am I missing here? I tried having a second callback to update the output but that didn't seem to help either.

Plotly Dash: auto submit once last input box/entire form has been filled

Currently, I have set up a page to take 3 inputs and return a status (pass/fail) after a submit button is clicked. However, I’d like to make the data entering process more efficient by automatically submitting after the last box is filled. Is there a way to do this with my current set up, using dash bootstrap’s forms, or selenium?
edit: Selenium may not be a viable option here. How about Flask-WTF? I am not familiar with Flask at all but since Dash is built on top of Flask, it may be easy to integrate my code on top of a Flask app.
Code below:
external_stylesheets = ['dbc.themes.BOOTSTRAP']
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.COSMO])
app.css.append_css({
'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css 104'
})
def update_database(star, serial, weight, andon):
sheet.append([datetime.now(), star, serial, weight, andon])
raw.save(r'Unit weights_test.xlsx')
def compare_tol(star, serial, weight):
if star is not '':
compare_group = df_main.loc[star, 'Group']
if float(weight) > float(df_groups.loc[compare_group, 'Upper']) or \
float(weight) < float(df_groups.loc[compare_group, 'Lower']):
andon = 'FAIL'
else:
andon = 'PASS'
else:
andon = '...'
update_database(star, serial, weight, andon)
return andon
def which_entry(label, af):
layout = html.Div([
dcc.Input(
id=label,
placeholder=f' {label}...',
type='text',
value='',
autoFocus=af
)
], style={'padding': '5px 5px'})
return layout
def andon_color(andon, n_blur):
if n_blur:
if andon == 'PASS':
return 'success'
elif andon == 'FAIL':
return 'warning'
else:
return 'secondary'
app.layout = html.Div([
html.Div([
html.Img(src='http://www.image.png',
width='250px')
]),
html.Div([
html.Div([
html.H3('Scan Star Number'),
]),
which_entry('Star Number', True),
html.Div([
html.H3('Scan Serial Number')
]),
which_entry('Serial Number', False),
html.Div([
html.H3('Enter Unit Weight')
]),
which_entry('Weight', False),
], style={'text-align': 'center'}),
html.Div([
dbc.Button('Submit', id='button', color='primary')
], style={'text-align': 'center',
'width': '250px'}),
html.Div([
dbc.Alert(id='andon', color='secondary')
], style={'text-align': 'center',
'width': '250px',
'padding': '5px 5px'})
], style={'width': '250px'})
#app.callback(
[
Output('andon', 'children'),
Output('andon', 'color'),
Output('Star Number', 'value'),
Output('Serial Number', 'value'),
Output('Weight', 'value')
],
[
Input('Weight', 'n_blur')
],
[
State('Star Number', 'value'),
State('Serial Number', 'value'),
State('Weight', 'value')
]
)
def output_all(n_blur, star, serial, weight):
if not n_blur:
raise dash.exceptions.PreventUpdate
andon = compare_tol(star, serial, weight)
return andon, andon_color(andon, n_blur), '', '', ''
if __name__ == '__main__':
app.run_server(debug=True)