Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 00f8891

Browse files
jonmmeasejonmmease
committed
Merge jupyterlab mime renderer extension into plotlywidget
1 parent 6afca65 commit 00f8891

File tree

8 files changed

+539
-48
lines changed

8 files changed

+539
-48
lines changed

‎packages/javascript/plotlywidget/package-lock.json

Lines changed: 307 additions & 43 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/javascript/plotlywidget/package.json

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,24 +18,33 @@
1818
],
1919
"files": [
2020
"src/**/*.js",
21-
"dist/*.js"
21+
"dist/*.js",
22+
"style/*.*"
2223
],
2324
"scripts": {
24-
"clean": "rimraf dist/ && rimraf ../plotlywidget/static",
25+
"build": "npm run build:src",
26+
"build:src": "rimraf dist && tsc",
27+
"clean": "rimraf dist/ && rimraf ../../python/plotly/plotlywidget/static'",
2528
"prepublish": "webpack",
2629
"test": "echo \"Error: no test specified\" && exit 1"
2730
},
2831
"devDependencies": {
2932
"webpack": "^3.10.0",
3033
"rimraf": "^2.6.1",
31-
"ify-loader": "^1.1.0"
34+
"ify-loader": "^1.1.0",
35+
"typescript": "~3.1.1"
3236
},
3337
"dependencies": {
3438
"plotly.js": "1.48.1",
39+
"@types/plotly.js": "^1.44.9",
3540
"@jupyter-widgets/base": "^1.0.0",
41+
"@jupyterlab/rendermime-interfaces": "^1.2.1",
42+
"@phosphor/messaging": "^1.2.2",
43+
"@phosphor/widgets": "^1.6.0",
3644
"lodash": "^4.17.4"
3745
},
3846
"jupyterlab": {
39-
"extension": "src/jupyterlab-plugin"
47+
"extension": "src/jupyterlab-plugin.js",
48+
"mimeExtension": "dist/javascript-renderer-extension.js"
4049
}
4150
}

‎packages/javascript/plotlywidget/src/javascript-renderer-extension.ts

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
// Copyright (c) Jupyter Development Team.
2+
// Distributed under the terms of the Modified BSD License.
3+
4+
import { Widget } from '@phosphor/widgets';
5+
6+
import { Message } from '@phosphor/messaging';
7+
8+
import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
9+
10+
import Plotly from 'plotly.js/dist/plotly';
11+
12+
import '../style/index.css';
13+
14+
/**
15+
* The CSS class to add to the Plotly Widget.
16+
*/
17+
const CSS_CLASS = 'jp-RenderedPlotly';
18+
19+
/**
20+
* The CSS class for a Plotly icon.
21+
*/
22+
const CSS_ICON_CLASS = 'jp-MaterialIcon jp-PlotlyIcon';
23+
24+
/**
25+
* The MIME type for Plotly.
26+
* The version of this follows the major version of Plotly.
27+
*/
28+
export const MIME_TYPE = 'application/vnd.plotly.v1+json';
29+
30+
interface IPlotlySpec {
31+
data: Plotly.Data;
32+
layout: Plotly.Layout;
33+
frames?: Plotly.Frame[];
34+
}
35+
36+
export class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
37+
/**
38+
* Create a new widget for rendering Plotly.
39+
*/
40+
constructor(options: IRenderMime.IRendererOptions) {
41+
super();
42+
this.addClass(CSS_CLASS);
43+
this._mimeType = options.mimeType;
44+
}
45+
46+
/**
47+
* Render Plotly into this widget's node.
48+
*/
49+
renderModel(model: IRenderMime.IMimeModel): Promise<void> {
50+
const { data, layout, frames, config } = model.data[this._mimeType] as
51+
| any
52+
| IPlotlySpec;
53+
// const metadata = model.metadata[this._mimeType] as any || {};
54+
return Plotly.react(this.node, data, layout, config).then(plot => {
55+
this.update();
56+
if (frames) {
57+
Plotly.addFrames(this.node, frames).then(() => {
58+
Plotly.animate(this.node);
59+
});
60+
}
61+
if (this.node.offsetWidth > 0 && this.node.offsetHeight > 0) {
62+
Plotly.toImage(plot, {
63+
format: 'png',
64+
width: this.node.offsetWidth,
65+
height: this.node.offsetHeight
66+
}).then((url: string) => {
67+
const imageData = url.split(',')[1];
68+
if (model.data['image/png'] !== imageData) {
69+
model.setData({
70+
data: {
71+
...model.data,
72+
'image/png': imageData
73+
}
74+
});
75+
}
76+
});
77+
}
78+
});
79+
}
80+
81+
/**
82+
* A message handler invoked on an `'after-show'` message.
83+
*/
84+
protected onAfterShow(msg: Message): void {
85+
this.update();
86+
}
87+
88+
/**
89+
* A message handler invoked on a `'resize'` message.
90+
*/
91+
protected onResize(msg: Widget.ResizeMessage): void {
92+
this.update();
93+
}
94+
95+
/**
96+
* A message handler invoked on an `'update-request'` message.
97+
*/
98+
protected onUpdateRequest(msg: Message): void {
99+
if (this.isVisible) {
100+
Plotly.redraw(this.node).then(() => {
101+
Plotly.Plots.resize(this.node);
102+
});
103+
}
104+
}
105+
106+
private _mimeType: string;
107+
}
108+
109+
/**
110+
* A mime renderer factory for Plotly data.
111+
*/
112+
export const rendererFactory: IRenderMime.IRendererFactory = {
113+
safe: true,
114+
mimeTypes: [MIME_TYPE],
115+
createRenderer: options => new RenderedPlotly(options)
116+
};
117+
118+
const extensions: IRenderMime.IExtension | IRenderMime.IExtension[] = [
119+
{
120+
id: '@jupyterlab/plotly-extension:factory',
121+
rendererFactory,
122+
rank: 0,
123+
dataType: 'json',
124+
fileTypes: [
125+
{
126+
name: 'plotly',
127+
mimeTypes: [MIME_TYPE],
128+
extensions: ['.plotly', '.plotly.json'],
129+
iconClass: CSS_ICON_CLASS
130+
}
131+
],
132+
documentWidgetFactoryOptions: {
133+
name: 'Plotly',
134+
primaryFileType: 'plotly',
135+
fileTypes: ['plotly', 'json'],
136+
defaultFor: ['plotly']
137+
}
138+
}
139+
];
140+
141+
export default extensions;

‎packages/javascript/plotlywidget/src/lib.d.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
declare module 'plotly.js/dist/plotly' {
2+
export * from 'plotly.js';
3+
export type Frame = { [key: string]: any };
4+
export function addFrames(root: Plotly.Root, frames: Frame[]): Promise<void>;
5+
export function animate(root: Plotly.Root): void;
6+
}

‎packages/javascript/plotlywidget/style/index.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
Copyright (c) Jupyter Development Team.
3+
Distributed under the terms of the Modified BSD License.
4+
*/
5+
6+
/* Add CSS variables to :root */
7+
:root {
8+
--jp-icon-plotly: url('./plotly.svg');
9+
}
10+
11+
/* Base styles */
12+
.jp-RenderedPlotly {
13+
width: 100%;
14+
height: 100%;
15+
padding: 0;
16+
overflow: hidden;
17+
}
18+
19+
/* Document styles */
20+
.jp-MimeDocument .jp-RenderedPlotly {
21+
overflow: hidden;
22+
}
23+
24+
/* Output styles */
25+
.jp-OutputArea .jp-RenderedPlotly {
26+
min-height: 360px;
27+
}
28+
29+
/* Document icon */
30+
.jp-PlotlyIcon {
31+
background-image: var(--jp-icon-plotly);
32+
}

‎packages/javascript/plotlywidget/style/plotly.svg

Lines changed: 21 additions & 0 deletions
Loading

‎packages/javascript/plotlywidget/tsconfig.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"compilerOptions": {
3+
"outDir": "dist",
4+
"rootDir": "src",
5+
"declaration": true,
6+
"noImplicitAny": true,
7+
"noEmitOnError": true,
8+
"noUnusedLocals": true,
9+
"esModuleInterop": true,
10+
"preserveWatchOutput": true,
11+
"module": "commonjs",
12+
"moduleResolution": "node",
13+
"target": "es2015",
14+
"lib": ["dom", "es2015"],
15+
"types": []
16+
},
17+
"include": ["src/*"]
18+
}

‎packages/python/plotly/plotlywidget/static/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12440,7 +12440,7 @@ module.exports = function identity(d) { return d; };
1244012440
/* 18 */
1244112441
/***/ (function(module, exports) {
1244212442

12443-
module.exports = {"name":"plotlywidget","version":"0.11.0","description":"The plotly.py ipywidgets library","author":"The plotly.py team","license":"MIT","main":"src/index.js","repository":{"type":"git","url":"https://github.com/plotly/plotly.py"},"keywords":["jupyter","widgets","ipython","ipywidgets","plotly"],"files":["src/**/*.js","dist/*.js"],"scripts":{"clean":"rimraf dist/ && rimraf ../plotlywidget/static","prepublish":"webpack","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"webpack":"^3.10.0","rimraf":"^2.6.1","ify-loader":"^1.1.0"},"dependencies":{"plotly.js":"1.48.1","@jupyter-widgets/base":"^1.0.0","lodash":"^4.17.4"},"jupyterlab":{"extension":"src/jupyterlab-plugin"}}
12443+
module.exports = {"name":"plotlywidget","version":"0.11.0","description":"The plotly.py ipywidgets library","author":"The plotly.py team","license":"MIT","main":"src/index.js","repository":{"type":"git","url":"https://github.com/plotly/plotly.py"},"keywords":["jupyter","widgets","ipython","ipywidgets","plotly"],"files":["src/**/*.js","dist/*.js","style/*.*"],"scripts":{"build":"npm run build:src","build:src":"rimraf dist && tsc","clean":"rimraf dist/ && rimraf ../../python/plotly/plotlywidget/static'","prepublish":"webpack","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"webpack":"^3.10.0","rimraf":"^2.6.1","ify-loader":"^1.1.0","typescript":"~3.1.1"},"dependencies":{"plotly.js":"1.48.1","@types/plotly.js":"^1.44.9","@jupyter-widgets/base":"^1.0.0","@jupyterlab/rendermime-interfaces":"^1.2.1","@phosphor/messaging":"^1.2.2","@phosphor/widgets":"^1.6.0","lodash":"^4.17.4"},"jupyterlab":{"extension":"src/jupyterlab-plugin.js","mimeExtension":"dist/javascript-renderer-extension.js"}}
1244412444

1244512445
/***/ }),
1244612446
/* 19 */

0 commit comments

Comments
 (0)