This is my whole code (condensed)
Is this perhaps why my code is not working? Do I need to add the Update menus in update layout? How would I do it for the setup below?
Thank you.
import dash
import dash_core_components as dcc
import dash_html_components as html
import json
from textwrap import dedent as d
import dash_table
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd
import flask
df = pd.read_csv('/Users/mythilisutharson/documents/cam_work/mof_explorer_flourish/MOF_trans_data2.csv')
server = flask.Flask(__name__)
app = dash.Dash(__name__, server=server)
features = df.columns
styles = {
'pre': {
}
}
tabs_styles = {}
tab_style = {
}
tab_selected_style = {
}
app.layout = html.Div([
html.H1('',
style={}),
html.Div([
dcc.Tabs([
dcc.Tab(label='MOF explorer', style=tab_style, selected_style=tab_selected_style,
children=[
html.Div([
html.Div([dash_table.DataTable(
id='datatable-interact',
columns=[
{"name": i, "id": i, "deletable": True, 'selectable': True} for i in df.columns
],
data=df.to_dict('records')
style_table={},
style_cell={
}
), html.Div(id='datatable-interact-container')
], style={'padding': 15}),
html.Div([
html.Label(["Select X variable:",
dcc.Dropdown(id='xaxis',
options=[{'label': i, 'value': i} for i in features],
value='Grav. Uptake (mol/kg)', clearable=False)])
], style={'display': 'inline-block', 'fontSize': 14, 'font-family': 'Arial',
'width': '23%'}),
html.Div([
html.Label(["Select Y variable:",
dcc.Dropdown(id='yaxis',
options=[{'label': i, 'value': i} for i in features],
value='Vol. Uptake (cm3/cm3)', clearable=False)])
], style={'width': '23%', 'display': 'inline-block', 'fontSize': 14,
'font-family': 'Arial'}),
html.Div([
html.Label(
["Select Size variable:",
dcc.Dropdown(id='marker_size',
options=[{'label': i, 'value': i} for i in features],
value='Pore Limiting Diameter (A)', clearable=False)])
], style={'width': '23%', 'display': 'inline-block', 'fontSize': 14,
'font-family': 'Arial'}),
html.Div([
html.Label(
["Select Color variable:",
dcc.Dropdown(id="marker_color",
options=[{'label': i, 'value': i} for i in features],
value='Void Fraction', clearable=False)])
], style={'width': '23%', 'display': 'inline-block', 'fontSize': 14,
'font-family': 'Arial'}),
html.Div([
html.Label(["Select Pressure (bar):",
dcc.Slider(id='pressure-slider',
min=df['Pressure (bar)'].min(),
max=df['Pressure (bar)'].max(),
value=df['Pressure (bar)'].max(),
marks={str(pressure): str(pressure) for pressure in
df['Pressure (bar)'].unique()},
step=None,
), ])
], style={'fontSize': 14, 'font-family': 'Arial', 'height': '20%', 'padding': 15,
'width': '90%'})
])
]),
dcc.Tab(label='Statistical Analysis', style=tab_style, selected_style=tab_selected_style,
children=[ ], className='container')
])
], style=tabs_styles),
]),
], style={}) # style for outter div
@app.callback(
Output('datatable-interact-container', 'children'),
[Input('datatable-interact', 'derived_virtual_data'),
Input('datatable-interact', 'derived_virtual_selected_rows'),
Input('xaxis', 'value'),
Input('yaxis', 'value'),
Input('marker_size', 'value'),
Input('marker_color', 'value'),
Input('pressure-slider', 'value')
]
)
def update_graphs(rows, derived_virtual_selected_rows, xaxis_name, yaxis_name, size_name, color_name,
pressure_value):
if derived_virtual_selected_rows is None:
return []
dff = df if rows is None else pd.DataFrame(rows)
dfff = dff[dff['Pressure (bar)'] == pressure_value]
return [
html.Div([dcc.Graph(
id='HTS-plot',
figure={
'data': [go.Scatter(x=dfff[xaxis_name],
y=dfff[yaxis_name], mode='markers',
marker_color=dfff[color_name], marker_size=2 * dfff[size_name],
marker=dict(sizemode='area', sizeref=max(dfff[size_name]/(15 ** 2)),
sizemin=4,
opacity=0.7, showscale=True,
line=dict(width=0.5, color='DarkSlateGrey'),
colorbar=dict(title=color_name),
colorscale='Viridis', ),
text=dfff['DDEC code'],
hovertemplate=
"<b>%{text}</b><br><br>" +
"Y Variable: %{y:.0f}<br>" +
"X Variable: %{x:. bar}<br>"
"S Variable : %{marker.size:. }<br>" +
"C Variable: %{marker.color:.}"
"<extra></extra>", )],
'layout': go.Layout(
title=f"<b><br>MOF Explorer tool at {str(pressure_value)} bar</b><br> ",
xaxis={'title': xaxis_name, 'autorange': True},
yaxis={'title': yaxis_name, 'autorange': True},
clickmode='event+select', # double click to discharge
template="simple_white",
updatemenus=[{'buttons': [
{
'args': [{'colorscale': 'Viridis'}],
'label': 'Viridis',
'method': 'restyle',
},
{'args': [{'colorscale': 'Cividis'}],
'label': 'Cividis',
'method': 'restyle', },
{'args': [{'colorscale': 'Blues'}],
'label': 'Blues',
'method': 'restyle', }
]}]
)
}
)], style={'padding': 25, 'width': '60%'}
)
]
app.run_server(debug=True)