[FIXED] ipydatagrid widget does not display in SageMaker Studio

Issue

The problem

I have a jupyter notebook with an ipydatagrid widget that displays a dataframe. This notebook works correctly when run locally, but not when run in AWS SageMaker Studio. When run in SageMaker Studio, instead of showing the widget it simply shows the text Loading widget...

How does one use a ipydatagrid widget in the SageMaker Studio environment?

Details

Python version:

$ python --version
Python 3.7.10

Run at start:

$ pip install -r requirements.txt
$ jupyter nbextension enable --py --sys-prefix widgetsnbextension
$ jupyter nbextension install --py --symlink --sys-prefix ipydatagrid
$ jupyter nbextension enable --py --sys-prefix ipydatagrid

File requirements.txt:

ipydatagrid==1.1.11
pandas==1.0.1

Notebook contents:

# %%
import pandas as pd
from ipydatagrid import DataGrid
from IPython.display import display
import ipywidgets

# %%
data = [
    ("potato", 1.2, True),
    ("sweet potato", 0.8, False),
    ("french fries", 4.5, True),
    ("waffle fries", 4.9, True)
]
df = pd.DataFrame(
    data,
    columns=["food", "stars", "is_available"]
)

# %%
grid = DataGrid(df)

# %%
display(grid)

# %%
# SANITY CHECK:
button = ipywidgets.Button(
    description="Button",
    disabled=False
)
def on_click(b):
    print("CLICK")
button.on_click(on_click)
display(button)

Error messages

If I use the Google Chrome developer tools, I can see more logs in the browser that give some error messages, most of which are repeated:

manager.js:305 Uncaught (in promise) Error: Module ipydatagrid, semver range ^1.1.11 is not registered as a widget module
    at C.loadClass (manager.js:305:19)
    at C.<anonymous> (manager-base.js:263:46)
    at l (manager-base.js:44:23)
    at Object.next (manager-base.js:25:53)
    at manager-base.js:19:71
    at new Promise (<anonymous>)
    at Rtm6.k (manager-base.js:15:12)
    at C.e._make_model (manager-base.js:257:16)
    at C.<anonymous> (manager-base.js:246:45)
    at l (manager-base.js:44:23)

utils.js:119 Error: Could not create a model.
    at n (utils.js:119:27)
    at async C._handleCommOpen (manager.js:61:51)
    at async v._handleCommOpen (default.js:994:100)
    at async v._handleMessage (default.js:1100:43)

manager-base.js:273 Could not instantiate widget

However, there is no overt error message that's immediately obvious to the user, including in the log where print statements send their output.

Solution

SageMaker Studio currently runs JupyterLab v1.2 (as confirmed by Help > About JupyterLab), and per the ipydatagrid installation instructions, current/recent versions of this widget require v3+... So I think this is most likely your problem - as there were breaking changes in the interfaces for extensions between these major versions.

I had a quick look at the past releases of ipydatagrid to see if using an older version would be possible, and it seems like the documented JLv3 requirement gets added between v0.2.16 and v1.0.1 (which are adjacent on GitHub).

However, the old install instructions documented on 0.2 don't seem to work anymore: I get ValueError: "jupyter-datagrid" is not a valid npm package and also note that versions <1.0 don't seem to be present on PyPI.

So unfortunately I think (unless/until SM Studio gets a JupyterLab version upgrade), this widget's not likely to work unless you dive in to building it from an old source code version.

Answered By - dingus