Add configurable throttling for pan_zoom

Author: martinRenou

ipympl/backend_nbagg.py

@@ -48,6 +48,7 @@
     CaselessStrEnum,
     CInt,
     Enum,
+    Float,
     Instance,
     List,
     Unicode,
@@ -173,6 +174,7 @@ class Canvas(DOMWidget, FigureCanvasWebAggCore):
 
     resizable = Bool(True).tag(sync=True)
     capture_scroll = Bool(False).tag(sync=True)
+    pan_zoom_throttle = Float(33).tag(sync=True)
 
     # This is a very special widget trait:
     # We set "sync=True" because we want ipywidgets to consider this

package.json

@@ -82,7 +82,8 @@
     },
     "dependencies": {
         "@jupyter-widgets/base": "^2 || ^3 || ^4.0.0",
-        "@types/node": "^14.14.35"
+        "@types/node": "^14.14.35",
+        "lodash": "^4.17.21"
     },
     "keywords": [
         "jupyter",

src/mpl_widget.ts

@@ -1,3 +1,5 @@
+import { throttle } from 'lodash';
+
 import {
     DOMWidgetModel,
     DOMWidgetView,
@@ -35,6 +37,7 @@ export class MPLCanvasModel extends DOMWidgetModel {
             toolbar_position: 'horizontal',
             resizable: true,
             capture_scroll: false,
+            pan_zoom_throttle: 33,
             _data_url: null,
             _width: 0,
             _height: 0,
@@ -517,7 +520,7 @@ export class MPLCanvasView extends DOMWidgetView {
         );
         top_canvas.addEventListener(
             'mousemove',
-            this.mouse_event('motion_notify')
+            throttle(this.mouse_event('motion_notify'), this.model.get('pan_zoom_throttle'))
         );
 
         top_canvas.addEventListener(
@@ -529,7 +532,7 @@ export class MPLCanvasView extends DOMWidgetView {
             this.mouse_event('figure_leave')
         );
 
-        top_canvas.addEventListener('wheel', this.mouse_event('scroll'));
+        top_canvas.addEventListener('wheel', throttle(this.mouse_event('scroll'), this.model.get('pan_zoom_throttle')));
 
         canvas_div.appendChild(canvas);
         canvas_div.appendChild(top_canvas);
@@ -656,7 +659,6 @@ export class MPLCanvasView extends DOMWidgetView {
     }
 
     mouse_event(name: string) {
-        let last_update = 0;
         return (event: any) => {
             const canvas_pos = utils.get_mouse_position(event, this.top_canvas);
 
@@ -708,22 +710,16 @@ export class MPLCanvasView extends DOMWidgetView {
                 }
             }
 
-            // Rate-limit the position text updates so that we don't overwhelm the
-            // system.
-            if (Date.now() > last_update + 16) {
-                last_update = Date.now();
-
-                const x = canvas_pos.x * this.model.ratio;
-                const y = canvas_pos.y * this.model.ratio;
-
-                this.model.send_message(name, {
-                    x: x,
-                    y: y,
-                    button: event.button,
-                    step: event.step,
-                    guiEvent: utils.get_simple_keys(event),
-                });
-            }
+            const x = canvas_pos.x * this.model.ratio;
+            const y = canvas_pos.y * this.model.ratio;
+
+            this.model.send_message(name, {
+                x: x,
+                y: y,
+                button: event.button,
+                step: event.step,
+                guiEvent: utils.get_simple_keys(event),
+            });
         };
     }
 

yarn.lock

@@ -5636,7 +5636,7 @@ lodash.truncate@^4.4.2:
   resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
   integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
 
-lodash@4, [email protected], [email protected], lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4, lodash@^4.7.0:
+lodash@4, [email protected], [email protected], lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==