Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add toolbar icon to restart and run all #2965

Merged
merged 2 commits into from Jan 6, 2018

Conversation

@betatim
Copy link
Member

@betatim betatim commented Oct 22, 2017

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
Copy link

@ctb ctb commented Oct 24, 2017

+1

Loading

@betatim
Copy link
Member Author

@betatim betatim commented Oct 27, 2017

Any thoughts on this?

Loading

@minrk
Copy link
Member

@minrk minrk commented Oct 30, 2017

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?

Loading

@gnestor
Copy link
Contributor

@gnestor gnestor commented Oct 31, 2017

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

Loading

@ctb
Copy link

@ctb ctb commented Oct 31, 2017

Loading

@betatim
Copy link
Member Author

@betatim betatim commented Nov 1, 2017

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 😀

Loading

@gnestor
Copy link
Contributor

@gnestor gnestor commented Nov 1, 2017

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...

Loading

@ellisonbg
Copy link
Contributor

@ellisonbg ellisonbg commented Nov 1, 2017

Loading

@ellisonbg
Copy link
Contributor

@ellisonbg ellisonbg commented Nov 1, 2017

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.

Loading

@gnestor
Copy link
Contributor

@gnestor gnestor commented Nov 2, 2017

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 👍

Loading

@ellisonbg
Copy link
Contributor

@ellisonbg ellisonbg commented Nov 2, 2017

Loading

@ellisonbg
Copy link
Contributor

@ellisonbg ellisonbg commented Nov 2, 2017

Loading

@ctb
Copy link

@ctb ctb commented Nov 2, 2017

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.

Loading

@ghost
Copy link

@ghost ghost commented Nov 2, 2017

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!

screen shot 2017-11-02 at 1 37 25 pm

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):

screen shot 2017-11-02 at 1 37 06 pm

Loading

@rgbkrk
Copy link
Member

@rgbkrk rgbkrk commented Nov 2, 2017

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.

Loading

@ellisonbg
Copy link
Contributor

@ellisonbg ellisonbg commented Nov 2, 2017

Loading

@betatim
Copy link
Member Author

@betatim betatim commented Nov 3, 2017

👍 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?

Loading

@betatim
Copy link
Member Author

@betatim betatim commented Nov 3, 2017

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.

Loading

@ghost
Copy link

@ghost ghost commented Nov 3, 2017

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

Loading

@betatim betatim force-pushed the restart-and-rerun-toolbar branch from f978dc8 to b2fe5a4 Nov 4, 2017
@betatim
Copy link
Member Author

@betatim betatim commented Nov 4, 2017

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:

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:

This is what it currently looks like:
screen shot 2017-11-04 at 14 43 49

Loading

@gnestor
Copy link
Contributor

@gnestor gnestor commented Nov 7, 2017

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

Loading

@betatim
Copy link
Member Author

@betatim betatim commented Nov 7, 2017

screen shot 2017-11-07 at 17 54 24

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

Loading

@gnestor
Copy link
Contributor

@gnestor gnestor commented Jan 5, 2018

I agree with @takluyver 👍

Loading

@betatim betatim force-pushed the restart-and-rerun-toolbar branch from 9dd82de to 3c83c85 Jan 6, 2018
@betatim
Copy link
Member Author

@betatim betatim commented Jan 6, 2018

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

screen shot 2018-01-06 at 08 22 32

Loading

@dsblank
Copy link
Member

@dsblank dsblank commented Jan 6, 2018

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.

Loading

@takluyver
Copy link
Member

@takluyver takluyver commented Jan 6, 2018

ipycache allows a similar workflow to what you described.

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

Loading

@takluyver takluyver merged commit e4529a4 into jupyter:master Jan 6, 2018
4 checks passed
Loading
@dsblank
Copy link
Member

@dsblank dsblank commented Jan 6, 2018

@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!

Loading

@acrule
Copy link
Contributor

@acrule acrule commented Jan 6, 2018

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

Loading

@dsblank
Copy link
Member

@dsblank dsblank commented Jan 7, 2018

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

Loading

@betatim betatim deleted the restart-and-rerun-toolbar branch Jan 7, 2018
@betatim
Copy link
Member Author

@betatim betatim commented Jan 7, 2018

Thank you everyone for the comments and patience!

Loading

@gnestor
Copy link
Contributor

@gnestor gnestor commented Jan 7, 2018

Thanks @betatim!!

Loading

@gnestor
Copy link
Contributor

@gnestor gnestor commented Jan 7, 2018

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

Loading

@takluyver takluyver removed this from the 5.4 milestone Jan 8, 2018
@takluyver takluyver added this to the 5.3 milestone Jan 8, 2018
@takluyver
Copy link
Member

@takluyver takluyver commented Jan 8, 2018

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

Loading

@williamstein
Copy link

@williamstein williamstein commented Jan 18, 2018

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

screenshot 2018-01-18 at 1 55 36 pm

(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.

Loading

@betatim
Copy link
Member Author

@betatim betatim commented Jan 19, 2018

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.

Loading

@williamstein
Copy link

@williamstein williamstein commented Jan 19, 2018

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

Loading

@williamstein
Copy link

@williamstein williamstein commented Jan 21, 2018

Here's what I ended up doing in Cocalc:

screenshot 2018-01-20 at 9 07 36 pm

  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:

screenshot 2018-01-20 at 9 14 38 pm

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).

Loading

@takluyver
Copy link
Member

@takluyver takluyver commented Jan 21, 2018

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.

Loading

@ellisonbg
Copy link
Contributor

@ellisonbg ellisonbg commented Jan 21, 2018

Loading

@takluyver
Copy link
Member

@takluyver takluyver commented Jan 21, 2018

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.

Loading

@ellisonbg
Copy link
Contributor

@ellisonbg ellisonbg commented Jan 21, 2018

Loading

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

10 participants