Add "Restart kernel, re-run whole notebook" button

[ryantam626]

References

#7935

Code changes

• Add fast forward icon, from the rest of the svg, it looks like it's coming from material UI icons, so I copied fast foward from here, and applied some stylistic changes to keep it consistent to what is already done;
• Add ToolbarItems.createRestartRunAllButton and register this new button in ToolbarItems.getDefaultItems (I used the implementation of restart and run all command in notebook-extension as reference);
• Add tests obviously;

User-facing changes

(Note the presence of the fast forward icon)

Backwards-incompatible changes

None.

[jupyterlab-dev-mode]

Thanks for making a pull request to JupyterLab!

To try out this branch on binder, follow this link:

[jasongrout]

Like you mention, we already have a command to restart and run all. Is there a reason to not just use a CommandButton to invoke that command?

Also, CC @tgeorgeux for UX review for the icon. Note that this icon is what is used in the classic notebook these days for this action:

I personally like the restart and run all icon from the nteract discussion, though (perhaps with the arrow going the other way, though): nteract/nteract#4809 (comment)

[jasongrout]

Is there a reason to not just use a CommandButton to invoke that command?

Yes, there is a reason not to use the command. For the notebook, the toolbar is defined in the notebook package, not the notebook extension package, so it does not have access to the command.

[jasongrout]

The code looks and seems to work great. I suggested a few small changes to the text, but other than that, this looks good.

Thanks!

[ryantam626]

I personally like the restart and run all icon from the nteract discussion

Oh yes, same here! That looks much more intuitive. Let me know if the appropriate SVG can be produced and I can make the changes 👍

I suggested a few small changes to the text

Yep makes sense, will change and squash the relevant commit.

[saulshanabrook]

Next steps here are to address Jason's suggestion and for @tgeorgeux to provide an appropriate icon.

[tgeorgeux]

For the Icon we can use:

The code for that SVG is here (Is there an easy way I could just add a file to the PR?)

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g class="jp-icon3" fill="#616161">
<path d="M13 3C10.6131 3 8.32387 3.94821 6.63604 5.63604C4.94821 7.32387 4 9.61305 4 12H1L4.96 16.03L9 12H6C6 10.1435 6.7375 8.36301 8.05025 7.05025C9.36301 5.7375 11.1435 5 13 5C14.8565 5 16.637 5.7375 17.9497 7.05025C19.2625 8.36301 20 10.1435 20 12C20 13.8565 19.2625 15.637 17.9497 16.9497C16.637 18.2625 14.8565 19 13 19C11.07 19 9.32 18.21 8.06 16.94L6.64 18.36C8.27 20 10.5 21 13 21C15.3869 21 17.6761 20.0518 19.364 18.364C21.0518 16.6761 22 14.3869 22 12C22 9.61305 21.0518 7.32387 19.364 5.63604C17.6761 3.94821 15.3869 3 13 3Z"/>
<path d="M17 12L11 16.5V7.5L17 12Z"/>
</g>
</svg> 

[tgeorgeux]

@jasongrout the reason I used the arrow going 'backward' was to communicate the kernel going 'back' before it restarts. If that's not clear I can reverse the direction of the arrow.

[jasongrout]

If that's not clear I can reverse the direction of the arrow.

I haven't thought about it enough to have an opinion. I didn't even realize the arrows had a standard direction until @ivanov pointed it out to me the other day in that discussion.

Is it easy to post the forward-facing arrow to see what it looks like? The fact that browsers use the forward facing arrow for reload makes me think that might be analogous to restart. I wish we had more examples of this sort of icon.

[jasongrout]

Here is macOS:

(so it isn't a circle arrow, but it is "backwards")

Here is Windows:

Checking on our Windows 10 computer, it's also a counter-clockwise arrow for reboot.

So I think precedence is there to have a counter-clockwise arrow.

[tgeorgeux]

Here are some examples from Material Design Icons:

That's where the inspiration came from for the one I made. Only refresh is clockwise, I don't think of what the user is doing here as a refresh as much as a clean start.

I am open to being convinced otherwise, that's just what I am shooting for.

[jasongrout]

I am open to being convinced otherwise, that's just what I am shooting for.

Sounds good to me.

[tgeorgeux]

Thanks.

[jasongrout]

Are we doing the icon in a different pr?

[tgeorgeux]

Ah sorry, I spaced, I can open a new PR to change the icon.

[jasongrout]

I think it's better as a follow-up PR at this point.

[tgeorgeux]

Yeah, I re-though that and edited my response right after I made it. I'll open a new PR with the comments you had outstanding incorporated, with the new icon included. Would you mind giving it a check for me when I'm done?

Sorry to complicate this 🤦‍♂️

[saulshanabrook]

New PR sounds great! I am happy to review too. Thanks Tim.

[ryantam626]

Ah I was gonna work on this once weekend has arrived, but I see there is already a PR for this, I will leave this in @tgeorgeux 's good hands then 🙏