Conflicting nodejs dependencies when installing jupyter-widgets in jupyterlab 0.30.1

[costrouc]

When trying to add jupyter-widgets in jupyterlab 0.30.1 it fails with the following message. Using jupyterlab 0.29.2 works fine.

virtualenv was used.

$ jupyter labextension install @jupyter-widgets/jupyterlab-manager
> /home/costrouc/.local/bin/npm pack @jupyter-widgets/jupyterlab-manager
jupyter-widgets-jupyterlab-manager-0.30.1.tgz

"@jupyter-widgets/jupyterlab-manager@0.30.1" is not compatible with the current JupyterLab
Conflicting Dependencies:
JupyterLab              Extension            Package
>=0.13.1-0 <0.14.0-0    >=0.12.0-0 <0.13.0-0 @jupyterlab/application
>=0.13.0-0 <0.14.0-0    >=0.12.0-0 <0.13.0-0 @jupyterlab/coreutils
>=0.13.0-0 <0.14.0-0    >=0.12.0-0 <0.13.0-0 @jupyterlab/notebook
>=0.13.0-0 <0.14.0-0    >=0.12.0-0 <0.13.0-0 @jupyterlab/rendermime
>=0.52.0-0 <0.53.0-0    >=0.51.0-0 <0.52.0-0 @jupyterlab/services

[jasongrout]

Thanks. The message "@jupyter-widgets/jupyterlab-manager@0.30.1" is not compatible with the current JupyterLab means we haven't updated yet for 0.30.1 (it was just released today). We're working on it, though.

[jasongrout]

I just released @jupyter-widgets/jupyterlab-manager 0.31 that has support for jlab 0.30.

[jasongrout]

Looks like there might be a problem - I'm only getting a page that is 184 pixels high when installing the widgets jlab extension. Investigating...

[blink1073]

My guess would be this: #1841

[jasongrout]

Thanks! Yep, that's the issue. I've got two or three fixes I'm experimenting with.

[sccolbert]

You shouldn't override the Phosphor core CSS. The core is the minimal required for Phosphor to behave correctly.

[blink1073]

/thread

[blink1073]

(sorry that was too good a setup). https://www.urbandictionary.com/define.php?term=%2Fthread

[jasongrout]

Widgets contained a verbatim copy of the phosphor css. One take on the issue here was that JLab was overriding the core phosphor css for its own widget without having greater specificity - basically assuming that phosphor css would be before it on the page for tie-breaking the specificity. If that is a valid assumption, we should probably make it clear to extension developers that they should not import the phosphor css.

Widgets contained a copy of this core phosphor css (for pages that don't have phosphor on them):

.p-Widget {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  cursor: default;
}

However, the JupyterLab shell overrides the position attribute: https://github.com/jupyterlab/jupyterlab/blob/83b17558eef35ae0ffaaad76bb4bb07de951137f/packages/application/style/index.css#L23. Since the widget css was loaded after the jlab css, and has the same specificity (.p-widget vs .jp-ApplicationShell), the application shell position was set back to absolute.

[sccolbert]

It's fine to override specific core things on a per-widget basis, like the app shell is doing. It's not okay to change the defaults for all widgets.

[sccolbert]

You can get more specific by tagging your own widgets: .jp-widgets-widget.p-Widget, which is specific enough to override the core defaults for any Jupyter widget, while leaving alone everything else.

[jasongrout]

It's not okay to change the defaults for all widgets.

Totally agreed. Let me emphasize that the defaults weren't being changed (in fact, the entire reason it was there in widgets css was to make sure those plain phosphor defaults were on the page for widgets). My point is that the problem was a CSS specificity issue, coming from conflicting assumptions about who was putting phosphor css on the page and where that inclusion was happening.

So what I've done to fix it is to take the import of the phosphor css out of the css used by the jlab plugin, and only put the phosphor css on the page in the classic notebook and arbitrary html page cases.

[jasongrout]

More investigation: it seems that webpack is pretty intelligent about how it puts css up on the page - it appears that when I import the phosphor css in the jlab plugin, it only goes onto the page in one place and things work (some sort of deduplication going on?). My mistake in this repo was copying (verbatim, so no change) the phosphor css, so it appeared two different places on the page.

Still, I'm now making it the widget manager's responsibility to put the phosphor css on the page - and the jlab widget manager is going to assume the phosphor css is already on the page.

[blink1073]

Webpack only loads a CSS module once if it is the same version.

[jasongrout]

Webpack only loads a CSS module once if it is the same version.

Thanks for the confirmation.

[jasongrout]

Okay, this is now fixed with the latest @jupyter-widgets/jupyterlab-manager (0.31.2).