Allow for a supplementary notebook editor pane associated with a main notebook document for holding outputs

[IanMatthewHuff]

Partially inspired by the SxS output comment in this issue here #142455 I sketched up a quick proposal for a notebook editor feature that I would really like.

What I would like is that if I have a notebook document open I could move outputs from it into a fully separate editor pane. In this editor pane the outputs could be reordered and scrolled separate from the main notebook document. Instead of a new editor instance this output document would be connected to the same controller as the main document so widgets and whatnot would all work as expected if different output cells are in different panes. The UI controls would all still be in the main document and when a cell is re-executed in the main document the output is updated in the supplemental output document.

This UI feels similar in execution to the interactive window to me, except that instead of a running history log it's just the notebook outputs.

Since this output document is a full editor pane it would allow the following scenarios:

• Pull one specific output (perhaps a plot with rich widgets) into the output pane and make that pane full screen to focus on just that output. Similar in some ways to Jupyter's ability to pop out a plot from the notebook document
• Place one output side by side with code. You can scroll the output document to have your output side by side, either with the cell that is generating that output or with an earlier cell
• Place one output side by side with another output. Since you can move outputs to and from the pane individually you can put a cell with say a widget slider next to the output cell that shows the effects of that widget changing in a plot.

There is a big question here of if / how we can have two different editor panes sharing a notebook controller and communications, but just leaving that slightly to the side for now to just look at the UI bits.

[IanMatthewHuff]

Some quick Excalidraw sketches to illustrate.

[rebornix]

I love this idea and technically it's doable.

There is a big question here of if / how we can have two different editor panes sharing a notebook controller and communications, but just leaving that slightly to the side for now to just look at the UI bits.

It's similar to opening the same notebook file in two editor groups side by side, they should be connected to the same underlining kernel. The two editors will load output renderers into their webview, but the renderers, e.g., ipywidgets, should be communicating to the same kernel objects in the extension host. Current Jupyter infrastructure would allow multiple frontends connected to the same backend/server.

Making it generic might need more thinking about how to hook up renderers in the Output editor pane but we can build something already in Jupyter:

• Contribute an action on toolbar or context menu to open output in another editor pane
• Read the output raw data from the notebook document
• Create a custom editor, load the renderers for the mime type and send the data to the custom editor

---

On the other hand, it reminds me of interactive window somehow. If we allow open an interactive window side by side and connect to the same kernel, would it already work as expected?

[kieferrm]

This is an interesting idea. Questions that crossed my mind while reading through it. No need to answer those right now.

• Can I have more than one editor in which I show outputs?
• Although left and right can be scrolled independently I'd see value in a mode where when I give focus to an input on the left we make the output visible on the right and vice versa.
• When I close the left, do we close all output pane editors? (I'd think so)
• What happens when I close the left and then reopen it? Do we restore a single editor or multiple editors?
• When I close the output pane, the output moves back into the notebook? (I'd think so)

[rchiodo]

+1 on doing this. Super cool idea. I think we could just use the interactive window with some tweaks to do this.

We already want to support opening the interactive window as a 'scratchpad'. Doesn't seem very hard to make just mirror output instead/in addition to that.

[rebornix]

From the questions Kai posted above, it seems there are two potential UX in our discussions here, one is dragging an output to another editor, or in other words, mirroring outputs, while another one is allowing to render input and output side by side (might include scrolling sync). We can try using the intearctive window for the former idea. The later reminds me of how Xcode playground works

[IanMatthewHuff]

@kieferrm @rebornix Sorry for the late reply. Didn't have a free cycle until now. I did have a few thoughts while designing this around some of these questions already. Considerations here are all based around how I think I would use this. With the usual caveat that I'm not a data scientist and just a dogfood noodler :).

Can I have more than one editor in which I show outputs?

I considered this as a 1:1 mapping between each notebook editor and a single possible output editor. My thought was that one output editor per document would simplify the UI some. Like if I have a button to move the output I don't need to worry about which output editor to send that output to. I can see an argument for wanting to put a plot from Cell 1 in one editor and a plot from Cell 2 in another. But 1:1 felt like a clean solution that would probably solve 95% of customer usages. And if the basic machinery is in place I think it wouldn't be hard to scale that up to more possible editors later.

Although left and right can be scrolled independently I'd see value in a mode where when I give focus to an input on the left we make the output visible on the right and vice versa.

I can see that as well. I like the independent scrolling as a concept as I think that I often have a single output that I'm manipulating and I want to place it further up my file next to another output or next to an earlier cell. But I can see frustration in having to sync up cells to match. In my design I was seeing those [input] and [output] small indicators as buttons that would sync the other pane, but the idea of locking them or always focusing the output when the input is focused is good as it wouldn't require extra user actions.

When I close the left, do we close all output pane editors? (I'd think so)

Yup, the controls and controller are all in the main file. Feels confusing to keep just the output around.

What happens when I close the left and then reopen it? Do we restore a single editor or multiple editors?

Honestly this one I didn't consider, and it's interesting. For simplicities sake I want to say "just open it in a normal editor and re-pop the output" but I think that I probably would want my popped output state restored.

When I close the output pane, the output moves back into the notebook? (I'd think so)

Yup, that's how I was seeing it

[Maoni0]

this is exactly what Jupyter Notebook does in vscode - all the code on the left hand side and all the output on the right hand side. this layout works much better than how the C# notebook works for the following reasons -

1. I don't lose the number of lines of code I'm seeing;
2. I get to compare the output from one cell to another which is very desirable;

we are trying to switch from Jupyter Notebook (python code) to C# Notebook because the library we use is in C#. we have to have an interop layer between python code and the C# library which is problematic. but how the layout works with C# notebooks is making it difficult to switch.

if it works with Jupyter Notebook in vscode it means it's definitely possible. it would be a great feature to implement.

[teichert]

this is exactly what Jupyter Notebook does in vscode - all the code on the left hand side and all the output on the right hand side.

@Maoni0, can you show me what you mean? I didn't think the side-by-side functionality is available in vscode even for jupyter notebooks yet.

[teichert]

fwiw, I suppose another possible approach at implementation would be to add the ability to independently allow users to collapse (and uncollapse) any combination of the code and output of a notebook cell and then to have commands to collapse-all-code, expand-all-code, collapse-all-output, and collapse-all-output.

The idea is that this collapsing functionality might be useful in its own right, and with that in place, the already-existing ability to split the window would go pretty far to getting what is being proposed. A user could just split the window, collapse all output on the left and collapse all code on the right.

(And actually, the ability to simply split the window and scroll the left-side to the code and the right-side to the output of the cell, actually solves one of my current personal use-cases.)

[mrsharm]

Hi @teichert,

What we want is to have similar behavior for .NET Interactive notebooks like python notebooks running in vscode that has been done for many years where the result of the cell execution is available side by side such as:

As opposed to the more traditional notebook style of displaying the result below the cell such as:

In other words, we'd like the chart to show up in the interactive window running the .NET Interactive kernel:

Currently we can create a Jupyter Interactive window that can make use of the .NET Interactive kernel:

However, this feature currently entails that we have to manually enter all our expressions in the single cell to execute:

Do let me know if you have any further questions.

[teichert]

Thanks, @mrsharm! I was trying to figure out how to even do that for python, and you helped me get the answer.
The reason why I was confused was because I have used .ipynb files (which always displays cell output below the code rather than to the side). I saw that the example in your screen shot had a .py extension where the cells are just delimited with %% and indeed the output is displayed to the side as desired which is great!

btw, for anyone else finding this while trying to figure out how to even get the side by side working with python notebooks, note that the "Jupyter: Convert to Python Script" command makes it easy to convert to the .py format if that is applicable. Of course, the .ipynb format may have some separate use-cases since results are stored in the file.