Notebook UX/usability issues

[eamodio]

I've been using notebooks more lately because of @joyceerhl's GitHub GraphQL notebook. And I find myself fighting with the UX of the notebook more and more.

Here are some of the issues I've been experiencing

• The run button can be far away from the output (and worse can even be out of view)
  • You can't even right-click to run the cell, as there isn't an option to run that single cell
  • Having the run button not scroll out of view would help, but it might also be nice to have an addition run button or something in the statusbar, e.g. close to the output
• Cells are not resizable
  • I keep trying to drag the bar between the cell and its output to resize the output
  • I don't feel like there is a silver bullet here, but I am constantly wanting the cell editor to be smaller and the output to be bigger. But it also completely depends on the context. I wonder if by default both the top and bottom could be made to scroll (and be resizable?), and then on focus they expand to not scroll? This could cause too much jumping, or maybe it could be done outside the document flow e.g. focus into the editor and it expands on top of everything below it.
  • Overall I feel like I spend too much time scrolling around and looking at the output in a narrow window.
• Cell context menu is overly tailored to creation and not running
  • IMO, Cut/Copy/Paste, should be at the bottom near delete, Execute options should be at the top, and then the other options mixed in the middle
• Scrolling the notebook is also an issue because of the multiple scrollable areas -- so if I am trying to scroll up in the notebook, I can constantly get stuck inside a cell's output as I'm doing that.

Another alternative to resizing the output, a suggestion from @TylerLeonhardt is to have an option (per-cell imo) to show the output side-by-side with the cell. I think having an orientation option would be a great addition.

[roblourens]

Thanks for using notebooks @eamodio!

• Have heard this before, making the run button sticky with the top of the screen as you scroll is something that has come up before, we should do that
• Do you ever collapse the code cell input? That is sort of what we are going for with that feature. You can click the blue bar now to collapse a section
• I assume that people will mainly use the buttons or keybindings for execution. Are you going to use the context menu for executing cells because the buttons are scrolled out of view? Would you still use that if the run button was sticky?
• cc @rebornix for output scrolling and sizing
• Side-by-side output/code: heck yeah. Would be a pain to implement with the webview, but I have wanted that too.

[roblourens]

I ended up just implementing the sticky run button, it's in Insiders, let me know if it helps. We're going to try it with the cell toolbar too.

[eamodio]

@roblourens Sweet!

The sticky run button definitely helps, but it can still be a great distance from the output:

Do you ever collapse the code cell input?

I didn't even know that was possible :) But in my case recent use case, I wouldn't want the whole cell input hidden, just collapsed to be much smaller. Because while I don't need to tweak the large query a lot, I do constantly tweak the data at the end. In the image above, I am usually tweaking the variables at the end there.

I assume that people will mainly use the buttons or keybindings for execution. Are you going to use the context menu for executing cells because the buttons are scrolled out of view? Would you still use that if the run button was sticky?

I don't think I'd use the run action from there much, but it was the first place I went to look for the action -- so I would definitely expect it to be there.

Also from the image, you can see it looks like theming is broken on outputs in today's insiders.

[eamodio]

I'd also suggest adding the Collapse Output action into this context menu:

[joyceerhl]

theming is broken on outputs in today's insiders.

@rebornix is this maybe a side effect of moving the renderer into an extension?

[rebornix]

@joyceerhl right, the current one doesn't load textmate engine and grammars so it's using monarch for tokenization. If this is highly wanted I can look into making it work.

[rebornix]

I'd also suggest adding the Collapse Output action into this context menu:

@eamodio 👍 I think we should.

[rebornix]

👍 for the sticky run button, it at least ensures that you don't have to scroll the view to run the cell again.

We once explored ideas of showing a sticky output toolbar (though the challenge is where to put it) where we can show multiple renderers/mimetypes and a few actions, re-run can be one of them. Maybe as a first start:

• register run cell in ... action bar for the output
• register run cell sub menu in context menu, which includes run cell, debug cell, etc.

@eamodio would that help?

[eamodio]

Maybe there can be a run button on the side of the output just like the input?

[roblourens]

I will move the "Collapse output" action in March: https://github.com/microsoft/vscode/issues/143760

I'm not not sure about having a second run button just to be closer to the output. I guess I am not clear on the scenario, is this about tweaking the code at the end of the code cell and mousing from there to the run button, or mousing from the output to the run button?

register run cell in ... action bar for the output

Also am not sure about that, I would feel confused seeing it there.

I guess I don't have an issue with adding execute actions to the context menu, except that it feels a little crowded already, and execution already has its own dedicated screen space

[roblourens]

I know that Notebook UX could still see improvements, but I think we've done everything here that I want to do (or it's tracked elsewhere). Thanks for the feedback