@jupyterlab/ui-components
A JupyterLab package that provides UI elements of various types (React components, DOM elements, etc) to core JupyterLab packages and third-party extensions.
LabIcon
user guide
LabIcon
is the icon class used by JupyterLab, and is part of the new icon system introduced in JupyterLab v2.0.
How JupyterLab handles icons
The ui-components package provides icons to the rest of JupyterLab, in the form of a set of LabIcon
instances (currently about 80). All of the icons in the core JupyterLab packages are rendered using one of these LabIcon
instances.
Using the icons in your own code
You can use any of JupyterLab icons in your own code via an import
statement. For example, to use jupyterIcon
you would first do:
import { jupyterIcon } from "@jupyterlab/ui-components";
How to render an icon into a DOM node
Icons can be added as children to any div
or span
nodes using the icon.element(...)
method (where icon
is any instance of LabIcon
). For example, to render the Jupyter icon you could do:
jupyterIcon.element({container: elem, height: '16px', width: '16px', marginLeft: '2px'});
where elem
is any HTMLElement
with a div
or span
tag. As shown in the above example, the icon can be styled by passing CSS parameters into .element(...)
. Any valid CSS parameter can be used (one catch: snake case params do have to be converted to camel case: instead of foo-bar: '8px'
, you'd need to use fooBar: '8px'
.
How to render an icon as a React component
Icons can also be rendered using React. The icon.react
parameter holds a standard React component that will display the icon on render. Like any React component, icon.react
can be used in various ways.
For example, here is how you would add the Jupyter icon to the render tree of another React component:
public render() {
return (
<div className="outer">
<div className="inner">
<jupyterIcon.react tag="span" right="7px" top="5px" />
"and here's a text node"
</div>
</div>
);
}
Alternatively, you can just render the icon directly into any existing DOM node elem
by using the ReactDOM
module:
ReactDOM.render(jupyterIcon.react, elem);
If do you use ReactDOM
to render, and if the elem
node is ever removed from the DOM, you'll first need to clean it up:
ReactDOM.unmountComponentAtNode(elem);
This cleanup step is not a special property of LabIcon
, but is instead needed for any React component that is rendered directly at the top level by ReactDOM
: failure to call unmountComponentAtNode
can result in a memory leak.
v2.0.0
February 2020
Here are some highlights for this release. See the JupyterLab
2.0
milestone on GitHub for the full list of pull requests and issues
closed.
User-facing changes
- New user interface for notebook cell tags
(#7407,
#7786)
<img alt="Notebook cell tags in the left sidebar next to an open notebook." src="https://raw.githubusercontent.com/jupyterlab/jupyterlab/3.1.x/docs/source/getting_started/changelog_celltags.png" class="jp-screenshot">
- File info display when hovering on a file in the file browser
(#7485,
#7352)
<img alt="The file browser with a tooltip describing a notebook's info like the name, size, and kernel." src="https://raw.githubusercontent.com/jupyterlab/jupyterlab/3.1.x/docs/source/getting_started/changelog_fileinfo.png" class="jp-screenshot">
- Support for searching outputs in notebooks
(#7258)
<img alt="A notebook with multiple cells and the cell output searching in the upper right." src="https://raw.githubusercontent.com/jupyterlab/jupyterlab/3.1.x/docs/source/getting_started/changelog_searchoutput.png" class="jp-screenshot">
-
Ctrl Shift .
and Ctrl Shift ,
shortcuts move focus to the next
and previous tab bar in the main area, respectively
(#7673)
-
Shift Home
and Shift End
shortcuts in a notebook select all
cells from the current cell to the top or bottom of a notebook,
respectively
(#7177)
-
Explicit "No Kernel" button in the kernel selection dialog for new
notebooks
(#7647)
-
Notebook recordTiming
advanced setting to control whether
execution timing information is stored in notebook files
(#7578)
-
"Select current running or last run cell" command added (requires
notebook recordTiming
advanced setting to be set to true)
(#7551)
-
Codemirror lineWiseCopyCut
advanced setting to control the
behavior of the copy/cut keyboard shortcuts when there is no
selection
(#7842)
-
Refreshed the command palette and property inspector sidebar icons
and user interfaces
(#7577,
#7038,
#7733,
#7732,
#7718,
#7686)
-
"New File" and "New Markdown File" items in file browser context
menu (#7483,
#4280)
-
"Download" item in File menu
(#7480)
-
"Restart Kernel and Run up to Selected Cell" item in notebook
Kernel menu
(#7789,
#6746)
-
In extension manager, the "enable" button is now only shown for
installed extensions
(#7482)
-
Dialogs can now be closed by clicking outside of them
(#7885,
#3784)
-
documentsearch:startWithReplace
command to open the document find
overlay with replace. There is not currently a default keyboard
shortcut for this, but one can be assigned as a custom keyboard
shortcut in Advanced Settings.
(#7725)
-
#
added to the CSV Viewer delimiter options
(#7367,
#6324)
-
The JSON viewer now only displays structure hints for arrays and
empty objects for a more streamlined feel
(#7227)
-
Optional platform-aware keyboard shortcut fields linuxKeys
,
macKeys
, and winKeys
in keyboard shortcut definitions
(#7589)
{
command: "application:toggle-mode",
selector: "body",
linuxKeys: ["Ctrl Shift M"], // only linux
macKeys: ["Cmd Shift Z"], // only mac
winKeys: ["Ctrl Shift B"], // only windows
keys: ["Accel Shift U"] // default shortcut
}
-
Added options for jupyter lab clean
to clean specific parts of the
build, such as --extensions
, --settings
, --static
, and --all
(#7583,
#6734)
-
Removed the vega 4 and vega-lite 2 renderers (vega 5 and vega-lite 4
is included in JupyterLab by default). These legacy renderers may be
available via custom extensions
(#7650,
#7523,
#7658)
-
JupyterHub users should use the c.Spawner.default_url = '/lab'
setting instead of the deprecated and now removed labhubapp
(#7724)
For developers
See extension_migration
for help in
migrating extensions to JupyterLab 2.0.
Backward incompatible changes
- Switch from
@phosphor
to @lumino
dependencies.
(#7582,
#7534,
#7763,
#7762,
#7595) - Factor out the
settingsregistry
and statedb
packages from
coreutils
(#7681,
#7615) - Rework services architecture (sessions, kernels, terminals). Among
these changes,
ClientSession
is renamed to SessionContext
and
the IKernelConnection.connectToComm
method is replaced with
IKernelConnection.createComm
and IKernelConnection.hasComm
methods.
(#7252,
#7674,
#7820,
#7694,
#7690,
#7682) - Upgrade to TypeScript 3.7
(#7522)
- Remove
polling
from coreutils in favor for @lumino/polling
(#7617) - TypeScript strict null checking in core packages
(#7657,
#7607)
- Update state database list method to query based on namespace match.
(#7742,
#7257)
- Address code todo items and deprecations for 2.0
(#7720,
#7724)
- Update Console panel tracker widgets
(#7705,
#7726,
#7648,
#7645)
- Update contribution guide to require node v12+
(#7479)
- New API for the
Running
sidebar extension
(#6895,
#6876) - Clean up handling of icons under unified LabIcon (
#7192
#7700,
#7765,
#7767,
#7800,
#7846,
#7859,
#7864,
#7886)
Other changes
- New property inspector used to display the properties of the
currently selected main area widget
(#7665,
#7664,
#7718,
#7686)
- Allow metadata for launcher items
(#7654,
#7652)
- Allow default file browser to restore manually.
(#7695,
#4009)
- Upgrade bundled yarn to 1.21.1
(#7691,
#7692)
- Make session dialogs configurable
(#7618,
#7616)
- Support transient editor configs
(#7611,
#7295)
- Optionally force new browser tab
(#7603,
#7602)
- Update core dependencies (e.g.,
codemirror
, xterm.js
,
markdown
, fontawesome
, etc.)
(#7590,
#7194,
#7326,
#6479,
#7769) - Add storybook to
ui-components
(#7588,
#6799) - Add explicit documentation encouraging people to re-use lab
components
(#7543)
- Enable TypeScript sourcemaps for debugging locally installed
labextensions
(#7541)
- Add
UseSignal
example to the docs
(#7519) - Add
env
prop to kernel options
(#7499) - Add kernelspec metadata
(#7229,
#7228)
- Allow different mimetypes for the clipboard data
(#7202)
- Add password dialog to apputils
(#7855)
- Alias phosphor packages to lumino to allow a deprecation period for
phosphor
(#7893)
- Match react version in ui-components peerdependencies
(#7794)
- Fix lint-staged for both win and mac
(#7784)
- Update websocket workaround for node environments
(#7780,
#6934)
- Fix handling of linked extensions
(#7728,
#6738)
- Fix extension compatibility checks for prereleases and extensions
supporting multiple major versions of JupyterLab
(#7723,
#7241,
#7919)
- Teach update-dependency about more range specifiers and make it
adopt the current range for any tag
(#7709)
- Add support for giving a rank to items in the top area
(#7278)
- Apply all options to the initial JupyterLab application instance
(#7251)
Bugfixes
- "Copy Shareable Link" in the file browser context menu now
properly works in JupyterHub
(#7906)
- Update Mathjax CDN in the cell and console examples
(#7680)
- Revert ensure-max-old-space now that Node 12+ has better default
memory ceilings
(#7677,
#7675)
- Resolve race condition between default file browser and tree urls.
(#7676,
#4009)
- Fix handling of code editor refresh
(#7672,
#7671)
- Start new notebooks in edit mode
(#7666,
#6731)
- Use consistent versions of React
(#7661,
#7655)
- Add scrollbar styles to nbconvert-css
(#7653)
- Close output views when corresponding notebooks are closed
(#7633,
#7301)
- Fixed incorrect white background for new command palette icon
(#7609,
#7577)
- Block fetching the settings for a plugin that is disabled
(#7147)
- When timing metadata changes, ensure signal fires
(#7576)
- Prevent memory leaks in Vega renderer
(#7564)
- Handle cell execution cancellation when cell is disposed
(#7555,
#7554)
- Fix dropdown option style issue on Windows
(#7513)
- Make sure label is linked to a control when checking for element
type (#7458)
- Refine log console message UX
(#7448,
#7444,
#7443)
- Fix multicursor backspacing
(#7401,
#7205)
- Reset log display and count when non-notebook tab gets activated
(#7334,
#7325)
- Fix Safari multiple tabs by working around a Safari bug.
(#7316,
#6921)
- Skip custom click behavior on links when the download attribute is
set (#7311,
#5443)
- Fix context menu hit test to deal with SVG nodes.
(#7242,
#7224)
- Fix overwriting of target attribute of anchors rendered by
IPython.display
(#7215,
#6827) - Fix file browser location in tree view
(#7155)
- Stop too many fetch calls in docmanager-extension
(#7879,
#7874)
- Ensures that
Shift Tab
dedent shortcut works correctly in the file
editor
(#7865) - Fix unexpected jump to last search result when using documentsearch
(#7835)
- Fixed refresh issue for html viewer
(#7824,
#7552)
- Fix for center-aligned images with IPython.display.image
(#7798)
- Changes to setting editor should trigger application dirty state
(#7774,
#7757)
- Move vega from "devdependencies" to "dependencies"
(#7699,
#7689)
- Restore default file browser manually.
(#7695,
#4009)
- Use default
app_dir
when app_dir
is ''
(#7268,
#7264)