I am designing a Dash application using Python.
When a main button is pressed, a smaller sub-button should appear. When this sub-button is pressed, a count keeping track of the number of times it has been pressed must be incremented.
Whenever the main button is pressed, another sub-button should be created with the same functionality as the first sub-button.
Only the latest sub-button that has been created works. It seems like the callback has not been triggered for the others. Any ideas on how to fix this are much appreciated.
I am using callbacks to perform this functionality.
Here is a screenshot of the web application
This is the related code
import base64
import os
from urllib.parse import quote as urlquote
from flask import Flask, send_from_directory
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output,State
import dash_bootstrap_components as dbc
import uuid
server = Flask(__name__)
app = dash.Dash(
server=server,
external_stylesheets=[dbc.themes.BOOTSTRAP]
)
class_card_list = []
class Card:
layout = [
html.Div(id = f"s_1"),
html.Button("Enter anything",id = f"b_one",n_clicks=0)
]
#app.callback(
Output(f"s_1","children"),
Input(f"b_one","n_clicks")
)
def a(n_1):
return f"Button one has been clicked {n_1} times"
app.layout = html.Div(id = "container",children=[
dbc.Button("Press Here",id = "button_1",style={"width":"10vw"},n_clicks=0),
html.Hr(),
])
#app.callback(
Output("container","children"),
Input("button_1","n_clicks"),
State("container","children")
)
def more_classes(n_clicks,old_output):
class_card = Card()
class_card_list.append(class_card)
return old_output + class_card.layout
if __name__ == "__main__":
app.run_server(debug=True, port=8888)
For what I know callbacks aren't for manipulated DOM, probably to get effect you want you have to write JS scripts to hide/unhide object you want.
Related
I am currently creating a dashboard using dash with figures using plotly. I am using the bootswatch themes (https://bootswatch.com/) with bootstrap components to style the dashboard and I was wondering if there was a way to retrieve the primary, secondary, success etc. colours into either RGB or HEX so that I don't have to hard code it in and can then parse these into plotly functions to style the graphs in the same theme.
As of writing this there isn't a way to do it with Python only.
A dash bootstrap components theme is just a uri pointing to a stylesheet.
>>> dbc.themes.BOOTSTRAP
https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
For the stylesheets in external_stylesheets link elements are generated and added to the document.
So there isn't a property on a theme or on the app that holds the value of the css variables.
A workaround solution is to use clientside callbacks:
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Output, Input
import dash_bootstrap_components as dbc
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([dcc.Store(id="intermediate-store"), dcc.Store(id="color-store")])
app.clientside_callback(
"""
function(val) {
const bodyStyles = window.getComputedStyle(document.body);
return {
primary: bodyStyles.getPropertyValue("--primary"),
secondary: bodyStyles.getPropertyValue("--secondary"),
success: bodyStyles.getPropertyValue("--success"),
};
}
""",
Output("intermediate-store", "data"),
Input("intermediate-store", "data"),
)
#app.callback(
Output("color-store", "data"),
Input("intermediate-store", "data"),
)
def update_output_div(data):
# data equals: {'primary': '#007bff', 'secondary': '#6c757d', 'success': '#28a745'}
return data
if __name__ == "__main__":
app.run_server(debug=True)
So the idea in the code above is to use Javascript in clientside callbacks to retrieve the css variables and store them in an intermediate Store. When it's stored we can use another callback to retrieve the value as a dictionary and do something with it.
You could use it by setting a variable when the second callback is triggered or you could use State("color-store", "data") in other callbacks.
I am using python dash and I'd like to have a button below my table that when clicked, will take the user to a specific webpage. I am very - VERY - new to using dash so I'm not even sure if this functionality exists. I did search this topic specifically to python dash and came up empty handed. Any and all help is appreciated, thank you!
You can use dash_bootstrap_components or dbc to do that. Check this page for more detailed information about dbc: https://dash-bootstrap-components.opensource.faculty.ai/docs/components/button/
To summarize, what you need to do:
If you haven't done yet, pip install dbc:
pip install dash-bootstrap-components
Import it to your code:
import dash_bootstrap_components as dbc
Configure your app with one of the dbc themes. When you creat the app, just include an external_stylesheet:
app = Dash(external_stylesheets=[dbc.themes.CYBORG])
Include the dbc.Button componen in your app (see examples in documentation or below).
Here is an example:
from dash import Dash, html
import dash_bootstrap_components as dbc
app = Dash(external_stylesheets=[dbc.themes.CYBORG])
app.layout = html.Div([
html.Div("Default format"),
dbc.Button(
children='Open Page',
id='button_plain',
href = "https://stackoverflow.com/"),
html.Br(),
html.Br(),
html.Br(),
html.Div("Modify format"),
dbc.Button(
children='Open Page',
id='button_format',
color = "primary",
outline = True, #more lightweight format
size = "lg", #sm, lg
href = "https://stackoverflow.com/"),
])
if __name__ == '__main__':
app.run_server(debug=True)
More about dbc Themes: https://bootswatch.com/
use this for button example and to learn more please use this
link:https://dash.plotly.com/dash-core-components.
import dash
import dash_html_components as html
import dash_core_components as dcc
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
html.Div(dcc.Input(id='input-box', type='text')),
html.Button('Submit', id='button'),
html.Div(id='output-container-button',
children='Enter a value and press submit')
])
#app.callback(
dash.dependencies.Output('output-container-button', 'children'),
[dash.dependencies.Input('button', 'n_clicks')],
[dash.dependencies.State('input-box', 'value')])
def update_output(n_clicks, value):
return 'The input value was "{}" and the button has been clicked {} times'.format(
value,
n_clicks
)
if __name__ == '__main__':
app.run_server(debug=True)
When you enter something other than "test" in the input box, and press enter, the label should change to reflect that input.
import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
markerNameInp = dbc.Input(id='markerNameInp',placeholder='Enter name..',
style={'min-width':'150px','width':'15%',
'margin-right':'20px','display':'inline-block',
'margin-bottom':'10px'}, value = 'test')
app = dash.Dash()
app.layout = html.Div(style={'font':'Frutiger Linotype, sans-serif',
'margin-left':'50px','margin-right':'50px'},
children=[
html.Div([markerNameInp]),
dbc.Button('Enter',id='enter',
color = 'primary',
className='mr-1',
style={'height':'40px'}),
html.Div(id="output")
])
#app.callback(
Output(component_id='output', component_property='children'),
[Input(component_id='enter', component_property='n_clicks')]
)
def func(enter_clicks):
return dbc.Label(markerNameInp.value)
if __name__ == "__main__":
app.run_server(debug=True)
Thanks in advance.
It is not possible to access an updated component value by accessing the Python object defined in the layout (markerNameInp.value). This is because each user accessing the Dash app will interact with it differently, and the state is stored on the client-side (the user's browser) rather than server-side (where the app is running, and where the Python object markerNameInp is located).
In your use case, it is possible to access the value property of markerNameInp by using dash.dependencies.State, which does not trigger the callback when the component is updated, but the value can still be captured.
Here's the updated code:
import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State
markerNameInp = dbc.Input(
id="markerNameInp",
placeholder="Enter name..",
style={
"min-width": "150px",
"width": "15%",
"margin-right": "20px",
"display": "inline-block",
"margin-bottom": "10px",
},
value="test",
)
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
children=[
html.Div([markerNameInp]),
dbc.Button("Enter", id="enter", color="primary", className="mr-1"),
html.Div(id="output"),
],
)
#app.callback(
Output("output", "children"),
[Input("enter", "n_clicks")],
[State("markerNameInp", "value")]
)
def func(n_clicks, marker_value):
return dbc.Label(marker_value)
if __name__ == "__main__":
app.run_server(debug=True)
(the bootstrap code was changed in order to reflect best practice, and some styling was removed for simplicity).
I am trying to build a multi-page Dash app using the url callback. My app called dash_apps.py looks like this:
from flask import Flask
from flask import request
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
server = Flask(__name__)
app = dash.Dash(
__name__,
server = server,
serve_locally = False,
requests_pathname_prefix = "/plotary/dash/",
)
app.layout = html.Div([
html.Div([
html.A([
html.Div(id="logo")
],href='https://man-es.com'),
html.Div([
html.H1('Keine Auswertung ausgewählt. ')
],id="description"),
],
id="navbar")]
)
#app.callback(Output('description', 'children'),
[Input('url', 'pathname')])
def display_page(pathname):
return html.Div([
html.H1('Auswertung Nr {}'.format(pathname))
])
#server.route('/plotary/dash/<int:report_id>')
def create_report(report_id):
return app
if __name__ == '__main__':
app.run_server(debug=True)
and is called through a wsgi.py that looks like this:
from dash_apps import server
if __name__ == "__main__":
server.run()
The server I am using runs nginx and I use a web socket that starts wsgi.py with gunicorn as is explained in this post.
Now if I open for example http://<ip.to.server>/plotary/dash/18 it will just state Keine Auswertung ausgewählt. although I would expect it to show Auswertung Nr. 18.
What am I missing here?
Alternatively I could also get the report_id from Flask's route, however I do not know how to then pass this variable to app.layout.
You need to add a dcc.Location object to your layout, and its id should match the one you are using on the callback ("url" in the case of Input('url', 'pathname')).
app.layout = html.Div([
dcc.Location(id='url', refresh=False),
html.Div([
html.A([
html.Div(id="logo")
],href='https://man-es.com'),
html.Div([
html.H1('Keine Auswertung ausgewählt. ')
],id="description"),
],
id="navbar")]
)
I'm new to Dash. I would like to make a app, where I can select values from dropdown filter, filter dataset and display the data table. I'm using dash_table.
My example app code is below. No datatable is shown. Does anyone know what I did wrong? How can I render dash table in dash app?
import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_table as dt
from dash.dependencies import Input, Output
import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')
app = dash.Dash(__name__)
states = df.State.unique().tolist()
app.layout = html.Div(
children=[
dcc.Dropdown(
id='filter_dropdown',
options=[{'label':st, 'value':st} for st in states],
value = states[0]
),
dt.DataTable(id='table-container') ]
)
#app.callback(
Output('table-container', 'data'),
[Input('filter_dropdown', 'value') ] )
def display_table(state):
dff = df[df.State==state]
return dff
if __name__ == '__main__':
app.run_server(debug=True)
BTW, do anyone know where I can find collections of dash app gallery with code?
You have to set the columns of your data table and return your dataframe as a dict in a special form. So change these two lines in your code to make it work.
dt.DataTable(id='table-container', columns=[{'id': c, 'name': c} for c in df.columns.values])
return dff.to_dict('records')
BTW, do anyone know where I can find collections of dash app gallery with code?
Best place with lots of examples with code is the Dash User Guide. You can for instance find the data table there.