Code not centered properly in cell - JavaScript notebook

After 8ca68ccdd, the code in cells is not centered properly.

before 8ca68ccdd:

Screenshot from 2020-07-25 01-24-13

after 8ca68ccdd:

Screenshot from 2020-07-25 01-26-07

Repro steps:

  • Open a notebook.
  • Click to edit a code cell.

I have observed this in Chromium & Firefox.

Edit:

Things get worse when writing multi-line code.

Asked Oct 10 '21 08:10
avatar m2-farzan
m2-farzan

9 Answer:

Sigh, yep, I'm seeing the same thing. Thank you for bringing this to our attention @m2-farzan. Looks like this comment was telling: https://github.com/jupyter/notebook/pull/5616#issuecomment-660495238

I've built with 5.53.2 and this issue doesn't occur. We should move to that instead if @akdor1154 and @blink1073 agree.

@akdor1154 - could you please build with 5.53.2 and ensure the IJulia issue for #5615 is resolved?

1
Answered Jul 24 '20 at 23:23
avatar  of kevin-bates
kevin-bates

I observed that the problem is probably related to https://github.com/codemirror/CodeMirror/commit/632f30be88392aa8e86a5e28697df78f759cc913 so I looked up at ~/.virtualenvs/master-test/lib/python3.8/site-packages/notebook/static/components/codemirror/lib/codemirror.css and I noticed that the file had not been updated. So I manually applied https://github.com/codemirror/CodeMirror/commit/632f30be88392aa8e86a5e28697df78f759cc913 to it and hard-reloaded the page. The problem was gone.

Now I'm wondering why it didn't automatically get updated. I suspected that maybe it's just my cache, so I cleared ~/.cache/bower and retried, but it didn't work. Any ideas?

1
Answered Jul 24 '20 at 23:28
avatar  of m2-farzan
m2-farzan

Thanks for the update. I'm not a front-end dev - so have no idea. I'm sure others will know.

So based on that, it sounds like 5.55.0 might be okay unless we cannot resolve the css update snafu.

1
Answered Jul 24 '20 at 23:38
avatar  of kevin-bates
kevin-bates

I'd say let's try the new 5.56.0 that has that fix. This is a good reason to have snapshot testing in general :smile:

1
Answered Jul 25 '20 at 15:04
avatar  of blink1073
blink1073

I think the issue is that something has gone wrong packaging the codemirror bower package - lib/codemirror.css in the components/codemirror repo is out of date in the relevant tags. See https://github.com/components/codemirror/issues/3 . If this is fixed then by my understanding 5.55.0 should be fine in theory (as the issue comes from mismatch of CM css+js). OTOH I'm always supportive of keeping deps up to date so .56 is fine too. Let's see how codemirror tackles releasing a fix for this.

Codemirror advice is "use npm" btw, not sure if Notebook could consider doing that.

1
Answered Jul 25 '20 at 15:34
avatar  of akdor1154
akdor1154

I see the same behavior with 5.56. This may be a rehash of the css stuff you're talking about above (and, if so, I apologize), but this appears to be an issue with the vertical scroll bar on the cell. When the cell is created, the scroll bar is positioned at the top, but when the focus enters the cell, you'll see the scroll bar move down slightly, causing the content to be vertically uncentered. Re-positioning the scroll bar to the top, centers the content again. It looks like the vertical scroll bar was created sometime after 5.53.2 since it doesn't have one. CellVerticalScroll

1
Answered Jul 27 '20 at 16:04
avatar  of kevin-bates
kevin-bates

@akdor1154 - does your IJulia issue referenced in #5615 occur on Jupyter Lab? Since they're using codemirror 5.32.2, that could be a solution here as well.

1
Answered Jul 29 '20 at 15:43
avatar  of kevin-bates
kevin-bates

Nevermind @akdor1154 - backtracking a bit more, I found this https://github.com/jupyter/notebook/issues/5469#issuecomment-640249160.

This implies we need >= 5.55 but we'll need to resolve the scrollbar issue - that is not evident in Jlab (as @blink1073 has confirmed).

I'll have to defer to someone with frontend dev experience here - sorry.

Once this issue is resolved, I'll cut 6.1.0 - so there's the carrot. :smile:

1
Answered Jul 29 '20 at 16:50
avatar  of kevin-bates
kevin-bates

I got components/codemirror to publish fixed releases, Jupyter should be able to depend on 5.56.0+components1 to fix the scrollbar issue. Future CM releases should be back to normal (e.g. just 5.57.0).

1
Answered Jul 30 '20 at 02:31
avatar  of akdor1154
akdor1154