Tabs component - weird error

Dash Python
1

Hello all,

I have started using Dash for a dynamic modelling application. I was successful in producing a really nice functionality so far, but it has grown bigger and I need dynamic tabs.

Among many of the online queries this one seems the most relevant: dcc.Tabs: Filling tabs with dynamic content. How to organize the callbacks?.

I tried the same approach using reproducible Hello World example, and I get the error :"TypeError: Unexpected keyword argument ‘tabs’.

Here is the code:

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt

import flask
import pandas as pd
import time
import os

server = flask.Flask('app')
server.secret_key = os.environ.get('secret_key', 'secret')

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/hello-world-stock.csv')

app = dash.Dash('app', server=server)
app.config['suppress_callback_exceptions'] = True
app.scripts.config.serve_locally = False
dcc._js_dist[0]['external_url'] = 'https://cdn.plot.ly/plotly-basic-latest.min.js'



app.layout = html.Div([
        html.Div([dcc.Dropdown(
                 id='dropdown',
                 options=[{'label': 'Option 1', 'value': 1},
                          {'label': 'Option 2', 'value': 2}],
                 value='1',
                 )]),
        dcc.Tabs(tabs=[{'label': 'Tab 1', 'value': 1},
                       {'label': 'Tab 2', 'value': 2}],
                 value=3,
                 id='tabs',
                 ),
        html.Div(id='tab-output')
    ])


@app.callback(Output('tab-output', 'children'), [Input('tabs', 'value')])
def display_content(value):
    if value == 1:
        return  html.Div([
    html.H1('Stock Tickers'),
    dcc.Dropdown(
        id='my-dropdown',
        options=[
            {'label': 'Tesla', 'value': 'TSLA'},
            {'label': 'Apple', 'value': 'AAPL'},
            {'label': 'Coke', 'value': 'COKE'}
        ],
        value='TSLA'
    ),
    dcc.Graph(id='my-graph')
], className="container")
    elif value == 2:
        return html.Div([dt.DataTable(id='table')]) #etc. etc.


@app.callback(Output('my-graph', 'figure'),
              [Input('my-dropdown', 'value')])
def update_graph(selected_dropdown_value):
    dff = df[df['Stock'] == selected_dropdown_value]
    return {
        'data': [{
            'x': dff.Date,
            'y': dff.Close,
            'line': {
                'width': 3,
                'shape': 'spline'
            }
        }],
        'layout': {
            'margin': {
                'l': 30,
                'r': 20,
                'b': 30,
                't': 20
            }
        }
    }

if __name__ == '__main__':
    app.run_server()

If anybody can help, I would be very grateful - I cannot continue my project without solving this.

Thanks!

2

I think your error is here:

I would rewrite the following:

dcc.Tabs(
   id='tabs', value=1, children=[
      dcc.Tab(label='Label1', value=1),
      dcc.Tab(label='Label2', value=2)
   ]
),
html.Div(id='tab-output')

That is; I have my separate dcc.Tab components in a children list, you have a dictionary within a list. Hope it helps. :slightly_smiling_face:

PS: For future reference, if you put 3x ` in the beginning and end of your code entry, it will format your text as code for easier readability.:man_technologist:

1 Like
3

Thanks a lot Blaceus - this solved it!!!

I am now trying to exchange data between tabs, but I guess I am going to struggle a bit with json :slight_smile:

Cheers!

4

You’re welcome. :smile:
I know that there have been some development of a Storage component in Dash, such that users can share data between states. I believe it can help you on the way. See:

Personally, I have implemented storing data in a hidden Div, but that was before this storage component was released. I would think that is the correct way to implement such shennanigans today.

If you have not yet found it, the hidden Div method is described in the documentation as well. :slightly_smiling_face:

5

Sorry for a bit of delay - was busy and was waiting for the weekend to go back to learning Dash :slight_smile:

Thanks for the advice. I was only successful in implementing Storage to an extent. Weirdly it updates normal div’s but not the dropdown lists. If you are interested in particularities, I opened a new thread: Dropdown list not updating ( while normal .div is updating)

Cheers!

1 Like