These can be used with any regular HTML elements to configure kernel requests. The PixieApp framework can trigger these requests when the element receives a click or change event, or right after the HTML fragment has completed loading.
pd_options
: List of key-value pairs that define transient states for the kernel request, according to the following format:pd_options=”key1=value1;key2=value2;...”
. When used in combination with thepd_entity
attribute, thepd_options
attribute invokes the PixieDustdisplay()
API. In this case, you can get the values from the metadata of a separate Notebook cell in which you have used thedisplay()
API. When usingpd_options
indisplay()
mode, it is recommended for convenience, to use the JSON notation ofpd_options
by creating a child element called<pd_options>
and include the JSON values as text.Example with
pd_options
as child element invokingdisplay()
:<div pd_entity> <pd_options> { “mapboxtoken”: “XXXXX”, “chartsize”: “90”, “aggregation”: “SUM”, “rowCount”: “500”, “handlerId”: “mapView”, “rendererId”: “mapbox”, “valueFields”: “IncidntNum”, “keyFields”: “X,Y”, “basemap”: “light-v9” } </pd_options> </div>
Note
You can find the code file here:
https://github.com/DTAIEB/Thoughtful-Data-Science/blob/master/chapter%205/sampleCode29.html
Example with
pd_options
as HTML attribute:<!-- Invoke a route that displays a chart --> <button type=”submit” pd_options=”showChart=true” pd_target=”chart{{prefix}}”> Show Chart </button>
Note
You can find the code file here:
https://github.com/DTAIEB/Thoughtful-Data-Science/blob/master/chapter%205/sampleCode30.html
pd_entity
: Used only to invoke thedisplay()
API on specific data. Must be used in combination withpd_options
where key-value pairs will be used as arguments todisplay()
. If no value is specified for thepd_entity
attribute, then it is assumed to be the entity passed to therun
method that starts the PixieApp. Thepd_entity
value can be either a variable defined in the Notebook or a field of the PixieApp (for example,pd_entity=”df”
), or a field to an object using the dot notation (for example,pd_entity=”obj_instance.df”
).pd_target
: By default, the output of a kernel request is injected in the overall output cell or dialog (if you userunInDialog=”true”
as an argument to therun
method). However, you can usepd_target=”elementId”
to specify a target element that will receive the output. (Note that theelementId
must exist in the current view.)Example:
<div id=”chart{{prefix}}”> <button type=”submit” pd_options=”showChart=true” pd_target=”chart{{prefix}}”> Show Chart </button> </div>
Note
You can find the code file here:
https://github.com/DTAIEB/Thoughtful-Data-Science/blob/master/chapter%205/sampleCode31.html
pd_script
: This invokes arbitrary Python code as part of the kernel request. This can be used in combination with other attributes likepd_entity
andpd_options
. It’s important to note that the Python indentation rules (https://docs.python.org/2.0/ref/indentation.html) must be respected to avoid a runtime error.If the Python code contains multiple lines, it is recommended to use
pd_script
as a child element and store the code as text.Example:
<!-- Invoke a method to load a dataframe before visualizing it --> <div id=”chart{{prefix}}”> <button type=”submit” pd_entity=”df” pd_script=”self.df = self.load_df()” pd_options=”handlerId=dataframe” pd_target=”chart{{prefix}}”> Show Chart </button> </div>
Note
You can find the code file here:
https://github.com/DTAIEB/Thoughtful-Data-Science/blob/master/chapter%205/sampleCode32.html
pd_app
: This dynamically invokes a separate PixieApp by its fully qualified class name. Thepd_options
attribute can be used to pass route arguments to invoke a specific route of the PixieApp.Example:
<div pd_render_onload pd_option=”show_route_X=true” pd_app=”some.package.RemoteApp”> </div>
Note
You can find the code file here:
https://github.com/DTAIEB/Thoughtful-Data-Science/blob/master/chapter%205/sampleCode33.html
pd_render_onload
: This should be used to trigger a kernel request upon loading, as opposed to when a user clicks on an element or when a change event occurs. Thepd_render_onload
attribute can be combined with any other attribute that defines the request, likepd_options
orpd_script
. Note that this attribute should only be used with a div element.Example:
<div pd_render_onload> <pd_script> print(‘hello world rendered on load’) </pd_script> </div>
Note
You can find the code file here:
https://github.com/DTAIEB/Thoughtful-Data-Science/blob/master/chapter%205/sampleCode34.html
pd_refresh
: This is used to force the HTML element to execute a kernel request even if no event (click or change event) has occurred. If no value is specified, then the current element is refreshed, otherwise, the element with the ID specified in the value will be refreshed.Example:
<!-- Update state before refreshing a chart --> <button type=”submit” pd_script=”self.show_line_chart()” pd_refresh=”chart{{prefix}}”> Show line chart </button>
Note
You can find the code file here:
https://github.com/DTAIEB/Thoughtful-Data-Science/blob/master/chapter%205/sampleCode35.html
pd_event_payload
: This emits a PixieApp event with the specified payload content. This attribute follows the same rules aspd_options
:Each key-value pair must be encoded using the
key=value
notationThe event will be triggered on a click or a change event
Support for
$val()
directive to dynamically inject user entered inputUse
<pd_event_payload>
child to enter raw JSON.<button type=”submit” pd_event_payload=”type=topicA;message=Button clicked”> Send event A </button> <button type=”submit”> <pd_event_payload> { “type”:”topicA”, “message”:”Button Clicked” } </pd_event_payload> Send event A </button>
Example:
Note
You can find the code file here:
https://github.com/DTAIEB/Thoughtful-Data-Science/blob/master/chapter%205/sampleCode36.html
pd_event_handler
: Subscribers can listen to an event by declaring a<pd_event_handler>
child element which can accept any of the PixieApp kernel execution attributes likepd_options
andpd_script
. This element must use thepd_source
attribute to filter which events they want to process. Thepd_source
attribute can contain one of the following values:targetDivId
: Only events originating from the element with the specified ID will be acceptedtype
: Only events with the specified type will be accepted<div class=”col-sm-6” id=”listenerA{{prefix}}”> Listening to button event <pd_event_handler pd_source=”topicA” pd_script=”print(eventInfo)” pd_target=”listenerA{{prefix}}”> </pd_event_handler> </div>
Example:
Note
You can find the code file here:
https://github.com/DTAIEB/Thoughtful-Data-Science/blob/master/chapter%205/sampleCode37.html
Note: Using
*
forpd_source
denotes that all events will be accepted.pd_refresh_rate
: This is used to repeat the execution of an element at a specified interval expressed in milliseconds. This is useful for when you want to poll the state of a particular variable and show the result in the UI.Example:
<div pd_refresh_rate=”3000” pd_script=”print(self.get_status())”> </div>
Note
You can find the code file here:
https://github.com/DTAIEB/Thoughtful-Data-Science/blob/master/chapter%205/sampleCode38.html