Brought to you by NumFOCUS Foundation and O’Reilly Media
The official Jupyter Conference
Aug 21-22, 2018: Training
Aug 22-24, 2018: Tutorials & Conference
New York, NY

A Keyboard Shortcut Editor for JupyterLab

Moderated by: Alena Mueller

We are one of three teams of Software Engineering and UI/UX Design Interns at Project Jupyter and currently undergraduates at California Polytechnic State University, San Luis Obispo. The main project we worked on this summer was creating a user interface to view, change, and create keyboard shortcuts in JupyterLab, an interactive development environment that provides a high level of integration between Jupyter notebooks, documents, and other activities. Before our project, changing keyboard shortcuts in JupyterLab meant going into advanced settings and hand editing JSON data. Shortcuts can increase a user’s efficiency, and customization lets individuals to set the JupyterLab environment to fit their needs. Our interface enables users of all experience levels to make these changes.

To design the interface, we started with research on what other applications and websites have done to show and allow edits to keyboard shortcuts, as well as what users have said about these systems. Programs use varying interfaces, some of which lead to user frustration. For example, in the traditional Jupyter Notebook the user has to read a long set of instructions and type in a specific syntax in order to make changes to shortcuts. Other systems list all possible commands with no way to group or sort the list. We began our design with a list of all the features the best possible user interface would include, and continuously looked back at that list as we built our extension.

A major challenge during development was integrating the existing settings system with our new extension. The existing system did not easily support many parts of a user-friendly and dynamic interface for changing shortcuts. To streamline the user experience, we iterated through several interfaces and tweaked the existing JSON schema for storing keyboard shortcut. As a side effect of building this extension, we were able to establish best practices and build examples for future use of React in JupyterLab.

We also applied these problem solving methods to further design and develop a prototype Git extension for JupyterLab. Our poster will describe the design and development process of these two extensions.