Add toolbar icon to restart and run all

[betatim]

With notebooks you can become a victim of your own interactive exploration aka re-running cells in a wild, non linear order. The advice for avoiding this is to (frequently) "run it from the top" by hitting restart and run all. I think it would be useful to have an icon on the toolbar to do this as a way to encourage this behaviour.

What do you think?

The icon is not ideal, maybe some FA magic of combining the play and restart icon would be better?

[ctb]

+1

[betatim]

Any thoughts on this?

[minrk]

Toolbar space is pretty precious, so we have to have a pretty high bar for what goes in there. I've no specific objections, though. @ellisonbg ideas on how to decide what warrants a promotion to toolbar vs the two-clicks needed to get from the menu?

[gnestor]

I have a couple thoughts:

• I think "run all" is worthy of toolbar status, I'm not sure about "restart and run all"
  • In which case, I would use the "forward" icon (which looks like a double forward compared to the run icon)
• I'm not sure if the "refresh" icon is the best visual representation for "restart and run all"... It does make sense, but what about step-backward

[ctb]

On Tue, Oct 31, 2017 at 11:53:46AM -0700, Grant Nestor wrote: * I think "run all" is worthy of toolbar status, I'm not sure about "restart and run all"

it is critical for some minimal attempt at repeatability, in my experience. it's by far my most used menu item.

[betatim]

I'm not sure if the "refresh" icon is the best visual representation for "restart and run all"... It does make sense, but what about step-backward

Not in love with "refresh" either. step-backward somehow points in the wrong direction for me, more like "go back to the start and wait" than "rewind and then run to the end". I'm open to ideas.

How could we get a feeling/data on which buttons are used how often in the toolbar? For what it is worth my N=1 data is that I rarely use "stop" and "run" only when demoing the notebook to somehow who is new. Something a bit more objective would be good though 😀

[gnestor]

Google Analytics or something equivalent. Unfortunately I don't think that's going to happen anytime soon (maybe in JupyterLab). However, @ellisonbg has been leading several UX research efforts so he should have some insight here...

[ellisonbg]

Hi all! I am digging out of email and will try to reply in more detail about this soon.

…

On Wed, Nov 1, 2017 at 9:29 AM, Grant Nestor ***@***.***> wrote: Google Analytics or something equivalent. Unfortunately I don't think that's going to happen anytime soon (maybe in JupyterLab). However, @ellisonbg <https://github.com/ellisonbg> has been leading several UX research efforts so he should have some insight here... — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2965 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABr0BR3Y94vuGoxwEJBjV31HUq2YB1kks5syJx7gaJpZM4QB4J-> .

-- Brian E. Granger Associate Professor of Physics and Data Science Cal Poly State University, San Luis Obispo @ellisonbg on Twitter and GitHub [email protected] and [email protected]

[ellisonbg]

A few comments on toolbars in general, based on work with the Bloomberg designers and Cooper's About Face.

• Cooper claims that "toolbars give experienced users fast access to frequently used functions"
• Both Cooper and the Bloomberg designers clarified that menus (main menus and context menus) tend to be the go to for new users who are learning a UI for the first time. In JupyterLab this is reflected by our mostly ignoring toolbar design right now and instead focusing on menus.
• They also said that good menus should migrate users to keyboard shortcuts as quickly as possible (skipping toolbar usage entirely).
• Bloomberg designers felt that having text along with icon buttons becomes important for actions that have pictures that are not as recognizable. However, Cooper says the most important thing for toolbar icons is that they are memorable, rather than recognizable. IOW, it matters less what the icon is, and more that a user can remember it. He also says that tooltips provide a nice compromise that let's a user discover the purpose of a button, without always showing text.
• Well designed menus can also show icons that match those used on toolbar icon buttons.

Some of these things are probably out of scope for the classic notebook (showing icons and keyboard shortcuts in menus, context menus, etc.).

In light of Cooper's I think the play, stop and restart buttons are memorable enough without text (they have tooltips).

I agree that "restart and run all" is a good candidate for inclusion in the toolbar. We should be encouraging users to verify that notebooks run as they expect. In terms of its visual design, I think we are more likely to design a new custom icon that pick an existing one that has that meaning. I can have @hzarea work up some ideas.

ping @acrule who is thinking about ways encouraging users to write "good" notebooks from the HCI perspective.

[gnestor]

Thanks, Brian!! That was really insightful!

I agree that menus and keyboard shortcuts are more useful than toolbars. I personally never use the toolbar and in classic notebook I have it hidden. It would be nice if we could do away with the toolbar, but I understand that some people use toolbars a lot.

I think that toolbars in JupyterLab and Notebook would be more useful if they were easily customized by the user. Ideally, users would be able to drag actions in/out of the toolbar (e.g. macOS-style toolbar customization). A much more achievable alternative in JupyterLab would be an action (in the menu, command palette, or "edit" button in the notebook toolbar) that would open an editor with the toolbar settings JSON and allow users to edit it. This is a UX pattern used in Atom editor (and Sublime Text and others) that's not perfect but it's easy and it works.

showing icons and keyboard shortcuts in menus

We have on open PR for that! #2968

I think we are more likely to design a new custom icon that pick an existing one that has that meaning. I can have @hzarea work up some ideas.

That sounds good 👍

[ellisonbg]

Ohh, that is great someone opened that PR for shortcuts in menus!

…

On Wed, Nov 1, 2017 at 9:09 PM, Grant Nestor ***@***.***> wrote: Thanks, Brian!! That was really insightful! I agree that menus and keyboard shortcuts are more useful than toolbars. I personally never use the toolbar and in classic notebook I have it hidden. It would be nice if we could do away with the toolbar, but I understand that some people use toolbars a lot. I think that toolbars in JupyterLab and Notebook would be more useful if they were easily customized by the user. Ideally, users would be able to drag actions in/out of the toolbar (e.g. macOS-style toolbar customization). A much more achievable alternative in JupyterLab would be an action (in the menu, command palette, or "edit" button in the notebook toolbar) that would open an editor with the toolbar settings JSON and allow users to edit it. This is a UX pattern used in Atom editor (and Sublime Text and others) that's not perfect but it's easy and it works. showing icons and keyboard shortcuts in menus We have on open PR for that! #2968 <#2968> I think we are more likely to design a new custom icon that pick an existing one that has that meaning. I can have @hzarea <https://github.com/hzarea> work up some ideas. That sounds good 👍 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2965 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABr0J1I8TruAT5UUdWBguWszcSJu1mTks5syUBxgaJpZM4QB4J-> .

-- Brian E. Granger Associate Professor of Physics and Data Science Cal Poly State University, San Luis Obispo @ellisonbg on Twitter and GitHub [email protected] and [email protected]

[ellisonbg]

Also, I really like your idea of having a customizable menu - all JupyterLab commands can include an icon, so the model for the toolbar is really just a list of commands. Would be easy to render that out - might need to hard code a few special things such as the cell type selector, but there may be a different place or UI to deal with that. Can you open an issue on JupyterLab for that idea?

…

On Wed, Nov 1, 2017 at 9:12 PM, Brian Granger ***@***.***> wrote: Ohh, that is great someone opened that PR for shortcuts in menus! On Wed, Nov 1, 2017 at 9:09 PM, Grant Nestor ***@***.***> wrote: > Thanks, Brian!! That was really insightful! > > I agree that menus and keyboard shortcuts are more useful than toolbars. > I personally never use the toolbar and in classic notebook I have it > hidden. It would be nice if we could do away with the toolbar, but I > understand that some people use toolbars a lot. > > I think that toolbars in JupyterLab and Notebook would be more useful if > they were easily customized by the user. Ideally, users would be able to > drag actions in/out of the toolbar (e.g. macOS-style toolbar > customization). A much more achievable alternative in JupyterLab would be > an action (in the menu, command palette, or "edit" button in the notebook > toolbar) that would open an editor with the toolbar settings JSON and allow > users to edit it. This is a UX pattern used in Atom editor (and Sublime > Text and others) that's not perfect but it's easy and it works. > > showing icons and keyboard shortcuts in menus > > We have on open PR for that! #2968 > <#2968> > > I think we are more likely to design a new custom icon that pick an > existing one that has that meaning. I can have @hzarea > <https://github.com/hzarea> work up some ideas. > > That sounds good 👍 > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#2965 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AABr0J1I8TruAT5UUdWBguWszcSJu1mTks5syUBxgaJpZM4QB4J-> > . > -- Brian E. Granger Associate Professor of Physics and Data Science Cal Poly State University, San Luis Obispo @ellisonbg on Twitter and GitHub ***@***.*** and ***@***.***

-- Brian E. Granger Associate Professor of Physics and Data Science Cal Poly State University, San Luis Obispo @ellisonbg on Twitter and GitHub [email protected] and [email protected]

[ctb]

Some thoughts from the perspective of someone who introduces many new non-computational users to Jupyter quite frequently:

• their needs are quite different from experienced computational folk, e.g., you can't expect people who aren't computationally expert to memorize keyboard shortcuts until they're already committed to using the software (which may take many tries).
• toolbar icons are a good intermediary that (I believe with no evidence :) can be quite useful to beginners - "click that icon to rerun everything from scratch, so that we can see if during our edits we broke anything!"
• right now, it is three clicks for me to 'restart and run everything' - select kernel menu, select menu item, say yes I am sure (in big red letters no less!) It's a pain for me to run!

So from this perspective,

If we are pitching notebooks as one solution to the reproducibility/repeatability problem, it needs to be easy to rerun from the start in a clean environment - single click toolbar, and/or keyboard shortcut with no confirmation.

If we are hoping to successfully onboard new users from less computationally expert backgrounds, there should be a simple canonical low-working-memory-overhead way to do it that is available on default installs.

[ghost]

I really like the idea of a customizable toolbar!

As for the new icon, here are two designs I came up with. Let me know if either of these seem like they're heading in the right direction!

Here is what they would look like as smaller icons (they're not in the correct place, but this is just to preview the scale):

[rgbkrk]

The second one (play icon + lines) means run all to me. The first one doesn't convey any meaning to me personally, though I think it's really cool as notebook/cell concept art.

[ellisonbg]

Hana, thanks for prototyping these things! What about something that combines the ideas of the restart button (the refresh icon) and the play icon? I agree with Kyle that the second one does convey "run all" - we just need to capture the "restart" part of the action. Thanks!

…

On Thu, Nov 2, 2017 at 1:49 PM, Kyle Kelley ***@***.***> wrote: The second one (play icon + lines) means run all to me. The first one doesn't convey any meaning to me personally, though I think it's really cool as notebook/cell concept art. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2965 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABr0IOfOg8rgEVQXAUZ5MeZGkqk6fznks5syirbgaJpZM4QB4J-> .

-- Brian E. Granger Associate Professor of Physics and Data Science Cal Poly State University, San Luis Obispo @ellisonbg on Twitter and GitHub [email protected] and [email protected]

[betatim]

👍 to @ellisonbg's suggestion for a combination of the restart and play icon.

To someone who is more familiar with the current notebook interface: right now all icons are FA icons, is there an example of how to incorporate a custom icon that I can crib from?

[betatim]

While I personally would love "restart&run all without confirming" as a button, I have a feeling that a lot of people would end up hating that because they lose expensive to compute results when they accidentally click it. So as a compromise ask people to confirm.

[ghost]

Thanks for the feedback, everyone... I'll keep prototyping the restart all icon!

@betatim JupyterLab's file browser icons are custom, if you'd want to check out how we incorporated those

[betatim]

JupyterLab's file browser icons are custom, if you'd want to check out how we incorporated those

I will take a look. The code in this repo just allows you to specify a font awesome class name:

notebook/notebook/static/notebook/js/toolbar.js

Lines 95 to 100 in 1183800

	var button = $('<button/>')
	.addClass('btn btn-default')
	.attr("title", el.label||i18n.msg._(action.help))
	.append(
	$("<i/>").addClass(el.icon||(action||{icon:'fa-exclamation-triangle'}).icon).addClass('fa')
	);

This makes me think without major engineering effort we have to pick a FA icon. Some ideas:

• repeat: http://fontawesome.io/icon/repeat/ (currently used for restart kernel)
• recycle: http://fontawesome.io/icon/recycle/ (this PR)

This is what it currently looks like:

[gnestor]

I agree with @ellisonbg that "repeat" + "play" would be a good representation for "restart and run all". "Repeat" by itself is pretty good, too.

[betatim]

With fa-repeat the overall look is unchanged, and the button now does confirm-restart-and-run-all instead of just restarting.

[gnestor]

I agree with @takluyver 👍

[betatim]

Thanks for the feedback @takluyver. Changed things as you suggested, this is what things looks like now:

[dsblank]

This will be very helpful; I spend more time on exactly these operations than anything else! It would be great if the "restart and run" icon were logically a visual combination of "restart" and "run", even if we have to redesign "restart" and "run" to make that possible.

On a related point, I have started to create coding paradigms that allow me not to lose computationally expensive results, like @betatim was worried about:

if net.saved():
    net.load()
    net.plot_loss_acc()
else:
    net.train(epochs=10000, accuracy=1.0, report_rate=50, 
              tolerance=0.4, batch_size=len(net.dataset.train_inputs), 
              plot=True, record=100)
    net.save()

That is, the first time through, it runs (trains a neural network, can take a long time) but subsequently it reloads the network. Output is the same either way. (Can also be accomplished with variables in previous cells). This kind of strategy can be part of recommendations for best-practices.

[takluyver]

ipycache allows a similar workflow to what you described.

OK, let's get this merged. Thanks @betatim .

[dsblank]

@takluyver Thanks! I didn't know about ipycache (wouldn't work in this situation as it isn't so much about the output as the network itself, and these networks aren't generally pickleable). I just saw Mattias's post on blog topics: "Best practices for reproducible research in Jupyter" would be a great blog topic to announce this new button!

[acrule]

@dsblank Reusing previous results also reminds me of Philip Guo's work on IncPy which attempts to do automatic cacheing of intermediate results.

[dsblank]

@acrule Nice! If someone else doesn't compile all of these great hints into a blog post, I will :)

[betatim]

Thank you everyone for the comments and patience!

[gnestor]

Thanks @betatim!!

[gnestor]

@takluyver Do you think that we should include this in 5.3?

[takluyver]

I do. It's low risk, and I think we should get it in front of users and see how it goes.

[williamstein]

FWIW, I coincidentally added a related thing to CoCalc Jupyter two months ago, and here's what it looks like (on the right):

(I also added cpu and memory indicators. This was all motivated by people using jupyter in classes, and also when grading lots of assignments.)

Anyway, I plan to add the same button that you just added for compatibility.

[betatim]

Which icon did you use @williamstein? I can't find a button/text for restart-and-run all in your screenshot. As mentioned above I think for notebook we could do with a better icon (fast forward is not what I think of with rewind and then play all). So I'd like to hear ideas/see what others did.

[williamstein]

Sorry, I haven't chose one yet. I'll try to stay consistent with what you did, even if you don't like it...

[williamstein]

Here's what I ended up doing in Cocalc:

1. For consistency with Jupyter, I changed the run button from play to step-forward (so with bar on right), since it is just one step. I also added the word "Run". This was a little annoying since I've been sing step-forward for tab (for those with no tab key, e.g., ipad users)... so I changed that to just the word "Tab".

2. I added a "Restart kernel" button. However, using the same icon you use is a non-option in cocalc, since that is the redo icon, as in undo/redo, and I've had a button for undo and for redo for year. It's the mirror image of undo, so has to be used for redo. That only leaves the refresh icon, which I see you rejected above. The refresh icon especially makes sense for Cocalc since it's exactly the icon I have already been using forever for restart for sage worksheets:

REQUEST: I hope you will change your mind and use the refresh icon. It's a better choice and avoids confusion, especially if you add undo/redo buttons ever (which I've found users really like -- yes they're missing in the sagews screenshot above, and I've got complaints about that).

[takluyver]

We're already using the refresh icon for restart kernel (without running cells afterwards). At one point this PR replaced that button completely, but having the same icon in the same place do something different on a new release didn't seem very user friendly.

[ellisonbg]

For JupyterLab my plan is to design a custom logo for this, other folks are more than welcome to use it.

…

On Sun, Jan 21, 2018 at 12:40 AM, Thomas Kluyver ***@***.***> wrote: We're already using the refresh icon for restart kernel (without running cells afterwards). At one point this PR replaced that button completely, but having the same icon in the same place do something different on a new release didn't seem very user friendly. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2965 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABr0Ot7ph3S7etqwNfxlyoNxPq4tWd-ks5tMvf4gaJpZM4QB4J-> .

-- Brian E. Granger Associate Professor of Physics and Data Science Cal Poly State University, San Luis Obispo @ellisonbg on Twitter and GitHub [email protected] and [email protected]

[takluyver]

We agreed that we're happy to have a custom icon in the existing notebook interface, but we didn't want to hold up adding the button while someone figured out how to have a non-fontawesome icon. If someone works that out, PRs welcome.

[ellisonbg]

Sounds good

…

On Sun, Jan 21, 2018 at 1:06 PM, Thomas Kluyver ***@***.***> wrote: We agreed that we're happy to have a custom icon in the existing notebook interface, but we didn't want to hold up adding the button while someone figured out how to have a non-fontawesome icon. If someone works that out, PRs welcome. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2965 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABr0PpHr_AqGNs4tT_5qyu6zdsp31Coks5tM6bkgaJpZM4QB4J-> .

-- Brian E. Granger Associate Professor of Physics and Data Science Cal Poly State University, San Luis Obispo @ellisonbg on Twitter and GitHub [email protected] and [email protected]