0

We use jupyterhub cluster and without any noticeable change on our side, the notebook cells' height turned huge and static (attached a picture)

Tried to fix the issue looking at - How do I increase the cell width of the Jupyter/ipython notebook in my browser?

Managed to decrease the cells size but it's still static.

Any suggestion what has might caused the change? And how to fix this?

This is how our cells look today -

enter image description here

Vitali Melamud
  • 1,267
  • 17
  • 40
  • 1
    I apologize in advance, but this sounds kind of hilarious. Did you recently a) upgrade any part of the Jupyter stack b) install any extensions/plugins or c) change any configuration files? – tel Jan 21 '19 at 20:11
  • Sorry, this comes after some deep investigation and obviously frustration... AFAIK we didn't upgrade/install any plugins/extensions... but unfortunately I can't be sure... We are very close to performing a binary search among our extensions. Any place you suggest looking? – Vitali Melamud Jan 21 '19 at 20:16
  • Anything with `*.css` files would be a likely potential culprit (that's not guaranteed, though, since you can obviously still change styling from within JS/TS script). Since you're already stumped, if you are using any extensions whatsoever, you should really start by uninstalling all of them one-by-one until the problem goes away. – tel Jan 21 '19 at 20:42

1 Answers1

1

Potential fixes

My suggestion to uninstall your extensions one-by-one until the problem goes away may honestly be the fastest way to get a fix. If have a reasonably recent version of Jupyter you can list all of your installed extensions with:

jupyter nbextension list

You would then start by uninstalling any extension that relates to theme and/or styling of the notebook. It's possible that list will miss some things (eg an improperly installed extension, or issues with your own config files). The next step (after getting rid of at least all suspicious extensions) would be to go through all of the user-space data and config files that Jupyter sets up in the background. You can get the paths to all directories containing such files by running:

jupyter --paths

Small note, you can probably ignore all files in the runtime dir, these probably aren't the problem.

If a mass uninstall of your extensions makes you squeamish, another option would be to debug the CSS of a live notebook and figure out exactly where the styling of the code cells is getting screwed up.

Detailed instructions for debugging the CSS

The following instructions are for Chrome, but if you're using another browser you should be able to figure out an equivalent:

  • start up a notebook
  • right click on a code cell and select "Inspect"
  • this will bring up a view of the DOM node hierarchy and highlight the node representing the code cell (or some at least some part of it) that you just right clicked on
  • on the right side of the screen will be a window with a bunch of tabs at the top. Select "Computed", which contains the style that is actually displayed in the browser, as computed from the sum of the effects of all CSS selectors
  • in particular, pay careful attention to the width and height properties of the computed style. Walk up and/or down the DOM hierarchy until you find a node with a suspicious looking width or height
    • If a value is greyed out, that means that it's being set in a parent node
  • start with a suspicious looking value, then go up the hierarchy until the values seem normal again
  • on one side of that transition point, you should have the top-most node in your hierarchy with bad values. If you examine the "Computed" tab, you should be able to see exactly which files are setting the bad values

The identity of the files screwing up your notebook styling is the payoff here. Examining those files should help you a great deal in uncovering the real problem.

tel
  • 13,005
  • 2
  • 44
  • 62