Drew Walters edited this page May 17, 2016 · 8 revisions

Jupyter Declarative Widgets

DeclarativeWidgets provides a set of declarative elements that enable the creation of interactive areas in Jupyter Notebooks. This project benefits heavily from capabilities made available by the ipywidgets extension. The diagram below shows a high-level picture of the components and their relationship to ipywidgets.

From top to bottom, declarative widgets provides two main sets of elements. These are discussed in more detail below. Some of these elements rely on two-way communication between the browser and the kernel. This communication channel is provided, largely in part, by ipywidgets. ipywidgets provides a JavaScript WidgetModel that urth-core-* elements use to proxy and communicate with a kernel counterpart that inherits much of its capabilities from ipywidgets' Widget class.

Types of Elements

There are 2 types of elements, standalone and hybrid.

Standalone elements

A standalone element is just a regular WebComponent that can be used on a page and is fully functional with just HTML, JavaScript and CSS. This project uses Polymer as the framework for creating the web component elements and leverages much if its capabilities for wiring elements together. This project provides a set of standalone elements for visualizing data, but any compatible web component/Polymer element can be imported and used.

Hybrid elements

A hybrid element is made up of a standalone element with a counterpart component that runs in the Kernel.

Hybrid elements are what bridge the data and functionality hosted on the kernel with elements and code that are running in the browser. The combination of hybrid and standalone elements allows the user to create rich interactive areas in a Notebook. The current set of hybrid elements are:

  • <urth-core-function> - Enables invocation of functions in the kernel
  • <urth-core-dataframe> - Enables READ access to DataFrames (pandas, Spark, R)
  • <urth-core-channel-broker> - Enables exchange of data between kernel and browser

The browser side of the element leverages jupyter-js-widgets/ipywidgets core modules. On the kernel side, this project supports Python, Scala, and R. In the Python kernel, the element builds on top of ipywidgets. In Toree and IRkernel, this project implements the bare minimum custom code to support declarativewidgets. These are the only elements that need to be ported to different Kernel languages to get a working environment.

Lifecycle of a Hybrid Element

Hybrid elements are built using ipywidgets Widgets, but they differ in how they are instantiated. The life of a hybrid element in declarativewidgets starts with an element inserted into the browser DOM. This action then drives the creation and connection with a kernel counterpart.

Putting it all together

Content here on simple scenarios Backend Message Spec