How to get feedback from front-end?

[HigorFerreira]

Hello, I hope you all are doing well.

I'm trying to create a widget that acts as a sort of dataframe manager. Specifically, I'm working on implementing a widget that paginates large dataframes using "@anywidget/react."

In my backend Python widget code, I have the following:

import importlib.metadata
import pathlib
import pandas as pd

import anywidget
from traitlets import (
    Int,
    Unicode,
    All,
    observe
)
from traitlets.utils.sentinel import Sentinel

try:
    __version__ = importlib.metadata.version("build_anywidget")
except importlib.metadata.PackageNotFoundError:
    __version__ = "unknown"


class Widget(anywidget.AnyWidget):
    dataframe: pd.DataFrame
    page_size = Int(5).tag(sync=True)
    page_index = Int(0).tag(sync=True)
    original_df_size = Int().tag(sync=True)
    df_part = Unicode().tag(sync=True)

    _esm = pathlib.Path(__file__).parent / "static" / "widget.js"
    _css = pathlib.Path(__file__).parent / "static" / "widget.css"
    
    def __init__(
            self,
            dataframe: pd.DataFrame,
            *args,
            **kwargs
    ) -> None:
        # print('Working')
        super().__init__(*args, **kwargs)
        self.dataframe = dataframe
        self.original_df_size = len(self.dataframe)

        self.calc_df_part()

    def calc_df_part(self):
        start = self.page_index
        end = self.page_index + self.page_size
        df = self.dataframe.loc[start:end]

        self.df_part = df.to_json()

    @observe(All)
    def obb_handler(self, change):
        print('Observe handler called', change)
        self.calc_df_part()

Notice that I have an observer that triggers if any trait changes (I expected this to trigger when I modify something on the front-end). When a change occurs, the observer calls calc_df_part, which updates the pagination through self.df_part (a JSON string that I display to the user).

However, when I update a state like page_index on the front-end, the observer doesn't trigger. I have a basic front-end setup for testing:

import React, { useEffect } from "react";
import { createRender, useModelState, useModel } from "@anywidget/react";
import "./widget.css";

const render = createRender(() => {
   const [pageSize, setPageSize] = useModelState<number>("page_size");
   const [pageIndex, setPageIndex] = useModelState<number>("page_index");
   const [size, setSize] = useModelState<number>("original_df_size");
   const [df_part] = useModelState<string>("df_part");
   const model = useModel();

   useEffect(() => {
   	console.log("Model", { model });
   }, []);

   return <div>
   	
   	<textarea
   		cols={30}
   		rows={10}
   		defaultValue={df_part}
   	/>
   	<div>page_size: {pageSize}</div>
   	<div>page_index: {pageIndex}</div>
   	<div>size: {size}</div>
   	<button onClick={() => setPageSize(pageSize+1)}>Icrease page_size: {pageSize}</button>
   	<button onClick={() => setPageIndex(pageIndex+1)}>Icrease page_index: {pageIndex}</button>
   	{/* <button disabled onClick={() => setSize(size+1)}>Icrease size: {size}</button> */}
   </div>
});

export default { render };

**
I have tried several patterns like on_trait_change and on_msg, but nothing seems to report back from the front-end.
When i click on Icrease page_index, i expected to update df_part

[psychemedia]

@HigorFerreira This is perhaps related? #678

Typically, the Py code sits in the single IPython thread executing the code cell, which makes the code that updates the py traitlet hang until the code cell has finished executing. Which it will never do because it is waiting for the traitlet.

A solution (via @gereleth) was to use https://github.com/Kirill888/jupyter-ui-poll .

[gereleth]

I tried to reproduce this issue to help - used create-anywidget with React option and pasted in the provided code. But this resulted in unrelated errors showing up. This question really needs a minimal reproducible example.