Update to ipywidgets 8

.github/workflows/check.yml

@@ -3,7 +3,7 @@ on:
  push:
  pull_request:
  schedule:
- - cron: "0 8 * * *"
+ - cron: '0 8 * * *'
 
 defaults:
  run:
@@ -20,7 +20,7 @@ jobs:
  - uses: actions/checkout@v3
  - uses: actions/setup-python@v4
  with:
- python-version: "3.10"
+ python-version: '3.10'
  - uses: pre-commit/action@v3.0.0
 
  test:
@@ -30,18 +30,18 @@ jobs:
  fail-fast: false
  matrix:
  py:
- - "3.10"
- - "3.9"
- - "3.8"
- - "3.7"
- - "3.6"
+ - '3.10'
+ - '3.9'
+ - '3.8'
+ - '3.7'
+ - '3.6'
  - pypy3.7
  steps:
  - uses: actions/checkout@v3
  - name: setup python for tox
  uses: actions/setup-python@v4
  with:
- python-version: "3.10"
+ python-version: '3.10'
  - name: install tox
  run: python -m pip install tox
  - name: setup python for test ${{ matrix.py }}
@@ -77,7 +77,7 @@ jobs:
  - name: setup Python 3.10
  uses: actions/setup-python@v4
  with:
- python-version: "3.10"
+ python-version: '3.10'
  - name: install tox
  run: python -m pip install tox
  - name: run check for ${{ matrix.tox_env }}
@@ -91,7 +91,7 @@ jobs:
  - name: setup python to build package
  uses: actions/setup-python@v4
  with:
- python-version: "3.10"
+ python-version: '3.10'
  - name: install build
  run: python -m pip install build
  - uses: actions/checkout@v3
@@ -104,7 +104,7 @@ jobs:
  user: __token__
  password: ${{ secrets.pypi_password }}
 
- visual-regression-tests:
+ visual-regression-tests-ipw7:
  runs-on: ubuntu-latest
 
  steps:
@@ -114,10 +114,10 @@ jobs:
  - name: Setup conda
  uses: conda-incubator/setup-miniconda@v2
  with:
- activate-environment: ipydatagrid-test
- environment-file: test-environment.yaml
+ activate-environment: ipydatagrid-test-ipw7
+ environment-file: test-environment-ipyw7.yaml
  python-version: 3.9
- mamba-version: "*"
+ mamba-version: '*'
  auto-activate-base: false
  channels: conda-forge
 
@@ -128,11 +128,11 @@ jobs:
  run: |
  yarn install
  yarn playwright install chromium
- working-directory: ui-tests
+ working-directory: ui-tests-ipw7
 
  - name: Launch JupyterLab
  run: yarn run start:detached
- working-directory: ui-tests
+ working-directory: ui-tests-ipw7
 
  - name: Wait for JupyterLab
  uses: ifaxity/wait-on-action@v1
@@ -142,13 +142,62 @@ jobs:
 
  - name: Run UI Tests
  run: yarn run test
- working-directory: ui-tests
+ working-directory: ui-tests-ipw7
 
  - name: Upload UI Test artifacts
  if: always()
  uses: actions/upload-artifact@v3
  with:
  name: ui-test-output
  path: |
- ui-tests/playwright-report
- ui-tests/test-results
+ ui-tests-ipw7/playwright-report
+ ui-tests-ipw7/test-results
+
+ visual-regression-tests-ipw8:
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v3
+
+ - name: Setup conda
+ uses: conda-incubator/setup-miniconda@v2
+ with:
+ activate-environment: ipydatagrid-test-ipw8
+ environment-file: test-environment-ipyw8.yaml
+ python-version: 3.9
+ mamba-version: '*'
+ auto-activate-base: false
+ channels: conda-forge
+
+ - name: Install the package
+ run: pip install -vv .
+
+ - name: Install Galata
+ run: |
+ yarn install
+ yarn playwright install chromium
+ working-directory: ui-tests-ipw8
+
+ - name: Launch JupyterLab
+ run: yarn run start:detached
+ working-directory: ui-tests-ipw8
+
+ - name: Wait for JupyterLab
+ uses: ifaxity/wait-on-action@v1
+ with:
+ resource: http-get://localhost:8888/api
+ timeout: 20000
+
+ - name: Run UI Tests
+ run: yarn run test
+ working-directory: ui-tests-ipw8
+
+ - name: Upload UI Test artifacts
+ if: always()
+ uses: actions/upload-artifact@v3
+ with:
+ name: ui-test-output
+ path: |
+ ui-tests-ipw8/playwright-report
+ ui-tests-ipw8/test-results

.github/workflows/jest.yml

@@ -11,7 +11,7 @@ jobs:
  runs-on: ubuntu-latest
  strategy:
  matrix:
- node-version: [10.x, 12.x, 14.x]
+ node-version: [14.x]
 
  steps:
  - uses: actions/checkout@v3

binder/environment.yml

@@ -1,12 +1,12 @@
 name: ipydatagrid
 channels:
-- conda-forge
+ - conda-forge
 dependencies:
-- ipywidgets=7.6
-- jupyterlab=3
-- numpy
-- nodejs
-- pandas
-- pip
-- pip:
- - ..
+ - ipywidgets=8.0
+ - jupyterlab=3
+ - numpy
+ - nodejs
+ - pandas
+ - pip
+ - pip:
+  - ..

ipydatagrid/datagrid.py

@@ -359,14 +359,10 @@ class DataGrid(DOMWidget):
  {"area": "all", "padding": 30, "numCols": None}, allow_none=False
  ).tag(sync=True)
 
- def __init__(self, dataframe, **kwargs):
+ def __init__(self, dataframe, index_name=None, **kwargs):
  # Setting default index name if not explicitly
  # set by the user.
- if "index_name" in kwargs:
- self._index_name = kwargs["index_name"]
- else:
- self._index_name = None
-
+ self._index_name = index_name
  self.data = dataframe
  super().__init__(**kwargs)
  self._cell_click_handlers = CallbackDispatcher()

jest.config.js

@@ -4,8 +4,9 @@ module.exports = {
  '^.+\\.js$': 'babel-jest',
  },
  transformIgnorePatterns: ['node_modules/?!(@jupyter-widgets)'],
- testPathIgnorePatterns: ['ui-tests/'],
+ testPathIgnorePatterns: ['ui-tests-ipw7/', 'ui-tests-ipw8/'],
  setupFiles: ['./tests/js/setupFile.js'],
+ testEnvironment: 'jsdom',
  moduleNameMapper: {
  '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
  },

js/datagrid.ts

@@ -9,19 +9,21 @@ import { CellRenderer } from '@lumino/datagrid';
 
 import { JSONExt } from '@lumino/coreutils';
 
-import { MessageLoop, Message } from '@lumino/messaging';
+import { Message, MessageLoop } from '@lumino/messaging';
 
 import { Widget } from '@lumino/widgets';
 
 import {
  DOMWidgetModel,
  DOMWidgetView,
- JupyterPhosphorPanelWidget,
+ ICallbacks,
  ISerializers,
+ JupyterLuminoPanelWidget,
+ //@ts-ignore needed for ipywidgetx 7.x compatibility
+ JupyterPhosphorPanelWidget,
  resolvePromisesDict,
  unpack_models,
- WidgetModel,
- ICallbacks,
+ WidgetModel
 } from '@jupyter-widgets/base';
 
 import { ViewBasedJSONModel } from './core/viewbasedjsonmodel';
@@ -340,36 +342,58 @@ function unpack_data(
 
 export class DataGridView extends DOMWidgetView {
  _createElement(tagName: string) {
- this.pWidget = new JupyterPhosphorPanelWidget({ view: this });
+ const panelWidget = Private.getWidgetPanel();
+ this.luminoWidget = new panelWidget({ view: this });
  this._initializeTheme();
- return this.pWidget.node;
+ return this.luminoWidget.node;
+ }
+
+ // Added for ipywidgets 7.x compatibility
+ get pWidget(): any {
+ return this.luminoWidget;
  }
 
  _setElement(el: HTMLElement) {
- if (this.el || el !== this.pWidget.node) {
+ if (this.el || el !== this.luminoWidget.node) {
  throw new Error('Cannot reset the DOM element.');
  }
 
- this.el = this.pWidget.node;
+ this.el = this.luminoWidget.node;
  }
 
  manageResizeEvent = () => {
- MessageLoop.postMessage(this.pWidget, Widget.ResizeMessage.UnknownSize);
+ MessageLoop.postMessage(
+ this.luminoWidget,
+ Widget.ResizeMessage.UnknownSize,
+ );
  };
 
- processPhosphorMessage(msg: Message): void {
- super.processPhosphorMessage(msg);
+ // ipywidgets 7 compatibility
+ _processLuminoMessage(
+ msg: Message,
+ _super: DOMWidgetView['processLuminoMessage'],
+ ): void {
+ _super.call(this, msg);
 
  switch (msg.type) {
  case 'after-show':
- if (this.pWidget.isVisible) {
+ if (this.luminoWidget.isVisible) {
  this.manageResizeEvent();
  }
  break;
  }
  }
 
- render() {
+ processLuminoMessage(msg: Message): void {
+ this._processLuminoMessage(msg, super.processLuminoMessage);
+ }
+
+ processPhosphorMessage(msg: Message): void {
+ //@ts-ignore needed for ipywidgets 7.x compatibility
+ this._processLuminoMessage(msg, super.processPhosphorMessage);
+ }
+
+ render(): Promise<void> {
  this.el.classList.add('datagrid-container');
  window.addEventListener('resize', this.manageResizeEvent);
  this.once('remove', () => {
@@ -496,7 +520,7 @@ export class DataGridView extends DOMWidgetView {
  return this.updateRenderers().then(() => {
  this.updateGridStyle();
  this.updateGridRenderers();
- this.pWidget.addWidget(this.grid);
+ this.luminoWidget.addWidget(this.grid);
  });
  }
 
@@ -698,7 +722,7 @@ export class DataGridView extends DOMWidgetView {
  default_renderer: CellRendererView;
  header_renderer: CellRendererView;
  grid: FeatherGrid;
- pWidget: JupyterPhosphorPanelWidget;
+ luminoWidget: JupyterLuminoPanelWidget;
  model: DataGridModel;
  backboneModel: DataGridModel;
 
@@ -707,16 +731,15 @@ export class DataGridView extends DOMWidgetView {
 }
 
 export {
- TextRendererModel,
- TextRendererView,
  BarRendererModel,
  BarRendererView,
  HyperlinkRendererModel,
- HyperlinkRendererView,
+ HyperlinkRendererView, TextRendererModel,
+ TextRendererView
 } from './cellrenderer';
-
 export { VegaExprModel, VegaExprView } from './vegaexpr';
 
+
 export namespace DataGridModel {
  /**
  * An options object for initializing the data model.
@@ -742,6 +765,12 @@ export namespace DataGridModel {
  * The namespace for the module implementation details.
  */
 namespace Private {
+ export function getWidgetPanel(): any {
+ //@ts-ignore needed for ipywidget 7.x compatibility
+ return JupyterLuminoPanelWidget ?? JupyterPhosphorPanelWidget;
+ }
+
+
  /**
  * Creates a valid JSON Table Schema from the schema provided by pandas.
  *

js/plugin.ts

@@ -39,7 +39,7 @@ function activateWidgetExtension(
 ): void {
  // Exporting a patched DataGridView widget which handles dynamic theme changes
  class DataGridView extends widgetExports.DataGridView {
- initialize(parameters: WidgetView.InitializeParameters) {
+ initialize(parameters: WidgetView.IInitializeParameters) {
  if (themeManager.theme != null) {
  this.isLightTheme = themeManager.isLight(themeManager.theme);
  }