mod: Update JS to start saving PNGs on export

Author: Michael Recachinas

example/JupyterSigplot.ipynb

@@ -64,7 +64,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "3103064b836d4389bf9e78a1d9e4a2de",
+       "model_id": "d55da0472865481e9ba2b8bd60751362",
        "version_major": 2,
        "version_minor": 0
       },
@@ -105,7 +105,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "81ccf929f8ec49788f6d3f1f8f8bd306",
+       "model_id": "286a5a00e11144f198be649b2953fd8e",
        "version_major": 2,
        "version_minor": 0
       },
@@ -120,8 +120,8 @@
      "name": "stdout",
      "output_type": "stream",
      "text": [
-      "CPU times: user 574 ms, sys: 248 ms, total: 822 ms\n",
-      "Wall time: 1.18 s\n"
+      "CPU times: user 600 ms, sys: 271 ms, total: 871 ms\n",
+      "Wall time: 1.23 s\n"
      ]
     }
    ],
@@ -145,7 +145,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "3d24cd35cd494c08a508f730583216ab",
+       "model_id": "08274f537c414f96851a922a755d2f15",
        "version_major": 2,
        "version_minor": 0
       },
@@ -174,7 +174,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "e86f23bf590c443e8a01b32b60f81b63",
+       "model_id": "b04048a5ab5540bb845de7ef0130a184",
        "version_major": 2,
        "version_minor": 0
       },
@@ -202,7 +202,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "ec590395321041d38b868f7dd5dd2866",
+       "model_id": "2ecd0044a5a24820888e185ad87f3883",
        "version_major": 2,
        "version_minor": 0
       },
@@ -232,7 +232,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "787d8d74345648e99d71ff498aa2d3ba",
+       "model_id": "9f90a5c33eae481f8095f199409dbf43",
        "version_major": 2,
        "version_minor": 0
       },
@@ -260,7 +260,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "1826ad9644cb4a139c7fbf5b3653ed10",
+       "model_id": "e8fb5d9eb302454e8c77494fb001bd67",
        "version_major": 2,
        "version_minor": 0
       },
@@ -289,7 +289,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "73dfbd0c822849ec9c7ee25209717d64",
+       "model_id": "f64bad11c9594a9a897e2284b57ee60d",
        "version_major": 2,
        "version_minor": 0
       },
@@ -314,7 +314,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "cfeef435acf54f3cbff75136c70a1dee",
+       "model_id": "026a739145774e159488fdb25ca4421c",
        "version_major": 2,
        "version_minor": 0
       },
@@ -342,7 +342,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "a36369fc70534b7fb45c25b83811dd51",
+       "model_id": "6f04f2fdbed146cb914ee17f692a9014",
        "version_major": 2,
        "version_minor": 0
       },

js/src/sigplot_ext.js

@@ -1,6 +1,7 @@
 import { DOMWidgetModel, DOMWidgetView } from '@jupyter-widgets/base';
 import { Plot } from 'sigplot';
 import { version } from '../package';
+import { find_output_cell } from './utils';
 
 export class SigPlotModel extends DOMWidgetModel {
     defaults() {
@@ -67,7 +68,9 @@ export class SigPlotModel extends DOMWidgetModel {
 export class SigPlotView extends DOMWidgetView {
     render() {
         // Instantiate a new plot and attach to the element provided in `this.el`
-        this.plot = new Plot(this.el, this.model.get('plot_options'));
+        const plot_options = this.model.get('plot_options');
+        this.plot = new Plot(this.el, plot_options);
+        this.uuid = this.model.get('uuid');
 
         // Wait for element to be added to the DOM
         const self = this;
@@ -91,6 +94,7 @@ export class SigPlotView extends DOMWidgetView {
      */
     handle_command_args_change(prev_cmd_and_args, new_cmd_and_args) {
         const { command: new_command, arguments: new_args } = new_cmd_and_args;
+        console.debug(`new_command=${new_command}`);
 
         // Check that the commands and arguments are different
         if (prev_cmd_and_args === new_cmd_and_args) {
@@ -106,17 +110,33 @@ export class SigPlotView extends DOMWidgetView {
         // Call `new_command` providing `new_args`
         this.plot[new_command].apply(this.plot, new_args);
 
-        // Save a screenshot of the current plot
-        const image_data = this.plot._Mx.active_canvas.toDataURL('image/png');
-        const img = document.createElement('img');
-        img.src = image_data;
-
-        // Replace existing image with new image
-        const childImg = this.el.querySelector('img');
-        if (childImg) {
-            this.el.removeChild(childImg);
-        }
-        this.el.appendChild(img);
+        const self = this;
+        window.setTimeout(function () {
+            // Save a screenshot of the current plot
+            const image_data = self.plot._Mx.active_canvas.toDataURL(
+                'image/png'
+            );
+            if (image_data === 'data:,') {
+                console.debug('Empty `image_data`. Skipping...');
+                return;
+            }
+
+            // Find the current cell's output area
+            if (window.IPython && !self.cell_info) {
+                console.debug('IPython in namespace, finding output cell...');
+                self.cell_info = find_output_cell(
+                    `<div id="${self.uuid}"></div>`
+                );
+            }
+
+            // Save the screenshot to the output cell
+            if (self.cell_info) {
+                console.debug(self.cell_info);
+                self.cell_info[1][
+                    'text/html'
+                ] = `<img alt="SigPlot plot" src="${image_data}" width="100%">`;
+            }
+        }, 10);
     }
 
     /**

js/src/utils.js

@@ -0,0 +1,34 @@
+/*global IPython*/
+
+/**
+ * Return the cell and output element which can be found *uniquely* in the notebook.
+ *
+ * Note: This is a bit hacky, but it is done because the "notebook_saving.Notebook"
+ * IPython event is triggered only after the cells have been serialised, which for
+ * our purposes (turning an active figure into a static one), is too late.
+ *
+ * Taken from matplotlib's mpl.js
+ *
+ * @param {string} html_output
+ * @returns {(*|number)[]}
+ */
+export function find_output_cell(html_output) {
+    const cells = IPython.notebook.get_cells();
+    for (let i = 0; i < cells.length; i++) {
+        const cell = cells[i];
+        if (cell.cell_type === 'code') {
+            for (let j = 0; j < cell.output_area.outputs.length; j++) {
+                let data = cell.output_area.outputs[j];
+                if (data.data) {
+                    // IPython >= 3 moved mimebundle to data attribute of output
+                    data = data.data;
+                }
+                console.log(`cell_index=${i}`);
+                console.log(data);
+                if (data['text/html'] === html_output) {
+                    return [cell, data, j];
+                }
+            }
+        }
+    }
+}