Search code examples
jupyter-lab

Jupyterlab : How to insert custom elements / buttons / commands in the Cell-Toolbar

This is the cell toolbar

enter image description here

In the settings you can add/remove commands

enter image description here

But there is no clear indication of what can be added there and how.

Solution

  • I will respond using one specific example.

    1. Find the command

    I haven't found a way to list all the available commands in your setup of Jupyterlab.

    Here is a list https://jupyterlab.readthedocs.io/en/latest/user/commands.html#commands-list

    But if you have added extensions, your extension-commands are not there.

    In my case I had this Notebook toolbar https://i.imgur.com/aImgj09.png

    There there is a command (apply black formatter). I wanted a button that applyies the formatter just to a cell, not the whole notebook.

    I found it here

    https://i.imgur.com/1mQv1sD.png

    To find out what clicking there was doing I opened the "Developer Tools" of the Browser (normally F12) and selected that menu option.

    https://i.imgur.com/uNDRhsn.png

    Copy the element and you get

    <li tabindex="0" role="menuitem" class="lm-Menu-item" data-type="command" data-command="jupyterlab_code_formatter:black"><div class="f1vya9e0 lm-Menu-itemIcon"></div><div class="lm-Menu-itemLabel">Apply Black Formatter</div><div class="lm-Menu-itemShortcut"></div><div class="lm-Menu-itemSubmenuIcon"></div></li>

    The command we are looking for is data-command="jupyterlab_code_formatter:black"

    2. Find the Icon.

    You can use text instead, but Icons are quicker to 'read' :O)

    We do the same (click the element from Web developer tools) with the existing black-formatter icon.

    https://i.imgur.com/0VWHHN5.png

    And extract the code

    
<jp-button class="jp-ToolbarButtonComponent" aria-pressed="false" aria-disabled="false" title="Format notebook" tabindex="-1" current-value="" appearance="stealth" minimal=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1792 1792" data-icon="jupyterlab_code_formatter:format_all"><path xmlns="http://www.w3.org/2000/svg" class="jp-icon3" d="M1473 929q7-118-33-226.5t-113-189t-177-131T929 325q-116-7-225.5 32t-192 110.5t-135 175T317 863q-7 118 33 226.5t113 189t177.5 131T862 1467q155 9 293-59t224-195.5t94-283.5zM1792 0l-349 348q120 117 180.5 272t50.5 321q-11 183-102 339t-241 255.5T999 1660L0 1792l347-347q-120-116-180.5-271.5T116 852q11-184 102-340t241.5-255.5T792 132q167-22 500-66t500-66z" fill="#626262"></path></svg></jp-button>

    The icon is data-icon="jupyterlab_code_formatter:format_all"

    3. Edit the Settings

    Add the command and the icon. Item type: command

    https://i.imgur.com/lx7wIzT.png

    Go back to the notebook, select a code cell.

    Buala!

    We have a button to apply black code formatter to the cell (the last one)

    enter image description here

    Docs: