Add option to combine events and support other events (#102)

* Add option to combine events * Added docs * Fixed linting issues * Handle other events * Fixed formatting * Attempt to fix travis * Fixed linting * Fix for travis conda env * Improve typing

Author: philippjfr

.travis.yml

@@ -6,15 +6,17 @@ cache:
 install:
 - wget https://repo.continuum.io/miniconda/Miniconda3-latest-Linux-x86_64.sh -O miniconda.sh
 - bash miniconda.sh -b -p $HOME/miniconda
-- export PATH="$HOME/miniconda/bin:$PATH"
+- source "$HOME/miniconda/etc/profile.d/conda.sh"
 - hash -r
 - conda config --set always_yes yes
 - conda config --set quiet yes
 - conda config --set changeps1 no
 - conda config --add channels bokeh
 - conda config --add channels conda-forge
+- conda update -q conda
 - conda info -a
-- conda install conda-build nodejs jupyterlab notebook
+- conda create -n test_env conda-build nodejs jupyterlab notebook
+- conda activate test_env
 - npm set progress false
 - npm install -g npm
 - conda build conda.recipe/

jupyter_bokeh/widgets.py

@@ -19,16 +19,17 @@
 
 # External imports
 from ipywidgets import DOMWidget
-from traitlets import Unicode, Dict
+from traitlets import Bool, Dict, Unicode
 
 # Bokeh imports
 from bokeh.core.json_encoder import serialize_json
-from bokeh.models import LayoutDOM
 from bokeh.document import Document
-from bokeh.protocol import Protocol
-from bokeh.util.dependencies import import_optional
 from bokeh.embed.elements import div_for_render_item
 from bokeh.embed.util import standalone_docs_json_and_render_items
+from bokeh.events import Event
+from bokeh.models import LayoutDOM
+from bokeh.protocol import Protocol
+from bokeh.util.dependencies import import_optional
 
 #-----------------------------------------------------------------------------
 # Globals and constants
@@ -55,6 +56,7 @@ class BokehModel(DOMWidget):
  _view_module = Unicode(_module_name).tag(sync=True)
  _view_module_version = Unicode(_module_version).tag(sync=True)
 
+ combine_events = Bool(False).tag(sync=True)
  render_bundle = Dict().tag(sync=True, to_json=lambda obj, _: serialize_json(obj))
 
  @property
@@ -104,15 +106,31 @@ def _document_patched(self, event):
  def _sync_model(self, _, content, _buffers):
  if content.get("event", "") != "jsevent":
  return
- new, old, attr = content["new"], content["old"], content["attr"]
- submodel = self._model.select_one({"id": content["id"]})
- descriptor = submodel.lookup(content['attr'])
- try:
- descriptor._real_set(submodel, old, new, setter=self)
- except Exception:
- return
- for cb in submodel._callbacks.get(attr, []):
- cb(attr, old, new)
+ kind = content.get("kind")
+ if kind == 'ModelChanged':
+ hint = content.get("hint")
+ if hint:
+ cds = self._model.select_one({"id": hint["column_source"]["id"]})
+ if "patches" in hint:
+ # Handle ColumnsPatchedEvent
+ cds.patch(hint["patches"], setter=self)
+ elif "data" in hint:
+ # Handle ColumnsStreamedEvent
+ cds._stream(hint["data"], rollover=hint["rollover"], setter=self)
+ return
+
+ # Handle ModelChangedEvent
+ new, old, attr = content["new"], content["old"], content["attr"]
+ submodel = self._model.select_one({"id": content["id"]})
+ descriptor = submodel.lookup(content['attr'])
+ try:
+ descriptor._real_set(submodel, old, new, hint=hint, setter=self)
+ except Exception:
+ return
+ for cb in submodel._callbacks.get(attr, []):
+ cb(attr, old, new)
+ elif kind == 'MessageSent':
+ self._document.apply_json_event(content["msg_data"])
 
 #-----------------------------------------------------------------------------
 # Dev API

src/widgets.ts

@@ -27,6 +27,34 @@ export type RenderBundle = {
  div: string
 }
 
+export interface DocumentChanged {
+ event: "jsevent"
+ kind: string
+}
+
+export interface ModelChanged extends DocumentChanged {
+ event: "jsevent"
+ kind: "ModelChanged"
+ id: string
+ new: unknown
+ attr: string
+ old: unknown
+ hint: unknown
+}
+
+export interface MessageSent extends DocumentChanged {
+ event: "jsevent"
+ kind: "MessageSent"
+ msg_data: {
+ event_name: string,
+ event_values: {
+ model: {id: string},
+ [other: string]: any
+ }
+ }
+ msg_type: string
+}
+
 export class BokehModel extends DOMWidgetModel {
  defaults() {
  return {
@@ -40,6 +68,7 @@ export class BokehModel extends DOMWidgetModel {
  _view_module: name,
  _view_module_version: version_range,
 
+ combine_events: false,
  render_bundle: {},
  }
  }
@@ -53,17 +82,46 @@ export class BokehView extends DOMWidgetView {
  private _document: Document | null
  private _receiver: Receiver
  private _blocked: boolean
+ private _msgs: any[]
+ private _idle: boolean
+ private _combine: boolean
 
  constructor(options?: any) {
  super(options)
  this._document = null
  this._blocked = false
+ this._idle = true
+ this._combine = true
+ this._msgs = []
  const {Receiver} = bk_require("protocol/receiver")
  this._receiver = new Receiver()
  this.model.on("change:render_bundle", () => this.render())
+ if ((window as any).Jupyter != null && (window as any).Jupyter.notebook != null) {
+ // Handle classic Jupyter notebook
+ const events = (window as any).require('base/js/events')
+ events.on('kernel_idle.Kernel', () => this._process_msg())
+ } else if ((this.model.widget_manager as any).context != null) {
+ // Handle JupyterLab
+ (this.model.widget_manager as any).context.sessionContext.statusChanged.connect((_: any, status: any) => {
+ if (status === "idle")
+ this._process_msg()
+ })
+ } else {
+ if (this.model.get("combine_events"))
+ console.warn("BokehView cannot combine events because Kernel idle status cannot be determined.")
+ this._combine = false
+ }
  this.listenTo(this.model, "msg:custom", (content, buffers) => this._consume_patch(content, buffers))
  }
 
+ protected _process_msg(): void {
+ if (this._msgs.length == 0) {
+ this._idle = true
+ return
+ }
+ this.send(this._msgs.shift())
+ }
+
  render(): void {
  const bundle = JSON.parse(this.model.get("render_bundle"))
  const {docs_json, render_items, div} = bundle as RenderBundle
@@ -82,10 +140,77 @@ export class BokehView extends DOMWidgetView {
  this._document.on_change((event: any) => this._change_event(event))
  }
 
+ _combine_events(new_msg: (ModelChanged | MessageSent)): (ModelChanged | MessageSent)[] {
+ const new_msgs = []
+ for (const msg of this._msgs) {
+ if (new_msg.kind != msg.kind)
+ new_msgs.push(msg)
+ else if (msg.kind == "ModelChanged" && new_msg.kind == "ModelChanged") {
+ if (msg.id != new_msg.id || msg.attr != new_msg.attr)
+ new_msgs.push(msg)
+ } else if (msg.kind == "MessageSent" && new_msg.kind == "MessageSent") {
+ if (
+ msg.msg_data.event_values.model.id != new_msg.msg_data.event_values.model.id ||
+ msg.msg_data.event_name != new_msg.msg_data.event_name
+ )
+ new_msgs.push(msg)
+ }
+ }
+ new_msgs.push(new_msg)
+ return new_msgs
+ }
+
+ _send(msg: (ModelChanged | MessageSent)): void {
+ if (!this._idle && this._combine && this.model.get("combine_events"))
+ // Queue event and drop previous events on same model attribute
+ this._msgs = this._combine_events(msg)
+ else {
+ this._idle = false
+ this.send(msg)
+ }
+ }
+
  protected _change_event(event: DocumentChangedEvent): void {
- const {ModelChangedEvent} = bk_require("document/events")
- if (!this._blocked && event instanceof ModelChangedEvent)
- this.send({event: "jsevent", id: event.model.id, new: event.new_, attr: event.attr, old: event.old})
+ if (this._blocked) { return }
+ const {ModelChangedEvent, MessageSentEvent} = bk_require("document/events")
+ if (event instanceof ModelChangedEvent) {
+ const js_msg: ModelChanged = {
+ event: "jsevent",
+ kind: "ModelChanged",
+ id: event.model.id,
+ attr: event.attr,
+ new: event.new_,
+ old: event.old,
+ hint: null,
+ }
+ if (event.hint != null) {
+ if (event.hint.patches != null) {
+ js_msg["hint"] = {
+ column_source: event.hint.column_source,
+ patches: event.hint.patches,
+ }
+ } else if (event.hint.data != null) {
+ js_msg["hint"] = {
+ column_source: event.hint.column_source,
+ data: event.hint.data,
+ rollover: event.hint.rollover,
+ }
+ }
+ }
+ this._send(js_msg)
+ } else if ((event instanceof MessageSentEvent) && (event.msg_type == "bokeh_event")) {
+ const msg_data = {...event.msg_data}
+ const event_values = {...msg_data.event_values}
+ event_values["model"] = {id: event_values.model.id}
+ msg_data["event_values"] = event_values
+ const js_msg: MessageSent = {
+ event: "jsevent",
+ kind: "MessageSent",
+ msg_type: event.msg_type,
+ msg_data: msg_data,
+ }
+ this._send(js_msg)
+ }
  }
 
  protected _consume_patch(content: {msg: "patch", payload?: Fragment}, buffers: DataView[]): void {