From ff9bd147838d722a677b72c09f6457f0c62b3704 Mon Sep 17 00:00:00 2001
From: hottwaj <jonathan.a.clarke@gmail.com>
Date: Tue, 12 Feb 2019 09:38:08 +0000
Subject: [PATCH] allows plotly plots to be placed in another div by specifying
 the div id as "div_id" in the MIME json package implements #173

---
 packages/plotly-extension/src/index.ts | 33 ++++++++++++++++----------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/packages/plotly-extension/src/index.ts b/packages/plotly-extension/src/index.ts
index 75e024281..5c3f85cae 100644
--- a/packages/plotly-extension/src/index.ts
+++ b/packages/plotly-extension/src/index.ts
@@ -34,12 +34,12 @@ interface IPlotlySpec {
 }
 
 export class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
+  render_target: HTMLElement;
   /**
    * Create a new widget for rendering Plotly.
    */
   constructor(options: IRenderMime.IRendererOptions) {
     super();
-    this.addClass(CSS_CLASS);
     this._mimeType = options.mimeType;
   }
 
@@ -47,22 +47,31 @@ export class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
    * Render Plotly into this widget's node.
    */
   renderModel(model: IRenderMime.IMimeModel): Promise<void> {
-    const { data, layout, frames, config } = model.data[this._mimeType] as
-      | any
-      | IPlotlySpec;
+    const { data, layout, frames, config, div_id } = model.data[
+      this._mimeType
+    ] as any | IPlotlySpec;
     // const metadata = model.metadata[this._mimeType] as any || {};
-    return Plotly.react(this.node, data, layout, config).then(plot => {
+    if (div_id == null) {
+      this.render_target = this.node;
+      this.addClass(CSS_CLASS);
+    } else {
+      this.render_target = document.getElementById(div_id);
+    }
+    return Plotly.react(this.render_target, data, layout, config).then(plot => {
       this.update();
       if (frames) {
-        Plotly.addFrames(this.node, frames).then(() => {
-          Plotly.animate(this.node);
+        Plotly.addFrames(this.render_target, frames).then(() => {
+          Plotly.animate(this.render_target);
         });
       }
-      if (this.node.offsetWidth > 0 && this.node.offsetHeight > 0) {
+      if (
+        this.render_target.offsetWidth > 0 &&
+        this.render_target.offsetHeight > 0
+      ) {
         Plotly.toImage(plot, {
           format: 'png',
-          width: this.node.offsetWidth,
-          height: this.node.offsetHeight
+          width: this.render_target.offsetWidth,
+          height: this.render_target.offsetHeight
         }).then((url: string) => {
           const imageData = url.split(',')[1];
           if (model.data['image/png'] !== imageData) {
@@ -97,8 +106,8 @@ export class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
    */
   protected onUpdateRequest(msg: Message): void {
     if (this.isVisible) {
-      Plotly.redraw(this.node).then(() => {
-        Plotly.Plots.resize(this.node);
+      Plotly.redraw(this.render_target).then(() => {
+        Plotly.Plots.resize(this.render_target);
       });
     }
   }