Options to reconfigure the view to be more compact

[gatagat]

Summary

We are exploring ways to allow a user to collapse parts of the UI to give a more compact layout, such as hiding the side bars.

Original issue

Is it possible to waste less of the precious vertical screen space? On a 13-inch 16:9 laptop screen there is not much vertical space to start with and in the current layout with 6 horizontal bars (OS menu bar, browser tab bar, browser adress bar, jupyterlab menu bar, jupyterlab tab bar, jupyterlab tool bar) this leaves very little space to the notebook itself.

Is there a possibility to hide the jupyterlab bars? Or to work in some single-notebook mode that would reduce the clutter?

[blink1073]

Hi @gatagat, we have the ability to show a single document in the main area from Phosphor, we just haven't brought that capability into JupyterLab yet because it will require some UX thought about entering/leaving that mode and switching documents.
Hiding/showing the other bars can be made available as well, but also requires some UX consideration.

[blink1073]

cc @ellisonbg @cameronoelsen

[ellisonbg]

This is something we are working on very carefully. JupyterLab already has less space at the top than the classic Jupyter Notebook. Some addition directions we are exploring:

• The single document mode that @blink1073 mentions - but honestly that won't change things very much as there will still be all the elements you mention.
• We are building a native electron app version of JupyterLab that will use the OS menu system. It has much less extra vertical space at the top. After using JupyterLab a lot myself, the issue you are bringing up is one of the main pain points I have seen.
• You can get some of this experience today by creating a Chrome app. On Mac I am using https://applicationize.me/

[gatagat]

Thanks for the applicationize.me, that helps.

[jasongrout]

You can also start jupyter lab in application mode. For example, using chrome on OS X, you should be able to do:

jupyter lab --browser="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --app='%s'"

You should also be able to add something to the lab config to do this automatically.

[gatagat]

Neither the applicationize.me nor starting jupyter in application mode in the end help that much. Both just get rid of just one of the six vertical bars (the address bar).

[jasongrout]

Two from your original list, right? They get rid of both the browser tab bar, and the browser address bar. If I'm on a small screen on OS X, I also maximize the window to get rid of the system menu bar and the application frame title bar.

[sccolbert]

Single document mode (once implemented in JLab) will get rid of the inner JLab tabs. So if you run the browser in maximized application mode, you'll only have the JLab menu bar.

[gatagat]

Yes, two, but the browser tab bar gets replaced by the app window title bar which was not there before. I'd probably have to use jupyterlab maximized, or just wait until the single document mode is implemented. Thanks to both of you for the ideas.

[vidartf]

Normally you can also press a key (F11 here, Command+Shift+F for OSX according to a quick google) to go to fullscreen mode. That should give the current browser tab the entire screen real estate.

[jasongrout]

wait until the single document mode is implemented

You're in luck! Single document mode (#2037) is being worked on right now.

[stephenholtz]

It doesn't get you all the way to the single document mode, but just to add another browser suggestion:

I use Safari in full screen and leave View>Always Show Toolbar in Full Screen unchecked, along with everything else. It gets rid of everything except the content of the tab in full screen, and looks very nice. After #2037 it will be even better though

[cameronoelsen]

@gatagat We are also trying to reduce the horizontal space for when you are doing your work, here is a concept that is going into the works :)

[sccolbert]

What about a menu item and shortcut to fully toggle the sidebar visibility?

[ellisonbg]

We also have those nice car context menus!

…

Sent from my iPhone

On Apr 19, 2017, at 11:36 AM, S. Chris Colbert ***@***.***> wrote: What about a menu item and shortcut to toggle the sidebar visibility? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[cameronoelsen]

@sccolbert Maybe we could add a "View" dropdown menu to the top navigation to toggle all of the sidebars and tabs. @ellisonbg I was thinking that the context menus would be used to check and uncheck to show and hide plugins that can go into the sidebar

[jasongrout]

+1 to a View menu to hide/show various elements and toggle single-document mode

[blink1073]

👍 for a top level View menu. We need to refactor the top level menu to allow content from different plugins (opening an issue for that now).

[blink1073]

cf #2059

[cameronoelsen]

This is how I was hoping the context menus would work for the sidebar (enabling and disabling plugins):

[blink1073]

👍

[homofortis]

Is it possible also to have an option to hide the toolbar?
All actions there are frequently used and thus normally accessed via keyboard shortcuts. The only reason to keep the toolbar visible is probably the kernel info on the right but that can be moved up onto the menu bar.

[blink1073]

Yes, we could certainly make that an option as well.

[ruffsl]

I would love to be able to hide everything but the current notebook!
Something like a zen mode where I could fullscreen my browser (via f11) and then also hide all the noisy lines, menus, caption/title texts, icons graphics, dead white space dividers, etc, so that the only thing left on my screen would be the current notebook, and what I put on the screen by writing on the notebook's "page".

I'd could just rely on shortcut key bindings for interacting with JupyterLab, but otherwise, every pixel would be dedicated to rendering the notebook. This would be very nice for visually impaired, or folks like me who just appreciate larger fonts on tiny 4k screens, a side effect of which every other GUI item explodes and invades your typeable workspace.

Perhaps an optional hover popdown/side menus could be show to the user when the move the mouse close to some hot corner and/or side pixel edge of the browser window. I'd like to disable those too from accidental triggers, but having then for jupyter would be a good compromise for others who want to save precious screen real estate while maintaining a degree of quick GUI menu access. Another use case are the students using JupyterLab on chrome books or cheep 800x600 tables, thus incorporating some mobile minimalisme, or material design would be nice, specifically: https://material.io/guidelines/patterns/navigation-drawer.html

P.S. is there a way to target focus onto Jupyter Lab's menu bar using a hotkey? The ALT key is reserved/captured for the browser, and the there is no global menu item search for invoking an option you know the name for.

[m-wells]

Late to the conversation here but if you edit your jupyter_notebook_config.py and insert

c.NotebookApp.browser = u'/usr/bin/google-chrome-stable --new-window --incognito --app=%s'

It launches a beautifully seamless window (I can't even tell it is a browser window to be honest). This assumes that you are using google chrome.

[elanmart]

Hi guys, is there any progress on #2031 (comment) ?

I'm loving the jupyter lab, and I've been using it since the official release, but haven't used the toolbar once since that time. And, as others have said, on 13" machine this is a real pain, esp. if you work with larger fonts :(

[jasongrout]

Interestingly, I've recently been doing a major refactor of how main area widgets work in #4453 that leads to all widgets having a consistent toolbar. After that, I think it would be pretty straightforward to implement a command to hide/show the toolbar of the active tab on a case-by-case basis.

Separate from that, the notebook widget could have a setting to show/not show the toolbar on all notebooks. I don't know of anyone working on that, but I think it would probably be a straightforward thing, and possibly a good first issue (CC @ian-r-rose and @afshin, since I'm not sure how straightforward it is to add settings to a plugin).

[tangbinh]

Do we have any update on this UI change? I am looking forward to seeing both the vertical pane and the toolbar removed. Also, is it possible to bring the command palette back to the center as in Jupyter notebook? Can someone please explain the rationality behind lumping the notebook commands and the sidebar tree?

[jasongrout]

Do we have any update on this UI change?

Most activities now use the unified toolbar, so it will be easier now to implement a command to hide the active toolbar, or hide all toolbars.

Also, is it possible to bring the command palette back to the center as in Jupyter notebook?

Yes, and I think there is generally positive sentiment towards moving it to the center. If anyone wants to work on this, please open an issue when you start so that we can coordinate and help guide the design. We can help someone get started with this.

Can someone please explain the rationality behind lumping the notebook commands and the sidebar tree?

The idea was that the command palette could be opened easily and not block the view of your working area. I think the general sentiment these days after using JupyterLab for a while is that a popup modal command palette is a better ux.

[tangbinh]

Thank you, @jasongrout. Is the unified toolbar in JupyterLab 2.0.0.b3? I just tried to install it, but the new version seems to be incompatible with all of the extensions. If possible, would you mind letting me know how to implement such a command to hide those toolbars? Thank you.

[jasongrout]

Many of the widgets in even JupyterLab 1.x use the MainAreaWidget as their top-level widget, or at least implement the interface. So you might look for a top-level .toolbar attribute and see if it is an instance of the Toolbar class.

I was thinking that you could just call .hide() on the toolbar, and you could, but it wouldn't be consistent with the styling of having a minimal top border on activities. If every child widget of a toolbar is hidden, though, the toolbar collapses nicely. So maybe for now, you can iterate through the toolbar's children and .hide() each one. To uncollapse the toolbar, .show() each child. The tricky part is if something else wants to hide/show children, then you would be undoing its actions.

[saulshanabrook]

You can remove all the chrome now if you want to access some private attributes:

https://github.com/Quansight-Labs/jupyter-widgets-takeover/blob/29cfdc286b5ecccc53c0af01ef888dad2dd21d07/src/workspace.tsx#L92-L95

We should make commands for each of these to hide/show.

[gloryVine]

Any update on this? What do I need to do exactly to hide the toolbar?

[krassowski]

For anyone interested, @fcollonval made a huge progress on this and it's coming in JupyterLab 4.0:

Please help testing these changes and feel welcome to contribute to improve it (e.g. we could still add the context menu suggested in #2031 (comment))

[JasonWeill]

Given the progress that's been made in letting users hide the side bars and run in a simplified UI mode, I'm going to close this issue now that the view can be made more compact. If you would like to suggest specific improvements for a future version, please open a new issue. Thanks all for the positive work!

[mennowitteveen]

I personally remove all the vertical UI elements in my classic notebooks. I checked out JupyterLab 4 [ pip install jupyterlab==4.0.0b1 ], which is still in beta I think.

It is nice to see that it is now possible to remove the header. However it seems the toolbar cannot toggled in this new version. That would be awesome to also have.