Left right panel in Notebook view

[brichet]

This PR follows #6327 to add left and right panel to Notebook.

The left and right panels can be opened from the view menu.

Closes #6327
Fixes #6326
Fixes #6403
Fixes #6405

[github-actions]

👈 Launch a Binder on branch brichet/notebook/left-right-widgets

[jtpio]

Nice thanks @brichet for picking this up 👍

[brichet]

Is there a way to retrieve the yarn.lock file generated during the check_release action ?
It seems that it changes, but I can't reproduce it locally.

[jtpio]

Is there a way to retrieve the yarn.lock file generated during the check_release action ?
It seems that it changes, but I can't reproduce it locally.

hmm strange, if it changes during the check release then it should also change locally after running jlpm.

[jtpio]

Just tried running jlpm in a fresh GitHub Codespace and it does modify the yarn.lock:

So these changes to the yarn.lock should be committed and pushed as well.

[brichet]

So these changes to the yarn.lock should be committed and pushed as well.

Right, sorry for that, indeed after cleaning everything it changes yarn.lock.

[brichet]

Maybe we could increase the test time. This PR adds some little ui-test, but I think 10 minutest is too short.

[jtpio]

Maybe we could increase the test time. This PR adds some little ui-test, but I think 10 minutest is too short.

Hmm normally 10 minutes should be more than enough? Or do the new tests require that much more time?

Here is a screenshot of the cancelled check: https://github.com/jupyter/notebook/runs/7686750791?check_suite_focus=true

But on main they take 5 minutes to complete so still plenty of room: https://github.com/jupyter/notebook/runs/7686282650?check_suite_focus=true

[brichet]

Hmm normally 10 minutes should be more than enough? Or do the new tests require that much more time?

Not that much, they should be really quick, only opening left (toc) and right (notebooktools) panels.

[jtpio]

Maybe there is something that makes them time out on CI (normally locally as well) with the new changes?

[brichet]

The timeout is quite long, 4 minutes :

notebook/ui-tests/playwright.config.ts

Line 5 in 5f1980e

timeout: 240000,

When a test fail 2 times (it is retried 1 time) while awaiting a specific screenshot or element, it almost timeout the whole tests.
Is there a reason to have a 4 minutes timeout ? Galata is set to 1 minute by default.

That will not fix the tests but may allow us to get the errors instead of cancelled test.

[jtpio]

Is there a reason to have a 4 minutes timeout ?

This was added in jupyterlab/retrolab#273, but I don't see any reason for that particular value. So we can change it and see.

[jtpio]

Is this needed? Or could this.shell.restored.then() be directly used on the line below?

[jtpio]

Or maybe this.restored = this.shell.restored?

[brichet]

Right, it's left from a copy and paste.
But we should keep this.restored = this.shell.restored. For example, the table of contents extension waits for app to be restored, but needs the Notebook panel to be ready. That's why the shell resolves the restored only when the main area has been added.

[brichet]

Fixed in 52f10ed

[jtpio]

Looks like the -darwin snapshot should be removed?

[brichet]

Looks like the -darwin snapshot should be removed?

Good catch

[brichet]

The errors on tests seems not related (save status, kernel status...), maybe we can try running them again.

[jtpio]

The errors on tests seems not related (save status, kernel status...), maybe we can try running them again.

Yes these are a bit flaky sometimes.

[jtpio]

Just tried on Binder and it looks good.

left-right-areas-shift.mp4

At first it might feel a bit odd that the notebook is shifted to the side when the left or right area is opened. @hbcarlos had some good feedback about this on the original PR: jupyterlab/retrolab#275 (comment)

Posting it here for reference:

I think by default they should be hidden and only show up when the user triggers an action that requires something on the side panel. Also, regarding the design, we could divide the shell into three parts to keep the notebook always in the middle and then create the box panel for the side panels, the shell would be divided like in the following image:

Probably we could try to change how the side panels are positioned in the NotebookShell. Maybe this could be tried out in a follow-up PR.

For reference Google Docs does shift the main page a bit when opening an add-on on the right side:

google-docs-right-area.mp4

Although their top area takes the full width, which reduces this feel of being "off" since the page is still centered with the top area.

[brichet]

Nice, thanks for sharing, it would be better that way.
And as in Google Docs, we could use that space to display a button which close the panel.

[brichet]

The debugger panel is also missing, but I think it can be added in a follow up PR as well. I'm not sure it will be as easy to include than the other panels, as it depend on current opened widget (notebook, console...).

[jtpio]

The debugger panel is also missing, but I think it can be added in a follow up PR as well. I'm not sure it will be as easy to include than the other panels

Agree this can be added in a different PR 👍 Hopefully the extension should already handle the active widget properly, otherwise we can submit fixes upstream in JupyterLab.

[jtpio]

FYI @brichet I'm planning to do a pass on the changes, especially the ones on the shell.

Overall it looks good. I would like to experiment with the alternative side-panel approach mentioned above. Will report here when I have more updates.

[brichet]

Thanks @jtpio.
Let me know if you want me to give this alternative side panel a try.

[jtpio]

Nice thanks @brichet for the hard work and your patience!

We can track follow-up improvements and fixes discussed in the PR in separate issues.