Changes interface menu to button

[JasonWeill]

Fixes #6792, per coordination with @ellisonbg .

Changes the "Interface" dropdown menu back to a button, as it had been before jupyterlab/retrolab#309.

Demo video of switching back and forth:

Screen.Recording.2023-03-23.at.5.49.41.PM.mov

Missing:

• Getting the button to appear strictly before the kernelName item (in practice, this item is not present yet when I do the check, so I always add the item at the end of the toolbar)
• Adding context menu items on the notebook context menu

[github-actions]

👈 Launch a Binder on branch JasonWeill/notebook/interface-menu-to-button

[JasonWeill]

bot please update playwright snapshots

[jtpio]

Thanks @JasonWeill for looking into this.

Wondering how that will work if at some point later we would like to allow for opening NBClassic as well? #6746

Would that mean adding a new icon to the toolbar? Potentially this could add some confusion as originally mentioned in jupyterlab/retrolab#256?

cc @yuvipanda who might have an opinion on this (when multiple Jupyter frontends are being deployed together)

[yuvipanda]

The menu was a huge hit with our users, and one of the primary reasons we were able to move the data8 class with 1500+ students away from classic notebook - that they could easily switch back any time if needed. I would <3 if we could keep it that way - nobody (including me!) could make out what the button does or did, and it just looks like a logo.

[JasonWeill]

@yuvipanda The "interface" menu takes up a lot of horizontal space in the toolbar, considering that it only has one option in it. Even if we had two buttons, they would still take up less horizontal space than the interface menu/dropdown does today.

I agree that the buttons in this PR look more like logos than actions. I can ask our UX designers if they can come up with icons that better convey "open this using a different application in a new tab".

[krassowski]

The "interface" menu takes up a lot of horizontal space in the toolbar, considering that it only has one option in it

1. Users are free to hide toolbar items as these are customisable.
2. It would be lovely if some developer time could be put towards making the customisation easier (e.g. work from context menu see Allow to customize toolbar from context menu jupyterlab/jupyterlab#13869)

I can ask our UX designers if they can come up with icons that better convey "open this using a different application in a new tab"

That would be a good thing to do indeed. Some ideas each with distinct pros/cons:

• use a toggle
• use "UI" as an abbreviation for user interface
• move it out of the toolbar altogether and put:
  • next to the trusted indicator
  • next to/below the application logo (I am thinking about something like "Jupyter Notebook [v]" and clicking on [v] expands a menu showing JupyterLab as an option)

[JasonWeill]

@krassowski How about replacing the single icon with a graphic showing both interfaces, with a toggle between them? Clicking on the graphic would open the other interface in a new tab.

Here's a non-functional mockup:

[krassowski]

Looks fine; two thoughts:

• it is not immediately clear that the three elements (two icons and toggle) are part of the same item; adding a shared background or colour or another visual indication could help; shared background on hover would be one option.
• the colourful icons stand out compared to other icons in toolbar; maybe those should all be greyscale? And/or the inactive one could be toned down/have reduced opacity?

[yuvipanda]

While I understand this text-based toolbar takes a lot of space, I am kinda nervous about the upcoming notebook 7 change. Based on our experience getting both students and instructors to switch successfully to retrolab, knowing that they can easily switch back to classic - even if they never did - was extremely important. May I ask the super obvious text based switcher is left in place at least for one full release, as a trade-off of toolbar space? I think 'switch UI to open same document in a different way' is not particularly easy to recognize in icon form, as that's not a super common UI pattern that exists elsewhere. There isn't enough recognition of the icon differences between Jupyter (the project), the classic notebook, lab, etc for this to work in icon form currently. Please?

[jtpio]

Thanks @yuvipanda 👍 I agree the existing dropdown is more explicit and easier to understand which was the original motivation for jupyterlab/retrolab#309.

Also the combination of notebook icon + switch + jupyter icon as proposed in #6793 (comment) almost becomes as large as the "Interface" text of the dropdown. Not sure we save a lot of space there.

Otherwise if the issue is the space taken in the toolbar we could also try to find a shorter label than "Interface". Or make it configurable via the settings.

[JasonWeill]

Adds a button with a short label and an "open in new" icon to the right of the label.

From notebook to lab:

From lab to notebook:

[jtpio]

As mentioned above, we should likely consider the case of also showing an entry for opening NBClassic (the classic notebook interface): #6746. In the case where JupyterLab 4, Notebook 7 and NBClassic 1 are all installed together on the same Jupyter Server.

For reference there is a gist to try this on Binder: https://gist.github.com/jtpio/35a72862c8be13dee31b61ebac2d9786

Which means a single button in the notebook toolbar will not be enough to open either lab or nbclassic. The existing dropdown still looks like the most natural and less confusing approach I think.

[yuvipanda]

I appreciate you working a lot with us to try different approaches, @JasonWeill!

I concur with @jtpio - the primary use case is being able to switch between three interfaces, not two. I understand that it may be 2 in the future, but I think for broader acceptance of notebook 7, being able to switch back and forth between the three interfaces is very vital. Even if people don't actually use it, there's a lot of resistance to switching that is easily dissolved by 'you can switch back any time you want easily, without having to edit URLs'.

[yuvipanda]

I had not realized that the dropdown was lost when retrolab became notebook v7. I would love for it to be back. As a JupyterHub admin who is going to have to handle this migration, it would make my life a million times easier.

[jtpio]

I had not realized that the dropdown was lost when retrolab became notebook v7.

It's still here, but only showing JupyterLab for now because there is no dependency on the classic notebook anymore. Before it was installed by default because of the jupyterlab -> notebook dependency.

So as part of #6746:

1. either we add a new entry pointing to /nbclassic/notebook, but without depending on nbclassic in notebook. The link might give a 404 if nbclassic is not installed. But would work if nbclassic is installed.
2. or we add the new entry as mentioned in 1., and also make notebook==7 depend on nbclassic to make sure it's always there.

Maybe option 1.would be enough to start with, and there is still time to consider 2.

[yuvipanda]

I would highly recommend option 2, with a notice period when the automatic dependency would be removed (8.x?). I think this migration is gonna be hard, and the small things we can do to make it easier will have a big payoff.

[jtpio]

Should this be closed now that #6847 has been merged?

[andrii-i]

@jtpio not sure about this PR but please don't resolve #6792 yet as I plan to work on it after modifying server in order to be able to detect nbclassic dynamically

[jtpio]

Closing as fixed by #6866, thanks!