search

jupyter / notebook

Jupyter Interactive Notebook
https://jupyter-notebook.readthedocs.io/
BSD 3-Clause "New" or "Revised" License
11.69k stars 4.93k forks source link

[Feature Request] Two column mode #2791

Open tangyouze opened 7 years ago

tangyouze commented 7 years ago

May I know if there's already support for two column mode or are there any plan on it?

I found some discussion on ipython issue list, https://github.com/ipython/ipython/issues/1214 , and this issue is no longer belongs to ipython, so I asked it here.

I tried a bit my self by chaning css and js, and I was able to put output cell on right hand of input cell. But the structure of input and output are belongs to the same div, so I found it's not easy to separate them into two column arrangement.

May I have some guideline on what could be done if I would like to add two column support of jupyter?

parrt commented 6 years ago

+1

dsblank commented 6 years ago

We have a two-column extension here: https://github.com/Calysto/notebook-extensions specifically, the cell tools extension can do columns or tabs: https://github.com/Calysto/notebook-extensions/blob/master/calysto/cell-tools/cell-tools.png

tangyouze commented 6 years ago

This extension is great, but I would like more to have something like swift playground as shown below. I looked into the source code/sturcture of jupyter a little, and find it might not very easy to handle such apperance using just css.

two-column-swift

parrt commented 6 years ago

Looks like JupyterLab has a way to execute cells and show output in another window but it doesn't keep them associated with the input cells

jasongrout commented 6 years ago

You can create a new view of a cell in a new tab in the latest jupyterlab, which keeps the association with the cell and updates as that cell is executed again. Right-click on a cell and choose the option to create a new view of the cell.

jasongrout commented 6 years ago

For jupyter widgets, the original and new view will also update as code changes the state of the widget, without needing to execute the cell again.

parrt commented 6 years ago

wow. ok, sounds like I need to try jupyterlabs. @jph00 might be interested in jupyterlabs functionality too.

jasongrout commented 6 years ago

@parrt - definitely. Let us know if you have any questions.

tangyouze commented 6 years ago

Sounds great, I would take a look at jupyterlabs.

louis925 commented 6 years ago

Two columns mode (input on the left and output on the right with matching position) is exactly what I am looking for. It will be great if we can have this feature in Jupyter notebook.

bvoq commented 6 years ago

Jupyter gives me horrible headaches and I refuse to use it because it mixes graphics and code. A two-column mode would make me reconsider.

louis925 commented 6 years ago

Here is an example showing that the Jupyter is not using all the space of a screen: Jupyter not using all the space

zjiayao commented 6 years ago

+1. Two-column mode would be very helpful especially when there are much code and many graphics.

parrt commented 6 years ago

Jupyter Lab seems more flexible so maybe just switch to that and tailor it.

prashnts commented 6 years ago

Just if people are still interested into this, I am working on a little CSS only tweak for achieving the two-column layout.

It's still very work in progress, but here's a sneak preview. I don't think it's great idea to add it in this repo, but I can make a "custom css" which people can put into their jupyter config directory.

Feedback/suggestions welcome!

(Font sizes, typography all needs work!)

snip 2018-07-12 at 01 43 54

prashnts commented 6 years ago

Here's an update: snip 2018-07-12 at 19 17 56

Fixed layouts, typography and the output areas. Also notice that I've moved some stuff around (such as the kernel notifications etc) and moved the menu bar to save vertical space. The background blur effect is supported in chrome with new features flag turned on, and natively on safari.

This really is suited well for wide displays though, but since it's css-only we can use media queries.

I'm considering making it an extension, if enough people are interested.

cvanelteren commented 5 years ago

Any update on this @prashnts ?

prashnts commented 5 years ago

Thanks for the reminder, @cvanelteren ! I never finished packaging it, but here’s the custom css: https://github.com/prashnts/dotfiles/tree/master/jupyter

It might be broken a little since I didn’t use jupyter for a while. Would be glad to make changes or help packaging it.

mattc-eostar commented 5 years ago

I definitely see the value of having the cell output be put into a separate column, but would this also allow two columns for cell input?

My thought is, notebooks can become messy with defining functions and then using them throughout the notebook. If there could be two columns, the first one would have the procedural scripts to run and process the data. The second would be filled with all defined functions with its own scrollbar.

I understand I can throw all the code into a .py file and split the screen with tabs, but sometimes it is nice to keep it all together in one file for sharing purposes.

Thoughts?

cvanelteren commented 4 years ago

The problem I have with jupyter notebooks in general is that it starts out pretty neat; you write an experiment or report and then as the notebook grows, the notebook becomes messy. A double column mode would aid in creating a nice oversight of where what code runs. Alternative would be to hide the code blocks as that takes a lot of space. My main workflow involves plotting in jupyter and for complex scientific figures this often takes "a lot" of code.

yijunwang0805 commented 3 years ago

+1