Dash: Is there a way to have different tabs in an app ?

[TheoLvs]

Hello,

Thanks for the library, it's great ! The live update callbacks work perfectly, it's an awesome feature.

The only thing thats seems to be missing when comparing to Shiny is the possibility to have different Tabs to build a proper dashboard. I guess this could be done with html and css, but it could be nice to have an object made for that.

Theo

[chriddyp]

Thanks Theo!

There is no Tab component yet but there might be one in the future. For now, you can either build your own component, contract us to build one, or use dash urls. I'll keep this issue updated with other advancements.

[chriddyp]

I'm working this in https://github.com/plotly/dash-core-components/pull/74

[Akronix]

great! good job @chriddyp!
Would it be possible to be able to set an icon in the tab label instead of a string?

[chubukov]

Is there any plan to have the tabs function more as containers? Or is there some functionality already there that I'm missing?

E.g. say I want to have one tab show a couple of graphs, each with some interactivity. And under another tab, I want to have some other graphs and some other widgets. It seems to me that I would need to have every element's output have the tab state as input to the callback, and decide whether it should be visible based on the current tab state. Is that the intended usage? It would be awesome if that was automated by having the Tabs component have children, just like a div

[chriddyp]

It seems to me that I would need to have every element's output have the tab state as input to the callback, and decide whether it should be visible based on the current tab state. Is that the intended usage?

Yeah, that's the intended usage right now.

It would be awesome if that was automated by having the Tabs component have children

What would the syntax look like in your opinion? For example, maybe something like?

Tabs({
   'tab-1': html.Div(...),
   'tab-2': html.Div(...),
   'tab-3': html.Div(...),
}, tabs=[
    {'label': 'Tab 1', 'value': 'tab-1'},
    {'label': 'Tab 2', 'value': 'tab-2'},
    {'label': 'Tab 3', 'value': 'tab-3'}
)

[chubukov]

@chriddyp Yes, that's exactly what I had in mind. I fully admit to not having thought through it completely.

Or even something like

Tabs([
{'name':'tab1','contents':html.Div(...)},
{'name':'tab2','contents':html.Div(...)},
{'name':'tab3','contents':html.Div(...)},
])

[bbloks]

@chriddyp, great job!
Tabs definitely make Dash more attractive.
I've been playing around, making some graphs and also came across the search for tab containers, to store different content per tab. I really like the idea @chubukov mentions, another method could be maybe attaching an 'id' to each individual tab to relate content to?

[TrixPy]

is there any idea, how to make tabs with different content?

[Akronix]

hi again.
What about having a dynamic number of tabs, with a _close tab_ for each tab and an add button for creating new tabs? Would it be easy to implement?

[kyleabeauchamp]

I think some sort of tab containers might streamline my workflow as well. My current workaround has also been to append the tab value to all of my callback Inputs, but my current challenge is having tab 3 depend on the DataFrame Table output of tab 2, which is hidden.

[kyleabeauchamp]

My first idea on how to implement dependencies between tabs was to duplicate the content of tab 2, make it invisible and then create have the tab depend on the invisible intermediate result. Doing this via Div(..., hidden=True) seems to do the trick 👍

[chriddyp]

Div(..., style="visibility: hidden"))

@kyleabeauchamp - note that the syntax for hiding and showing content with CSS is style={'display': 'none'} and style={'display': 'block'}

[kyleabeauchamp]

Thanks, I've updated my previous comment to avoid propagating my CSS-ignorance.

[aeweiwi]

Thanks guys for this amazing effort in bringing Dash to Python.
I liked the idea of @chriddyp of how to use Tabs

I am playing around with Tabs and currently facing a problem of keeping states of input while switching from the "input tab" to the "report tab".

Here is a small code snippet example:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, Event, State

app = dash.Dash()
tabs_list = [{"label":"input tab", "value": 0},
{"label":"report tab", "value": 1}]

app.layout = html.Div([dcc.Tabs(tabs = tabs_list,
value='ui_form_tab', id='tabs',
vertical='False'),
html.Div(id='tab_output')])

@app.callback(Output('tab_output', 'children'),
[Input('tabs', 'value')])
def display_tab_content(value):
if value == 0:
return html.Div([dcc.Dropdown(id='drp_process',
options=[{'label': 'a', 'value':'a'},
{'label':'b', 'value':'b'}],
value='input')])
elif value==1:
return html.Div(html.H1('I AM YOUR REPORT {0}'.format(value)))

if __name__ == '__main__':
app.run_server(host='0.0.0.0', port=8050, debug=True)

Any solution for that ?

[abcorep]

@kyleabeauchamp @chriddyp @chubukov I was wondering if you guys have an example of how exactly to append the tab value to all of the callbacks inputs and use the hidden divs. Sorry about my ignorance, but I'm completely new to Dash, plotly and Python as well.

[chubukov]

@abcorep Something like this. It's a little messy, perhaps someone has a cleaner example.

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

div_1=html.Div(['Bananas'],id='div_1')
div_2=html.Div(['Durian'],id='div_2')

tabs=dcc.Tabs(
        tabs=[
            {'label': 'Delicious', 'value': 'tab_1'},
            {'label': 'Not delicious', 'value': 'tab_2'},
        ],
        value='tab_1',
        id='tabs'
)
app = dash.Dash()
app.layout = html.Div([
    tabs,
    div_1,
    div_2
])

@app.callback(
    Output('div_1','style'),
    [Input('tabs','value'),
    ])
def update_div1_visible(tab_val):
    if tab_val=='tab_1':
        return {'display':'block'}
    else:
        return {'display':'none'}

@app.callback(
    Output('div_2','style'),
    [Input('tabs','value'),
    ])
def update_div2_visible(tab_val):
    if tab_val=='tab_2':
        return {'display':'block'}
    else:
        return {'display':'none'}

app.server.run()

[abcorep]

@chubukov, it's much cleaner now, thank you very much. I'll try this workaround in my applications. 👍

[FunmiKesa]

Thanks guys for this amazing effort in bringing Dash to Python.
I liked the idea of @chriddyp of how to use Tabs

I am playing around with Tabs and currently facing a problem of keeping states of input while switching from the "input tab" to the "report tab".

Here is a small code snippet example:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, Event, State

app = dash.Dash()
tabs_list = [{"label":"input tab", "value": 0},
{"label":"report tab", "value": 1}]

app.layout = html.Div([dcc.Tabs(tabs = tabs_list,
value='ui_form_tab', id='tabs',
vertical='False'),
html.Div(id='tab_output')])

@app.callback(Output('tab_output', 'children'),
[Input('tabs', 'value')])
def display_tab_content(value):
if value == 0:
return html.Div([dcc.Dropdown(id='drp_process',
options=[{'label': 'a', 'value':'a'},
{'label':'b', 'value':'b'}],
value='input')])
elif value==1:
return html.Div(html.H1('I AM YOUR REPORT {0}'.format(value)))

if name == 'main':
app.run_server(host='0.0.0.0', port=8050, debug=True)

Any solution for that ?

Does anyone have a solution to keeping the states of input while switching between tabs?

[Akronix]

Does anyone have a solution to keeping the states of input while switching between tabs?

I guess you would need an intermediate callback to save the state of those input as json into a hidden div in the browser, before to change the tab_output value.

BTW, why is this issue still open? It should be resolved after https://github.com/plotly/dash-core-components/pull/74 is already merged and released.

[ned2]

The new revision to the Tabs component was merged over in plotly/dash-core-components#213