Wrapping ipyaggrid properly

[scottcjohnston]

Hello all, firstly thanks to the maintainers, Solara has been super useful for my projects and its been a great experience overall!
I'm sharing my approach and experience with wrapping ipyaggrid for solara, hoping we can come up with a canonical approach to doing this as I think it would benefit the community. Increasingly with LLMs its important to have good examples for them to "learn" published somewhere (of course this helps humans as well!) hopefully I can help get people moving more quickly when looking for a more featured datagrid for solara.

The code below is my attempt so far, please go easy on it and think of it as a work in progress rather than the finished article, I have also made it suit my use-case its not supposed to be a generic wrapper. However I think it could be a useful starting point for the stated aim of having a canonical example people can adapt to their use-case.

Rough edges

• Supplying height/width directly to Grid is problematic as there appears to be type mismatches between the trait as implemented and what gets passed through. i.e. passing a string "200px" for example, results in:

assert isinstance(self.obj.height_in, int), msg
AssertionError: height must be an int (number of pixels)  

passing an int, results in:

traitlets.traitlets.TraitError: The 'height' trait of a Grid instance expected a unicode string, not the int 200.

I think this leads to more general questions about wrapping IPywidgets and the kinds of issues faced. I don't completely understand what "element" is doing under the hood and where this issue migh be, but I'm doing my best to learn. Regardless the standard work-around appears to be to use "use_effect" and configure the trailet directly after rendering.

• I wondered if anyone had thoughts on my approach to getting selection data out of the grid by attaching a reactive variable to the traitlet via "observe". Unfortunately doing this via "use_trait_observe" ran into issues and I couldn't get this working. As a side note, aggrid only returns the slection data thats "visible" and in my usecase I want to hide some column, I have a filtering approach but its prone to failures depending on the data as there might be multiple matches depending on the available "visible" columns.

• minor one, I wondered if anyone has a method for forcing re-render of objects in response to a reactive variable change, for example the "theme" as I understand changing some traits will force a re-render but can we force it via another method?

import solara
from solara import Reactive
import pandas as pd
from typing import  cast
from ipyaggrid import Grid

@solara.component
def _data_grid(df, theme, on_action_record: Reactive=None, hide_fields: list[str] = None):
    
    column_defs = []
    for col in df.columns:
        col_def = {"headerName": col, "field": col}
        if hide_fields and col in hide_fields:
            col_def["hide"] = True
        column_defs.append(col_def)

    grid_options = {
        "columnDefs": column_defs,
        "defaultColDef": {
            "resizable": True,
            "sortable": True,
            "filter": True
        },
        "defaultExportParams": {
            "allColumns": True
        }
    }

    if on_action_record is not None:
        
        grid_options["rowSelection"] = "single"
        
        def on_action(sel):
            if sel.get('new', {}).get('rows', {}):
                # this will only contain the "visible" columns not the hidden columns
                rows = sel.get('new', {}).get('rows', {})[0]
                mask = pd.Series([True] * len(df), index=df.index)
    
                # Apply each filter condition
                for column, value in rows.items():
                    if column in df.columns:
                        # Update the mask with an additional condition
                        mask = mask & (df[column] == value)
                
                records = df[mask].to_dict('records')
                
                
                if len(records) == 1:
                    on_action_record.set(records[0])
                else:
                    # Might be possible for multiple records to match depending on visible columns used in filter, not what we want when selecting, which is a downfall of this approach
                    raise Exception("Multiple records returned")
            else:
                raise Exception("No selection data found") 

    el = Grid.element(
        grid_options=grid_options, 
        export_mode='auto',
        columns_fit='auto',
        export_to_df=False,
        theme=theme
    )
    
    

    
    def update():
        widget = cast(Grid, solara.get_widget(el))
        widget.update_grid_data(df)
        widget.height = "200px"
        if on_action_record is not None:
            widget.observe(on_action, "grid_data_out")
        
    def cleanup():
        widget = cast(Grid, solara.get_widget(el))
        if on_action_record is not None:
            widget.unobserve(on_action, "grid_data_out")

        return cleanup
    
    solara.use_effect(update, dependencies=[df, grid_options])




@solara.component
def data_grid(df, on_action_record: Reactive=None, hide_fields: list[str] = None):
    
    theme = solara.use_reactive(None)

    if solara.use_trait_observe(solara.lab.theme, "dark_effective"):
        theme.set("ag-theme-balham-dark")
    else:
        theme.set("ag-theme-balham")

    with solara.Column():
       
        _data_grid(df, theme.value, on_action_record, hide_fields)