Lazyload

packages/javascript/jupyterlab-plotly/src/javascript-renderer-extension.ts

@@ -1,38 +1,36 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { Widget } from '@lumino/widgets';
+import { Widget } from "@lumino/widgets";
 
-import { Message } from '@lumino/messaging';
+import { Message } from "@lumino/messaging";
 
-import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
+import { IRenderMime } from "@jupyterlab/rendermime-interfaces";
 
-import Plotly from 'plotly.js/dist/plotly.min';
-
-import '../style/index.css';
+import "../style/index.css";
 
 /**
  * The CSS class to add to the Plotly Widget.
  */
-const CSS_CLASS = 'jp-RenderedPlotly';
+const CSS_CLASS = "jp-RenderedPlotly";
 
 /**
  * The CSS class for a Plotly icon.
  */
-const CSS_ICON_CLASS = 'jp-MaterialIcon jp-PlotlyIcon';
+const CSS_ICON_CLASS = "jp-MaterialIcon jp-PlotlyIcon";
 
 /**
  * The MIME type for Plotly.
  * The version of this follows the major version of Plotly.
  */
-export const MIME_TYPE = 'application/vnd.plotly.v1+json';
+export const MIME_TYPE = "application/vnd.plotly.v1+json";
 
-interface IPlotlySpec {
-  data: Plotly.Data;
-  layout: Plotly.Layout;
-  frames?: Plotly.Frame[];
+interface PlotlyHTMLElement extends HTMLElement {
+  on(event: "plotly_webglcontextlost", callback: () => void): void;
 }
 
+type Frame = { [key: string]: any };
+
 export class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
   /**
    * Create a new widget for rendering Plotly.
@@ -43,21 +41,24 @@ export class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
     this._mimeType = options.mimeType;
 
     // Create image element
-    this._img_el = <HTMLImageElement>(document.createElement("img"));
-    this._img_el.className = 'plot-img';
+    this._img_el = <HTMLImageElement>document.createElement("img");
+    this._img_el.className = "plot-img";
     this.node.appendChild(this._img_el);
 
     // Install image hover callback
-    this._img_el.addEventListener('mouseenter', event => {
-      this.createGraph(this._model);
-    })
+    import(/* webpackChunkName: 'plotly'*/ "plotly.js/dist/plotly").then(
+      (Plotly) => {
+        this._img_el.addEventListener("mouseenter", (event) => {
+          this.createGraph(this._model, Plotly);
+        });
+      }
+    );
   }
 
   /**
    * Render Plotly into this widget's node.
    */
   renderModel(model: IRenderMime.IMimeModel): Promise<void> {
-
     if (this.hasGraphElement()) {
       // We already have a graph, don't overwrite it
       return Promise.resolve();
@@ -67,21 +68,25 @@ export class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
     this._model = model;
 
     // Check for PNG data in mime bundle
-    const png_data = <string>model.data['image/png'];
-    if(png_data !== undefined && png_data !== null) {
+    const png_data = <string>model.data["image/png"];
+    if (png_data !== undefined && png_data !== null) {
       // We have PNG data, use it
       this.updateImage(png_data);
       return Promise.resolve();
     } else {
       // Create a new graph
-      return this.createGraph(model);
+      return import(
+        /* webpackChunkName: 'plotly'*/ "plotly.js/dist/plotly"
+      ).then((Plotly) => {
+        this.createGraph(model, Plotly);
+      });
     }
   }
 
   private hasGraphElement() {
     // Check for the presence of the .plot-container element that plotly.js
     // places at the top of the figure structure
-    return this.node.querySelector('.plot-container') !==  null
+    return this.node.querySelector(".plot-container") !== null;
   }
 
   private updateImage(png_data: string) {
@@ -92,42 +97,43 @@ export class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
 
   private hideGraph() {
     // Hide the graph if there is one
-    let el = <HTMLDivElement>this.node.querySelector('.plot-container');
+    let el = <HTMLDivElement>this.node.querySelector(".plot-container");
     if (el !== null && el !== undefined) {
-      el.style.display = "none"
+      el.style.display = "none";
     }
   }
 
   private showGraph() {
     // Show the graph if there is one
-    let el = <HTMLDivElement>this.node.querySelector('.plot-container');
+    let el = <HTMLDivElement>this.node.querySelector(".plot-container");
     if (el !== null && el !== undefined) {
-      el.style.display = "block"
+      el.style.display = "block";
     }
   }
 
   private hideImage() {
     // Hide the image element
-    let el = <HTMLImageElement>this.node.querySelector('.plot-img');
+    let el = <HTMLImageElement>this.node.querySelector(".plot-img");
     if (el !== null && el !== undefined) {
-      el.style.display = "none"
+      el.style.display = "none";
     }
   }
 
   private showImage() {
     // Show the image element
-    let el = <HTMLImageElement>this.node.querySelector('.plot-img');
+    let el = <HTMLImageElement>this.node.querySelector(".plot-img");
     if (el !== null && el !== undefined) {
-      el.style.display = "block"
+      el.style.display = "block";
     }
   }
 
-  private createGraph(model: IRenderMime.IMimeModel) {
+  private createGraph(model: IRenderMime.IMimeModel, Plotly: any) {
     const { data, layout, frames, config } = model.data[this._mimeType] as
       | any
-      | IPlotlySpec;
+      | { data: Plotly.Data; layout: Plotly.Layout; frames?: Frame[] }
+      | { data: Plotly.Data; layout: Plotly.Layout; frames?: Plotly.Frame[] };
 
-    return Plotly.react(this.node, data, layout, config).then(plot => {
+    return Plotly.react(this.node, data, layout, config).then((plot: any) => {
       this.showGraph();
       this.hideImage();
       this.update();
@@ -136,31 +142,31 @@ export class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
       }
       if (this.node.offsetWidth > 0 && this.node.offsetHeight > 0) {
         Plotly.toImage(plot, {
-          format: 'png',
+          format: "png",
           width: this.node.offsetWidth,
-          height: this.node.offsetHeight
+          height: this.node.offsetHeight,
         }).then((url: string) => {
-          const imageData = url.split(',')[1];
-          if (model.data['image/png'] !== imageData) {
+          const imageData = url.split(",")[1];
+          if (model.data["image/png"] !== imageData) {
             model.setData({
               data: {
                 ...model.data,
-                'image/png': imageData
-              }
+                "image/png": imageData,
+              },
             });
           }
         });
       }
 
       // Handle webgl context lost events
-      (<Plotly.PlotlyHTMLElement>(this.node)).on('plotly_webglcontextlost', () => {
-            const png_data = <string>model.data['image/png'];
-            if(png_data !== undefined && png_data !== null) {
-              // We have PNG data, use it
-              this.updateImage(png_data);
-              return Promise.resolve();
-            }
-          });
+      (<PlotlyHTMLElement>this.node).on("plotly_webglcontextlost", () => {
+        const png_data = <string>model.data["image/png"];
+        if (png_data !== undefined && png_data !== null) {
+          // We have PNG data, use it
+          this.updateImage(png_data);
+          return Promise.resolve();
+        }
+      });
     });
   }
 
@@ -183,15 +189,19 @@ export class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
    */
   protected onUpdateRequest(msg: Message): void {
     if (this.isVisible && this.hasGraphElement()) {
-      Plotly.redraw(this.node).then(() => {
-        Plotly.Plots.resize(this.node);
-      });
+      import(/* webpackChunkName: 'plotly'*/ "plotly.js/dist/plotly").then(
+        (Plotly) => {
+          Plotly.redraw(this.node).then(() => {
+            Plotly.Plots.resize(this.node);
+          });
+        }
+      );
     }
   }
 
   private _mimeType: string;
   private _img_el: HTMLImageElement;
-  private _model: IRenderMime.IMimeModel
+  private _model: IRenderMime.IMimeModel;
 }
 
 /**
@@ -200,30 +210,30 @@ export class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
 export const rendererFactory: IRenderMime.IRendererFactory = {
   safe: true,
   mimeTypes: [MIME_TYPE],
-  createRenderer: options => new RenderedPlotly(options)
+  createRenderer: (options) => new RenderedPlotly(options),
 };
 
 const extensions: IRenderMime.IExtension | IRenderMime.IExtension[] = [
   {
-    id: '@jupyterlab/plotly-extension:factory',
+    id: "@jupyterlab/plotly-extension:factory",
     rendererFactory,
     rank: 0,
-    dataType: 'json',
+    dataType: "json",
     fileTypes: [
       {
-        name: 'plotly',
+        name: "plotly",
         mimeTypes: [MIME_TYPE],
-        extensions: ['.plotly', '.plotly.json'],
-        iconClass: CSS_ICON_CLASS
-      }
+        extensions: [".plotly", ".plotly.json"],
+        iconClass: CSS_ICON_CLASS,
+      },
     ],
     documentWidgetFactoryOptions: {
-      name: 'Plotly',
-      primaryFileType: 'plotly',
-      fileTypes: ['plotly', 'json'],
-      defaultFor: ['plotly']
-    }
-  }
+      name: "Plotly",
+      primaryFileType: "plotly",
+      fileTypes: ["plotly", "json"],
+      defaultFor: ["plotly"],
+    },
+  },
 ];
 
 export default extensions;

packages/javascript/jupyterlab-plotly/src/lib.d.ts

@@ -1,10 +1,10 @@
-declare module 'plotly.js/dist/plotly.min' {
-  export * from 'plotly.js';
+declare module "plotly.js/dist/plotly" {
+  export * from "plotly.js";
   export type Frame = { [key: string]: any };
   export function addFrames(root: Plotly.Root, frames: Frame[]): Promise<void>;
   export function animate(root: Plotly.Root): void;
 
   export interface PlotlyHTMLElement extends HTMLElement {
-    on(event: 'plotly_webglcontextlost', callback: () => void): void;
+    on(event: "plotly_webglcontextlost", callback: () => void): void;
   }
 }

packages/javascript/jupyterlab-plotly/tsconfig.json

@@ -8,7 +8,7 @@
     "noUnusedLocals": true,
     "esModuleInterop": true,
     "preserveWatchOutput": true,
-    "module": "commonjs",
+    "module": "esnext",
     "moduleResolution": "node",
     "target": "es2015",
     "lib": ["dom", "es2015"],

packages/javascript/plotlywidget/package.json

@@ -23,7 +23,7 @@
   ],
   "scripts": {
     "build": "webpack",
-    "clean": "rimraf dist/ && rimraf  ../../python/plotly/plotlywidget/static'",
+    "clean": "rimraf dist/ && rimraf  ../../python/plotly/plotlywidget/static",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {