Reacton use_event on vuetify DataTable breaks in Sidebar

[eyjay-ok]

Hello, we are trying to update a Text when the userr clicks on a row of a vuetify DataTable. This works as long it is not in the Sidebar.
Her a working example:

import solara
import pandas as pd

meta = pd.DataFrame(
    columns=["name", "region", "source"],
    data=[
        ["s1", "de", "a"],
        ["s2", "de", "a"],
        ["s3", "de", "b"],
    ],
)

r_meta = solara.reactive(meta)
row_clicked = solara.reactive("")


def vue_table_click(component, event, selected_row):
    row_clicked.value = str(selected_row)


@solara.component
def page():
    table = solara.v.DataTable(
        items=r_meta.value.to_dict(orient="records"),
        headers=[{"text": c, "value": c} for c in r_meta.value.columns],
        dense=True,
        hide_default_footer=True,
    )
    solara.v.use_event(table, "click:row", vue_table_click)
    solara.Text(text=row_clicked.value)

And here an example which is not working:

import solara
import pandas as pd

meta = pd.DataFrame(
    columns=["name", "region", "source"],
    data=[
        ["s1", "de", "a"],
        ["s2", "de", "a"],
        ["s3", "de", "b"],
    ],
)

r_meta = solara.reactive(meta)
row_clicked = solara.reactive("")


def vue_table_click(component, event, selected_row):
    row_clicked.value = str(selected_row)


@solara.component
def page():
    with solara.Sidebar():
        table = solara.v.DataTable(
            items=r_meta.value.to_dict(orient="records"),
            headers=[{"text": c, "value": c} for c in r_meta.value.columns],
            dense=True,
            hide_default_footer=True,
        )
        solara.v.use_event(table, "click:row", vue_table_click)
    solara.Text(text=row_clicked.value)

This leads to the error:

Traceback (most recent call last):
  File "/.venv/lib/python3.11/site-packages/reacton/core.py", line 1870, in _reconsolidate
    effect()
  File "/.venv/lib/python3.11/site-packages/reacton/core.py", line 1108, in __call__
    self._cleanup = self.callable()
                    ^^^^^^^^^^^^^^^
  File "/venv/lib/python3.11/site-packages/reacton/ipyvue.py", line 15, in add_event_handler
    vue_widget = cast(ipyvue.VueWidget, react.core.get_widget(el))
                                        ^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/.venv/lib/python3.11/site-packages/reacton/core.py", line 769, in get_widget
    raise KeyError(f"Element {el} not found in all known widgets")  # for the component {context.widgets}")
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
KeyError: "Element ipyvuetify.DataTable(items = [{'name': ...ce': 'b'}], headers = [{'text': ...'source'}], dense = True, hide_default_footer = True) not found in all known widgets"

Am I missing something? Romeving the use_event leads to running code.
I am using solara==1.27.0

Best,
Andrew

[maartenbreddels]

Hi Andrew,

thank you for opening the issue. The with solara.Sidebar() 'steals' the children and puts them in a different place, which means the use_event cannot find them.
I wonder if we can improve the error message in this case, or actually make this work.
In any case, the solution is to make a self contained component, e.g. sth like this:

@solara.component
def SidebarTable(on_click):
    table = solara.v.DataTable(
        items=r_meta.value.to_dict(orient="records"),
        headers=[{"text": c, "value": c} for c in r_meta.value.columns],
        dense=True,
        hide_default_footer=True,
    )
    solara.v.use_event(table, "click:row", on_click)
    return table

@solara.component
def page():
    with solara.Sidebar():
        SidebarTable(on_click=vue_table_click)
    solara.Text(text=row_clicked.value)

Let me know if that solves your problem.

Regards

Maarten

[eyjay-ok]

Thanks for your reply. Your suggestion works fine for me and creating a component does make it more readable aswell 😃
The error message was not intuitive for me, but unfortunately I don't have a better suggestion.

Best,
Andrew

[maartenbreddels]

I've opened widgetti/reacton#30 so we don't lose track, but the original issue is solved I think. If not, feel free to re-open