Added lazy loading to jupyterlab-plotly and plotlywidget

Currently plotly.js is bundled with the main bundle which increases
the size of bundle drastically and jupyterlab takes a lot of time to
load. With this change, plotly.js will be loaded on demand. This uses
dynamic imports to achieve this.

Fixes plotly#1913

Author: pragyagarg642

Diff for: packages/javascript/jupyterlab-plotly/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jupyterlab-plotly",
-  "version": "4.6.0",
+  "version": "4.6.1",
   "description": "The plotly JupyterLab extension",
   "author": "The plotly.py team",
   "license": "MIT",

Diff for: packages/javascript/jupyterlab-plotly/src/javascript-renderer-extension.ts

@@ -7,8 +7,6 @@ import { Message } from '@lumino/messaging';
 
 import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
 
-import Plotly from 'plotly.js/dist/plotly.min';
-
 import '../style/index.css';
 
 /**
@@ -27,12 +25,12 @@ const CSS_ICON_CLASS = 'jp-MaterialIcon jp-PlotlyIcon';
  */
 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.
@@ -48,8 +46,11 @@ export class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
     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);
+      })
     })
   }
 
@@ -74,7 +75,9 @@ export class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
       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);
+      })
     }
   }
 
@@ -122,10 +125,11 @@ export class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
     }
   }
 
-  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 => {
       this.showGraph();
@@ -153,7 +157,7 @@ export class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
       }
 
       // Handle webgl context lost events
-      (<Plotly.PlotlyHTMLElement>(this.node)).on('plotly_webglcontextlost', () => {
+      (<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
@@ -183,9 +187,11 @@ 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);
+        });
+      })
     }
   }
 
@@ -226,4 +232,4 @@ const extensions: IRenderMime.IExtension | IRenderMime.IExtension[] = [
   }
 ];
 
-export default extensions;
+export default extensions;

Diff for: 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"],

Diff for: packages/javascript/plotlywidget/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plotlywidget",
-  "version": "4.6.0",
+  "version": "4.6.1",
   "description": "The plotly JupyterLab extension",
   "author": "The plotly.py team",
   "license": "MIT",
@@ -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": {