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

Projects
None yet
@betatim
Copy link
Contributor

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

This comment has been minimized.

Copy link

ctb commented Oct 24, 2017

+1

@betatim

This comment has been minimized.

Copy link
Contributor Author

betatim commented Oct 27, 2017

Any thoughts on this?

@minrk

This comment has been minimized.

Copy link
Member

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?

@gnestor

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link

ctb commented Oct 31, 2017

@betatim

This comment has been minimized.

Copy link
Contributor Author

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 😀

@gnestor

This comment has been minimized.

Copy link
Contributor

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

@ellisonbg

This comment has been minimized.

Copy link
Contributor

ellisonbg commented Nov 1, 2017

@ellisonbg

This comment has been minimized.

Copy link
Contributor

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.

@gnestor

This comment has been minimized.

Copy link
Contributor

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 👍

@ellisonbg

This comment has been minimized.

Copy link
Contributor

ellisonbg commented Nov 2, 2017

@ellisonbg

This comment has been minimized.

Copy link
Contributor

ellisonbg commented Nov 2, 2017

@ctb

This comment has been minimized.

Copy link

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.

@hzarea

This comment has been minimized.

Copy link

hzarea 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

@rgbkrk

This comment has been minimized.

Copy link
Member

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.

@ellisonbg

This comment has been minimized.

Copy link
Contributor

ellisonbg commented Nov 2, 2017

@betatim

This comment has been minimized.

Copy link
Contributor Author

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?

@betatim

This comment has been minimized.

Copy link
Contributor Author

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.

@hzarea

This comment has been minimized.

Copy link

hzarea 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

@betatim betatim force-pushed the betatim:restart-and-rerun-toolbar branch from f978dc8 to b2fe5a4 Nov 4, 2017

@betatim

This comment has been minimized.

Copy link
Contributor Author

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

@gnestor

This comment has been minimized.

Copy link
Contributor

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.

@betatim

This comment has been minimized.

Copy link
Contributor Author

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.

@gnestor

This comment has been minimized.

Copy link
Contributor

gnestor commented Jan 5, 2018

I agree with @takluyver 👍

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

@betatim

This comment has been minimized.

Copy link
Contributor Author

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

@dsblank

This comment has been minimized.

Copy link
Member

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.

@takluyver

This comment has been minimized.

Copy link
Member

takluyver commented Jan 6, 2018

ipycache allows a similar workflow to what you described.

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

@takluyver takluyver merged commit e4529a4 into jupyter:master Jan 6, 2018

4 checks passed

codecov/patch Coverage not affected when comparing 9c7c213...3c83c85
Details
codecov/project 78.7% remains the same compared to 9c7c213
Details
continuous-integration/appveyor/pr AppVeyor build succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@dsblank

This comment has been minimized.

Copy link
Member

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!

@acrule

This comment has been minimized.

Copy link
Contributor

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.

@dsblank

This comment has been minimized.

Copy link
Member

dsblank commented Jan 7, 2018

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

@betatim betatim deleted the betatim:restart-and-rerun-toolbar branch Jan 7, 2018

@betatim

This comment has been minimized.

Copy link
Contributor Author

betatim commented Jan 7, 2018

Thank you everyone for the comments and patience!

@gnestor

This comment has been minimized.

Copy link
Contributor

gnestor commented Jan 7, 2018

Thanks @betatim!!

@gnestor

This comment has been minimized.

Copy link
Contributor

gnestor commented Jan 7, 2018

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

@takluyver takluyver modified the milestones: 5.4, 5.3 Jan 8, 2018

@takluyver

This comment has been minimized.

Copy link
Member

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.

@williamstein

This comment has been minimized.

Copy link

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.

@betatim

This comment has been minimized.

Copy link
Contributor Author

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.

@williamstein

This comment has been minimized.

Copy link

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

@williamstein

This comment has been minimized.

Copy link

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

@takluyver

This comment has been minimized.

Copy link
Member

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.

@ellisonbg

This comment has been minimized.

Copy link
Contributor

ellisonbg commented Jan 21, 2018

@takluyver

This comment has been minimized.

Copy link
Member

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.

@ellisonbg

This comment has been minimized.

Copy link
Contributor

ellisonbg commented Jan 21, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.