-
Notifications
You must be signed in to change notification settings - Fork 947
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
31 changed files
with
517 additions
and
135 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,7 +8,7 @@ | |
| } | ||
| }, | ||
| "source": [ | ||
| "# Low Level Widget Tutorial" | ||
| "# Low Level Widget Explanation" | ||
| ] | ||
| }, | ||
| { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| Migrating user code | ||
| =================== | ||
|
|
||
| These are migration guides specifically for ipywidgets users. | ||
|
|
||
| Migrating from 7.x to 8.0 | ||
| ------------------------- | ||
|
|
||
| For more details about the changes done for the 8.0 major version, please consult the | ||
| [changelog](./changelog). | ||
|
|
||
| ### Code | ||
|
|
||
| #### FileUpload | ||
|
|
||
| The `data` and `metadata` traits have been removed, and the `value` trait revamped to | ||
| be a list of dicts containing the file information. The keys of these dicts are: | ||
|
|
||
| - `content`: The buffer of file data | ||
| - `name`: The name of the file | ||
| - `type`: The MIME type of the file content | ||
| - `size`: The size of the buffer in bytes | ||
| - `last_modified`: A UTC datetime representing the "last modified" value reported for the file | ||
|
|
||
| Suggested migration: Rewrite all usage of `FileUpload` to use the new structure. | ||
| If you need to support both 7.x and 8.x, you can e.g. write functions `get_file_buffer` and similar | ||
| to wrap reads from the widget. | ||
|
|
||
| #### Tooltips | ||
|
|
||
| As part of an effort to make it possible to | ||
| [set tooltips for all widgets](https://github.com/jupyter-widgets/ipywidgets/pull/2680), | ||
| the old `description_tooltip` attribute for certain widgets was deprecated. Now all widgets | ||
| that inherit `DOMWidget` have the attribute `tooltip` instead. | ||
|
|
||
| Suggested migration: Search and replace `description_tooltip` to `tooltip`. | ||
|
|
||
| #### Selection Widgets | ||
|
|
||
| These widgets include: `ToggleButtons`, `Dropdown`, `RadioButtons`, `Select`, `SelectMultiple` `Selection`, `SelectionSlider`, and `SelectionRangeSlider`. | ||
|
|
||
| For these, it is no longer possible to use `dict`s or other mapping types as values for the | ||
| `options` trait. Using mapping types in this way has been deprecated since version 7.4, and | ||
| will now raise a `TypeError`. | ||
|
|
||
| Suggested migration: Clean up the `options` use. The following snippet can be used to convert | ||
| a `dict` to the new format: `w.options = tuple((str(k), v) for k, v in your_dict.items())`. | ||
|
|
||
| #### Description Sanitization | ||
|
|
||
| The value of the `description` field of any widget that inherits `DescriptionWidget` | ||
| (most widgets in ipywidgets) will now have its value sanitized for certain HTML content | ||
| on the client side. If you are relying on HTML in this value, you might need to explicitly | ||
| set the `description_allow_html` trait to `True`, depending on what kind of tags/attributes | ||
| are used. | ||
|
|
||
| Suggested migration: Only set `description_allow_html` if you are in full control of the | ||
| value that is set. | ||
|
|
||
| #### Layout.border | ||
|
|
||
| While this change is strictly speaking backwards compatible, a word of caution is useful to | ||
| those that want to use the new functionality: | ||
|
|
||
| Four attributes have been added: `border_left`, `border_right`, `border_top` and `border_bottom`. | ||
| These can be used to set the corresponding CSS border strings individually. Setting the | ||
| `border` property overrides all of those four attributes to the new value of `border`. If | ||
| the individual values are set to different values, *the `border` property will return `None` | ||
| when you read its value*. | ||
|
|
||
| #### Layout.overflow_x / overflow_y | ||
|
|
||
| The previously deprecated traits `overflow_x` and `overflow_y` | ||
| [have been removed](https://github.com/jupyter-widgets/ipywidgets/pull/2688). Please | ||
| use the `overflow` trait instead. | ||
|
|
||
| ### Deployments | ||
|
|
||
| #### Embedded CDN | ||
|
|
||
| Please note that the default CDN of ipywidgets have changed from unpkg to jsDelivr. If | ||
| you rely on the CDN being unpkg, this can be overridden by specifying the data | ||
| attribute `data-jupyter-widgets-cdn` on the HTML manager script tag. See | ||
| [embedding](./embedding) for details. | ||
|
|
||
| #### widgetsnbextension | ||
|
|
||
| The `notebook` package is no longer a dependency of the `widgetsnbextension` | ||
| package (therefore `notebook` is no longer a dependency of `ipywidgets`). If you | ||
| need to install `notebook` with `ipywidgets`, you will need to install | ||
| `notebook` explicitly. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| # Using the HTML widget manager as a RequireJS AMD module | ||
|
|
||
| ## Description | ||
|
|
||
| This is an example project showing how to embed widgets in an HTML document using a RequireJS AMD module. | ||
|
|
||
| In order to test the current development repo, make a symbolic link from the `packages/html-manager` directory to this directory and uncomment the `html-manager` paths config in `index.html`. | ||
|
|
||
| The widget data in this example was generated from the following code: | ||
|
|
||
| ```python | ||
| from ipywidgets import VBox, jsdlink, IntSlider, Button | ||
|
|
||
| s1, s2 = IntSlider(max=200, value=100), IntSlider(value=40) | ||
| b = Button(icon='legal') | ||
| jsdlink((s1, 'value'), (s2, 'max')) | ||
| VBox([s1, s2, b]) | ||
| ``` | ||
|
|
||
| ## Try it | ||
|
|
||
| 1. Start with a repository checkout, and run `yarn install` in the root directory. | ||
| 2. Run `yarn run build:examples` in the root directory. | ||
| 3. Open the `index.html` file in this directory. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,167 @@ | ||
| <html> | ||
| <head> | ||
| <meta http-equiv="content-type" content="text/html; charset=UTF8"> | ||
| <style> | ||
| .jupyter-widgetarea { | ||
| margin: 5px; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| max-width: 900px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script> | ||
| <script> | ||
| require.config({ | ||
| bundles: { | ||
| '@jupyter-widgets/html-manager/dist/embed-amd': [ | ||
| '@jupyter-widgets/html-manager', | ||
| '@jupyter-widgets/base', | ||
| '@jupyter-widgets/controls' | ||
| ] | ||
| }, | ||
| paths: { | ||
| '@jupyter-widgets/html-manager': [ | ||
| // 'html-manager', // if a symbolic link is set up to the html-manager package for local dev | ||
| 'https://cdn.jsdelivr.net/npm/@jupyter-widgets/html-manager', | ||
| ] | ||
| }, | ||
| }) | ||
| require(["@jupyter-widgets/html-manager/dist/embed-amd"], () => { | ||
| console.log('Processing widgets on page'); | ||
| }); | ||
| </script> | ||
| <script type="application/vnd.jupyter.widget-state+json"> | ||
| { | ||
| "version_major": 2, | ||
| "version_minor": 0, | ||
| "state": { | ||
| "1d915e54eff54fd89e505a46ccabdabd": { | ||
| "model_name": "LayoutModel", | ||
| "model_module": "@jupyter-widgets/base", | ||
| "model_module_version": "2.0.0", | ||
| "state": {} | ||
| }, | ||
| "48a42260652f4b7eb7851c65cd155604": { | ||
| "model_name": "SliderStyleModel", | ||
| "model_module": "@jupyter-widgets/controls", | ||
| "model_module_version": "2.0.0", | ||
| "state": { | ||
| "description_width": "" | ||
| } | ||
| }, | ||
| "105655a5e8dc4b7bb19d824cc3ff7770": { | ||
| "model_name": "IntSliderModel", | ||
| "model_module": "@jupyter-widgets/controls", | ||
| "model_module_version": "2.0.0", | ||
| "state": { | ||
| "value": 100, | ||
| "max": 200, | ||
| "style": "IPY_MODEL_48a42260652f4b7eb7851c65cd155604", | ||
| "behavior": "drag-tap", | ||
| "layout": "IPY_MODEL_1d915e54eff54fd89e505a46ccabdabd" | ||
| } | ||
| }, | ||
| "cb13b25cf84542ba882ab2a9c6e57c6d": { | ||
| "model_name": "LayoutModel", | ||
| "model_module": "@jupyter-widgets/base", | ||
| "model_module_version": "2.0.0", | ||
| "state": {} | ||
| }, | ||
| "f0479b348e2441cd87e1bd856fac5c22": { | ||
| "model_name": "SliderStyleModel", | ||
| "model_module": "@jupyter-widgets/controls", | ||
| "model_module_version": "2.0.0", | ||
| "state": { | ||
| "description_width": "" | ||
| } | ||
| }, | ||
| "2182c1a3fe4a410f9b0a5306ae05c530": { | ||
| "model_name": "IntSliderModel", | ||
| "model_module": "@jupyter-widgets/controls", | ||
| "model_module_version": "2.0.0", | ||
| "state": { | ||
| "value": 40, | ||
| "style": "IPY_MODEL_f0479b348e2441cd87e1bd856fac5c22", | ||
| "behavior": "drag-tap", | ||
| "layout": "IPY_MODEL_cb13b25cf84542ba882ab2a9c6e57c6d" | ||
| } | ||
| }, | ||
| "5f2da4ad981b467cb2d4f07efe5141f4": { | ||
| "model_name": "LayoutModel", | ||
| "model_module": "@jupyter-widgets/base", | ||
| "model_module_version": "2.0.0", | ||
| "state": {} | ||
| }, | ||
| "e5f63e1e06af400aac8135ff3394b856": { | ||
| "model_name": "ButtonStyleModel", | ||
| "model_module": "@jupyter-widgets/controls", | ||
| "model_module_version": "2.0.0", | ||
| "state": { | ||
| "font_family": null, | ||
| "font_size": null, | ||
| "font_style": null, | ||
| "font_variant": null, | ||
| "font_weight": null, | ||
| "text_color": null, | ||
| "text_decoration": null | ||
| } | ||
| }, | ||
| "891a12a9856949b4be2e520f732dcca9": { | ||
| "model_name": "ButtonModel", | ||
| "model_module": "@jupyter-widgets/controls", | ||
| "model_module_version": "2.0.0", | ||
| "state": { | ||
| "tooltip": null, | ||
| "icon": "legal", | ||
| "style": "IPY_MODEL_e5f63e1e06af400aac8135ff3394b856", | ||
| "layout": "IPY_MODEL_5f2da4ad981b467cb2d4f07efe5141f4" | ||
| } | ||
| }, | ||
| "e8a6db8ff7bd4645b5b23ccb797dee9c": { | ||
| "model_name": "DirectionalLinkModel", | ||
| "model_module": "@jupyter-widgets/controls", | ||
| "model_module_version": "2.0.0", | ||
| "state": { | ||
| "target": [ | ||
| "IPY_MODEL_2182c1a3fe4a410f9b0a5306ae05c530", | ||
| "max" | ||
| ], | ||
| "source": [ | ||
| "IPY_MODEL_105655a5e8dc4b7bb19d824cc3ff7770", | ||
| "value" | ||
| ] | ||
| } | ||
| }, | ||
| "b9445ea442bc4a5aae73c1e2241c3922": { | ||
| "model_name": "LayoutModel", | ||
| "model_module": "@jupyter-widgets/base", | ||
| "model_module_version": "2.0.0", | ||
| "state": {} | ||
| }, | ||
| "a08a1974ba01461c8d9b91b8bfa0f6ce": { | ||
| "model_name": "VBoxModel", | ||
| "model_module": "@jupyter-widgets/controls", | ||
| "model_module_version": "2.0.0", | ||
| "state": { | ||
| "children": [ | ||
| "IPY_MODEL_105655a5e8dc4b7bb19d824cc3ff7770", | ||
| "IPY_MODEL_2182c1a3fe4a410f9b0a5306ae05c530", | ||
| "IPY_MODEL_891a12a9856949b4be2e520f732dcca9" | ||
| ], | ||
| "layout": "IPY_MODEL_b9445ea442bc4a5aae73c1e2241c3922" | ||
| } | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
| <script type="application/vnd.jupyter.widget-view+json"> | ||
| { | ||
| "version_major": 2, | ||
| "version_minor": 0, | ||
| "model_id": "a08a1974ba01461c8d9b91b8bfa0f6ce" | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.