Merge pull request #5865 from AllenDowney/mimerenderer-update-display

Redraw a figure in JupyterLab when its output is updated

Author: KoolADE85

CHANGELOG.md

@@ -8,6 +8,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Add support for converting matplotlib reference lines (`axhline`, `axvline`, and horizontal/vertical `axline`) as well as axes-coordinate lines into Plotly layout shapes in `mpl_to_plotly`, including support for date axes [[#5719](https://github.com/plotly/plotly.py/pull/5719)], with thanks to @robertoffmoura for the contribution!
 
 ### Fixed
+- Fix figures in JupyterLab not redrawing when their output is updated with `update_display_data` (for example `DisplayHandle.update`), which also kept animations in other kernels on their first frame [[#5865](https://github.com/plotly/plotly.py/pull/5865)], with thanks to @AllenDowney for the contribution!
 - Fix `mpl_to_plotly` tick marker mirroring, axis positioning, and trace visibility for twinned and overlaid subplots (such as `twinx` and `twiny`) [[#5310](https://github.com/plotly/plotly.py/pull/5310)], with thanks to @robertoffmoura for the contribution!
 - Fix `mpl_to_plotly` losing matplotlib axis line colors by exporting the color of each axis's displayed spine to the plotly x and y axis `linecolor` [[#5311](https://github.com/plotly/plotly.py/pull/5311)], with thanks to @robertoffmoura for the contribution!
 - Fix concurrent first access to lazily initialized graph object properties, which could raise `ValueError("Invalid value")` [[#5691](https://github.com/plotly/plotly.py/pull/5691)], with thanks to @hb1915 for the contribution!

js/lib/mimeExtension.js

@@ -54,8 +54,16 @@ export class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
    */
   renderModel(model: IRenderMime.IMimeModel): Promise<void> {
     if (this.hasGraphElement()) {
-      // We already have a graph, don't overwrite it
-      return Promise.resolve();
+      // We already have a graph. Redraw it only if the figure has changed,
+      // as it does when a kernel sends update_display_data. (createGraph
+      // stores a PNG of the figure in the model, which calls renderModel
+      // again with the same figure.)
+      const previous = this._model?.data[this._mimeType];
+      if (JSON.stringify(previous) === JSON.stringify(model.data[this._mimeType])) {
+        return Promise.resolve();
+      }
+      this._model = model;
+      return this.createGraph(model);
     }
 
     // Save off reference to model so that we can regenerate the plot later

js/src/mimeExtension.ts

@@ -33,7 +33,7 @@
     "outputDir": "../plotly/labextension",
     "webpackConfig": "./webpack.config.js",
     "_build": {
-      "load": "static/remoteEntry.1dda3c8f6e5cd2a3.js",
+      "load": "static/remoteEntry.954b872b457cd897.js",
       "mimeExtension": "./mimeExtension"
     }
   }