How to Organize Widgets with jupyterlab-sidecar

How to Organize Widgets with jupyterlab-sidecar#

Learning Goals#

This is a beginner tutorial on organizing widgets using jupyterlab-sidecar. We’ll cover the basics of creating sidecars and managing their layout. By the end of this tutorial, you will:

  • Understand how to create sidecars for widgets.

  • Be able to create your own configuration of sidecars.

  • Know how to change sidecar layouts to fit your preferences in the Roman Research Nexus (RRN).

Table of Contents#

Introduction#

This tutorial familiarizes you with how to create and manipulate app sidecars, allowing you to customize your notebook displays for your optimal workflow. Sidecars are context managers that allow you to display widgets in dedicated, separate panels inside jupyterlab workspaces. We use the package jupyterlab-sidecar to create these sidecars in jupyterlab notebooks. In this notebook, we work with the widgets mast-aladin and jdaviz to demonstrate functionality, though sidecars can be used to organize many other widgets you might use in your workflow.

Imports#

We will leverage the sidecar package to create flexible app layouts, and we will use mast-aladin andjdaviz to populate the sidecars with example widgets.

  • sidecar to create sidecars

  • mast-aladin for creating example widget to organize

  • jdaviz for creating example widget to organize

from sidecar import Sidecar
from mast_aladin import MastAladin
import jdaviz as jd

Organizing Widgets#

Creating Sidecars#

We will create an example sidecar containing an instance of mast_aladin using the cell below. We are displaying a single output, so it occupies all of the vertical space available, though the widget’s default height means it will only populate a given portion of the sidecar unless specified otherwise.

# Create a sidecar
sc = Sidecar(title="mast-aladin")

# Create a mast-aladin instance
mast_aladin = MastAladin()

# Display the widget within the sidecar
with sc:
    display(mast_aladin)

You now have a mast-aladin instance displayed in the right side pannel, with the title mast-aladin shown in the tab along the far right side of the screen.

By default, sidecars display in the right panel. You can collapse the displayed widget by clicking on the tab labeled mast-aladin. If you run the cell above multiple times, you will generate multiple tabs (all with the same title, mast-aladin) in the right panel to interact with.

Before we continue, remove any sidecar(s) we created by hitting the “x” symbol to the right of the tab title mast-aladin. You should now be back to the basic display of a jupyter-notebook with no sidecars.

Now, let’s display a sidecar in the main work area of the notebook by running the following:

# Create a sidecar with defined anchor
sc = Sidecar(title="jdaviz Main", anchor="split-right")

# Display a jdaviz instance widget within the sidecar
with sc:
    jd.show()

You now have a jdaviz instance displayed on the right half of the main jupyterlab work area. Its title, jdaviz Main, is shown in the tab along the top of the screen.

The anchor parameter can be defined as:

  • split-right: main panel right of the notebook,

  • split-left: main panel left of the notebook,

  • split-top: main panel above the notebook,

  • split-bottom: main panel below the notebook,

  • tab-before: main panel stacked before the tab notebook,

  • tab-after: main panel stacked after the tab notebook,

  • right: default, right sidebar panel.

Excluding the default, right, these anchors open sidecars within the main work area that are re-arrangable.

Each call with a given anchor will split your remaining available width or height in half. For example, calling the cell above twice will create two sidecars (containing jdaviz instances) taking up 1/2 and then 1/4 of the width, with the notebook taking up the remaining 1/4.

Run the previous cell again to achieve the arrangement described above.

Before continuing, close out all but one of the jdaviz Main sidecars.

Rearranging Sidecars#

When using anchor to open sidecars in the main work area, you can rearrange the windows and screens by dragging them. Use a dragging motion on the jdaviz Main sidecar to duplicate the arrangement below:

alt text

As you grab the sidecar by clicking on the tab, you will see a blue “hover” color to indicate where the sidecar will appear once it is released. You can achieve this same layout by passing anchor="split-bottom" instead of dragging a tab you initially anchored elsewhere.

Now that you’re familiar with the drag-and-drop rearrangement, let’s introduce a second sidecar to get comfortable with managing multiple widgets. Run the cell below to create a second sidecar containing mast-aladin:

# Create a sidecar with defined anchor
sc = Sidecar(title="mast-aladin Main", anchor="split-right")

# Display the widget within the sidecar
with sc:
    display(mast_aladin)

Your display should now have jdaviz Main taking up the entire bottom half of the screen while mast-aladin Main takes up the upper right corner of the screen, with the notebook in the upper left corner of the screen.

Now, rearrange your screen to look like the following (note: we want the mast-aladin Main at the bottom of the screen and the jdaviz Main on the right of the screen):

alt text

You can also move your sidecars into the tab section at the top of the screen (where the title of the notebook we are working with lives). These are indicated when you establish a sidecar with an anchor of "tab-before", or "tab-after". Try rearranging the mast-aladin Main tab to the right of this notebook.

Exercise#

Now that you are comfortable with rearranging multiple sidecars into increasingly-complicated patterns, use the following widgets to reproduce the complicated screen layout shown below:

alt text

Hint: you will need to run some of the cells below multiple times to reproduce the arrangement. You may also want to change the anchor to more efficiently achieve the screen layout with less dragging to rearrange sidecars.

# Create a sidecar with defined anchor
sc = Sidecar(title="mast-aladin Main", anchor="split-right")

# Display the widget within the sidecar
with sc:
    display(mast_aladin)

# Create a sidecar with defined anchor
sc = Sidecar(title="jdaviz Main", anchor="split-right")

# Display a jdaviz instance widget within the sidecar
with sc:
    jd.show()

# Create sidecar in default right panel
sc = Sidecar(title="mast-aladin")

# Display the widget within the sidecar
with sc:
    display(mast_aladin)

About this Notebook#

Author(s): Celia Parts
Keyword(s): sidecar, mast-aladin, jdaviz
First published: July 2026
Last updated: July 2026

Top of Page Space Telescope Logo