Tab group component example not working

[bigfatwhale]

Hi, I'm trying out a simplified version of the tab group component here https://justpy.io/tutorial/custom_components/#tab-group-component, with just the first tab group.

Below is the error i got,

Can someone advise how the update vue js call works so that maybe i can try and fix up the bug? Usually clicking on new tab should trigger mount()-> this.graph_change()?

i get similar problems when i put aggrids inside different tabs.

[bigfatwhale]

something like the below with tabs containing pandas dataframe doesn't seem to be working,

def tab_comp_test():

    wp = jp.WebPage()

    dfs = [
        pd.DataFrame({'a':[1,2,3], 'b':[4,5,6]}), 
        pd.DataFrame({'bb':range(10), 'cc':range(10)}), 
        pd.DataFrame({'foo':[1001,1002,1003,1004], 'bar':range(4), 'blah':[1234, 2345, 3456, 4567]}), 
        pd.DataFrame({'c1':range(7), 'c2':range(7)}), 

    ]

    t = Tabs(a=wp, classes='w-3/4 m-4', style='', animation=False, content_height=550)
    for idx, chart_type in enumerate(['bar', 'column', 'line', 'spline']):
        d = jp.Div(style=Tabs.wrapper_style, delete_flag=True)
        dfs[idx].jp.ag_grid(a=d, style='width: 100%')
        t.add_tab(f'id{chart_type}', f'{chart_type}', d)

[WolfgangFahl]

At https://github.com/elimintz/justpy/tree/master/examples/tutorial you'll now find the example from the tutorial and module for using the component Tabs from there. The example does not perfectly work - the refresh is not done automatically but eventually the tab content shows

The example for this issues is now available at https://github.com/elimintz/justpy/blob/master/examples/issues/issue_387_aggrid_tabgroup.py and indeed it doesn't load the grid properly. I can not reproduce the error message you have shown. I didn' ckeck whether the grids would load without the tabs and that would be the first step in finding out what is going on. Did you find a solution workaround yourself?

[bigfatwhale]

I’ve tried debugging/tracing from server side to the front end js. It’s hard to figure out what’s going wrong. It appears to be the caching part of the code or some refresh issue, but I’m not too familiar with vue.js to know what’s going on…

maybe @elimintz might know at one glance?

[bigfatwhale]

if someone could be kind enough to explain in some detail the code path from when we make the python component changes on the server side and how it transitions to the js side (is it always calling mount?), then i can delve deeper into debugging this. I'm rather new to js/vue stuff so abit of hand-holding would be helpful.

[WolfgangFahl]

see #685