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

Skip to content

Commit 79b8066

Browse files
nicolaskruchtennicolaskruchten
committed
wip
1 parent 3662e90 commit 79b8066

File tree

3 files changed

+1621
-1597
lines changed

3 files changed

+1621
-1597
lines changed

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

Lines changed: 71 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
11
// Copyright (c) Jupyter Development Team.
22
// Distributed under the terms of the Modified BSD License.
33

4-
import { Widget } from '@lumino/widgets';
4+
import { Widget } from "@lumino/widgets";
55

6-
import { Message } from '@lumino/messaging';
6+
import { Message } from "@lumino/messaging";
77

8-
import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
8+
import { IRenderMime } from "@jupyterlab/rendermime-interfaces";
99

10-
import '../style/index.css';
10+
import "../style/index.css";
1111

1212
/**
1313
* The CSS class to add to the Plotly Widget.
1414
*/
15-
const CSS_CLASS = 'jp-RenderedPlotly';
15+
const CSS_CLASS = "jp-RenderedPlotly";
1616

1717
/**
1818
* The CSS class for a Plotly icon.
1919
*/
20-
const CSS_ICON_CLASS = 'jp-MaterialIcon jp-PlotlyIcon';
20+
const CSS_ICON_CLASS = "jp-MaterialIcon jp-PlotlyIcon";
2121

2222
/**
2323
* The MIME type for Plotly.
2424
* The version of this follows the major version of Plotly.
2525
*/
26-
export const MIME_TYPE = 'application/vnd.plotly.v1+json';
26+
export const MIME_TYPE = "application/vnd.plotly.v1+json";
2727

2828
interface PlotlyHTMLElement extends HTMLElement {
29-
on(event: 'plotly_webglcontextlost', callback: () => void): void;
29+
on(event: "plotly_webglcontextlost", callback: () => void): void;
3030
}
3131

3232
type Frame = { [key: string]: any };
@@ -41,24 +41,24 @@ export class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
4141
this._mimeType = options.mimeType;
4242

4343
// Create image element
44-
this._img_el = <HTMLImageElement>(document.createElement("img"));
45-
this._img_el.className = 'plot-img';
44+
this._img_el = <HTMLImageElement>document.createElement("img");
45+
this._img_el.className = "plot-img";
4646
this.node.appendChild(this._img_el);
4747

4848
// Install image hover callback
49-
import(/* webpackChunkName: 'plotly'*/ 'plotly.js/dist/plotly').then(Plotly => {
50-
51-
this._img_el.addEventListener('mouseenter', event => {
52-
this.createGraph(this._model, Plotly);
53-
})
54-
})
49+
import(/* webpackChunkName: 'plotly'*/ "plotly.js/dist/plotly").then(
50+
(Plotly) => {
51+
this._img_el.addEventListener("mouseenter", (event) => {
52+
this.createGraph(this._model, Plotly);
53+
});
54+
}
55+
);
5556
}
5657

5758
/**
5859
* Render Plotly into this widget's node.
5960
*/
6061
renderModel(model: IRenderMime.IMimeModel): Promise<void> {
61-
6262
if (this.hasGraphElement()) {
6363
// We already have a graph, don't overwrite it
6464
return Promise.resolve();
@@ -68,23 +68,25 @@ export class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
6868
this._model = model;
6969

7070
// Check for PNG data in mime bundle
71-
const png_data = <string>model.data['image/png'];
72-
if(png_data !== undefined && png_data !== null) {
71+
const png_data = <string>model.data["image/png"];
72+
if (png_data !== undefined && png_data !== null) {
7373
// We have PNG data, use it
7474
this.updateImage(png_data);
7575
return Promise.resolve();
7676
} else {
7777
// Create a new graph
78-
return import(/* webpackChunkName: 'plotly'*/ 'plotly.js/dist/plotly').then(Plotly => {
78+
return import(
79+
/* webpackChunkName: 'plotly'*/ "plotly.js/dist/plotly"
80+
).then((Plotly) => {
7981
this.createGraph(model, Plotly);
80-
})
82+
});
8183
}
8284
}
8385

8486
private hasGraphElement() {
8587
// Check for the presence of the .plot-container element that plotly.js
8688
// places at the top of the figure structure
87-
return this.node.querySelector('.plot-container') !== null
89+
return this.node.querySelector(".plot-container") !== null;
8890
}
8991

9092
private updateImage(png_data: string) {
@@ -95,43 +97,43 @@ export class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
9597

9698
private hideGraph() {
9799
// Hide the graph if there is one
98-
let el = <HTMLDivElement>this.node.querySelector('.plot-container');
100+
let el = <HTMLDivElement>this.node.querySelector(".plot-container");
99101
if (el !== null && el !== undefined) {
100-
el.style.display = "none"
102+
el.style.display = "none";
101103
}
102104
}
103105

104106
private showGraph() {
105107
// Show the graph if there is one
106-
let el = <HTMLDivElement>this.node.querySelector('.plot-container');
108+
let el = <HTMLDivElement>this.node.querySelector(".plot-container");
107109
if (el !== null && el !== undefined) {
108-
el.style.display = "block"
110+
el.style.display = "block";
109111
}
110112
}
111113

112114
private hideImage() {
113115
// Hide the image element
114-
let el = <HTMLImageElement>this.node.querySelector('.plot-img');
116+
let el = <HTMLImageElement>this.node.querySelector(".plot-img");
115117
if (el !== null && el !== undefined) {
116-
el.style.display = "none"
118+
el.style.display = "none";
117119
}
118120
}
119121

120122
private showImage() {
121123
// Show the image element
122-
let el = <HTMLImageElement>this.node.querySelector('.plot-img');
124+
let el = <HTMLImageElement>this.node.querySelector(".plot-img");
123125
if (el !== null && el !== undefined) {
124-
el.style.display = "block"
126+
el.style.display = "block";
125127
}
126128
}
127129

128130
private createGraph(model: IRenderMime.IMimeModel, Plotly: any) {
129131
const { data, layout, frames, config } = model.data[this._mimeType] as
130132
| any
131-
| { data: Plotly.Data; layout: Plotly.Layout; frames?: Frame[]; }
132-
| { data: Plotly.Data; layout: Plotly.Layout; frames?: Plotly.Frame[]; }
133+
| { data: Plotly.Data; layout: Plotly.Layout; frames?: Frame[] }
134+
| { data: Plotly.Data; layout: Plotly.Layout; frames?: Plotly.Frame[] };
133135

134-
return Plotly.react(this.node, data, layout, config).then(plot => {
136+
return Plotly.react(this.node, data, layout, config).then((plot: any) => {
135137
this.showGraph();
136138
this.hideImage();
137139
this.update();
@@ -140,31 +142,31 @@ export class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
140142
}
141143
if (this.node.offsetWidth > 0 && this.node.offsetHeight > 0) {
142144
Plotly.toImage(plot, {
143-
format: 'png',
145+
format: "png",
144146
width: this.node.offsetWidth,
145-
height: this.node.offsetHeight
147+
height: this.node.offsetHeight,
146148
}).then((url: string) => {
147-
const imageData = url.split(',')[1];
148-
if (model.data['image/png'] !== imageData) {
149+
const imageData = url.split(",")[1];
150+
if (model.data["image/png"] !== imageData) {
149151
model.setData({
150152
data: {
151153
...model.data,
152-
'image/png': imageData
153-
}
154+
"image/png": imageData,
155+
},
154156
});
155157
}
156158
});
157159
}
158160

159161
// Handle webgl context lost events
160-
(<PlotlyHTMLElement>(this.node)).on('plotly_webglcontextlost', () => {
161-
const png_data = <string>model.data['image/png'];
162-
if(png_data !== undefined && png_data !== null) {
163-
// We have PNG data, use it
164-
this.updateImage(png_data);
165-
return Promise.resolve();
166-
}
167-
});
162+
(<PlotlyHTMLElement>this.node).on("plotly_webglcontextlost", () => {
163+
const png_data = <string>model.data["image/png"];
164+
if (png_data !== undefined && png_data !== null) {
165+
// We have PNG data, use it
166+
this.updateImage(png_data);
167+
return Promise.resolve();
168+
}
169+
});
168170
});
169171
}
170172

@@ -187,17 +189,19 @@ export class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
187189
*/
188190
protected onUpdateRequest(msg: Message): void {
189191
if (this.isVisible && this.hasGraphElement()) {
190-
import(/* webpackChunkName: 'plotly'*/ 'plotly.js/dist/plotly').then(Plotly => {
191-
Plotly.redraw(this.node).then(() => {
192-
Plotly.Plots.resize(this.node);
193-
});
194-
})
192+
import(/* webpackChunkName: 'plotly'*/ "plotly.js/dist/plotly").then(
193+
(Plotly) => {
194+
Plotly.redraw(this.node).then(() => {
195+
Plotly.Plots.resize(this.node);
196+
});
197+
}
198+
);
195199
}
196200
}
197201

198202
private _mimeType: string;
199203
private _img_el: HTMLImageElement;
200-
private _model: IRenderMime.IMimeModel
204+
private _model: IRenderMime.IMimeModel;
201205
}
202206

203207
/**
@@ -206,30 +210,30 @@ export class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
206210
export const rendererFactory: IRenderMime.IRendererFactory = {
207211
safe: true,
208212
mimeTypes: [MIME_TYPE],
209-
createRenderer: options => new RenderedPlotly(options)
213+
createRenderer: (options) => new RenderedPlotly(options),
210214
};
211215

212216
const extensions: IRenderMime.IExtension | IRenderMime.IExtension[] = [
213217
{
214-
id: '@jupyterlab/plotly-extension:factory',
218+
id: "@jupyterlab/plotly-extension:factory",
215219
rendererFactory,
216220
rank: 0,
217-
dataType: 'json',
221+
dataType: "json",
218222
fileTypes: [
219223
{
220-
name: 'plotly',
224+
name: "plotly",
221225
mimeTypes: [MIME_TYPE],
222-
extensions: ['.plotly', '.plotly.json'],
223-
iconClass: CSS_ICON_CLASS
224-
}
226+
extensions: [".plotly", ".plotly.json"],
227+
iconClass: CSS_ICON_CLASS,
228+
},
225229
],
226230
documentWidgetFactoryOptions: {
227-
name: 'Plotly',
228-
primaryFileType: 'plotly',
229-
fileTypes: ['plotly', 'json'],
230-
defaultFor: ['plotly']
231-
}
232-
}
231+
name: "Plotly",
232+
primaryFileType: "plotly",
233+
fileTypes: ["plotly", "json"],
234+
defaultFor: ["plotly"],
235+
},
236+
},
233237
];
234238

235-
export default extensions;
239+
export default extensions;

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

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

77
export interface PlotlyHTMLElement extends HTMLElement {
8-
on(event: 'plotly_webglcontextlost', callback: () => void): void;
8+
on(event: "plotly_webglcontextlost", callback: () => void): void;
99
}
1010
}

0 commit comments

Comments
 (0)