Throttle mousemove events (#98)

Author: cpsievert

js/src/comm.ts

@@ -1,3 +1,5 @@
+import { Throttler } from "./utils";
+
 // This class is a striped down version of Comm from @jupyter-widgets/base
 // https://github.com/jupyter-widgets/ipywidgets/blob/88cec8/packages/base/src/services-shim.ts#L192-L335
 // Note that the Kernel.IComm implementation is located here
@@ -6,8 +8,11 @@ export class ShinyComm {
 
   // It seems like we'll want one comm per model
   comm_id: string;
+  throttler: Throttler;
   constructor(model_id: string) {
     this.comm_id = model_id;
+    // TODO: make this configurable (see comments in send() below)?
+    this.throttler = new Throttler(100);
   }
 
   // This might not be needed
@@ -31,8 +36,29 @@ export class ShinyComm {
       // this doesn't seem relevant to the widget?
       header: {}
     };
+
     const msg_txt = JSON.stringify(msg);
-    Shiny.setInputValue("shinywidgets_comm_send", msg_txt, {priority: "event"});
+
+    // Since ipyleaflet can send mousemove events very quickly when hovering over the map,
+    // we throttle them to ensure that the server doesn't get overwhelmed. Said events
+    // generate a payload that looks like this:
+    // {"method": "custom", "content": {"event": "interaction", "type": "mousemove", "coordinates": [-17.76259815404015, 12.096729340756617]}}
+    //
+    // TODO: This is definitely not ideal. It would be better to have a way to specify/
+    // customize throttle rates instead of having such a targetted fix for ipyleaflet.
+    const is_mousemove =
+      data.method === "custom" &&
+      data.content.event === "interaction" &&
+      data.content.type === "mousemove";
+
+    if (is_mousemove) {
+      this.throttler.throttle(() => {
+        Shiny.setInputValue("shinywidgets_comm_send", msg_txt, {priority: "event"});
+      });
+    } else {
+      this.throttler.flush();
+      Shiny.setInputValue("shinywidgets_comm_send", msg_txt, {priority: "event"});
+    }
 
     // When client-side changes happen to the WidgetModel, this send method
     // won't get called for _every_  change (just the first one). The
@@ -42,7 +68,9 @@ export class ShinyComm {
     // https://github.com/jupyter-widgets/ipywidgets/blob/88cec8b/packages/base/src/widget.ts#L550-L557
     if (callbacks && callbacks.iopub && callbacks.iopub.status) {
       setTimeout(() => {
-        // TODO: Call this when Shiny reports that it is idle?
+        // TODO-future: it doesn't seem quite right to report that shiny is always idle.
+        // Maybe listen to the shiny-busy flag?
+        // const state = document.querySelector("html").classList.contains("shiny-busy") ? "busy" : "idle";
         const msg = {content: {execution_state: "idle"}};
         callbacks.iopub.status(msg);
       }, 0);

js/src/utils.ts

@@ -3,8 +3,66 @@ import { decode } from 'base64-arraybuffer';
 // On the server, we're using jupyter_client.session.json_packer to serialize messages,
 // and it encodes binary data (i.e., buffers) as base64, so decode it before passing it
 // along to the comm logic
-export function jsonParse(x: string) {
+function jsonParse(x: string) {
   const msg = JSON.parse(x);
   msg.buffers = msg.buffers.map((b: any) => decode(b));
   return msg;
-}
+}
+
+class Throttler {
+  fnToCall: Function;
+  wait: number;
+  timeoutId: ReturnType<typeof setTimeout>;
+  constructor(wait: number = 100) {
+    if (wait < 0) throw new Error("wait must be a positive number");
+    this.wait = wait;
+    this._reset();
+  }
+  // Try to execute the function immediately, if it is not waiting
+  // If it is waiting, update the function to be called
+  throttle(fn: Function) {
+    if (fn.length > 0) throw new Error("fn must not take any arguments");
+
+    if (this.isWaiting) {
+      // If the timeout is currently waiting, update the func to be called
+      this.fnToCall = fn;
+    } else {
+      // If there is nothing waiting, call it immediately
+      // and start the throttling
+      fn();
+      this._setTimeout();
+    }
+  }
+  // Execute the function immediately and reset the timeout
+  // This is useful when the timeout is waiting and we want to
+  // execute the function immediately to not have events be out
+  // of order
+  flush() {
+    if (this.fnToCall) this.fnToCall();
+    this._reset();
+  }
+  _setTimeout() {
+    this.timeoutId = setTimeout(() => {
+      if (this.fnToCall) {
+        this.fnToCall();
+        this.fnToCall = null;
+        // Restart the timeout as we just called the function
+        // This call is the key step of Throttler
+        this._setTimeout();
+      } else {
+        this._reset();
+      }
+    }, this.wait);
+  }
+  _reset() {
+    this.fnToCall = null;
+    clearTimeout(this.timeoutId);
+    this.timeoutId = null;
+  }
+  get isWaiting(): boolean {
+    return this.timeoutId !== null;
+  }
+}
+
+
+export { jsonParse, Throttler };