Vuetify Tabs shrinks Datagrid when you change layout

[gioxc88]

I'll first show the problem and then I'll describe the problem and give a reproducible example.

I have an app that updates many DataGrid centrally and then displays them in different tabs. I change the layout of the Datagrid depending on the number of rows.

1. If I change the layout of a DataGrid from an ipyvuetify Tab that is not active the Datagrid gets shrunk.
2. oddly enough this only happens if I change the layout more the one time (so the first time you change it works fine)

• If you run the code below you'll see a button that changes the layout of a DataGrid and of a v.Btn.
• If you stay on the first tab and press the button twice, then go on the second tab, you will see the same result as the image above (DataGrid shrinks).
• If you only press the button once the DataGrid doesn't shrink.

I am not sure if the problem is with ipydatagrid or ipyvuetify so I'll cross-post in both repos, but I can say that (as you can see from the image above):

• if I use ipywidgeds tab instead of ipyvuetify tab the problems is not present (this suggest it might be a problem with ipyvuetify)
• if I change the layout of another widget instead of 'DataGrid' the problem is not present (this suggest it might be a problem with ipydatagrid) So maybe if could be a problem with both

This is really a mystery and it took me a long time to isolate the problem and boil it down to the change in the layout as it is part of a much more complex application. I hope you can review it and come up with a solution. Thanks a lot

import numpy as np
import pandas as pd
import ipywidgets as w
import ipyvuetify as v
from ipydatagrid import DataGrid

def make_df(rows=20, cols=2):
    df = pd.DataFrame(np.random.uniform(size=(rows, cols))).round(2)
    return df

n_grids = 1
n_tabs = 2

grids = [[DataGrid(make_df()) for i in range(n_grids)] for j in range(n_tabs)]

widgets = [
    [
        v.Btn(children=['Test with a different widget'], class_="ml-2")
        for i in range(n_grids)
    ] for j in range(n_tabs)
]

children = [
    w.VBox(
        [
            w.HBox(grids[i]),
            w.HBox(widgets[i]),
        ] 
    ) for i in range(n_tabs)
]
tab = w.Tab()
tab.children = children
for i in range(n_tabs):
    tab.set_title(i, f'tab{i}')

tabs_bar = v.Tabs(
    # dark=True,
    v_model=None,
    children=[v.Tab(children=[f'tab{i}']) for i in range(n_tabs)],
)

tabs_items = v.TabsItems(
    v_model=None,
    # dark=True,
    children=[
        v.TabItem(
            children=[
                w.VBox(
                    [
                        w.HBox(grids[i]),
                        w.HBox(widgets[i]),
                    ] 
                ) 
            ]
        ) for i in range(n_tabs)
    ],
)

v_tab = v.Container(
    class_="my-0 py-0",
    fluid=True,
    children=[
        v.Row(children=[v.Col(children=[tabs_bar])]),
        v.Row(children=[v.Col(children=[tabs_items])]),
    ]
)
w.jslink((tabs_bar, 'v_model'), (tabs_items, 'v_model'))

btn = v.Btn(children=['click to change layout'], outlined=True, color='primary')
def on_click_change_layout(widget, event, payload):
    grids[1][0].layout = {
        'width': '300px', 
        'height': '300px', 
        # 'align-content': 'center'
    }
    widgets[1][0].layout = {
        'width': '500px', 
        # 'height': '300px', 
        # 'align-content': 'center'
    }
btn.on_event('click', on_click_change_layout)

w.VBox(
    [
        btn,
        v.Row(
            children=[
                v.Col(children=[v.Html(children=['ipywidgets'], tag='h1'), tab]), 
                v.Col(children=[v.Html(children=['ipyvuetify'], tag='h1'), v_tab])
            ]
        )
    ]
)

[mariobuikhuizen]

I think this is a similar issue as: https://github.com/bqplot/bqplot/pull/1531.

I think I need to take another stab at generating lumino events for embedded ipywidgets.

[gioxc88]

I think this is a similar issue as: bqplot/bqplot#1531.

I think I need to take another stab at generating lumino events for embedded ipywidgets.

Thanks for looking into it. Unfortunately is beyond my knowledge otherwise I would have gladly helped with a PR

[gioxc88]

Hello @mariobuikhuizen, any chance you have an update on this pls? Thanks!!

[gioxc88]

@mariobuikhuizen the same happens for ipyaggrid