Solara•2y ago•

7 replies

Setting height of `ipyaggrid` in Solara app gives error

Hi, how can I set the

height

height

of a

ipyaggrid

ipyaggrid

that is being cross-filtered by a

solara

solara

component? I am using @MaartenBreddels 's snippet here general. However, if I pass an integer

height

height

to the grid element like this

ipyaggrid.Grid.element(..., height=500)

ipyaggrid.Grid.element(..., height=500)

it renders fine but then leads to this error:

trait of a Grid instance expected a unicode string, not the int 500

trait of a Grid instance expected a unicode string, not the int 500

, whenever the data is filtered. Could it be a bug in

ipyaggrid

ipyaggrid

where the widget expects

height

height

to be an

int

int

but the trait is defined as

unicode

unicode

, leading to data type issues? I found a workaround but wonder if I am missing something or if there is a better approach. Thanks!

from typing import cast
import ipyaggrid
import plotly.express as px
import solara

df = solara.reactive(px.data.iris())
species = solara.reactive('setosa')

@solara.component
def AgGrid(df, grid_options):
    
    height = solara.use_reactive(500) # set as int

    def update_df():
        widget = cast(ipyaggrid.Grid, solara.get_widget(el))
        widget.grid_options = grid_options
        widget.update_grid_data(df)
        print(widget.height)

        # workaround where we recast height
        if isinstance(widget.height, int):
            height.set(f'{widget.height}px')
        else:
            height.set(widget.height)

    el = ipyaggrid.Grid.element(grid_data=df, grid_options=grid_options, height=height.value)
    solara.use_effect(update_df, [df, grid_options])

    return el

@solara.component
def Page():
    grid_options = {
        'columnDefs': [
            {'headerName': 'Sepal Length', 'field': 'sepal_length'},
            {'headerName': 'Species', 'field': 'species'},
        ]
    }
    df_filtered = df.value.query(f'species == {species.value!r}')
    solara.Select('Species', value=species, values=['setosa', 'versicolor', 'virginica'])
    AgGrid(df=df_filtered, grid_options=grid_options)

from typing import cast
import ipyaggrid
import plotly.express as px
import solara

df = solara.reactive(px.data.iris())
species = solara.reactive('setosa')

@solara.component
def AgGrid(df, grid_options):
    
    height = solara.use_reactive(500) # set as int

    def update_df():
        widget = cast(ipyaggrid.Grid, solara.get_widget(el))
        widget.grid_options = grid_options
        widget.update_grid_data(df)
        print(widget.height)

        # workaround where we recast height
        if isinstance(widget.height, int):
            height.set(f'{widget.height}px')
        else:
            height.set(widget.height)

    el = ipyaggrid.Grid.element(grid_data=df, grid_options=grid_options, height=height.value)
    solara.use_effect(update_df, [df, grid_options])

    return el

@solara.component
def Page():
    grid_options = {
        'columnDefs': [
            {'headerName': 'Sepal Length', 'field': 'sepal_length'},
            {'headerName': 'Species', 'field': 'species'},
        ]
    }
    df_filtered = df.value.query(f'species == {species.value!r}')
    solara.Select('Species', value=species, values=['setosa', 'versicolor', 'virginica'])
    AgGrid(df=df_filtered, grid_options=grid_options)

Solara•2y ago•

7 replies

Cyrus

Setting height of `ipyaggrid` in Solara app gives error

Hi, how can I set the

height

height

of a

ipyaggrid

ipyaggrid

that is being cross-filtered by a

solara

solara

component? I am using @MaartenBreddels 's snippet here general. However, if I pass an integer

height

height

to the grid element like this

ipyaggrid.Grid.element(..., height=500)

ipyaggrid.Grid.element(..., height=500)

it renders fine but then leads to this error:

trait of a Grid instance expected a unicode string, not the int 500

trait of a Grid instance expected a unicode string, not the int 500

, whenever the data is filtered. Could it be a bug in

ipyaggrid

ipyaggrid

where the widget expects

height

height

to be an

int

int

but the trait is defined as

unicode

unicode

, leading to data type issues? I found a workaround but wonder if I am missing something or if there is a better approach. Thanks!

from typing import cast
import ipyaggrid
import plotly.express as px
import solara

df = solara.reactive(px.data.iris())
species = solara.reactive('setosa')

@solara.component
def AgGrid(df, grid_options):
    
    height = solara.use_reactive(500) # set as int

    def update_df():
        widget = cast(ipyaggrid.Grid, solara.get_widget(el))
        widget.grid_options = grid_options
        widget.update_grid_data(df)
        print(widget.height)

        # workaround where we recast height
        if isinstance(widget.height, int):
            height.set(f'{widget.height}px')
        else:
            height.set(widget.height)

    el = ipyaggrid.Grid.element(grid_data=df, grid_options=grid_options, height=height.value)
    solara.use_effect(update_df, [df, grid_options])

    return el

@solara.component
def Page():
    grid_options = {
        'columnDefs': [
            {'headerName': 'Sepal Length', 'field': 'sepal_length'},
            {'headerName': 'Species', 'field': 'species'},
        ]
    }
    df_filtered = df.value.query(f'species == {species.value!r}')
    solara.Select('Species', value=species, values=['setosa', 'versicolor', 'virginica'])
    AgGrid(df=df_filtered, grid_options=grid_options)

from typing import cast
import ipyaggrid
import plotly.express as px
import solara

df = solara.reactive(px.data.iris())
species = solara.reactive('setosa')

@solara.component
def AgGrid(df, grid_options):
    
    height = solara.use_reactive(500) # set as int

    def update_df():
        widget = cast(ipyaggrid.Grid, solara.get_widget(el))
        widget.grid_options = grid_options
        widget.update_grid_data(df)
        print(widget.height)

        # workaround where we recast height
        if isinstance(widget.height, int):
            height.set(f'{widget.height}px')
        else:
            height.set(widget.height)

    el = ipyaggrid.Grid.element(grid_data=df, grid_options=grid_options, height=height.value)
    solara.use_effect(update_df, [df, grid_options])

    return el

@solara.component
def Page():
    grid_options = {
        'columnDefs': [
            {'headerName': 'Sepal Length', 'field': 'sepal_length'},
            {'headerName': 'Species', 'field': 'species'},
        ]
    }
    df_filtered = df.value.query(f'species == {species.value!r}')
    solara.Select('Species', value=species, values=['setosa', 'versicolor', 'virginica'])
    AgGrid(df=df_filtered, grid_options=grid_options)

Setting height of `ipyaggrid` in Solara app gives error

Similar Threads

Setting height of `ipyaggrid` in Solara app gives error

Similar Threads

Similar Threads

Similar Threads