Reusable code snippets in JupyterLab

by Patrick Titzler, Luciano Resende

Reusable code snippets in JupyterLab

In this blog post, we will introduce the Elyra code snippet extension, which enables us to reuse arbitrary snippets of code in your notebooks, source code, or markdown files in JupyterLab.

Let’s say you are working on a notebook and want to include a standard header or footer (like licensing text) or some code that you’ve previously created. This typically results in a hectic search. In which notebook did I use the code? Where’s the most current version of the disclaimer I need to add? While maintaining a “scratchpad” might help, native support for reusable code or documentation assets in JupyterLab holds a lot more appeal.

Code snippet ui

Installing the code snippet extension

The code snippet extension can be installed as part of Elyra or individually using pip or conda. In the context of this article, see below how to install the code snippet extension in your existing JupyterLab deployment.

Installing the extension using pip

$ pip install elyra-code-snippet-extension && jupyter lab build

Installing the extension using Anaconda

$ conda install -c conda-forge elyra-code-snippet-extension && jupyter lab build

Managing and using code snippets

Code snippets are accessed by opening the code snippets tab on the JupyterLab sidebar:

The code snippets UI is divided into two parts:

• a quick search panel, and
• the code snippet list, providing access to code snippet specific actions, such as copy, insert, edit, and delete.

Creating a snippet

To create a snippet click + above the search bar and provide the required information. You can optionally tag snippets to make them more easily discoverable.

Finding a snippet

To locate a code snippet, enter a search term and/or pick one of the listed tags.

Copying a snippet to the clipboard

You copy the snippet content to the clipboard by clicking the snippet’s copy icon.

Inserting a snippet

Click the snippet’s insert icon to paste the snippet content in the desired destination, such as a cell in a notebook or an open editor window. Drag-and-Drop of the snippet has also been incorporated in the latest Elyra release.

Do note that the editor does not keep track of where you’ve inserted a snippet. Also, note that snippets don’t act like macros and changes to a snippet are therefore not reflected in the locations where the snippet was embedded.

Editing a snippet

You edit a snippet by clicking the snippet’s pencil icon.

Deleting a code snippet

You delete a code snippet by clicking the snippet’s trash icon.

Sharing code snippets

The code snippet extension currently doesn’t provide any import or export capabilities. However, you can access the relevant metadata files that contain the definitions.

The definitions are stored in the $JUPYTER_DATA_DIR/metadata/code-snippets directory, where $JUPYTER_DATA_DIR refers to the Jupyter data directory, which you can identify by running the following command in a terminal window:

$ jupyter --data-dir

In my environment, the code snippets are stored in /Users/ptitzler/Library/Jupyter/metadata/code-snippets/. To back up or share my snippets, I typically create an archive from the content of this directory.

Try Code Snippet from Binder

To experiment with the code snippet extension without installing it locally, just click on the binder link below and then look for the code-snippet icon on the JupyterLab side-bar :

Try the code snippet extension online on Binder

Acknowledgments

We’d like to thank Zach Sailer and Timothy George for all his UX contributions in conjunction with JaeWook (Jay) Ahn, Kiran Pinnipati, and Ai-Vy Dang the CalPoly interns that helped to implement these UX enhancements.

Closing thoughts

Elyra is constantly making Jupyter Notebooks better aiming to help data scientists, machine learning engineers, and AI developers through the model development life cycle complexities, making JupyterLab even better for AI practitioners.

Come and join our weekly dev meetings to learn more about the most recent updates to Elyra and to ask your questions to the community, including the project core developers.

We would also appreciate for you to get involved with the Elyra project. Read our contributing guidelines, create new issues if you have questions, suggestions for new features, or to report any bugs. We also welcome contributions via GitHub pull requests. And last but not least, don't forget to star the project on Github.