Fix for GH 160.

When opening a plotly figure from a file the `this.node.offsetWidth`
and `this.node.offsetHeight` values are 0, which causes an error in
`Plotly.toImage`.  Add guards to not call `Plotly.toImage` unless
width and height are positive numbers.

Author: jonmmease

packages/plotly-extension/src/index.ts

@@ -56,31 +56,40 @@ export class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
         return Plotly.addFrames(this.node, frames).then(() => {
           Plotly.animate(this.node);
           this.update();
-          return Plotly.toImage(plot, {
-            format: 'png',
-            width: this.node.offsetWidth,
-            height: this.node.offsetHeight
-          }).then((url: string) => {
-            const imageData = url.split(',')[1];
-            if (model.data['image/png'] !== imageData) {
-              model.setData({
-                data: { ...model.data, 'image/png': imageData }
-              });
-            }
-          });
+          if (this.node.offsetWidth > 0 && this.node.offsetHeight > 0) {
+            return Plotly.toImage(plot, {
+              format: 'png',
+              width: this.node.offsetWidth,
+              height: this.node.offsetHeight
+            }).then((url: string) => {
+              const imageData = url.split(',')[1];
+              if (model.data['image/png'] !== imageData) {
+                model.setData({
+                  data: { ...model.data, 'image/png': imageData }
+                });
+              }
+            });
+          }
         });
       }
       this.update();
-      return Plotly.toImage(plot, {
-        format: 'png',
-        width: this.node.offsetWidth,
-        height: this.node.offsetHeight
-      }).then((url: string) => {
-        const imageData = url.split(',')[1];
-        if (model.data['image/png'] !== imageData) {
-          model.setData({ data: { ...model.data, 'image/png': imageData } });
-        }
-      });
+      if (this.node.offsetWidth > 0 && this.node.offsetHeight > 0) {
+        return Plotly.toImage(plot, {
+          format: 'png',
+          width: this.node.offsetWidth,
+          height: this.node.offsetHeight
+        }).then((url: string) => {
+          const imageData = url.split(',')[1];
+          if (model.data['image/png'] !== imageData) {
+            model.setData({
+              data: {
+                ...model.data,
+                'image/png': imageData
+              }
+            });
+          }
+        });
+      }
     });
   }