Implement image/png repr

ipympl/backend_nbagg.py

@@ -4,7 +4,8 @@
 import json
 import io
 
-from IPython.display import display, HTML
+from IPython.display import update_display, display, HTML
+from IPython import version_info as ipython_version_info
 
 from ipywidgets import DOMWidget, widget_serialization
 from traitlets import (
@@ -83,16 +84,8 @@ def __init__(self, canvas, *args, **kwargs):
     def export(self):
         buf = io.BytesIO()
         self.canvas.figure.savefig(buf, format='png', dpi='figure')
-        # Figure width in pixels
-        pwidth = (self.canvas.figure.get_figwidth() *
-                  self.canvas.figure.get_dpi())
-        # Scale size to match widget on HiDPI monitors.
-        if hasattr(self.canvas, 'device_pixel_ratio'):  # Matplotlib 3.5+
-            width = pwidth / self.canvas.device_pixel_ratio
-        else:
-            width = pwidth / self.canvas._dpi_ratio
-        data = "<img src='data:image/png;base64,{0}' width={1}/>"
-        data = data.format(b64encode(buf.getvalue()).decode('utf-8'), width)
+        data = "<img src='data:image/png;base64,{0}'/>"
+        data = data.format(b64encode(buf.getvalue()).decode('utf-8'))
         display(HTML(data))
 
     @default('toolitems')
@@ -168,13 +161,20 @@ def __init__(self, figure, *args, **kwargs):
 
         self.on_msg(self._handle_message)
 
+        self._rendered = False
+
     def _handle_message(self, object, content, buffers):
         # Every content has a "type".
         if content['type'] == 'closing':
             self._closed = True
         elif content['type'] == 'initialized':
             _, _, w, h = self.figure.bbox.bounds
             self.manager.resize(w, h)
+        elif content['type'] == 'ack':
+            update_display(
+                self._repr_mimebundle_(),
+                raw=True, display_id='matplotlib_{0}'.format(self._model_id)
+            )
         else:
             self.manager.handle_json(content)
 
@@ -208,6 +208,44 @@ def send_binary(self, data):
     def new_timer(self, *args, **kwargs):
         return TimerTornado(*args, **kwargs)
 
+    def _repr_mimebundle_(self, **kwargs):
+        # now happens before the actual display call.
+        if hasattr(self, '_handle_displayed'):
+            self._handle_displayed(**kwargs)
+        plaintext = repr(self)
+        if len(plaintext) > 110:
+            plaintext = plaintext[:110] + '…'
+
+        buf = io.BytesIO()
+        self.figure.savefig(buf, format='png', dpi='figure')
+        data_url = b64encode(buf.getvalue()).decode('utf-8')
+
+        data = {
+            'text/plain': plaintext,
+            'image/png': data_url,
+            'application/vnd.jupyter.widget-view+json': {
+                'version_major': 2,
+                'version_minor': 0,
+                'model_id': self._model_id
+            }
+        }
+
+        return data
+
+    def _ipython_display_(self, **kwargs):
+        """Called when `IPython.display.display` is called on a widget.
+
+        Note: if we are in IPython 6.1 or later, we return NotImplemented so
+        that _repr_mimebundle_ is used directly.
+        """
+        if ipython_version_info >= (6, 1):
+            raise NotImplementedError
+
+        display(
+            self._repr_mimebundle_(**kwargs),
+            raw=True, display_id='matplotlib_{0}'.format(self._model_id)
+        )
+
     if matplotlib.__version__ < '3.4':
         # backport the Python side changes to match the js changes
         def _handle_key(self, event):
@@ -281,7 +319,10 @@ def __init__(self, canvas, num):
     def show(self):
         if self.canvas._closed:
             self.canvas._closed = False
-            display(self.canvas)
+            display(
+                self.canvas,
+                display_id='matplotlib_{0}'.format(self.canvas._model_id)
+            )
         else:
             self.canvas.draw_idle()
 

js/src/mpl_widget.js

@@ -53,6 +53,8 @@ export class MPLCanvasModel extends widgets.DOMWidgetModel {
         this.ratio = (window.devicePixelRatio || 1) / backingStore;
         this._init_image();
 
+        this.acknowledged_rendered = false;
+
         this.on('msg:custom', this.on_comm_message.bind(this));
         this.on('change:resizable', () => {
             this._for_each_view(function (view) {
@@ -186,7 +188,11 @@ export class MPLCanvasModel extends widgets.DOMWidgetModel {
         this.image.src = image_url;
 
         // Tell Jupyter that the notebook contents must change.
-        this.send_message('ack');
+        if (!this.acknowledged_rendered) {
+            this.send_message('ack');
+
+            this.acknowledged_rendered = true;
+        }
 
         this.waiting = false;
     }