How to activate a tab from another tab?

[ledell]

If I am clicking on a value in a table on one tab (e.g. Tab A), and I want that click to redirect to show some visualizations on another tab (Tab B). How do I do that?

Currently, when I click on an item in the table in Tab A, Wave will just show the visualizations (via the same function used in Tab B), under Tab A (overwriting what was on Tab A), with Tab A highlighted. I want it to "redirect" to Tab B, where Tab B is highlighted and leave the data in Tab A alone.

Some extra context here is that Tab B has a picker which upon choosing a selection, will generate some visualizations. Tab A contains that same values in a table (each row in the table corresponds to one option in the picker) but it would be cool if I could just click on the table row directly to automatically generate the visualizations that should show in Tab B, rather than the user having to manually navigate over to Tab B to do it. Basically the clicking on a row to generate visualizations functionality is working, but I want the visualizations to happen over in Tab B, not A. Thanks!

[mturoci]

Hi @ledell, what kind of tabs are we talking about here? Browser tabs or Wave ui.tabs?

It would also be perfect if you could include a video or minimal code that would show what is needed.

[ledell]

@mturoci I'm using the Wave ui.tabs. I will try to come up with video or small code example soon (or maybe I can just show you a live demo), but basically I just want to have Tab B highlighted and showing some visualizations, after executing something in Tab A (clicking on a row in a table). I'd like to leave the table in Tab A alone but its getting replaced by new plots.

[mturoci]

Got it, will post the necessary code here on Monday.

[mturoci]

TLDR

from h2o_wave import main, app, Q, ui, data


def show_table(q: Q):
    page = q.page['example']
    page.items[0].tabs.value = 'table'
    page.items[1].table.visible = True
    page.items[2].visualization.visible = False

def show_viz(q: Q):
    page = q.page['example']
    page.items[0].tabs.value = 'vis'
    page.items[1].table.visible = False
    page.items[2].visualization.visible = True

@app('/demo')
async def serve(q: Q):
    if not q.client.initialized:
        q.page['example'] = ui.form_card(box='1 1 4 10', items=[
            ui.tabs(name='menu', value='email', items=[
                ui.tab(name='table', label='Table', icon='Table'),
                ui.tab(name='vis', label='Visualization', icon='Chart'),
            ]),
            ui.table(
                name='table',
                columns=[
                    ui.table_column(name='name', label='Name'),
                    ui.table_column(name='surname', label='Surname'),
                ], 
                rows=[
                    ui.table_row(name='row1', cells=['John', 'Doe']),
                    ui.table_row(name='row2', cells=['Alice', 'Smith']),
                    ui.table_row(name='row3', cells=['Bob', 'Adams']),
                ]
            ),
        ui.visualization(
            visible=False,
            height='300px',
            width='500px',
            plot=ui.plot([ui.mark(type='interval', x='=profession', y='=salary', y_min=0)]),
            data=data(fields='profession salary', rows=[
                ('medicine', 23000),
                ('fire fighting', 18000),
                ('pedagogy', 24000),
                ('psychology', 22500),
                ('computer science', 36000),
            ], pack=True),
        ),
        ])
        q.client.initialized = True

    if q.args.table:
        show_viz(q)

    if q.args.menu:
        if q.args.menu == 'vis':
            show_viz(q)
        else:
            show_table(q)
    
    await q.page.save()

However, changing ui.tabs value programmatically has been added just recently and is only possible in nightly currently, will be available in 0.23.

Explanation

ui.tabs in Wave do not hold content, they are just "visual feedback" for a user, the actual content needs to be handled by the developer. There are 2 ways to handle the content:

1. Recreate all form items every time tab changes (shown here) - useful when you do not need to preserve state across tabs, e.g. if user scrolls table -> goes to new tab -> returns, the table would be scrolled to top.
2. Update existing items (as depicted in the example above) - Developers must adjust visible props to show/hide the particular components temporarily. This requires more code but allows for keeping the state between tabs - the table should remain scrolled where it was left.

UX

This UX pattern should be only used when there is a lack of space. In case there is enough space, it's better to display the table and visualization side by side and update vis based on the table interactions. This minimizes clicking and reduces context-switching.

[ledell]

@mturoci Thank you so much! I will upgrade to 0.23 and try to use this to get my tabs working the way I want soon.