Creating Custom Widgets Displayed in the Jupyter Notebook
Join the DZone community and get the full member experience.Join For Free
1. Built-in Magic Commands
Magic commands are supported by the IPython kernel. They are prefixed by the
%% characters. These magic commands are designed to solve common problems in data analysis and control the behavior of IPython itself. The magic command used to create custom widgets are:
%%htmlis used to render and define HTML templates and cascading style sheets for widgets
In the next section, I will use this knowledge including CSS bootstrap and jQuery to create a Quote widget displaying real-time financial data in the Jupyter notebook.
Quote Widget is a widget that displays real-time financial data in the Jupyter notebook.
There are three steps to implement this quote widget. All code is written in the Jupyter notebook (QuoteWidget.ipynb).
1. Python Widget Class
The first step is defining a Python class inheriting from the
DOMWidget base class. The
DOMWidget class defined in the
ipywidgets package represents a widget that is displayed on the page as an HTML DOM element.
QuoteWidget class contains several traitlets properties. The
_view_name properties define the
Backbone.js view class for the model. The
name are the properties of the model. The
name property contains the unique name of the quote widget. It represents a unique ID in the HTML DOM element. The
status property contains a text representing the status of the quote widget. The
payload property contains real-time financial data in the field list format.
The data in the quote widget will be updated when the value of the
payload property has been changed. The
sync=True keyword argument tells the widget framework to synchronize the value to the Backbone.js front end.
2. HTML Template
The next step is using the
%%html built-in magic command to define an HTML template and styles of the quote widget. The template is defined inside the script tag with the text/template type. The ID of the template is quote-template. This template will be loaded by the Backbone.js front end. It uses the Bootstrap CSS framework to create a layout of the widget.
data-field attribute is used to define where the value of the field will be displayed and the
data-animated attribute indicates the style of the element will be changed when the value has been updated.
3. Backbone.js Front End
The last step is using the
_view_name (QuoteView) and
_view_module (Quote) properties in the first step are used to define the front end module and view.
First, it uses
require.js to define the
Quote module which depends on the
@jupyter-widgets/base module. Then, it uses the extend method to create the
QuoteView class by inheriting from the
Next, it uses
underscore.js to load the HTML template created in the second step, and then override the base
render method of the view to add the template into the HTML DOM document. It uses the
name property defined in the first step as a unique ID of the DOM element.
render function, the
model.on method is called to register functions (
status_changed) to update the view’s values when the
status properties change.
status_changed function is called when a value of the
status property changes.
This function uses jQuery to select an HTML element in the widget that has the
“status_text” in the
data-field attribute, and then update the
text attribute of the selected HTML element to the value of the
payload_changed function is called when a value of the
payload property changes.
This function iterates all fields in the payload. For each field, it does the following tasks:
- Use jQuery to select an HTML element in the widget that has the updated field’s name in the
data-fieldattribute and then update the
textattribute of the selected HTML element to the field’s value:
- Handle the ripple fields via the
data-rippleattribute where the previous value of the updated field is moved to another field when the field has been updated:
- Change the style of the updated HTML element for 1 second if it contains the data-animated attribute. It is used to notify users that the field’s value has been updated:
Quote Widget Usage
The Quote Widget is implemented in the
QuoteWidget.ipynb file. To use the widget, please follow these steps:
1. Use the
%run built-in magic command to run the
2. Create a QuoteWidget and set a unique name:
3. Set the payload and status properties to update the widget:
Moreover, the Quote Widget can be used with any APIs that support real-time financial data, such as Refinitiv Eikon Data API, Refinitiv WebSocket API, and Refinitv Data Platform. The sample code (EDAPIQuoteWidget.ipynb) for Eikon Data API is available on GitHub. To use EDAPIQuoteWidget, please follow these steps:
1. Use the %run built-in magic command to run the
2. Import the Eikon Data API package and set the application key:
3. Load data dictionary files used to expand enumerated strings for the enumeration fields:
4. Create an
EDAPIQuoteWidget with the Eikon Data API, widget name, and data dictionary, and then call the widget method to display the widget:
5. Call the
open method with the instrument name to subscribe to the Real-Time service. The retrieved real-time data will be displayed on the widget:
1. Backbonejs.org. n.d. Backbone.Js. [online] Available at: <https://backbonejs.org/> [Accessed 20 January 2021].
2. Ipywidgets.readthedocs.io. 2017. Building A Custom Widget - Email Widget — Jupyter Widgets 7.6.2 Documentation. [online] Available at: <https://ipywidgets.readthedocs.io/en/stable/examples/Widget%20Custom.html> [Accessed 20 January 2021].
3. Ipython.readthedocs.io. n.d. Built-In Magic Commands — Ipython 7.19.0 Documentation. [online] Available at: <https://ipython.readthedocs.io/en/stable/interactive/magics.html> [Accessed 20 January 2021].
4. Developers.refinitiv.com. n.d. Eikon Data API | Refinitiv Developers. [online] Available at: <https://developers.refinitiv.com/en/api-catalog/eikon/eikon-data-api> [Accessed 20 January 2021].
5. Jquery.com. n.d. Jquery. [online] Available at: <https://jquery.com/> [Accessed 20 January 2021].
6. Mark Otto, a., n.d. Bootstrap. [online] Getbootstrap.com. Available at: <https://getbootstrap.com/> [Accessed 20 January 2021].
7. Developers.refinitiv.com. n.d. Refinitiv Data Platform Libraries | Refinitiv Developers. [online] Available at: <https://developers.refinitiv.com/en/api-catalog/refinitiv-data-platform/refinitiv-data-platform-libraries> [Accessed 20 January 2021].
8. Developers.refinitiv.com. n.d. Refinitiv Websocket API | Refinitiv Developers. [online] Available at: <https://developers.refinitiv.com/en/api-catalog/elektron/refinitiv-websocket-api> [Accessed 20 January 2021].
9. Rossant, C., 2018. Ipython Interactive Computing And Visualization Cookbook, Second Edition. 2nd ed. Birmingham: Packt Publishing.
10. Traitlets.readthedocs.io. 2015. Traitlets — Traitlets 5.0.5 Documentation. [online] Available at: <https://traitlets.readthedocs.io/en/stable/> [Accessed 20 January 2021].
Published at DZone with permission of Jirapongse Phuriphanvichai. See the original article here.
Opinions expressed by DZone contributors are their own.