repository·main·Indexed 25 days ago
https://github.com/jupyter-widgets/ipywidgetsipywidgets (also known as jupyter-widgets) provides interactive HTML widgets for Jupyter notebooks and the IPython kernel, allowing users to control data and visualize changes interactively. The library includes core widgets such as sliders, progress bars, text boxes, toggle buttons, checkboxes, and display areas. It supports integration with JupyterLab, Classic Notebook, and standalone web applications via packages like @jupyter-widgets/controls, @jupyter-widgets/schema, and @jupyter-widgets/html-manager.
The @jupyter-widgets ecosystem consists of several specialized packages for managing and rendering Jupyter widgets in different environments. Key packages include:
@jupyter-widgets/base: Core functionality for widget management.@jupyter-widgets/base-manager: Base manager for widget lifecycle and communication.@jupyter-widgets/controls: Implementation of standard interactive UI controls.@jupyter-widgets/html-manager: Manager specifically for handling HTML-based widgets.@jupyter-widgets/jupyterlab-manager: Extension for integrating widgets within JupyterLab.@jupyter-widgets/output: Package for managing widget output areas.The ipywidgets library provides fundamental interactive HTML widgets for Jupyter notebooks and the IPython kernel. Core widgets include:
Jupyter Widgets (ipywidgets) is a framework for creating interactive browser controls within Jupyter notebooks. It allows users to visualize and manipulate data through intuitive graphical interfaces without needing to write code.
Key capabilities include:
The project consists of a kernel-side package (e.g., the ipywidgets Python package for the IPython kernel) and a browser-side extension for managing the widgets in frontends like JupyterLab or Jupyter Notebook.
The core @jupyter-widgets/controls library is context-agnostic. To use widgets in specific environments, you must use a specialized widget manager that extends @jupyter-widgets/base. These managers handle widget display locations and state retrieval logic.
Available specializations include:
widgetsnbextension Python package.@jupyter-widgets/jupyterlab-manager npm package.@jupyter-widgets/html-manager npm package.For custom web implementations, refer to the following example patterns in the repository:
web1: Simplistic use of widgets in a web context.web2: Using the application/vnd.jupyter.widget-state+json mime type.web3: Communicating with a Jupyter kernel in a web context outside of Notebook/JupyterLab.web4: Embedding widgets in an HTML document using the HTML widget manager.New test suites can be added to the ui-tests/tests directory.
Requirements:
.test.ts.-snapshots directories.The Embed widgets menu item in the classic notebook interface generates an HTML snippet for embedding widgets into static web pages.
Structure of the generated snippet:
<script> tag loads RequireJS from a CDN (can be removed if already present on your page).<script> tag loads the RequireJS widget embedder (defines modules and rendering functions). For standard widgets only, you can replace these with a standard embedder script.<script> tag with type="application/vnd.jupyter.widget-state+json" containing the serialized state of all widget models.<script> tags with type="application/vnd.jupyter.widget-view+json" placed in the <body>. These are replaced by the rendered widget DOM trees.Note: To ensure a clean embedding, restart the kernel and refresh the page before generating the snippet.
Since the Phosphor library has been replaced by Lumino, update your imports and property accessors:
JupyterPhosphorPanelWidget and JupyterPhosphorWidget to JupyterLuminoPanelWidget and JupyterLuminoWidget from @jupyter-widgets/base.this.pWidget to this.luminoWidget (an alias for pWidget is available for convenience).processPhosphorMessage to processLuminoMessage.To support both 7.x and 8.x, implement both methods and use a helper to call the correct super method.
- import { JupyterPhosphorPanelWidget, JupyterPhosphorWidget } from '@jupyter-widgets/base';
+ import { JupyterLuminoPanelWidget, JupyterLuminoWidget } from '@jupyter-widgets/base';
- this.pWidget
+ this.luminoWidget
- processPhosphorMessage(msg: Message): void {
- super.processPhosphorMessage(msg);
- switch (msg.type) {
- case 'resize':
- this.resize();
- break;
- }
- }
+ _processLuminoMessage(msg: Message, _super: (msg: Message) => void): void {
+ _super.call(this, msg);
+ switch (msg.type) {
+ case 'resize':
+ this.resize();
+ break;
+ }
+ }
+
+ processPhosphorMessage(msg: Message): void {
+ this._processLuminoMessage(msg, super.processPhosphorMessage);
+ }
+
+ processLuminoMessage(msg: Message): void {
+ this._processLuminoMessage(msg, super.processLuminoMessage);
+ }Examples for ipywidgets are located in the examples subdirectory of the GitHub repository. The examples are organized into two main categories:
You can find these files in the source repository under examples/notebooks and examples/development.
The description_tooltip attribute for certain widgets is deprecated in favor of a universal tooltip attribute available on all widgets that inherit from DOMWidget.
Action: Search and replace description_tooltip with tooltip to support ipywidgets 8.0+.
unpkg to jsDelivr. If your deployment requires unpkg, you can override this by specifying the data-jupyter-widgets-cdn data attribute on the HTML manager script tag.To perform an editable install of the Python ipywidgets package into your user site directory, navigate to the python/ipywidgets subdirectory and use the --prefix flag with the user base path. Note that pip install --user -e . is not supported due to a known pip bug.
cd python/ipywidgets
pip install --prefix=$(python -m site --user-base) -e .