Hi Chris,
I’m attempting to use the dash-table-experiments example you provided while combining it with what you’ve accomplished with tabs.
I’m able to recreate your usage.py without issue on its own and have had no issues creating apps with tabs. However, when I attempt to package the app.layout from your example into a ‘children Div’ to show when clicking a tab, the platform hangs and cannot switch between tabs… nor does it show the table and graphs.
Here is the full code:
'import dash
’from dash.dependencies import Input, Output, State
’import dash_core_components as dcc
’import dash_html_components as html
’import dash_table_experiments as dt
’import pandas as pd
’import plotly
'app = dash.Dash()
'app.scripts.config.serve_locally = True
’app.config.supress_callback_exceptions = True
‘DF_GAPMINDER = pd.read_csv(
’ ‘https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv’
)
'DF_GAPMINDER = DF_GAPMINDER[DF_GAPMINDER[‘year’] == 2007]
'DF_GAPMINDER.loc[0:20]
'test_layout = html.Div([
’ html.H4(‘Gapminder DataTable’),
’ dt.DataTable(
’ rows=DF_GAPMINDER.to_dict(‘records’),
’
’ # optional - sets the order of columns
’ columns=sorted(DF_GAPMINDER.columns),
’ row_selectable=True,
’ filterable=True,
’ sortable=True,
’ selected_row_indices=[],
’ id=‘datatable-gapminder’
’ ),
’ html.Div(id=‘selected-indexes’),
’ dcc.Graph(
’ id=‘graph-gapminder’
’ ),
’], className=“container”)
‘app.layout = html.Div([
’
’ html.Div([
’ html.Div(
’ dcc.Tabs(
’ tabs=[
’ {‘label’:‘First View’, ‘value’:1},
’ {‘label’:‘Second View’, ‘value’:2},
’ {‘label’:‘Third View’, ‘value’:3}
’ ],
’ value=1,
’ id=‘overall-tabs’,
’ vertical=False,
’ style={
’ ‘borderRight’:‘thin lightgrey solid’,
’ ‘textAlign’:‘left’
’ }
’ ),
’ style={‘width’:‘100%’, ‘float’:‘top’}
’ ),
’ html.Div(
’ html.Div(id=‘tab-output’),
’ style={‘width’:‘100%’, ‘float’:‘bottom’}
’ )
’ ],
’ style={‘fontFamily’:‘Dosis’,
’ }),
'# test_layout"""
'])
‘@app.callback(
’ dash.dependencies.Output(‘tab-output’, ‘children’),
’ [dash.dependencies.Input(‘overall-tabs’, ‘value’)])
‘def display_content(overall_tab):
’ if overall_tab == 1:
’ return html.Div([])
’ elif overall_tab == 2:
’ return html.Div([])
’ elif overall_tab == 3:
’ return test_layout
‘@app.callback(
’ Output(‘datatable-gapminder’, ‘selected_row_indices’),
’ [Input(‘graph-gapminder’, ‘clickData’)],
’ [State(‘datatable-gapminder’, ‘selected_row_indices’)])
‘def update_selected_row_indices(clickData, selected_row_indices):
’ print ‘make it here?’
’ if clickData:
’ for point in clickData[‘points’]:
’ if point[‘pointNumber’] in selected_row_indices:
’ selected_row_indices.remove(point[‘pointNumber’])
’ else:
’ selected_row_indices.append(point[‘pointNumber’])
’ return selected_row_indices
‘@app.callback(
’ Output(‘graph-gapminder’, ‘figure’),
’ [Input(‘datatable-gapminder’, ‘rows’),
’ Input(‘datatable-gapminder’, ‘selected_row_indices’)])
‘def update_figure(rows, selected_row_indices):
’ dff = pd.DataFrame(rows)
’ fig = plotly.tools.make_subplots(
’ rows=3, cols=1,
’ subplot_titles=(‘Life Expectancy’, ‘GDP Per Capita’, ‘Population’,),
’ shared_xaxes=True)
’ marker = {‘color’: [’#0074D9’]*len(dff)}
’ for i in (selected_row_indices or []):
’ marker[‘color’][i] = ‘#FF851B’
’ fig.append_trace({
’ ‘x’: dff[‘country’],
’ ‘y’: dff[‘lifeExp’],
’ ‘type’: ‘bar’,
’ ‘marker’: marker
’ }, 1, 1)
’ fig.append_trace({
’ ‘x’: dff[‘country’],
’ ‘y’: dff[‘gdpPercap’],
’ ‘type’: ‘bar’,
’ ‘marker’: marker
’ }, 2, 1)
’ fig.append_trace({
’ ‘x’: dff[‘country’],
’ ‘y’: dff[‘pop’],
’ ‘type’: ‘bar’,
’ ‘marker’: marker
’ }, 3, 1)
’ fig[‘layout’][‘showlegend’] = False
’ fig[‘layout’][‘height’] = 800
’ fig[‘layout’][‘margin’] = {
’ ‘l’: 40,
’ ‘r’: 10,
’ ‘t’: 60,
’ ‘b’: 200
’ }
’ fig[‘layout’][‘yaxis3’][‘type’] = ‘log’
’ return fig
‘if name == ‘main’:
’ app.run_server(debug=True)
I know test_layout produces the original display, it can be shown by uncommenting test_layout within app.layout and commenting the tabs related Div above it. Interestingly, if I try to use both at once, I get test_layout showing up as a tab and as its separate Div.
Any ideas on why it will not show within a tab without including it as its own Div?
Thanks for all the help, great product!